@extends('layouts.platform')

@section('title', 'Create Plan')
@section('header', 'Create New Plan')

@section('content')
    <div class="max-w-2xl">
        <form method="POST" action="{{ route('platform.plans.store') }}">
            @csrf

            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-6">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">Plan Name *</label>
                    <input type="text" id="name" name="name" value="{{ old('name') }}" required
                           class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
                           placeholder="e.g. Premium Plan">
                    @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                    <textarea id="description" name="description" rows="2"
                              class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
                              placeholder="Brief description of this plan">{{ old('description') }}</textarea>
                </div>

                <div>
                    <label for="billing_type" class="block text-sm font-medium text-gray-700">Billing Model *</label>
                    <select id="billing_type" name="billing_type" required
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        <option value="trial" {{ old('billing_type') === 'trial' ? 'selected' : '' }}>Free Trial</option>
                        <option value="per_student" {{ old('billing_type') === 'per_student' ? 'selected' : '' }}>Pay Per Student</option>
                        <option value="monthly" {{ old('billing_type', 'monthly') === 'monthly' ? 'selected' : '' }}>Monthly Flat Fee</option>
                    </select>
                    <p class="mt-1 text-xs text-gray-400">Trial plans are free for the configured trial period. Per-student plans bill per active student each month.</p>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div id="price-field">
                        <label for="price" class="block text-sm font-medium text-gray-700">Monthly Price (&#8358;) *</label>
                        <input type="number" id="price" name="price" value="{{ old('price', 0) }}" required min="0" step="100"
                               class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                    <div>
                        <label for="billing_period" class="block text-sm font-medium text-gray-700">Billing Period *</label>
                        <select id="billing_period" name="billing_period" required
                                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            <option value="monthly" {{ old('billing_period') === 'monthly' ? 'selected' : '' }}>Monthly</option>
                            <option value="yearly" {{ old('billing_period') === 'yearly' ? 'selected' : '' }}>Yearly</option>
                        </select>
                    </div>
                    <div id="per-student-field" class="hidden">
                        <label for="per_student_price" class="block text-sm font-medium text-gray-700">Per-Student Price (&#8358;)</label>
                        <input type="number" id="per_student_price" name="per_student_price" value="{{ old('per_student_price') }}" min="0.01" step="1"
                               class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                    <div id="trial-days-field" class="hidden">
                        <label for="trial_days" class="block text-sm font-medium text-gray-700">Trial Length (days)</label>
                        <input type="number" id="trial_days" name="trial_days" value="{{ old('trial_days') }}" min="1" max="365"
                               class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        <p class="mt-1 text-xs text-gray-400">Leave empty to use the platform-wide setting.</p>
                    </div>
                </div>

                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <label for="max_students" class="block text-sm font-medium text-gray-700">Max Students *</label>
                        <input type="number" id="max_students" name="max_students" value="{{ old('max_students', 50) }}" required min="1"
                               class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                    <div>
                        <label for="max_teachers" class="block text-sm font-medium text-gray-700">Max Teachers *</label>
                        <input type="number" id="max_teachers" name="max_teachers" value="{{ old('max_teachers', 10) }}" required min="1"
                               class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                    <div>
                        <label for="max_classes" class="block text-sm font-medium text-gray-700">Max Classes *</label>
                        <input type="number" id="max_classes" name="max_classes" value="{{ old('max_classes', 10) }}" required min="1"
                               class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-3">Features *</label>
                    <div class="grid grid-cols-2 gap-3">
                        @php
                            $allFeatures = [
                                'basic' => 'Basic Access',
                                'academics' => 'Academics',
                                'attendance' => 'Attendance',
                                'fees' => 'Fees & Payments',
                                'reports' => 'Reports',
                                'cms' => 'Content Management',
                                'communications' => 'Communications',
                                'admissions' => 'Online Admissions',
                                'website' => 'Public Website',
                                'custom_domain' => 'Custom Domain',
                            ];
                            $selected = old('features', []);
                        @endphp
                        @foreach($allFeatures as $key => $label)
                            <label class="flex items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 hover:bg-gray-50 cursor-pointer transition-colors">
                                <input type="checkbox" name="features[]" value="{{ $key }}"
                                       {{ in_array($key, $selected) ? 'checked' : '' }}
                                       class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <span class="text-sm text-gray-700">{{ $label }}</span>
                            </label>
                        @endforeach
                    </div>
                    @error('features') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="flex items-center gap-2">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                           class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    <label class="text-sm text-gray-700">Plan is active and available for schools</label>
                </div>
            </div>

            <div class="mt-6 flex gap-3">
                <button type="submit" class="rounded-lg bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700 transition-colors">
                    Create Plan
                </button>
                <a href="{{ route('platform.plans.index') }}" class="rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                    Cancel
                </a>
            </div>
        </form>
    </div>

    <script>
        (function () {
            const select = document.getElementById('billing_type');
            const price = document.getElementById('price-field');
            const perStudent = document.getElementById('per-student-field');
            const trialDays = document.getElementById('trial-days-field');

            function sync() {
                const type = select.value;
                price.classList.toggle('hidden', type !== 'monthly');
                perStudent.classList.toggle('hidden', type !== 'per_student');
                trialDays.classList.toggle('hidden', type !== 'trial');
            }

            select.addEventListener('change', sync);
            sync();
        })();
    </script>
@endsection