@extends('admin.main')

@section('main')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-0">Manage Sliders</h1>
        <p class="text-muted">Create and manage homepage sliders</p>
    </div>
    <div>
        <button class="btn btn-primary" id="btnNovoSlider" data-bs-toggle="modal" data-bs-target="#modalSlider">
            <i class="fas fa-plus"></i> New Slider
        </button>
    </div>
</div>

<!-- Grid de Sliders -->
<div class="row" id="slidersGrid">
    @forelse($sliders as $slider)
        <div class="col-md-6 col-lg-4 mb-4 slider-card" data-id="{{ $slider->id }}">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span class="badge bg-primary"></span>
                    <div class="drag-handle" style="cursor: move;">
                        <i class="fas fa-grip-vertical text-muted"></i>
                    </div>
                </div>
                <div class="card-body">
                    <div class="text-center mb-3">
                        @if($slider->image)
                            <img src="{{ asset('storage/' . $slider->image) }}" alt="Slider Image"
                                 class="img-fluid rounded" style="max-height: 150px; width: 100%; object-fit: cover;">
                        @else
                            <div class="bg-light rounded d-flex align-items-center justify-content-center"
                                 style="height: 150px;">
                                <i class="fas fa-image text-muted fa-2x"></i>
                            </div>
                        @endif
                    </div>

                    <div class="mb-2">
                        <strong>Small Text:</strong>
                        <p class="text-muted mb-1">{{ Str::limit($slider->small_text, 50) }}</p>
                    </div>

                    <div class="mb-2">
                        <strong>Big Text:</strong>
                        <p class="text-muted mb-1">{{ Str::limit($slider->big_text, 50) }}</p>
                    </div>

                    <div class="mb-2">
                        <strong>Action:</strong>
                        <p class="text-muted mb-1">{{ Str::limit($slider->action, 30) }}</p>
                    </div>

                    <div class="mb-3">
                        <strong>Target:</strong>
                        <span class="badge bg-{{ $slider->target === '_blank' ? 'warning' : 'info' }}">
                            {{ $slider->target === '_blank' ? 'New Tab' : 'Same Tab' }}
                        </span>
                    </div>

                    <div class="mb-2">
                        <strong>Button Text:</strong>
                        <p class="text-muted mb-1">{{ Str::limit($slider->button_text, 50) }}</p>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="btn-group w-100" role="group">
                        <button type="button" class="btn btn-outline-primary btn-sm"
                                onclick="editarSlider({{ $slider->id }})">
                            <i class="fas fa-edit"></i> Edit
                        </button>
                        <button type="button" class="btn btn-outline-danger btn-sm"
                                onclick="excluirSlider({{ $slider->id }})">
                            <i class="fas fa-trash"></i> Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="col-12">
            <div class="alert alert-info text-center">
                <i class="fas fa-info-circle fa-2x mb-3"></i>
                <h5>No sliders found</h5>
                <p>Create your first slider to get started!</p>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalSlider">
                    <i class="fas fa-plus"></i> Create First Slider
                </button>
            </div>
        </div>
    @endforelse
</div>

