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

@extends('layouts.app')

@section('content')
    <div class="container mt-5 property-listing property_create property_edit">
        <h2 class="sec_head">Create New Property</h2>
        <a href="{{ route('properties.active') }}" class="btn btn-secondary mb-3">Back to Properties List</a>

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

        <form method="POST" action="{{ route('properties.store') }}" 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') }}" 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') }}" 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') }}</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') }}</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 }}">
                                    {{ $location->name_en }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </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>

            {{-- Preview of Uploaded Images --}}
            <div class="form-group">
                <label>Image Preview:</label>
                <div id="deleteImagesForm">
                    @csrf
                    <div class="row image-list property_list" id="image-preview-container">
                      
                       
                        
                    </div>
                    
                </div>
                
            </div>

            <div class="mb-3 post_but">
                <button type="submit" class="btn btn-primary w-50">Create Property</button>
            </div>
        </form>
    </div>
@endsection
@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        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
        $('#delete-selected-images').on('click', function() {
            const selectedIndexes = [];
            $('.image-checkbox:checked').each(function() {
                selectedIndexes.push(parseInt($(this).attr('data-index')));
            });

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

            // Remove images from preview and from the selectedFiles array
            selectedIndexes.sort((a, b) => b - a).forEach(index => {
                selectedFiles.splice(index, 1); // Remove from array
                $(`.image-preview-item[data-index="${index}"]`).remove(); // Remove preview
            });

            // Reset the input file with remaining files in selectedFiles
            const dataTransfer = new DataTransfer();
            selectedFiles.forEach(file => dataTransfer.items.add(file));
            document.getElementById('images').files = dataTransfer.files;
        });
    });
</script>
@endsection