@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" onclick="novoSlider()">
            <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" onclick="novoSlider()">
                    <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>

            <!-- Campo de imagem para novo slider -->
            <div class="col-md-12" id="campoImagemNovo">
              <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>

            <!-- Campo para exibir imagem atual em modo de edição -->
            <div class="col-md-12" id="exibicaoImagemAtual" 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 class="mt-3">
                <button type="button" class="btn btn-outline-warning btn-sm" id="btnReplaceImage" onclick="openReplaceImageModal()">
                  <i class="fas fa-image"></i> Replace Image
                </button>
              </div>
            </div>

            <!-- Campo para substituir imagem em modo de edição - REMOVIDO -->
            <!-- <div class="col-md-12" id="campoSubstituirImagem" style="display: none;">
              <label class="form-label">New Image <span class="text-danger">*</span></label>
              <input type="file" class="form-control" name="replace_image" id="inputReplaceImage" accept="image/*">
              <div class="form-text">Accepted formats: JPG, PNG, GIF. Max size: 2MB</div>
              <div class="mt-2">
                <img id="previewReplaceImage" src="#" alt="Preview" class="img-thumbnail d-none" style="max-height: 180px; max-width: 100%;">
              </div>
              <div class="mt-2">
                <button type="button" class="btn btn-outline-secondary btn-sm" id="btnCancelReplaceImage">
                  <i class="fas fa-times"></i> Cancel
                </button>
                <button type="button" class="btn btn-outline-success btn-sm" id="btnConfirmReplaceImage">
                  <i class="fas fa-check"></i> Replace Image
                </button>
              </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>

<!-- Modal Replace Image -->
<div class="modal fade" id="modalReplaceImage" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Replace Slider Image</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="formReplaceImage" enctype="multipart/form-data">
          <div class="mb-3">
            <label class="form-label">Current Image</label>
            <div class="text-center">
              <img id="currentImagePreview" src="#" alt="Current image" class="img-thumbnail" style="max-height: 200px; max-width: 100%;">
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label">New Image <span class="text-danger">*</span></label>
            <input type="file" class="form-control" name="replace_image" id="inputReplaceImage" accept="image/*" required>
            <div class="form-text">Accepted formats: JPG, PNG, GIF. Max size: 2MB</div>
          </div>
          <div class="mb-3">
            <label class="form-label">Preview</label>
            <div class="text-center">
              <img id="previewReplaceImage" src="#" alt="Preview" class="img-thumbnail d-none" style="max-height: 200px; max-width: 100%;">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success" id="btnConfirmReplaceImage">
          <i class="fas fa-check"></i> Replace Image
        </button>
      </div>
    </div>
  </div>
</div>

@endsection

@push('js')
<!-- SortableJS -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js" onerror="console.error('Erro ao carregar SortableJS')"></script>
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" onerror="console.error('Erro ao carregar SweetAlert2')"></script>
<!-- Scripts para Sliders -->
<script>

// Verificar se os scripts foram carregados
window.addEventListener('load', function() {
    // Se algum script não foi carregado, tentar carregar novamente
    if (typeof Sortable === 'undefined') {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js';
        script.onload = function() {
        };
        script.onerror = function() {
        };
        document.head.appendChild(script);
    }

    if (typeof Swal === 'undefined') {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/sweetalert2@11';
        script.onload = function() {
        };
        script.onerror = function() {
        };
        document.head.appendChild(script);
    }
});

// Variáveis globais
let currentSliderId = null;
let isEditMode = false;