<!-- Modal Novo/Editar Slider -->
<div class="modal fade" id="modalSlider" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form id="formSlider" enctype="multipart/form-data">
        <div class="modal-header">
          <h5 class="modal-title" id="modalSliderLabel">New Slider</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row g-3">
            <div class="col-md-12">
              <label class="form-label">Small Text <span class="text-danger">*</span></label>
              <input type="text" class="form-control" name="small_text" placeholder="Enter small text (e.g., WATERPROOF. KID PROOF. PET PROOF.)" required>
              <div class="invalid-feedback">This field is required</div>
            </div>
            <div class="col-md-12">
              <label class="form-label">Big Text <span class="text-danger">*</span></label>
              <input type="text" class="form-control" name="big_text" placeholder="Enter main title (e.g., Meet Permshield)" required>
              <div class="invalid-feedback">This field is required</div>
            </div>
            <div class="col-md-12">
              <label class="form-label">Action URL <span class="text-danger">*</span></label>
              <input type="url" class="form-control" name="action" placeholder="https://example.com/products" required>
              <div class="invalid-feedback">This field is required</div>
            </div>
            <div class="col-md-12">
              <label class="form-label">Target <span class="text-danger">*</span></label>
              <select class="form-select" name="target" required>
                <option value="">Select target</option>
                <option value="_self">Same tab</option>
                <option value="_blank">New tab</option>
              </select>
              <div class="invalid-feedback">This field is required</div>
            </div>
            <div class="col-md-12">
              <label class="form-label">Button Text <span class="text-danger">*</span></label>
              <input type="text" class="form-control" name="button_text" placeholder="Enter button text (e.g., Shop Now)" required>
              <div class="invalid-feedback">This field is required</div>
            </div>
            <div class="col-md-12" id="campoImagem">
              <label class="form-label">Slider Image <span class="text-danger">*</span></label>
              <input type="file" class="form-control" name="image" id="inputImageSlider" accept="image/*" required>
              <div class="form-text">Accepted formats: JPG, PNG, GIF. Max size: 2MB</div>
              <div class="mt-2">
                <img id="previewImageSlider" src="#" alt="Preview" class="img-thumbnail d-none" style="max-height: 180px; max-width: 100%;">
              </div>
            </div>

            <!-- Field for displaying current image in edit mode -->
            <div class="col-md-12" id="exibicaoImagem" style="display: none;">
              <label class="form-label">Current Image</label>
              <div class="mt-2">
                <img id="imagemAtual" src="#" alt="Current image" class="img-thumbnail" style="max-height: 200px; max-width: 100%;">
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Delete confirmation modal -->
<div class="modal fade" id="modalConfirmDelete" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirm deletion</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete this slider?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="btnConfirmDelete">Delete</button>
      </div>
    </div>
  </div>
</div>
@endsection

@push('js')
<!-- SortableJS -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Scripts para Sliders -->
<script>
// ALL GLOBAL FUNCTIONS
window.testeBotao = function() {
    Swal.fire({
        title: 'JavaScript working!',
        text: 'The system is operational',
        icon: 'success',
        timer: 2000,
        showConfirmButton: false
    });
    console.log('Button test executed');
};

window.testeRota = function() {
    console.log('Testing delete route...');
    $.ajax({
        url: '/administrativo/sliders/1/delete',
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {},
        success: function(resp) {
            console.log('Success:', resp);
            Swal.fire({
                title: 'Success!',
                text: 'Route working! Response: ' + JSON.stringify(resp),
                icon: 'success'
            });
        },
        error: function(xhr, status, error) {
            console.error('Error:', xhr.status, error);
            Swal.fire({
                title: 'Error!',
                text: 'Route error: ' + xhr.status + ' - ' + error,
                icon: 'error'
            });
        }
    });
};

window.testeShow = function() {
    console.log('Testing show route...');
    $.get('/administrativo/sliders/1')
        .done(function(data) {
            console.log('Show success:', data);
            Swal.fire({
                title: 'Success!',
                text: 'Show route working! Data: ' + JSON.stringify(data),
                icon: 'success'
            });
        })
        .fail(function(xhr, status, error) {
            console.error('Show error:', xhr.status, error);
            Swal.fire({
                title: 'Error!',
                text: 'Show route error: ' + xhr.status,
                icon: 'error'
            });
        });
};

window.testeFormulario = function() {
    console.log('Testing form submission...');

    const formData = new FormData();
    formData.append('small_text', 'Test small');
    formData.append('big_text', 'Test big');
    formData.append('action', 'https://example.com');
    formData.append('target', '_self');

    // Create a test file
    const blob = new Blob(['test'], { type: 'image/jpeg' });
    formData.append('image', blob, 'test.jpg');

    $.ajax({
        url: '/administrativo/sliders',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(resp) {
            console.log('Success:', resp);
            Swal.fire({
                title: 'Success!',
                text: 'Form working! Response: ' + JSON.stringify(resp),
                icon: 'success'
            });
        },
        error: function(xhr, status, error) {
            console.error('Error:', xhr.status, error);
            console.error('Response:', xhr.responseText);
            Swal.fire({
                title: 'Error!',
                text: 'Form error: ' + xhr.status + ' - ' + error,
                icon: 'error'
            });
        }
    });
};

