@extends('admin.layouts.app')
@section('content')
    <div class="container-xl">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Darta Chalani Category</h3>
                <div class="card-actions">
                    <a href="{{ url()->previous() }}" class="btn btn-primary btn-3">


                        Back
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('panel.darta-chalani.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label>Year <span class="text-danger">*</span></label>
                            <select name="year_id" class="form-control @error('year_id') is-invalid @enderror">
                                <option value="">Select Year</option>
                                @foreach ($years as $year)
                                    <option value="{{ $year->id }}" {{ old('year_id') == $year->id ? 'selected' : '' }} class="nepali-input">
                                        {{ $year->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('year_id')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Month <span class="text-danger">*</span></label>
                            <select name="month" class="form-control select2 @error('month') is-invalid @enderror">
                                <option value="">--Select--</option>
                                <option value="Shrawan" {{ old('month') == 'Shrawan' ? 'selected' : '' }}>Shrawan</option>
                                <option value="Bhadra" {{ old('month') == 'Bhadra' ? 'selected' : '' }}>Bhadra</option>
                                <option value="Aswin" {{ old('month') == 'Aswin' ? 'selected' : '' }}>Aswin</option>
                                <option value="Kartik" {{ old('month') == 'Kartik' ? 'selected' : '' }}>Kartik</option>
                                <option value="Mangsir" {{ old('month') == 'Mangsir' ? 'selected' : '' }}>Mangsir</option>
                                <option value="Poush" {{ old('month') == 'Poush' ? 'selected' : '' }}>Poush</option>
                                <option value="Magh" {{ old('month') == 'Magh' ? 'selected' : '' }}>Magh</option>
                                <option value="Falguan" {{ old('month') == 'Falguan' ? 'selected' : '' }}>Falguan</option>
                                <option value="Chaitra" {{ old('month') == 'Chaitra' ? 'selected' : '' }}>Chaitra</option>
                                <option value="Baisakh" {{ old('month') == 'Baisakh' ? 'selected' : '' }}>Baisakh</option>
                                <option value="Jeth" {{ old('month') == 'Jeth' ? 'selected' : '' }}>Jeth</option>
                                <option value="Asar" {{ old('month') == 'Asar' ? 'selected' : '' }}>Asar</option>
                            </select>
                            @error('month')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                        <!-- Municipality -->
                        <div class="form-group col-md-6 col-6 mb-3">
                            <label>नगरपालिका</label>
                            <select name="municipality_id" class="form-control">
                                <option value="">--Select--</option>
                                @foreach ($municipalities as $municipality)
                                    <option value="{{ $municipality->id }}">{{ $municipality->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Ward No -->
                        <div class="form-group col-md-6 col-6 mb-3">
                            <label>वडा नं</label>
                            <select name="ward_id" class="form-control select2">
                                <option value="">--Select--</option>
                                @foreach ($wards as $ward)
                                    <option value="{{ $ward->id }}">{{ $ward->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Chalani/Darta No</label>
                            <input type="text" name="chalani_no"
                                class="form-control @error('chalani_no') is-invalid @enderror"
                                value="{{ old('chalani_no') }}">
                            @error('chalani_no')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Date <span class="text-danger">*</span></label>
                            <input type="text" name="date" id="nepali-datepicker"
                                class="form-control @error('date') is-invalid @enderror" value="{{ old('date') }}">
                            @error('date')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Category <span class="text-danger">*</span></label>
                            <select name="category_id" class="form-control select2 @error('category_id') is-invalid @enderror"
                                required>
                                <option value="">Select Category</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Subject</label>
                            <input type="text" name="subject" class="form-control @error('subject') is-invalid @enderror"
                                value="{{ old('subject') }}">
                            @error('subject')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Office Name</label>
                            <input type="text" name="office_name"
                                class="form-control @error('office_name') is-invalid @enderror"
                                value="{{ old('office_name') }}">
                            @error('office_name')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Applicant Name</label>
                            <input type="text" name="applicant_name"
                                class="form-control @error('applicant_name') is-invalid @enderror"
                                value="{{ old('applicant_name') }}">
                            @error('applicant_name')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Plot No</label>
                            <input type="text" name="plot_no" class="form-control @error('plot_no') is-invalid @enderror"
                                value="{{ old('plot_no') }}">
                            @error('plot_no')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Area</label>
                            <input type="text" name="area" class="form-control @error('area') is-invalid @enderror"
                                value="{{ old('area') }}">
                            @error('area')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Type <span class="text-danger">*</span></label>
                            <select name="type" class="form-control @error('type') is-invalid @enderror">
                                <option value="">--Select--</option>
                                <option value="Chalani" {{ old('type') == 'Chalani' ? 'selected' : '' }}>Chalani</option>
                                <option value="Darta" {{ old('type') == 'Darta' ? 'selected' : '' }}>Darta</option>
                            </select>
                            @error('type')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-md-12 mb-3">
                            <label>Multiple Images <span class="text-danger">*</span></label>
                            <input type="file" name="images[]"
                                class="form-control @error('images') is-invalid @enderror" multiple accept="image/*"
                                required>
                            <small class="text-muted">You can select multiple images at once. Max size: 2MB per image.
                                Allowed formats: jpeg, png, jpg, gif, webp</small>
                            @error('images')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                            @error('images.*')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div id="captions-container" class="col-md-12 mb-3">
                            <!-- Caption inputs will be added dynamically -->
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">Create Darta Chalani</button>
                </form>

            </div>
        </div>

        @push('scripts')
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const imageInput = document.querySelector('input[name="images[]"]');
                    const captionsContainer = document.getElementById('captions-container');

                    if (imageInput) {
                        imageInput.addEventListener('change', function(e) {
                            // Clear previous captions
                            captionsContainer.innerHTML = '';

                            if (this.files.length > 0) {
                                // Add caption header
                                const headerLabel = document.createElement('label');
                                headerLabel.innerHTML = '<strong>Image Captions (Optional)</strong>';
                                headerLabel.style.display = 'block';
                                headerLabel.style.marginBottom = '10px';
                                captionsContainer.appendChild(headerLabel);

                                // Add caption inputs for each selected image
                                for (let i = 0; i < this.files.length; i++) {
                                    const div = document.createElement('div');
                                    div.className = 'mb-2';
                                    div.innerHTML = `
                                <label>Caption for ${this.files[i].name}</label>
                                <input type="text" name="captions[${i}]" class="form-control"
                                       placeholder="Enter caption..." value="{{ old('captions.${i}') }}">
                            `;
                                    captionsContainer.appendChild(div);
                                }
                            }
                        });

                        // Trigger change event if there are old values
                        if (imageInput.files.length > 0) {
                            const event = new Event('change');
                            imageInput.dispatchEvent(event);
                        }
                    }
                });
            </script>
        @endpush
    @endsection