@extends('admin.layout.app')

@section('content')
    <div class="app-content">
        <div class="container-fluid mt-4">
            <div class="row justify-content-center">
                <div class="col-lg-12 col-md-10">
                    {{-- Card --}}
                    <div class="card shadow-lg border-0 rounded-4">
                        <div class="card-header bg-gradient bg-primary text-white rounded-top-4 d-flex align-items-center">
                            <i class="bi bi-info-circle-fill me-2" style="font-size: 1.3rem;"></i>
                            <h4 class="mb-0 fw-semibold">Create Compulsary Item</h4>
                        </div>

                        <div class="card-body p-4">
                            <form method="POST" action="{{ route('admin.compulsary.store') }}" enctype="multipart/form-data" autocomplete="off">
                                @csrf

                               {{-- School --}}
                            <div class="mb-4">
                                <label class="form-label fw-semibold">
                                    <i class="bi bi-building me-1 text-primary"></i>
                                    School <span class="text-danger">*</span>
                                </label>

                                <select name="school_id" id="school_id"
                                    class="form-select form-select-lg rounded-3 shadow-sm" required>

                                    <option value="" disabled selected>Select school</option>

                                    @foreach($schools as $school)
                                        <option value="{{ $school->id }}"
                                            {{ old('school_id') == $school->id ? 'selected' : '' }}>
                                            {{ $school->name }}
                                        </option>
                                    @endforeach
                                </select>

                                @error('school_id')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            {{-- Standard --}}
                            <div class="mb-4">
                                <label class="form-label fw-semibold">
                                    <i class="bi bi-list-ul me-1 text-primary"></i>
                                    Standard <span class="text-danger">*</span>
                                </label>

                                <select name="standard_id" id="standard_id"
                                    class="form-select form-select-lg rounded-3 shadow-sm" required>

                                    <option value="" disabled selected>Select standard</option>

                                </select>

                                @error('standard_id')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                                {{-- Image --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold" for="image">
                                        <i class="bi bi-image me-1 text-primary"></i> Image
                                    </label>
                                    <input type="file" name="image" id="image" class="form-control form-control-lg rounded-3 shadow-sm"
                                           accept="image/*">
                                    @if ($errors->has('image'))
                                        <small class="text-danger mt-1 d-block">{{ $errors->first('image') }}</small>
                                    @endif
                                    <div class="form-text">Single image, recommended size: 500x500px. Max 2MB. Only jpg, png, jpeg allowed.</div>
                                    <div id="imagePreview" class="mt-2"></div>
                                </div>

                                {{-- Name --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold" for="name">
                                        <i class="bi bi-fonts me-1 text-primary"></i> Name
                                    </label>
                                    <input type="text" name="name" id="name" class="form-control form-control-lg rounded-3 shadow-sm"
                                           value="{{ old('name') }}" required maxlength="255">
                                    @if ($errors->has('name'))
                                        <small class="text-danger mt-1 d-block">{{ $errors->first('name') }}</small>
                                    @endif
                                </div>



                                {{-- MRP --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold" for="mrp">
                                        <i class="bi bi-cash me-1 text-primary"></i> MRP
                                    </label>
                                    <input type="number" step="0.01" name="mrp" id="mrp" class="form-control form-control-lg rounded-3 shadow-sm"
                                           value="{{ old('mrp') }}" required min="0">
                                    @if ($errors->has('mrp'))
                                        <small class="text-danger mt-1 d-block">{{ $errors->first('mrp') }}</small>
                                    @endif
                                </div>

                                    {{-- Price --}}
                                    <div class="mb-4">
                                        <label class="form-label fw-semibold" for="price">
                                            <i class="bi bi-tag me-1 text-primary"></i> Selling Price
                                        </label>
                                        <input type="number" step="0.01" name="price" id="price" class="form-control form-control-lg rounded-3 shadow-sm"
                                               value="{{ old('price') }}" required min="0">
                                        @if ($errors->has('price'))
                                            <small class="text-danger mt-1 d-block">{{ $errors->first('price') }}</small>
                                        @endif
                                    </div>

                                {{-- Quantity --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold" for="quantity">
                                        <i class="bi bi-hash me-1 text-primary"></i> Quantity
                                    </label>
                                    <input type="number" name="quantity" id="quantity" class="form-control form-control-lg rounded-3 shadow-sm"
                                           value="{{ old('quantity', 0) }}" required min="0">
                                    @if ($errors->has('quantity'))
                                        <small class="text-danger mt-1 d-block">{{ $errors->first('quantity') }}</small>
                                    @endif
                                </div>

                                {{-- Gender (checkboxes: applicable to Male and/or Female) --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold d-block">
                                        <i class="bi bi-gender-ambiguous me-1 text-primary"></i> Applicable to <span class="text-danger">*</span>
                                    </label>
                                    <div class="d-flex flex-wrap gap-4">
                                        <div class="form-check">
                                            <input type="checkbox" name="gender_male" id="gender_male" value="1"
                                                class="form-check-input rounded"
                                                {{ old('gender_male') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="gender_male">Male</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" name="gender_female" id="gender_female" value="1"
                                                class="form-check-input rounded"
                                                {{ old('gender_female') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="gender_female">Female</label>
                                        </div>
                                    </div>
                                    <small class="text-muted d-block mt-1">Check one or both — if both are checked, this item applies to male and female.</small>
                                    @if ($errors->has('gender'))
                                        <small class="text-danger mt-1 d-block">{{ $errors->first('gender') }}</small>
                                    @endif
                                </div>

                                {{-- Submit --}}
                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary btn-lg px-4 rounded-3 shadow">
                                        <i class="bi bi-plus-circle me-2"></i> Create Compulsary Item
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    {{-- /Card --}}
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- AJAX Script --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {

        const schoolSelect = document.getElementById('school_id');
        const standardSelect = document.getElementById('standard_id');

        function loadStandards(schoolId, selectedStandard = null) {

            standardSelect.innerHTML =
                '<option value="" disabled selected>Select standard</option>';

            if (!schoolId) return;

            fetch(`/admin/standards/by-school/${schoolId}`)
                .then(res => res.json())
                .then(data => {

                    if (Array.isArray(data) && data.length > 0) {

                        data.forEach(std => {

                            let option = document.createElement('option');
                            option.value = std.id;
                            option.text = std.name;

                            if (selectedStandard && selectedStandard == std.id) {
                                option.selected = true;
                            }

                            standardSelect.appendChild(option);

                        });

                    }
                });
        }

        schoolSelect.addEventListener('change', function () {
            loadStandards(this.value);
        });

        // Reload old data after validation error
        @if(old('school_id'))
            loadStandards("{{ old('school_id') }}", "{{ old('standard_id') }}");
        @endif

    });
    </script>