window.testeCriarSlider = function() {
    console.log('Testing slider creation...');

    const formData = new FormData();
    formData.append('small_text', 'Test Slider');
    formData.append('big_text', 'Test Title');
    formData.append('action', 'https://test.com');
    formData.append('target', '_self');

    $.ajax({
        url: '/administrativo/sliders',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(resp) {
            console.log('Slider created:', resp);
            Swal.fire({
                title: 'Success!',
                text: 'Slider created successfully!',
                icon: 'success'
            }).then(() => {
                window.location.reload();
            });
        },
        error: function(xhr, status, error) {
            console.error('Error creating slider:', xhr.status, error);
            console.error('Response:', xhr.responseText);
            Swal.fire({
                title: 'Error!',
                text: 'Error creating slider: ' + xhr.status,
                icon: 'error'
            });
        }
    });
};

window.editarSlider = function(sliderId) {
    console.log('Editing slider:', sliderId);

    $.get(`/administrativo/sliders/${sliderId}`)
        .done(function(data) {
            console.log('Data received:', data);

            // Fill form fields
            $('#formSlider [name="small_text"]').val(data.small_text);
            $('#formSlider [name="big_text"]').val(data.big_text);
            $('#formSlider [name="action"]').val(data.action);
            $('#formSlider [name="target"]').val(data.target);
            $('#formSlider [name="button_text"]').val(data.button_text); // Add this line

            // Image preview
            if (data.image) {
                $('#previewImageSlider').attr('src', `/storage/${data.image}`).removeClass('d-none');
                $('#imagemAtual').attr('src', `/storage/${data.image}`); // Set image for display
                console.log('Image loaded:', `/storage/${data.image}`);
            } else {
                $('#previewImageSlider').addClass('d-none').attr('src', '#');
                $('#imagemAtual').attr('src', '#'); // Clear image display
            }

            window.sliderEditId = sliderId;
            $('#modalSliderLabel').text('Edit Slider');

            // Open modal
            $('#modalSlider').modal('show');
            console.log('Modal opened for editing');
        })
        .fail(function(xhr, status, error) {
            console.error('Error loading data:', xhr.status, error);
            console.error('Response:', xhr.responseText);
            Swal.fire({
                title: 'Error!',
                text: 'Error loading slider data: ' + xhr.status,
                icon: 'error'
            });
        });
};

window.excluirSlider = function(sliderId) {
    console.log('Deleting slider:', sliderId);

    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.isConfirmed) {
            console.log('Deletion confirmed');

            $.ajax({
                url: `/administrativo/sliders/${sliderId}/delete`,
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(resp) {
                    console.log('Delete success:', resp);
                    Swal.fire({
                        title: 'Deleted!',
                        text: 'Slider has been deleted.',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        window.location.reload();
                    });
                },
                error: function(xhr, status, error) {
                    console.error('Delete error:', xhr.status, error);
                    console.error('Response:', xhr.responseText);
                    Swal.fire({
                        title: 'Error!',
                        text: 'Error deleting slider: ' + xhr.status,
                        icon: 'error'
                    });
                }
            });
        }
    });
};

