{{-- resources/views/admin/properties/edit.blade.php --}}

@extends('layouts.app')

@section('content')
    <div class="container mt-5 property-listing property_edit">
        @if($property->is_archived)
        <h2 class="sec_head">Edit Archived Property</h2>
        <a href="{{ route('properties.archived') }}" class="btn btn-secondary mb-3">Back to Properties List</a>
        @else
        <h2 class="sec_head">Edit Active Property</h2>
        <a href="{{ route('properties.active') }}" class="btn btn-secondary mb-3">Back to Properties List</a>
        @endif
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <form method="POST" action="{{ route('properties.update', $property->id) }}" enctype="multipart/form-data">
            @csrf
            <div class="row">
                {{-- English Title --}}
                <div class="form-group col-md-6">
                    <label for="title_en">Title (EN)</label>
                    <input type="text" class="form-control" id="title_en" name="title_en" value="{{ old('title_en', $property->title_en) }}" required>
                </div>

                {{-- Japanese Title --}}
                <div class="form-group col-md-6">
                    <label for="title_jp">Title (JP)</label>
                    <input type="text" class="form-control" id="title_jp" name="title_jp" value="{{ old('title_jp', $property->title_jp) }}" required>
                </div>

                {{-- English Description --}}
                <div class="form-group col-md-6">
                    <label for="description_en">Description (EN)</label>
                    <textarea class="form-control" id="description_en" name="description_en" required>{{ old('description_en', $property->description_en) }}</textarea>
                </div>

                {{-- Japanese Description --}}
                <div class="form-group col-md-6">
                    <label for="description_jp">Description (JP)</label>
                    <textarea class="form-control" id="description_jp" name="description_jp" required>{{ old('description_jp', $property->description_jp) }}</textarea>
                </div>
            </div>
            
            <div class="multiple_fields d-flex flex-row justify-content-between form-line">
					<div class="mb-3 w-25">
                        {{-- Location --}}
                        <div class="form-group">
                            <select class="form-control form-select form-select-sm" id="location_id" name="location_id" required>
                                <option value="">Select Location</option>
                                @foreach($locations as $location)
                                    <option value="{{ $location->id }}" {{ $property->location_id == $location->id ? 'selected' : '' }}>
                                        {{ $location->name_en }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
					</div>
                    
					<div class="mb-3 arch_date">
                    @if($property->is_archived)
						<p>@lang('strings.removed') : <span>{{ date('d F Y', strtotime($property->archived_date)); }}</span></p>
                    @endif
					</div>
					<div class="mb-3">
						
                        {{-- Upload Images --}}
                        <div class="form-group image_upload">
                            <input type="file" class="form-control" name="images[]"  id="images" multiple>
                            <button class="btn upload_but" type="button">Upload Photo</button>
                        </div>

						<button type="button" class="btn btn-danger delete_but" id="delete-selected-images">Delete Photos</button>
					</div>
				</div>

         
           <!-- {{-- Existing Images --}}
            <div class="form-group">
                <div id="deleteImagesForm">
                    @csrf
                    <div class="row image-list property_list" id="image-preview-container">
                      
                    </div>
                    <div class="row image-list property_list">
                        @foreach($property->images as $image)
                        <div class="col-md-4 property image-item" id="image-item-{{ $image->id }}">
						    <div class="card form-check">
                                <label>
                                    <input type="checkbox" name="image_ids[]" class="form-check-input btn-check" value="{{ $image->id }}">
                                    <img  class="card-img-top" src="{{ asset('storage/properties/' . $image->image) }}" alt="Property Image" width="100">
                                </label>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    
                </div>
                
            </div> -->

            {{-- Existing Images Section --}}
            <div class="form-group">
                <label for="existing-images">Reorder and Select Cover Image</label>
                <div id="deleteImagesForm">
                    @csrf
                    <div class="row image-list property_list" id="image-preview-container">
                      
                    </div>
                    <ul id="sortable-images" class="list-unstyled row image-list property_list">
                        @foreach($property->images as $image)
                            <li class="col-md-4 property image-item mb-3" id="image-item-{{ $image->id }}" data-id="{{ $image->id }}">
                                <div class="card">
                                <input type="checkbox" name="image_ids[]" class="form-check-input btn-check" value="{{ $image->id }}">
                                    <img src="{{ asset('storage/properties/' . $image->image) }}" class="card-img-top" alt="Property Image" width="100">
                                    <div class="card-body">
                                        <label>
                                            <input type="radio" name="cover_image_id" value="{{ $image->id }}" {{ $image->is_cover_image ? 'checked' : '' }}>
                                            Set as Cover Image
                                        </label>
                                        <input type="hidden" name="image_order[]" value="{{ $image->id }}">
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>

            @if($property->is_archived)
            <div class="mb-5 post_but"><button type="submit" class="btn btn-primary w-50">Update and Repost</button></div>
            @else
            <div class="mb-3 post_but"><button type="submit" class="btn btn-primary w-25">Update</button></div>
            @endif
            
        </form>
    </div>
@endsection
@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
    $(document).ready(function() {

        // Make images sortable using jQuery UI
        $("#sortable-images").sortable({
            update: function(event, ui) {
                // Update order of image ids after sorting
                $('#sortable-images .image-item').each(function(index, element) {
                    $(element).find('input[name="image_order[]"]').val($(element).data('id'));
                });
            }
        });

        // Set the initial order based on the backend-provided order
        $('#sortable-images').sortable("refresh");

        const selectedFiles = [];

        // Function to preview images with index numbers and checkboxes
        $('#images').on('change', function(event) {
            const files = event.target.files;
            const previewContainer = $('#image-preview-container');
            previewContainer.empty();  // Clear previous previews

            Array.from(files).forEach((file, index) => {
                selectedFiles.push(file); // Add file to array for future reference

                const reader = new FileReader();
                reader.onload = function(e) {
                    // Create a div to hold each image preview with index number and checkbox
                    const imgContainer = $('<div>').addClass('col-md-4 property image-item image-preview-item').attr('data-index', index);
                    const cardContainer = $('<div>').addClass('card form-check');
                    const lab = $('<label>');
                    const checkbox = $('<input>')
                        .attr('type', 'checkbox')
                        .addClass('image-checkbox form-check-input btn-check')
                        .attr('data-index', index);
                    const imgElement = $('<img>')
                        .attr('src', e.target.result)
                        .addClass('card-img-top');
                    const indexText = $('<p>').text(`Image #${index + 1}`);
                    
                    lab.append(checkbox); // Add checkbox
                    //lab.append(indexText); // Display the index number
                    lab.append(imgElement); // Display the image preview
                    cardContainer.append(lab);
                    imgContainer.append(cardContainer);
                    previewContainer.append(imgContainer);
                };
                reader.readAsDataURL(file);
            });
        });


        $('#delete-selected-images').on('click', function() {
            const selectedImages = $('input[name="image_ids[]"]:checked');
            const imageIds = selectedImages.map(function() {
                return this.value;
            }).get();

            if (imageIds.length === 0) {
                alert('Please select at least one image to delete.');
                return;
            }

            if (confirm('Are you sure you want to delete the selected images?')) {
                $.ajax({
                    url: "{{ route('properties.images.destroy.selected') }}",
                    method: 'POST',
                    data: {
                        _token: $('input[name="_token"]').val(),
                        image_ids: imageIds,
                    },
                    success: function(response) {
                        selectedImages.each(function() {
                            $('#image-item-' + this.value).remove();
                        });
                        alert('Selected images deleted successfully.');
                    },
                    error: function(xhr) {
                        alert('Error deleting images: ' + xhr.responseText);
                    }
                });
            }
        });
    });
</script>
@endsection