@extends('admin.layouts.adminApp')
@section('style')
<!-- lightGallery CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/css/lightgallery-bundle.min.css" />
<style>
    .select2-container .select2-selection--single {
    height: 38px !important;
    padding: 6px 12px;
}
</style>

<style>
    .lightgallery img {
        border-radius: 4px;
        transition: transform 0.3s ease;
    }
    .lightgallery img:hover {
        transform: scale(1.05);
    }
</style>

@endsection

@section('content')
<!--start page wrapper -->
<div class="page-wrapper">
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Survey Photo Upload/Update</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item active" aria-current="page">Survey Photo Upload/Update</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!--end breadcrumb-->

        <!-- SUCCESS & ERROR MESSAGES -->
        <div class="row mb-3">
            <div class="col-12">
                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif
                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        </div>

        <!-- FORM SECTION -->
        <div class="row mb-4">
            <div class="col-lg-12 mx-auto">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-primary text-white">
                        <h6 class="mb-0">Survey Photo Upload/Update</h6>
                    </div>
                    <div class="card-body">
                           <form action="{{ route('propertyPhoto.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-3">
                                <label for="propertyId" class="form-label">Survey Property</label>
                                <select class="form-select select2" id="propertyId" name="propertyId">
                                    <option value="">Select Survey Property</option>
                                    @foreach($wards as $groupName => $wardGroup)
                                        <optgroup label="{{ $wardGroup->name }}">
                                            @foreach($wardGroup->proparty as $ward)
                                                <option value="{{ $ward->id }}">{{ $ward->nagarpalikaId }} (Parcel No. - {{ $ward->parcelNo }})</option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                                @error('propertyId') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>

                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label for="aadhaarPhoto" class="form-label">Aadhaar Photo</label>
                                    <input type="file" class="form-control" id="aadhaarPhoto" name="aadhaarPhoto">
                                    @error('aadhaarPhoto') <small class="text-danger">{{ $message }}</small> @enderror
                                </div>
                                <div class="col-md-3">
                                    <label for="propertyFirstImage" class="form-label">Property First Image</label>
                                    <input type="file" class="form-control" id="propertyFirstImage" name="propertyFirstImage">
                                    @error('propertyFirstImage') <small class="text-danger">{{ $message }}</small> @enderror
                                </div>
                                <div class="col-md-3">
                                    <label for="propertySecondImage" class="form-label">Property Second Image</label>
                                    <input type="file" class="form-control" id="propertySecondImage" name="propertySecondImage">
                                    @error('propertySecondImage') <small class="text-danger">{{ $message }}</small> @enderror
                                </div>
                                <div class="col-md-3">
                                    <label for="supportingDocuments" class="form-label">Supporting Documents</label>
                                    <input type="file" class="form-control" id="supportingDocuments" name="supportingDocuments[]" multiple>
                                    @error('supportingDocuments') <small class="text-danger">{{ $message }}</small> @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="latitude" class="form-label">Latitude</label>
                                    <input type="text" class="form-control" id="latitude" name="latitude">
                                    @error('latitude') <small class="text-danger">{{ $message }}</small> @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="longitude" class="form-label">Longitude</label>
                                    <input type="text" class="form-control" id="longitude" name="longitude">
                                    @error('longitude') <small class="text-danger">{{ $message }}</small> @enderror
                                </div>
                            </div>

                            <div class="mt-4 text-end">
                                <button type="submit" class="btn btn-success">Save</button>
                                <a href="{{ route('admin.wards') }}" class="btn btn-secondary">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- TABLE SECTION -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-primary text-white">
                        <h6 class="mb-0">Property Surveyors List</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped align-middle" id="propertySurveyTable">
                                <thead class="table-light">
                                    <tr>
                                        <th>SN</th>
                                        <th>Actions</th>
                                        <th>Survey Id</th>
                                        <th>Parcel No</th>
                                        <th>Date of Survey</th>
                                        <th>Owner Name</th>
                                        <th>Owner Father Name</th>
                                        <th>Mobile No</th>
                                        <th>Ward Name</th>
                                        <th>Aadhaar No</th>
                                        <th>Aadhaar Photo</th>
                                        <th>Property First Image</th>
                                        <th>Property Second Image</th>
                                        <th>Supporting Documents</th>
                                        <th>Latitude</th>
                                        <th>Longitude</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Table Data to be inserted via backend or DataTable -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- Image Preview Modal -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Image Preview</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body text-center">
        <img id="previewImage" src="" class="img-fluid" alt="Preview">
      </div>
    </div>
  </div>
</div>

@endsection


@section('script')
<!-- DataTables -->
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<!-- lightGallery JS -->
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/lightgallery.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/zoom/lg-zoom.umd.min.js"></script>



<script>

    function initLightGallery() {
    document.querySelectorAll('.lightgallery').forEach(function (el) {
        lightGallery(el, {
            selector: 'a',
            zoom: true,
            actualSize: true
        });
    });
}
   $(document).ready(function () {
    $('#propertySurveyTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("propertyPhoto.data") }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'actions', name: 'actions', orderable: false, searchable: false },
            { data: 'nagarpalikaId', name: 'nagarpalikaId' },
            { data: 'parcelNo', name: 'parcelNo' },
            { data: 'created_at', name: 'created_at' },
            { data: 'owner_name', name: 'owner_name', orderable: false, searchable: false },
            { data: 'father_name', name: 'father_name', orderable: false, searchable: false },
            { data: 'mobile', name: 'mobile', orderable: false, searchable: false },
            { data: 'ward_name', name: 'ward_name', orderable: false, searchable: false },
            { data: 'ownerAadhaarNumber', name: 'ownerAadhaarNumber' },
            { data: 'aadhaar_photo', name: 'aadhaar_photo', orderable: false, searchable: false },
            { data: 'property_first_image', name: 'property_first_image', orderable: false, searchable: false },
            { data: 'property_second_image', name: 'property_second_image', orderable: false, searchable: false },
            { data: 'supportingDocuments', name: 'supportingDocuments', orderable: false, searchable: false },
            { data: 'latitude', name: 'latitude' },
            { data: 'longitude', name: 'longitude' }
        ],
        drawCallback: function () {
            initLightGallery(); // ✅ Reinitialize gallery on redraw
        }
    });
});



$(document).ready(function () {
    $(document).on("submit", "#SameForm", function (e) {
        e.preventDefault();

        let formData = new FormData(this);
        // formData.set('status', $('#status').val() == "1" ? 1 : 0); // 👈 Force boolean
           
        $.ajax({
            url: "{{ route('flortype.store') }}",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (res) {
            
    if (res.status == "add") {
        $("#SameForm")[0].reset();
        $('#basic-1').DataTable().ajax.reload();
    }

    if (res.status == 'update') {
        $('#basic-1').DataTable().ajax.reload(null, false);  
        $("#SameForm")[0].reset();
        $("#SameForm input[name='id']").val('');
    }

    toastr.success(res.msg);
},
            error: function (xhr) {
                let error = xhr.responseJSON.errors;
                $.each(error, function (key, value) {
                    $(`.${key}`).html(value);
                    toastr.error(value);
                });
            }
        });
    });
});

// Delegated click handler for dynamically loaded images
$(document).on('click', '.preview-image', function () {
    const imageUrl = $(this).data('full');
    $('#previewImage').attr('src', imageUrl);
    $('#imagePreviewModal').modal('show');
});














</script>





@endsection