// Função para excluir slider - DEFINIDA GLOBALMENTE
window.excluirSlider = function(sliderId) {

    if (typeof Swal === 'undefined') {
        return;
    }

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

// Função para novo slider
window.novoSlider = function() {
    isEditMode = false;
    currentSliderId = null;

    // Limpar formulário
    $('#formSlider')[0].reset();

    // Resetar campos de imagem
    $('#inputImageSlider').prop('required', true).attr('required', 'required');
    $('#campoImagemNovo').show();
    $('#exibicaoImagemAtual').hide();

    // Limpar previews
    $('#previewImageSlider').addClass('d-none').attr('src', '#');

    // Limpar validações
    $('.is-invalid').removeClass('is-invalid');

    // Configurar modal
    $('#modalSliderLabel').text('New Slider');
    $('#modalSlider').modal('show');
};

// Função para editar slider - DEFINIDA GLOBALMENTE
window.editarSlider = function(sliderId) {

    if (typeof $ === 'undefined') {
        return;
    }

    isEditMode = true;
    currentSliderId = sliderId;
    console.log('editarSlider: currentSliderId definido como:', currentSliderId);
    console.log('editarSlider: tipo de currentSliderId:', typeof currentSliderId);

    $.get(`/administrativo/sliders/${sliderId}`)
        .done(function(resp) {

            if (resp.success) {
                const slider = resp.slider;

                // Preencher formulário
                $('#formSlider input[name="small_text"]').val(slider.small_text);
                $('#formSlider input[name="big_text"]').val(slider.big_text);
                $('#formSlider input[name="action"]').val(slider.action);
                $('#formSlider select[name="target"]').val(slider.target);
                $('#formSlider input[name="button_text"]').val(slider.button_text);

                // Configurar campos de imagem
                if (slider.image) {
                    // Forçar recarregamento da imagem no modal
                    $('#imagemAtual').attr('src', `/storage/${slider.image}` + '?t=' + new Date().getTime());
                    $('#exibicaoImagemAtual').show();
                    $('#campoImagemNovo').hide();
                    // Remover required do campo de imagem em modo de edição
                    $('#inputImageSlider').prop('required', false).removeAttr('required');

                    // Atualizar também a imagem no card principal para garantir sincronização
                    const cardImage = $(`.slider-card[data-id="${sliderId}"] .card-body img`);
                    if (cardImage.length > 0) {
                        // Forçar recarregamento da imagem
                        cardImage.attr('src', `/storage/${slider.image}` + '?t=' + new Date().getTime());
                        console.log('Imagem do card sincronizada ao abrir modal de edição:', `/storage/${slider.image}`);
                    }
                } else {
                    $('#exibicaoImagemAtual').hide();
                    $('#campoImagemNovo').show();
                    // Manter required se não houver imagem
                    $('#inputImageSlider').prop('required', true).attr('required', 'required');
                }

                $('#modalSliderLabel').text('Edit Slider');
                $('#modalSlider').modal('show');
            } else {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: 'Error!',
                        text: 'Error loading slider data',
                        icon: 'error'
                    });
                } else {
                    alert('Erro ao carregar dados do slider');
                }
            }
        })
        .fail(function(xhr, status, error) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'Error!',
                    text: 'Error loading slider data: ' + xhr.status,
                    icon: 'error'
                });
            } else {
                alert('Erro ao carregar dados do slider: ' + xhr.status);
            }
        });
};


// Teste simples para verificar se as funções estão funcionando
setTimeout(function() {

    // Teste de chamada das funções
    if (typeof window.editarSlider === 'function') {
    } else {
        console.error('❌ Função editarSlider NÃO está definida');
    }

    if (typeof window.excluirSlider === 'function') {

    } else {
        console.error('❌ Função excluirSlider NÃO está definida');
    }

    // Teste de chamada das funções
    if (typeof editarSlider === 'function') {
    } else {
        console.error('❌ Função editarSlider NÃO está disponível no escopo global (timeout)');
    }

    if (typeof excluirSlider === 'function') {
    } else {
        console.error('❌ Função excluirSlider NÃO está disponível no escopo global (timeout)');
    }
}, 1000);

// Função para substituir imagem
window.replaceSliderImage = function(sliderId, imageFile) {
    console.log('replaceSliderImage called with sliderId:', sliderId, 'imageFile:', imageFile);

    const formData = new FormData();
    formData.append('replace_image', imageFile);

    const csrfToken = $('meta[name="csrf-token"]').attr('content');
    console.log('CSRF Token:', csrfToken);
    console.log('URL:', `/administrativo/sliders/${sliderId}/replace-image`);

    return $.ajax({
        url: `/administrativo/sliders/${sliderId}/replace-image`,
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': csrfToken
        }
    });
};

