@extends('template_pages.session')

@section('page_title', 'Reembolsos')
@section('page_icon', 'rotate-ccw')
@section('navbar', 'finance.navbar')

@push('styles')
<!-- Datatables css -->
<link href="{{ asset('assets/inspinia/plugins/datatables/responsive.bootstrap5.min.css') }}" rel="stylesheet" type="text/css">
@endpush

@section('filter')
<div class="card-header border-light flex-row-reverse">
    <div class="d-flex align-items-center gap-2">
        <span class="me-2 fw-semibold">Filtrar por:</span>

        <!-- Filtro Status -->
        <div class="app-search">
            <select data-table-filter="status" class="form-select form-control my-1 my-md-0">
                <option value="">Status</option>
                <option value="Pendente">Pendente</option>
                <option value="Recusado">Recusado</option>
                <option value="Pago">Pago</option>
            </select>
            <i data-lucide="box" class="app-search-icon text-muted"></i>
        </div>

        <!-- Botão Limpar Filtros -->
        <button id="clear-filters" class="btn btn-outline-primary">
            <i data-lucide="x" class="me-1"></i>
            Limpar
        </button>
    </div>
</div>
@endsection

@section('content_page')
<div class="card-body">
    <table id="refunds-ajax-table" class="table table-custom table-centered table-select table-hover w-100 mb-0">
        <thead class="bg-light align-middle bg-opacity-25 thead-sm">
            <tr class="text-uppercase fs-xxs">
                <th class="text-center" style="width: 1%;"></th>
                <th data-table-sort>ID</th>
                <th data-table-sort>Colaborador</th>
                <th data-table-sort>Valor</th>
                <th data-table-sort>Data da Utilização</th>
                <th data-table-sort data-column="status">Status</th>
                <th class="text-center" style="width: 1%;">Ações</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <!-- Data via AJAX -->
        </tbody>
    </table>
</div>
<div class="card-footer border-0">
    <div class="d-flex justify-content-between align-items-center">
        <div id="table-info" class="text-muted"></div>
        <div id="table-pagination"></div>
    </div>
</div>

<!-- Modal: Reprovar Reembolso -->
<div class="modal fade" id="rejectRefundModal" tabindex="-1" aria-labelledby="rejectRefundModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title fw-semibold" id="rejectRefundModalLabel">Motivo da Reprovação</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="reject-refund-id" value="">
                <div class="mb-3">
                    <label for="reject-reason" class="form-label">Descreva o motivo</label>
                    <textarea id="reject-reason" class="form-control" rows="4" placeholder="Informe o motivo da reprovação"></textarea>
                    <div class="invalid-feedback">Informe o motivo da reprovação.</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-danger" id="confirm-reject">Reprovar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- Datatables js -->
<script src="{{ asset('assets/inspinia/plugins/datatables/dataTables.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/datatables/dataTables.bootstrap5.min.js') }}"></script>
<script>
$(document).ready(function () {
    // URLs templates para ações
    var approveUrlTemplate = "{{ route('finance.refunds.approve.ajax', ['id' => ':id']) }}";
    var rejectUrlTemplate = "{{ route('finance.refunds.reject.ajax', ['id' => ':id']) }}";

    var table = $('#refunds-ajax-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('finance.refunds.list.ajax') }}",
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            dataSrc: 'data'
        },
        columns: [
            { data: 'expand', name: 'expand', orderable: false, searchable: false, className: 'details-control align-middle text-center' },
            { data: 'id', name: 'id' },
            { data: 'collaborator_name', name: 'collaborator_name' },
            { data: 'value', name: 'value' },
            { data: 'used_at', name: 'used_at' },
            { data: 'status_html', name: 'status_html' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center' },
            { data: 'timestamp_used_at' }
        ],
        order: [[1, 'desc']],
        pageLength: 10,
        lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
        language: {
            url: '{{ asset('assets/inspinia/plugins/datatables/pt_br.json') }}',
            paginate: {
                first: '<i class="ti ti-chevrons-left"></i>',
                previous: '<i class="ti ti-chevron-left"></i>',
                next: '<i class="ti ti-chevron-right"></i>',
                last: '<i class="ti ti-chevrons-right"></i>'
            },
            processing: '',
        },
        columnDefs: [
            { targets: [7], visible: false, searchable: false },
            { targets: 4, orderData: [7] }
        ],
        drawCallback: function() {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }
    });

    // Pesquisa global
    $('[data-table-search]').on('input', function() {
        table.search(this.value).draw();
    });

    // Filtro por status (coluna 5: 0-based)
    $('[data-table-filter="status"]').on('change', function() {
        table.column(5).search(this.value).draw();
    });

    // Linhas por página
    $('[data-table-set-rows-per-page]').on('change', function() {
        var val = parseInt(this.value, 10) || 10;
        table.page.len(val).draw();
    });

    // Expandir/recolher detalhes
    $('#refunds-ajax-table tbody').on('click', '.toggle-row', function (e) {
        e.preventDefault();

        var $btn = $(this);
        var tr = $btn.closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass('shown');
            $btn.find('i').attr('data-lucide', 'plus');
        } else {
            // Fecha outros
            table.rows().every(function() {
                if (this.child.isShown()) {
                    this.child.hide();
                    $(this.node()).removeClass('shown');
                }
            });
            $('.toggle-row i').attr('data-lucide', 'plus');

            var data = row.data();
            var refundId = $btn.data('id');

            $.ajax({
                url: "{{ route('finance.refunds.details.ajax') }}",
                type: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                data: { refund_id: refundId },
                success: function(response) {
                    var expandedContent = createRefundDetailedInfoBox({
                        id: refundId,
                        collaboratorName: data.collaborator_name || 'Não informado',
                        value: data.value || 'N/A',
                        usedAt: data.used_at || 'N/A',
                        status: data.status || 'Pendente',
                        observation: response.observation || '',
                        detailsUrl: response.detailsUrl || "#",
                        editUrl: "#",
                        reason: response.reason || '',
                        status_html: data.status_html || '',
                    });

                    row.child('<div class="accordion-row" style="padding: 0; width: 100%;">' + expandedContent + '</div>').show();
                    tr.addClass('shown');
                    $btn.find('i').attr('data-lucide', 'minus');
                    lucide.createIcons();
                },
                error: function() {
                    var errorContent = createRefundErrorBox();
                    row.child('<div class="accordion-row" style="padding: 0; width: 100%;">' + errorContent + '</div>').show();
                    tr.addClass('shown');
                    $btn.find('i').attr('data-lucide', 'minus');
                    lucide.createIcons();
                }
            });
        }

        lucide.createIcons();
});

