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

@section('title')
    {{ $edit ? ($editTitle ?? 'Edit Gallery') : ($title ?? 'Add 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>{{ $edit ? ($editTitle ?? 'Edit Gallery') : ($title ?? 'Add Gallery') }}</h4>
                            <a href="{{ route('sponsors.gallery.index') }}" class="create-button">
                                <i class="fas fa-backward"></i> Back
                            </a>
                        </div>

                        @if($edit && $gallery->is_approved)
                            <div class="alert alert-warning">
                                <i class="fas fa-lock"></i> This content has been approved and cannot be edited.
                            </div>
                        @else
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> Your content will be submitted for admin approval before being published.
                            </div>
                        @endif

                        <form
                            action="{{ $edit ? route('sponsors.gallery.update', $gallery->id) : route('sponsors.gallery.store') }}"
                            method="POST" class="edit-add-form" id="edit-add-form" enctype="multipart/form-data">
                            @csrf
                            @if ($edit)
                                @method('PUT')
                            @endif

                            <div class="row">
                                {{-- Resource Type Selection --}}
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="resource_type">Resource Type <span class="text-danger">*</span></label>
                                        <select class="form-control" name="resource_type" id="resource_type" required {{ $edit ? 'disabled' : '' }}>
                                            <option value="">Select Resource Type</option>
                                            <option value="image" {{ ($edit && $gallery->resource_type == 'image') || (!$edit && ($resourceType ?? '') == 'image') ? 'selected' : '' }}>Image</option>
                                            <option value="video" {{ ($edit && $gallery->resource_type == 'video') || (!$edit && ($resourceType ?? '') == 'video') ? 'selected' : '' }}>Video</option>
                                        </select>
                                        @if($edit)
                                            <input type="hidden" name="resource_type" value="{{ $gallery->resource_type }}">
                                        @endif
                                    </div>
                                </div>

                                {{-- Display Order --}}
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="order">Display Order <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control" name="order" id="order" min="0"
                                            value="{{ $edit ? $gallery->order : old('order', 0) }}" required>
                                        <small class="text-muted">Lower numbers appear first</small>
                                    </div>
                                </div>

                                {{-- Active Status --}}
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <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 && $gallery->is_active) || old('is_active', 1) == '1' ? 'selected' : '' }}>Active</option>
                                            <option value="0" {{ ($edit && !$gallery->is_active) || old('is_active') == '0' ? 'selected' : '' }}>Inactive</option>
                                        </select>
                                        <small class="text-muted">Inactive items won't be shown even if approved</small>
                                    </div>
                                </div>

                                {{-- Title --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="title">Title <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="title" id="title"
                                            value="{{ $edit ? $gallery->title : old('title') }}"
                                            placeholder="Enter title" required>
                                    </div>
                                </div>

                                {{-- File Upload (For Images Only) --}}
                                <div class="col-md-6 col-sm-12" id="file_field" style="display: none;">
                                    <div class="form-group">
                                        <label for="file">
                                            Upload Image <span class="text-danger" id="file_required">*</span>
                                        </label>
                                        <input type="file" class="form-control" id="file" name="file" accept="image/*">
                                        <small class="text-muted">Accepted: JPG, PNG, GIF, WebP (Max: 5MB)</small>
                                        <div id="filePreview" class="mt-2">
                                            @if($edit && $gallery->file_path && $gallery->resource_type == 'image')
                                                <div class="preview-container" data-existing="true">
                                                    <img src="{{ asset('storage/' . $gallery->file_path) }}" alt="{{ $gallery->title }}"
                                                        style="max-width: 300px; max-height: 300px; border-radius: 8px;">
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                {{-- YouTube Link (For Videos Only) --}}
                                <div class="col-md-6 col-sm-12" id="youtube_field" style="display: none;">
                                    <div class="form-group">
                                        <label for="youtube_link">YouTube Link <span class="text-danger">*</span></label>
                                        <input type="url" class="form-control" name="youtube_link" id="youtube_link"
                                            value="{{ $edit && $gallery->resource_type == 'video' ? $gallery->youtube_link : old('youtube_link') }}"
                                            placeholder="https://www.youtube.com/watch?v=..." required>
                                        <small class="text-muted">Enter the full YouTube video URL</small>
                                    </div>
                                </div>

                                {{-- Redirect URL --}}
                                <div class="col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="redirect_url">Advertisement Redirect URL</label>
                                        <input type="url" class="form-control" name="redirect_url" id="redirect_url"
                                            value="{{ $edit ? $gallery->redirect_url : old('redirect_url') }}"
                                            placeholder="https://yourwebsite.com/product">
                                        <small class="text-muted">When users click on this gallery item, they will be redirected to this URL</small>
                                    </div>
                                </div>

                                {{-- Description --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="description">Description</label>
                                        <textarea class="form-control" name="description" id="description"
                                            placeholder="Enter description" rows="4">{{ $edit ? $gallery->description : old('description') }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary" id="submit">
                                <i class="fa fa-save"></i> {{ $edit ? 'Update' : 'Submit for Approval' }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

            // Handle field visibility on load
            toggleFieldsBasedOnResourceType();

            // Resource type change handler
            $('#resource_type').on('change', function() {
                toggleFieldsBasedOnResourceType();
            });

            // Toggle fields based on resource type (Image/Video)
            function toggleFieldsBasedOnResourceType() {
                const resourceType = $('#resource_type').val();
                
                if (resourceType === 'image') {
                    // Show file upload for images
                    $('#file_field').show();
                    $('#youtube_field').hide();
                    $('#file').attr('accept', 'image/*');
                    $('#file').prop('required', {{ $edit ? 'false' : 'true' }});
                    $('#youtube_link').prop('required', false);
                    $('#youtube_link').val('');
                } else if (resourceType === 'video') {
                    // Show YouTube link for videos
                    $('#file_field').hide();
                    $('#youtube_field').show();
                    $('#file').prop('required', false);
                    $('#youtube_link').prop('required', true);
                } else {
                    // Hide both if nothing selected
                    $('#file_field').hide();
                    $('#youtube_field').hide();
                    $('#file').prop('required', false);
                    $('#youtube_link').prop('required', false);
                }
            }

            // File preview handler (for images only)
            if (fileInput) {
                fileInput.addEventListener('change', (event) => {
                    selectedFile = event.target.files[0];
                    filePreview.innerHTML = ''; // Clear existing preview

                    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 = '300px';
                        preview.style.maxHeight = '300px';
                        preview.style.borderRadius = '8px';
                        preview.src = URL.createObjectURL(selectedFile);
                        previewContainer.appendChild(preview);

                        const cancelButton = document.createElement('button');
                        cancelButton.innerHTML = '✖';
                        cancelButton.className = 'btn btn-sm btn-danger';
                        cancelButton.style.position = 'absolute';
                        cancelButton.style.top = '5px';
                        cancelButton.style.right = '5px';

                        cancelButton.addEventListener('click', (e) => {
                            e.preventDefault();
                            selectedFile = null;
                            fileInput.value = '';
                            filePreview.innerHTML = '';
                            
                            @if($edit && $gallery->file_path && $gallery->resource_type == 'image')
                                // Restore original image if editing
                                filePreview.innerHTML = `
                                    <div class="preview-container" data-existing="true">
                                        <img src="{{ asset('storage/' . $gallery->file_path) }}" alt="{{ $gallery->title }}"
                                            style="max-width: 300px; max-height: 300px; border-radius: 8px;">
                                    </div>
                                `;
                            @endif
                        });

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

            // Form validation
            const editAddForm = $('#edit-add-form');
            editAddForm.validate({
                rules: {
                    title: {
                        required: true,
                        maxlength: 255
                    },
                    resource_type: {
                        required: true
                    },
                    order: {
                        required: true,
                        number: true,
                        min: 0
                    },
                    is_active: {
                        required: true
                    },
                    file: {
                        required: function() {
                            const resourceType = $('#resource_type').val();
                            const isEdit = {{ $edit ? 'true' : 'false' }};
                            
                            // For new image entries, file is required
                            if (!isEdit && resourceType === 'image') {
                                return true;
                            }
                            
                            return false;
                        }
                    },
                    youtube_link: {
                        required: function() {
                            const resourceType = $('#resource_type').val();
                            return resourceType === 'video';
                        },
                        url: true
                    },
                    redirect_url: {
                        url: true
                    }
                },
                messages: {
                    title: {
                        required: "Please enter title",
                        maxlength: "Title cannot exceed 255 characters"
                    },
                    resource_type: {
                        required: "Please select resource type"
                    },
                    order: {
                        required: "Please enter display order",
                        number: "Order must be a number",
                        min: "Order cannot be negative"
                    },
                    is_active: {
                        required: "Please select status"
                    },
                    file: {
                        required: "Please upload an image"
                    },
                    youtube_link: {
                        required: "Please enter YouTube link",
                        url: "Please enter a valid YouTube URL"
                    },
                    redirect_url: {
                        url: "Please enter a valid URL (e.g., https://example.com)"
                    }
                },
                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.success) {
                                toastr.success(response.message);
                                if (response.redirectTo) {
                                    setTimeout(() => {
                                        window.location.href = response.redirectTo;
                                    }, 1000);
                                }
                            } else {
                                toastr.error(response.message || 'An error occurred');
                            }
                        },
                        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 if (xhr.responseJSON && xhr.responseJSON.message) {
                                toastr.error(xhr.responseJSON.message);
                            } else {
                                toastr.error('An error occurred while processing your request.');
                            }
                        }
                    });

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