// Teste simples para verificar se a função está funcionando
window.testReplaceSliderImage = function() {
};

// Limpar estado quando modal fecha
$('#modalSlider').on('hidden.bs.modal', function() {
    isEditMode = false;
    currentSliderId = null;
    $('.is-invalid').removeClass('is-invalid');

    // Resetar campos de imagem
    $('#inputImageSlider').prop('required', true).attr('required', 'required');
    $('#campoImagemNovo').show();
    $('#exibicaoImagemAtual').hide();
    // $('#inputReplaceImage').prop('required', false); // REMOVIDO
});

// Preview da imagem para novo slider
$('#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', '#');
    }
});

// Preview da imagem de substituição no modal
$('#inputReplaceImage').on('change', function() {
    const file = this.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            $('#previewReplaceImage').attr('src', e.target.result).removeClass('d-none');
        };
        reader.readAsDataURL(file);
    } else {
        $('#previewReplaceImage').addClass('d-none').attr('src', '#');
    }
});

// Função para abrir modal de replace image - será definida no document ready

// Limpar modal de replace image quando fechado
$('#modalReplaceImage').on('hidden.bs.modal', function() {
    // Limpar campos
    $('#previewReplaceImage').addClass('d-none').attr('src', '#');
    $('#inputReplaceImage').val('');

    // Não resetar currentSliderId aqui, pois pode ser necessário para outras operações
});

// Configurar modal de replace image quando aberto - REMOVIDO (agora usa função personalizada)
// $('#modalReplaceImage').on('show.bs.modal', function() {
//     // Configurar preview da imagem atual
//     if (currentSliderId && $('#imagemAtual').attr('src')) {
//         $('#currentImagePreview').attr('src', $('#imagemAtual').attr('src'));
//     }
//
//     // Limpar preview da nova imagem
//     $('#previewReplaceImage').addClass('d-none').attr('src', '#');
//     $('#inputReplaceImage').val('');
// });

// Botão para substituir imagem - REMOVIDO (agora usa modal separado)
// $('#btnReplaceImage').on('click', function() {
//     $('#exibicaoImagemAtual').hide();
//     // $('#campoSubstituirImagem').show(); // REMOVIDO
//     $('#inputReplaceImage').prop('required', true);
// });

// Botão para cancelar substituição de imagem
// $('#btnCancelReplaceImage').on('click', function() { // REMOVIDO
//     $('#campoSubstituirImagem').hide();
//     $('#exibicaoImagemAtual').show();
//     $('#inputReplaceImage').prop('required', false);
//     $('#inputReplaceImage').val('');
//     $('#previewReplaceImage').addClass('d-none').attr('src', '#');
// });

// Botão para confirmar substituição de imagem no modal
$('#btnConfirmReplaceImage').on('click', function() {
    const imageFile = $('#inputReplaceImage')[0].files[0];

    if (!imageFile) {
        Swal.fire({
            title: 'Error!',
            text: 'Please select an image to replace',
            icon: 'error'
        });
        return;
    }

    // Debug: verificar se currentSliderId está definido
    console.log('Current Slider ID:', currentSliderId);

    if (!currentSliderId) {
        Swal.fire({
            title: 'Error!',
            text: 'Slider ID not found. Please try again.',
            icon: 'error'
        });
        return;
    }

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

    replaceSliderImage(currentSliderId, imageFile)
        .done(function(resp) {
            if (resp.success) {
                // Atualizar imagem atual no modal de edição
                $('#imagemAtual').attr('src', `/storage/${resp.slider.image}`);

                // Atualizar imagem no card da grid
                const cardImage = $(`.slider-card[data-id="${currentSliderId}"] img`);
                if (cardImage.length) {
                    cardImage.attr('src', `/storage/${resp.slider.image}`);
                }

                // Fechar modal de replace
                $('#modalReplaceImage').modal('hide');

                Swal.fire({
                    title: 'Success!',
                    text: 'Image replaced successfully!',
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                });
            } else {
                Swal.fire({
                    title: 'Error!',
                    text: resp.error || 'Failed to replace image',
                    icon: 'error'
                });
            }
        })
        .fail(function(xhr, status, error) {
            let errorMessage = 'Error replacing image';
            if (xhr.responseJSON && xhr.responseJSON.error) {
                errorMessage = xhr.responseJSON.error;
            }
            Swal.fire({
                title: 'Error!',
                text: errorMessage,
                icon: 'error'
            });
        })
        .always(function() {
            $btn.html(originalText).prop('disabled', false);
        });
});