// Aprovar reembolso
$('#refunds-ajax-table tbody').on('click', '.approve-refund', function (e) {
    e.preventDefault();
    var $btn = $(this);
    var refundId = $btn.data('id');
    var url = approveUrlTemplate.replace(':id', refundId);

    Swal.fire({
        icon: 'question',
        title: 'Aprovar reembolso',
        html: `
            <div class="mb-2">Deseja marcar este reembolso como pago?</div>
        `,
        showCancelButton: true,
        confirmButtonText: 'Aprovar',
        cancelButtonText: 'Cancelar',
        buttonsStyling: false,
        customClass: {
            confirmButton: 'btn btn-primary me-2',
            cancelButton: 'btn btn-secondary'
        },
    }).then(function(result) {
        if (!result.isConfirmed) return;

        Swal.fire({
            title: 'Processando...',
            html: '<div class="mt-2">Aguarde enquanto o reembolso é aprovado.</div>',
            allowOutsideClick: false,
            buttonsStyling: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $btn.prop('disabled', true);

        $.ajax({
            url: url,
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function (resp) {
                $btn.prop('disabled', false);
                Swal.close();

                if (resp && resp.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Sucesso',
                        html: (resp.message ? `<div class="mb-2">${resp.message}</div>` : '<div class="mb-2">Reembolso marcado como Pago com sucesso.</div>'),
                        buttonsStyling: false,
                        confirmButtonText: 'Ok',
                        customClass: { confirmButton: 'btn btn-primary' }
                    }).then(function() {
                        $('#refunds-ajax-table').DataTable().ajax.reload(null, false);
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Falha',
                        text: (resp && resp.message) ? resp.message : 'Não foi possível aprovar o reembolso.',
                        buttonsStyling: false,
                        confirmButtonText: 'Ok',
                        customClass: { confirmButton: 'btn btn-danger' }
                    });
                }
            },
            error: function () {
                $btn.prop('disabled', false);
                Swal.close();

                Swal.fire({
                    icon: 'error',
                    title: 'Erro',
                    text: 'Erro ao aprovar o reembolso.',
                    buttonsStyling: false,
                    confirmButtonText: 'Ok',
                    customClass: { confirmButton: 'btn btn-danger' }
                });
            }
        });
    });
});

// Abrir modal para reprovar reembolso
var rejectModal = new bootstrap.Modal(document.getElementById('rejectRefundModal'));
$('#refunds-ajax-table tbody').on('click', '.reject-refund', function (e) {
    e.preventDefault();
    $('#reject-refund-id').val($(this).data('id'));
    $('#reject-reason').val('').removeClass('is-invalid');
    rejectModal.show();
});

// Filtro de status
$('#filter-status').on('change', function() {
    table.column(5).search(this.value).draw();
});

// Limpar todos os filtros
$('#clear-filters').on('click', function() {
    $('#filter-status').val('');
    table.search('').columns().search('').draw();
});

