@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">Edit Compulsary Item</h4>
                        </div>

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

                                {{-- 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>Select school</option>
                                        @foreach($schools as $school)
                                            <option value="{{ $school->id }}"
                                                {{ old('school_id', $item->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>Select standard</option>
                                    </select>
                                    @error('standard_id')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>

                                {{-- Current Image --}}
                                @if($item->image)
                                <div class="mb-4">
                                    <label class="form-label fw-semibold">Current Image</label>
                                    <div class="border p-2 rounded">
                                        <img src="{{ asset('storage/compulsary/' . $item->image) }}"
                                            alt="{{ $item->name }}"
                                            class="img-thumbnail"
                                            style="max-width: 140px; max-height: 110px;">
                                    </div>
                                </div>
                                @endif

                                {{-- 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', $item->name) }}" required maxlength="255">
                                    @if ($errors->has('name'))
                                        <small class="text-danger mt-1 d-block">{{ $errors->first('name') }}</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> 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', $item->price) }}" required min="0">
                                    @if ($errors->has('price'))
                                        <small class="text-danger mt-1 d-block">{{ $errors->first('price') }}</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', $item->mrp) }}" required min="0">
                                    @if ($errors->has('mrp'))
                                        <small class="text-danger mt-1 d-block">{{ $errors->first('mrp') }}</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', $item->quantity) }}" 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>
                                    @php
                                        if (old('gender_male') || old('gender_female')) {
                                            $checkMale = (bool) old('gender_male');
                                            $checkFemale = (bool) old('gender_female');
                                        } else {
                                            $checkMale = $item->gender == 1 || $item->gender == 3;
                                            $checkFemale = $item->gender == 2 || $item->gender == 3;
                                        }
                                    @endphp
                                    <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" {{ $checkMale ? '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" {{ $checkFemale ? '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-pencil-square me-2"></i> Update Compulsary Item
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    {{-- /Card --}}
                </div>
            </div>
        </div>
    </div>
@endsection

<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>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 data for edit (from item or old input)
        loadStandards(
            "{{ old('school_id', $item->school_id) }}",
            "{{ old('standard_id', $item->standard_id) }}"
        );

        // Image preview for single file
        document.getElementById('image').addEventListener('change', function(event) {
            let file = event.target.files[0];
            let previewDiv = document.getElementById('imagePreview');
            previewDiv.innerHTML = '';
            if (file && file.type.startsWith('image/')) {
                const img = document.createElement('img');
                img.src = URL.createObjectURL(file);
                img.className = "img-thumbnail mt-2 me-2";
                img.style.maxWidth = "140px";
                img.style.maxHeight = "110px";
                img.onload = function() {
                    URL.revokeObjectURL(this.src);
                }
                previewDiv.appendChild(img);
            }
        });

    });
</script>