// Submissão do formulário
$('#formSlider').on('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(this);
    const $form = $(this);
    const $submitBtn = $form.find('button[type="submit"]');

    // Validação personalizada baseada no modo atual
    let isValid = true;

    // Sempre validar campos de texto obrigatórios
    $form.find('input[type="text"], input[type="url"], select').filter('[required]').each(function() {
        if (!$(this).val().trim()) {
            $(this).addClass('is-invalid');
            isValid = false;
        } else {
            $(this).removeClass('is-invalid');
        }
    });

    // Validar campo de imagem se estiver visível e for obrigatório
    if ($('#campoImagemNovo').is(':visible') && $('#inputImageSlider').prop('required')) {
        const imageFile = $('#inputImageSlider')[0].files[0];
        if (!imageFile) {
            $('#inputImageSlider').addClass('is-invalid');
            isValid = false;
        } else {
            $('#inputImageSlider').removeClass('is-invalid');
        }
    }

    // Validação de replace_image removida - agora é feita em modal separado

    if (!isValid) {
        Swal.fire({
            title: 'Required fields',
            text: 'Please fill in all required fields',
            icon: 'warning'
        });
        return;
    }

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

    // Determinar URL e método
    const url = isEditMode ? `/administrativo/sliders/${currentSliderId}/update` : '/administrativo/sliders';
    const method = 'POST';

    // Submissão do formulário
    $.ajax({
        url: url,
        method: method,
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(resp) {
            if (resp.success) {
                Swal.fire({
                    title: 'Success!',
                    text: 'Slider saved successfully!',
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    $('#modalSlider').modal('hide');
                    setTimeout(() => window.location.reload(), 500);
                });
            } else {
                Swal.fire({
                    title: 'Error!',
                    text: 'Error saving slider: ' + (resp.error || 'Unknown error'),
                    icon: 'error'
                });
            }
        },
        error: function(xhr, status, error) {
            Swal.fire({
                title: 'Error!',
                text: 'Error saving slider: ' + xhr.status + ' - ' + error,
                icon: 'error'
            });
        },
        complete: function() {
            $submitBtn.html(originalText).prop('disabled', false);
        }
    });
});

// Reordenação com 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) {

                    }
                }
            });
        }
    });
}