// Confirmar reprovação (envio AJAX)
$('#confirm-reject').on('click', function () {
    var refundId = $('#reject-refund-id').val();
    var reason = $('#reject-reason').val().trim();

    if (!reason) {
        $('#reject-reason').addClass('is-invalid');
        return;
    } else {
        $('#reject-reason').removeClass('is-invalid');
    }

    var url = rejectUrlTemplate.replace(':id', refundId);

    // Exibir estado de processamento no SweetAlert e evitar cliques múltiplos
    $('#confirm-reject').prop('disabled', true).text('Reprovando...');
    Swal.fire({
        title: 'Processando...',
        html: 'Aguarde enquanto reprovamos o reembolso e enviamos o email.<br><small>Isso pode levar alguns segundos.</small>',
        allowOutsideClick: false,
        allowEscapeKey: false,
        showConfirmButton: false,
        didOpen: function () {
            Swal.showLoading();
        }
    });

    $.ajax({
        url: url,
        type: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        data: { reason: reason },
        success: function (resp) {
            // Fechar o loading antes de mostrar o resultado
            Swal.close();
            if (resp && resp.success) {
                rejectModal.hide();
                Swal.fire({
                    icon: 'success',
                    title: 'Sucesso',
                    html: (resp.message ? `<div class="mb-2">${resp.message}</div>` : '<div class="mb-2">Reembolso reprovado com sucesso.</div>'),
                    buttonsStyling: false,
                    confirmButtonText: 'Ok',
                    customClass: { confirmButton: 'btn btn-primary' }
                }).then(function() {
                    $('#refunds-ajax-table').DataTable().ajax.reload(null, false);
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Falha',
                    text: (resp && resp.message) ? resp.message : 'Não foi possível reprovar o reembolso.',
                    buttonsStyling: false,
                    confirmButtonText: 'Ok',
                    customClass: { confirmButton: 'btn btn-danger' }
                });
            }
        },
        error: function () {
            // Fechar o loading antes de mostrar o erro
            Swal.close();
            Swal.fire({
                icon: 'error',
                title: 'Erro',
                text: 'Erro ao reprovar o reembolso.',
                buttonsStyling: false,
                confirmButtonText: 'Ok',
                customClass: { confirmButton: 'btn btn-danger' }
            });
        },
        complete: function () {
            // Reativar o botão (caso o modal não tenha sido fechado)
            $('#confirm-reject').prop('disabled', false).text('Reprovar');
        }
    });
});

function createRefundDetailedInfoBox(options) {
        var defaults = {
            id: '',
            collaboratorName: 'Não informado',
            value: 'R$ 0,00',
            usedAt: 'N/A',
            status: 'Pendente',
            status_html: '',
            observation: '',
            detailsUrl: '#',
            editUrl: '#',
            reason: ''
        };
        var s = Object.assign({}, defaults, options);

        var actionsHtml = `
            <div class="d-flex gap-2">
                <a href="javascript:void(0);" class="btn btn-light btn-icon btn-sm rounded-circle" title="Aprovar">
                    <i data-lucide="check" class="fs-lg"></i>
                </a>
                <a href="javascript:void(0);" class="btn btn-light btn-icon btn-sm rounded-circle" title="Recusar">
                    <i data-lucide="x" class="fs-lg"></i>
                </a>
            </div>
        `;

        return `
            <div class="refund-detailed-info-box w-100">
                <div class="card border-0 mb-0">
                    <div class="card-header bg-light-subtle border-bottom">
                        <div class="d-flex w-100 justify-content-between align-items-center">
                            <h6 class="card-title mb-0 fw-semibold">
                                <i data-lucide="rotate-ccw" class="me-2"></i>
                                Detalhes do Reembolso
                            </h6>
                        </div>
                    </div>
                    <div class="card-body">
                        ${s.status == 'Pendente' ? `<div class="d-block d-md-none mb-3">${actionsHtml}</div>` : ''}
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="p-3 border rounded bg-light h-100">
                                    <div class="d-flex align-items-center mb-2">
                                        <i data-lucide="clipboard-list" class="me-2 text-primary"></i>
                                        <label class="col-form-label fw-bold mb-0">Detalhes</label>
                                    </div>
                                    <div class="mb-2"><strong>Valor:</strong> <span class="ms-1">${s.value}</span></div>
                                    <div class="mb-2"><strong>Data da Utilização:</strong> <span class="ms-1">${s.usedAt}</span></div>
                                    ${s.status == 'Pendente' && s.detailsUrl && s.detailsUrl !== '#' ? `<div class="mb-0"><strong>Comprovante:</strong> <span class="ms-1"><a href="${s.detailsUrl}" target="_blank">Abrir Comprovante</a></span></div>` : ''}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 border rounded bg-light h-100">
                                    <div class="d-flex align-items-center mb-2">
                                        <i data-lucide="sticky-note" class="me-2 text-primary"></i>
                                        <label class="col-form-label fw-bold mb-0">Observação</label>
                                    </div>
                                    ${s.observation ? `<div>${s.observation}</div>` : `<div class="text-muted">Sem observação</div>`}
                                    ${s.reason ? `<br><div><strong>Motivo do cancelamento:</strong> ${s.reason}</div>` : ``}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    function createRefundErrorBox() {
        return `
            <div class="p-3">
                <div class="alert alert-danger mb-0">
                    <i data-lucide="alert-triangle" class="me-2"></i>
                    <small>Não foi possível carregar os detalhes do reembolso.</small>
                </div>
            </div>
        `;
    }
});
</script>
@endpush