@php
    $edit = !empty($galleryPhoto->id);
@endphp
@extends('layouts.admin.master')

@section('title')
    {{ $edit ? 'Edit' : 'Create' }} Gallery
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between">
                            <h4 class="">{{ $edit ? $editTitle : $title }} </h4>
                            <a href="{{ route('admin.photos.index') }}" class="create-button">
                                <i class="fas fa-backward"></i> Back
                            </a>
                        </div>
                        <form
                            action="{{ $edit ? route('admin.photos.update', $galleryPhoto->id) : route('admin.photos.store') }}"
                            method="POST" class="edit-add-form" id="edit-add-form" enctype="multipart/form-data">
                            @csrf
                            @if ($edit)
                                @method('PUT')
                            @endif

                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="title">Title <span style="color: red"> * </span></label>
                                    <input type="text" class="form-control" name="title" id="title"
                                           value="{{ $edit ? $galleryPhoto->title : old('title') }}"
                                           placeholder="Enter photo title" required>
                                </div>
                                <div class="form-group col-md-3 col-sm-12">
                                    <label for="type">Type <span class="text-danger">*</span></label>
                                    <select class="form-control" name="type" id="type" required>
                                        <option value="" disabled selected>Select Type</option>
                                        <option value="featured_content" {{ ($edit && $galleryPhoto->type == 'featured_content') ? 'selected' : '' }}>Featured Photo</option>
                                        <option value="sponsored_content" {{ ($edit && $galleryPhoto->type == 'sponsored_content') ? 'selected' : '' }}>Sponsored Content</option>
                                    </select>
                                </div>

                                <div class="form-group col-md-3 col-sm-12">
                                    <label for="image">Upload Image <span class="text-danger">*</span></label>
                                    <input type="file" class="form-control" id="image" name="image"
                                           accept="image/*" {{ $edit ? '' : 'required' }}>
                                    <div id="filePreview" class="mt-2">
                                        @if($edit && $galleryPhoto->file_path)
                                            <div class="preview-container" data-existing="true">
                                                <img src="{{ Storage::url($galleryPhoto->file_path) }}" alt="{{ $galleryPhoto->title }}"
                                                     style="max-width: 200px; max-height: 200px;">
                                            </div>
                                        @endif
                                    </div>
                                </div>


                                <div class="form-group col-md-3 col-sm-12">
                                    <label for="order">Order <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" name="order" id="order" min="0"
                                           value="{{ $edit ? $galleryPhoto->order : old('order', 0) }}"
                                           required>
                                </div>
                                
                                <div class="form-group col-md-3 col-sm-12">
                                    <label for="is_active">Status <span class="text-danger">*</span></label>
                                    <select class="form-control" name="is_active" id="is_active" required>
                                        <option value="1" {{ ($edit && $galleryPhoto->is_active) ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ ($edit && !$galleryPhoto->is_active) ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>
                                

                                <div class="form-group col-md-12">
                                    <label for="description">Description <span class="text-danger">*</span></label>
                                    <textarea class="form-control" name="description" id="description"
                                              placeholder="Enter photo description"
                                              rows="4"
                                              required>{{ $edit ? $galleryPhoto->description : old('description') }}</textarea>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary" id="submit">
                                <i class="fa fa-save"></i> {{ $edit ? 'Update' : 'Create' }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <x-generic-validation-error-toastr/>
    <script>
        $(document).ready(function() {
            const fileInput = document.getElementById('image');
            const filePreview = document.getElementById('filePreview');
            let selectedFile = null;

            fileInput.addEventListener('change', (event) => {
                selectedFile = event.target.files[0];
                filePreview.innerHTML = ''; // Clear existing preview (including old image)

                if (selectedFile) {
                    const previewContainer = document.createElement('div');
                    previewContainer.className = 'preview-container';
                    previewContainer.style.position = 'relative';
                    previewContainer.style.display = 'inline-block';
                    previewContainer.style.margin = '10px';

                    const preview = document.createElement('img');
                    preview.style.maxWidth = '200px';
                    preview.style.maxHeight = '200px';
                    preview.src = URL.createObjectURL(selectedFile);

                    const cancelButton = document.createElement('button');
                    cancelButton.textContent = '✖';
                    cancelButton.style.position = 'absolute';
                    cancelButton.style.top = '5px';
                    cancelButton.style.right = '5px';
                    cancelButton.style.backgroundColor = 'rgba(255, 255, 255, 0.7)';
                    cancelButton.style.border = 'none';
                    cancelButton.style.borderRadius = '50%';
                    cancelButton.style.cursor = 'pointer';

                    cancelButton.addEventListener('click', (e) => {
                        e.preventDefault();
                        selectedFile = null;
                        fileInput.value = '';
                        filePreview.innerHTML = ''; // Clear preview on cancel
                        @if($edit && $galleryPhoto->file_path)
                        // Restore original image if canceled during edit
                        filePreview.innerHTML = `
                                <div class="preview-container" data-existing="true">
                                    <img src="{{ Storage::url($galleryPhoto->file_path) }}" alt="{{ $galleryPhoto->title }}"
                                         style="max-width: 200px; max-height: 200px;">
                                </div>
                            `;
                        @endif
                    });

                    previewContainer.appendChild(preview);
                    previewContainer.appendChild(cancelButton);
                    filePreview.appendChild(previewContainer);
                }
            });

            const editAddForm = $('#edit-add-form');
            editAddForm.validate({
                rules: {
                    title: {
                        required: true
                    },
                    type: {
                        required: true
                    },
                    description: {
                        required: true
                    },
                    order: {
                        required: true,
                        number: true,
                        min: 0
                    },
                    is_active: {
                        required: true
                    },
                    image: {
                        required: {{ $edit ? 'false' : 'true' }}
                    }
                },
                messages: {
                    title: {
                        required: "Please enter photo title"
                    },
                    type: {
                        required: "Please select a type"
                    },
                    description: {
                        required: "Please enter description"
                    },
                    order: {
                        required: "Please enter display order",
                        number: "Order must be a number",
                        min: "Order cannot be negative"
                    },
                    is_active: {
                        required: "Please select status"
                    },
                    image: {
                        required: "Please upload an image"
                    }
                },
                submitHandler: function(htmlForm) {
                    $('.overlay').show();
                    const formData = new FormData(htmlForm);

                    const url = $(htmlForm).attr("action");

                    $.ajax({
                        url: url,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        success: function(response) {
                            $('.overlay').hide();
                            if (response.alertType && response.message) {
                                toastr[response.alertType](response.message);
                            }
                            if (response.redirectTo) {
                                setTimeout(() => {
                                    window.location.href = response.redirectTo;
                                }, 1000);
                            }
                        },
                        error: function(xhr) {
                            $('.overlay').hide();
                            if (xhr.responseJSON && xhr.responseJSON.errors) {
                                Object.values(xhr.responseJSON.errors).forEach(errors => {
                                    errors.forEach(error => {
                                        toastr.error(error);
                                    });
                                });
                            } else {
                                toastr.error('An error occurred while processing your request.');
                            }
                        }
                    });

                    return false;
                }
            });
        });
    </script>
@endpush