// Garantir que as funções sejam definidas após o carregamento completo
$(document).ready(function() {
    // Verificar se as funções estão disponíveis globalmente
    if (typeof window.editarSlider === 'undefined') {
        console.error('❌ Função editarSlider não está definida globalmente!');
    } else {
    }

    if (typeof window.excluirSlider === 'undefined') {
        console.error('❌ Função excluirSlider não está definida globalmente!');
    } else {
    }

    // Verificar se as funções estão disponíveis no escopo global

    // Teste de chamada das funções
    if (typeof window.editarSlider === 'function') {
    } else {
        console.error('❌ Função editarSlider NÃO está funcionando');
    }

    if (typeof window.excluirSlider === 'function') {
    } else {
        console.error('❌ Função excluirSlider NÃO está funcionando');
    }

    // Teste adicional para verificar se as funções estão no escopo global

    // Teste de chamada das funções
    if (typeof editarSlider === 'function') {
    } else {
        console.error('❌ Função editarSlider NÃO está disponível no escopo global');
    }

    if (typeof excluirSlider === 'function') {
    } else {
        console.error('❌ Função excluirSlider NÃO está disponível no escopo global');
    }

    // Teste adicional para verificar se as funções estão no escopo global
    console.log('Função editarSlider no escopo global (DOM ready):', typeof editarSlider);
    console.log('Função excluirSlider no escopo global (DOM ready):', typeof excluirSlider);

    // Teste de chamada das funções
    if (typeof editarSlider === 'function') {
        console.log('✅ Função editarSlider está disponível no escopo global');
    } else {
        console.error('❌ Função editarSlider NÃO está disponível no escopo global');
    }

    if (typeof excluirSlider === 'function') {
        console.log('✅ Função excluirSlider está disponível no escopo global');
    } else {
        console.error('❌ Função excluirSlider NÃO está disponível no escopo global');
    }

    // Definir função para abrir modal de replace image
    window.openReplaceImageModal = function() {
        // Debug: verificar se temos um slider selecionado
        console.log('openReplaceImageModal called, currentSliderId:', currentSliderId);

        // Verificar se temos um slider selecionado
        if (!currentSliderId) {
            Swal.fire({
                title: 'Error!',
                text: 'No slider selected. Please edit a slider first.',
                icon: 'error'
            });
            return;
        }

        // Buscar dados do slider para exibir a imagem atual
        const url = `/administrativo/sliders/${currentSliderId}`;
        console.log('Buscando dados do slider na URL:', url);

        $.get(url)
            .done(function(resp) {
                console.log('Resposta da busca do slider:', resp);
                if (resp.success) {
                    const slider = resp.slider;
                    console.log('Slider encontrado:', slider);
                    console.log('Imagem do slider:', slider.image);

                    if (slider.image) {
                        const imageUrl = `/storage/${slider.image}`;
                        console.log('URL da imagem:', imageUrl);
                        console.log('Elemento da imagem antes de definir src:', $('#currentImagePreview').length > 0);

                        // Forçar recarregamento da imagem
                        $('#currentImagePreview').attr('src', imageUrl + '?t=' + new Date().getTime());
                        console.log('Imagem definida no modal');
                        console.log('Src da imagem após definir:', $('#currentImagePreview').attr('src'));
                    } else {
                        console.log('Slider não possui imagem');
                        $('#currentImagePreview').attr('src', '#');
                    }

                    // Limpar preview da nova imagem
                    $('#previewReplaceImage').addClass('d-none').attr('src', '#');
                    $('#inputReplaceImage').val('');

                    // Verificar se os elementos do modal existem
                    console.log('Elementos do modal encontrados:');
                    console.log('- currentImagePreview:', $('#currentImagePreview').length > 0);
                    console.log('- previewReplaceImage:', $('#previewReplaceImage').length > 0);
                    console.log('- inputReplaceImage:', $('#inputReplaceImage').length > 0);

                    // Verificar se a imagem foi definida corretamente
                    console.log('Imagem atual no modal após definir src:', $('#currentImagePreview').attr('src'));

                    // Abrir modal
                    console.log('Tentando abrir modal de replace image');
                    $('#modalReplaceImage').modal('show');
                    console.log('Modal de replace image aberto');

                    // Verificar se o modal foi aberto
                    setTimeout(() => {
                        console.log('Modal visível:', $('#modalReplaceImage').hasClass('show'));
                        console.log('Imagem atual no modal:', $('#currentImagePreview').attr('src'));
                        console.log('Elemento da imagem encontrado:', $('#currentImagePreview').length > 0);
                    }, 100);
                } else {
                    console.error('Erro na resposta:', resp);
                    Swal.fire({
                        title: 'Error!',
                        text: 'Error loading slider data',
                        icon: 'error'
                    });
                }
            })
            .fail(function(xhr, status, error) {
                console.error('Erro na requisição:', xhr, status, error);
                Swal.fire({
                    title: 'Error!',
                    text: 'Error loading slider data: ' + xhr.status,
                    icon: 'error'
                });
            });
    };

    console.log('Função openReplaceImageModal definida:', typeof window.openReplaceImageModal);

    // Verificar se o modal de replace image existe
    console.log('Modal de replace image encontrado:', $('#modalReplaceImage').length > 0);
    console.log('Botão de confirmar replace image encontrado:', $('#btnConfirmReplaceImage').length > 0);

    // Adicionar evento de clique para o botão de confirmar replace image
    $('#btnConfirmReplaceImage').on('click', function() {
        console.log('Botão de confirmar replace image clicado');
        console.log('currentSliderId:', currentSliderId);

        const fileInput = $('#inputReplaceImage')[0];
        console.log('File input:', fileInput);
        console.log('Files:', fileInput.files);

        if (!fileInput.files || fileInput.files.length === 0) {
            Swal.fire({
                title: 'Error!',
                text: 'Please select a new image file.',
                icon: 'error'
            });
            return;
        }

        const formData = new FormData();
        formData.append('replace_image', fileInput.files[0]);
        console.log('FormData criado:', formData);

        const url = `/administrativo/sliders/${currentSliderId}/replace-image`;
        console.log('URL da requisição:', url);

        $.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('Resposta de sucesso:', resp);
                console.log('Dados do slider recebidos:', resp.slider);
                console.log('Imagem do slider:', resp.slider.image);
                console.log('Debug info:', resp.debug_info);

                if (resp.success) {
                    Swal.fire({
                        title: 'Success!',
                        text: 'Image replaced successfully!',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                                            $('#modalReplaceImage').modal('hide');
                    // Atualizar a imagem atual no modal de edição
                    if (resp.slider && resp.slider.image) {
                        // Forçar recarregamento da imagem no modal
                        const newImageUrl = `/storage/${resp.slider.image}`;
                        $('#imagemAtual').attr('src', newImageUrl + '?t=' + new Date().getTime());
                        console.log('Imagem do modal de edição atualizada:', newImageUrl);

                        // Atualizar também a imagem no card principal do slider
                        console.log('Procurando card do slider com ID:', currentSliderId);
                        console.log('Tipo de currentSliderId:', typeof currentSliderId);
                        console.log('Valor de currentSliderId:', currentSliderId);

                        const cardSelector = `.slider-card[data-id="${currentSliderId}"] .card-body img`;
                        console.log('Seletor usado:', cardSelector);

                        const cardImage = $(cardSelector);
                        console.log('Card encontrado:', cardImage.length > 0);
                        console.log('Card element:', cardImage[0]);

                        if (cardImage.length > 0) {
                            // Forçar recarregamento da imagem
                            console.log('Atualizando imagem do card para:', newImageUrl);

                            cardImage.attr('src', newImageUrl + '?t=' + new Date().getTime());
                            console.log('Imagem do card atualizada:', newImageUrl);

                            // Verificar se a imagem foi carregada corretamente
                            setTimeout(() => {
                                console.log('Verificando se a imagem do card foi carregada:', cardImage.attr('src'));
                                console.log('Card ainda existe:', cardImage.length > 0);
                            }, 500);
                        } else {
                            console.log('Card do slider não encontrado para atualizar');
                            console.log('Todos os cards encontrados:', $('.slider-card').length);
                            console.log('Cards com data-id:', $('.slider-card[data-id]').length);
                            $('.slider-card[data-id]').each(function() {
                                console.log('Card ID:', $(this).data('id'), 'Tipo:', typeof $(this).data('id'));
                            });
                        }
                    }
                    });
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: 'Error replacing image: ' + (resp.error || 'Unknown error'),
                        icon: 'error'
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('Erro na requisição AJAX:', xhr, status, error);

                // Em caso de erro, restaurar a imagem original no card
                if (currentSliderId) {
                    const cardImage = $(`.slider-card[data-id="${currentSliderId}"] .card-body img`);
                    if (cardImage.length > 0) {
                        // Buscar a imagem original do slider
                        $.get(`/administrativo/sliders/${currentSliderId}`)
                            .done(function(resp) {
                                if (resp.success && resp.slider.image) {
                                    cardImage.attr('src', `/storage/${resp.slider.image}`);
                                    console.log('Imagem do card restaurada após erro:', `/storage/${resp.slider.image}`);
                                }
                            });
                    }
                }

                Swal.fire({
                    title: 'Error!',
                    text: 'Error replacing image: ' + xhr.status + ' - ' + error,
                    icon: 'error'
                });
            }
        });
    });

    // Adicionar preview da nova imagem
    $('#inputReplaceImage').on('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#previewReplaceImage').attr('src', e.target.result).removeClass('d-none');
            };
            reader.readAsDataURL(file);
        } else {
            $('#previewReplaceImage').addClass('d-none').attr('src', '#');
        }
    });
});
</script>
@endpush