// Await DOM to be fully loaded
$(function() {
        console.log('DOM ready - initializing sliders');

    // 1. NEW SLIDER BUTTON - WORKS DIRECTLY WITH HTML ATTRIBUTES
    // No need for JavaScript, uses data-bs-toggle="modal" data-bs-target="#modalSlider"

        // 2. RESET FORM WHEN MODAL OPENS (only for new slider)
    $('#modalSlider').on('show.bs.modal', function() {
        console.log('Modal opening');

        // Only reset if not editing
        if (!window.sliderEditId) {
            console.log('Resetting form for new slider');
            $('#formSlider')[0].reset();
            $('#previewImageSlider').addClass('d-none').attr('src', '#');
            $('#modalSliderLabel').text('New Slider');
            $('.is-invalid').removeClass('is-invalid');

                        // Show image field for new slider
            $('#campoImagem').show();
            $('#exibicaoImagem').hide();
            $('#inputImageSlider').prop('required', true);
        } else {
            console.log('Modal opened for editing - not resetting');

            // Hide image field for editing
            $('#campoImagem').hide();
            $('#exibicaoImagem').show();
            $('#inputImageSlider').prop('required', false);
        }
    });

    // Clear edit ID when modal closes
    $('#modalSlider').on('hidden.bs.modal', function() {
        console.log('Modal closed - clearing edit ID');
        window.sliderEditId = null;
    });

    // 3. IMAGE PREVIEW
    $('#inputImageSlider').on('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#previewImageSlider').attr('src', e.target.result).removeClass('d-none');
            };
            reader.readAsDataURL(file);
        } else {
            $('#previewImageSlider').addClass('d-none').attr('src', '#');
        }
    });

    // 4. FORM SUBMISSION
    $('#formSlider').on('submit', function(e) {
        e.preventDefault();
        console.log('=== FORM SUBMITTED ===');
        console.log('Form:', this);
        console.log('Slider Edit ID:', window.sliderEditId);

        const formData = new FormData(this);
        console.log('FormData created');

        // Log form data
        for (let [key, value] of formData.entries()) {
            console.log(key + ': ' + value);
        }

        const $form = $(this);
        const $submitBtn = $form.find('button[type="submit"]');
        console.log('Submit button found:', $submitBtn.length);

        // Validation
        let isValid = true;
        console.log('Starting validation...');

        $form.find('[required]').each(function() {
            console.log('Validating field:', $(this).attr('name'), 'Value:', $(this).val());
            if (!$(this).val().trim()) {
                $(this).addClass('is-invalid');
                isValid = false;
                console.log('Invalid field:', $(this).attr('name'));
            } else {
                $(this).removeClass('is-invalid');
            }
        });

        // Specific validation for image (only for new slider)
        if (!window.sliderEditId) {
            console.log('Validating image for new slider...');
            const $imageInput = $form.find('[name="image"]');
            console.log('Image field found:', $imageInput.length);
            if ($imageInput.length && !$imageInput[0].files[0]) {
                $imageInput.addClass('is-invalid');
                isValid = false;
                console.log('Image required but not provided');
            } else if ($imageInput.length) {
                $imageInput.removeClass('is-invalid');
                console.log('Image valid');
            }
        }

        console.log('Final validation:', isValid);

        if (!isValid) {
            console.log('Invalid form - displaying error');
            Swal.fire({
                title: 'Required fields',
                text: 'Please fill in all required fields',
                icon: 'warning'
            });
            return;
        }

        console.log('Valid form - sending...');

        // Loading
        const originalText = $submitBtn.html();
        $submitBtn.html('<i class="fas fa-spinner fa-spin"></i> Saving...').prop('disabled', true);

        // Submission
        const url = window.sliderEditId ? `/administrativo/sliders/${window.sliderEditId}/update` : '/administrativo/sliders';
        console.log('Request URL:', url);
        console.log('Method:', 'POST');
        console.log('CSRF Token:', $('meta[name="csrf-token"]').attr('content'));

        $.ajax({
            url: url,
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(resp) {
                console.log('=== SUCCESS RESPONSE ===');
                console.log('Full response:', resp);
                if (resp.success) {
                    console.log('Slider saved successfully');
                    Swal.fire({
                        title: 'Success!',
                        text: 'Slider saved successfully!',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        console.log('Closing modal and reloading...');
                        $('#modalSlider').modal('hide');
                        setTimeout(() => window.location.reload(), 500);
                    });
                } else {
                    console.log('Error in response:', resp);
                    Swal.fire({
                        title: 'Error!',
                        text: 'Error saving slider: ' + (resp.error || 'Unknown error'),
                        icon: 'error'
                    });
                }
            },
            error: function(xhr, status, error) {
                console.log('=== AJAX ERROR ===');
                console.error('Status:', xhr.status);
                console.error('Status Text:', xhr.statusText);
                console.error('Error:', error);
                console.error('Response Text:', xhr.responseText);
                console.error('Response JSON:', xhr.responseJSON);

                Swal.fire({
                    title: 'Error!',
                    text: 'Error saving slider: ' + xhr.status + ' - ' + error,
                    icon: 'error'
                });
            },
            complete: function() {
                console.log('Request complete - restoring button');
                $submitBtn.html(originalText).prop('disabled', false);
            }
        });
    });

    // 7. REORDERING (SortableJS)
    const grid = document.getElementById('slidersGrid');
    if (grid) {
        new Sortable(grid, {
            animation: 150,
            handle: '.drag-handle',
            onEnd: function() {
                const order = [];
                $('.slider-card').each(function() {
                    order.push($(this).data('id'));
                });

                $.ajax({
                    url: "{{ route('admin.sliders.reorder') }}",
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Content-Type': 'application/json'
                    },
                    data: JSON.stringify({order: order}),
                    success: function(resp) {
                        if (resp.success) {
                            console.log('Order updated');
                        }
                    }
                });
            }
        });
    }

    console.log('Sliders initialized successfully');
});
</script>
@endpush