@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.update', $dartaChalani->id) }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    @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', $dartaChalani->year_id) == $year->id ? 'selected' : '' }}>
                                        {{ $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 @error('month') is-invalid @enderror">
                                <option value="">--Select--</option>
                                @php
                                    $nepaliMonths = [
                                        'Shrawan',
                                        'Bhadra',
                                        'Aswin',
                                        'Kartik',
                                        'Mangsir',
                                        'Poush',
                                        'Magh',
                                        'Falguan',
                                        'Chaitra',
                                        'Baisakh',
                                        'Jeth',
                                        'Asar',
                                    ];
                                @endphp
                                @foreach ($nepaliMonths as $month)
                                    <option value="{{ $month }}"
                                        {{ old('month', $dartaChalani->month) == $month ? 'selected' : '' }}>
                                        {{ $month }}
                                    </option>
                                @endforeach
                            </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 }}" {{ $dartaChalani->municipality_id == $municipality->id ? 'selected' : '' }} >{{ $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">
                                <option value="">--Select--</option>
                                @foreach ($wards as $ward)
                                    <option value="{{ $ward->id }}" {{ $dartaChalani->ward_id == $ward->id ? 'selected' : '' }} >{{ $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', $dartaChalani->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', $dartaChalani->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 @error('category_id') is-invalid @enderror"
                                required>
                                <option value="">Select Category</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ old('category_id', $dartaChalani->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', $dartaChalani->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', $dartaChalani->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', $dartaChalani->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', $dartaChalani->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', $dartaChalani->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', $dartaChalani->type) == 'Chalani' ? 'selected' : '' }}>Chalani
                                </option>
                                <option value="Darta"
                                    {{ old('type', $dartaChalani->type) == 'Darta' ? 'selected' : '' }}>Darta</option>
                            </select>
                            @error('type')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label>Status</label>
                            <select name="status" class="form-control @error('status') is-invalid @enderror">
                                <option value="active"
                                    {{ old('status', $dartaChalani->status ?? 'active') == 'active' ? 'selected' : '' }}>
                                    Active</option>
                                <option value="inactive"
                                    {{ old('status', $dartaChalani->status ?? 'active') == 'inactive' ? 'selected' : '' }}>
                                    Inactive</option>
                            </select>
                            @error('status')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    {{-- EXISTING IMAGES SECTION WITH DELETE OPTION --}}
                    @if ($dartaChalani->images && $dartaChalani->images->count())
                        <div class="row mt-3">
                            <div class="col-12">
                                <h4>Existing Images</h4>
                                <p class="text-muted small">
                                    <span class="text-danger">Note:</span> Check "Delete" to remove images.
                                    Drag & drop to reorder.
                                </p>

                                <div id="existing-images-sortable" class="row sortable-container">
                                    @foreach ($dartaChalani->images->sortBy('order_position') as $image)
                                        <div class="col-md-4 mb-3 sortable-item" data-image-id="{{ $image->id }}">
                                            <div class="card h-100">
                                                <div class="card-img-top text-center p-2"
                                                    style="height: 200px; overflow: hidden; background-color: #f5f5f5; position: relative;">
                                                    {{-- Delete Checkbox --}}
                                                    <div class="form-check position-absolute top-0 end-0 m-2"
                                                        style="z-index: 10; background: rgba(255,255,255,0.8); padding: 5px; border-radius: 5px;">
                                                        <input type="checkbox" name="delete_images[]"
                                                            value="{{ $image->id }}"
                                                            id="delete_image_{{ $image->id }}"
                                                            class="form-check-input delete-image-checkbox">
                                                        <label class="form-check-label text-danger fw-bold small"
                                                            for="delete_image_{{ $image->id }}">
                                                            Delete
                                                        </label>
                                                    </div>

                                                    <img src="{{ asset($image->image_path) }}" alt="Image"
                                                        class="card-img-top gallery-img"
                                                        style="height: 200px; object-fit: cover; cursor: pointer;"
                                                        data-bs-toggle="modal" data-bs-target="#imageModal"
                                                        data-image-url="{{ asset($image->image_path) }}"
                                                        data-image-caption="{{ $image->caption ?? 'No caption' }}">
                                                </div>
                                                <div class="card-body">
                                                    <div class="form-group mb-2">
                                                        <label>Caption</label>
                                                        <input type="text"
                                                            name="existing_captions[{{ $image->id }}]"
                                                            class="form-control"
                                                            value="{{ old('existing_captions.' . $image->id, $image->caption) }}"
                                                            placeholder="Enter caption...">
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Order Position</label>
                                                        <input type="number" name="existing_orders[{{ $image->id }}]"
                                                            class="form-control order-input"
                                                            value="{{ old('existing_orders.' . $image->id, $image->order_position ?? 0) }}"
                                                            min="0" step="1">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                            </div>
                        </div>
                    @endif

                    {{-- NEW IMAGES UPLOAD SECTION --}}
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label>Add New Images (Optional)</label>
                            <input type="file" name="new_images[]"
                                class="form-control @error('new_images.*') is-invalid @enderror" multiple
                                accept="image/jpeg,image/png,image/jpg,image/gif,image/webp">
                            <small class="text-muted">You can select multiple images at once. Max size: 2MB per
                                image.</small>
                            @error('new_images.*')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                        <div id="new-captions-container" class="col-md-12 mb-3"></div>
                    </div>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

    <script>
        $(document).ready(function() {
            // Dynamic Captions for New Images
            const newImagesInput = $('input[name="new_images[]"]');
            const newCaptionsContainer = $('#new-captions-container');

            newImagesInput.on('change', function(e) {
                newCaptionsContainer.empty();

                if (this.files.length > 0) {
                    newCaptionsContainer.append(`
                        <label class="mt-2"><strong>Captions for New Images (Optional)</strong></label>
                        <div class="alert alert-info small py-1">Enter optional captions for each new image below.</div>
                    `);

                    for (let i = 0; i < this.files.length; i++) {
                        const file = this.files[i];
                        const captionHtml = `
                            <div class="mb-2 new-caption-item">
                                <label class="form-label">Caption for: ${escapeHtml(file.name)}</label>
                                <input type="text"
                                       name="new_captions[${i}]"
                                       class="form-control"
                                       placeholder="Enter caption...">
                            </div>
                        `;
                        newCaptionsContainer.append(captionHtml);
                    }
                }
            });

            function escapeHtml(str) {
                if (!str) return '';
                return str.replace(/[&<>]/g, function(m) {
                    if (m === '&') return '&amp;';
                    if (m === '<') return '&lt;';
                    if (m === '>') return '&gt;';
                    return m;
                });
            }

            // Sortable Interface for Existing Images
            let sortableContainer = document.getElementById('existing-images-sortable');
            if (sortableContainer) {
                $("#existing-images-sortable").sortable({
                    update: function(event, ui) {
                        $(this).find('.sortable-item').each(function(index, element) {
                            const orderInput = $(element).find('.order-input');
                            if (orderInput.length) {
                                orderInput.val(index + 1);
                            }
                        });
                    },
                    cursor: "move",
                    placeholder: "sortable-placeholder col-md-4 mb-3",
                    opacity: 0.6,
                    tolerance: "pointer"
                }).disableSelection();
            }

            // Select All Images functionality
            $('#select-all-images').on('click', function() {
                $('.delete-image-checkbox').prop('checked', true);
            });

            // Deselect All Images functionality
            $('#deselect-all-images').on('click', function() {
                $('.delete-image-checkbox').prop('checked', false);
            });

            // Confirm before submitting if any images are selected for deletion
            $('form').on('submit', function(e) {
                var selectedImages = $('.delete-image-checkbox:checked').length;
                if (selectedImages > 0) {
                    if (!confirm('Are you sure you want to delete ' + selectedImages +
                            ' image(s)? This action cannot be undone.')) {
                        e.preventDefault();
                        return false;
                    }
                }
                return true;
            });
        });
    </script>

    <style>
        .sortable-placeholder {
            background-color: #f8f9fc;
            border: 2px dashed #ccc;
            border-radius: 8px;
            min-height: 280px;
        }

        .sortable-item {
            cursor: grab;
        }

        .sortable-item:active {
            cursor: grabbing;
        }

        .card-img-top img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .sortable-container .card {
            transition: box-shadow 0.2s ease;
            position: relative;
        }

        .sortable-container .card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            cursor: grab;
        }
    </style>
@endsection