@extends('template_pages.session')

@section('page_title', 'Pagamentos Despesas - Interno')
@section('page_icon', 'banknote-arrow-up')
@section('navbar', 'finance.navbar')

@push('styles')
<!-- Filepond Plugin CSS -->
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/filepond/filepond.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/filepond/filepond-plugin-image-preview.min.css') }}">
<!-- Dropzone Plugin CSS -->
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/dropzone/dropzone.css') }}" type="text/css">
@endpush

@section('content_page')
<div class="card">
    <div class="card-header">
        <div class="flex-grow-1">
            <h4 class="card-title">Pagamento Despesa - Interno</h4>
        </div>
    </div>

    <div class="card-body">
        <div class="ins-wizard" data-wizard>
            <!-- Navigation Tabs -->
            <ul class="nav nav-tabs wizard-tabs" data-wizard-nav role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#stepUpload">
                        <span class="d-flex align-items-center">
                            <i data-lucide="upload" class="fs-24"></i>
                            <span class="flex-grow-1 ms-2 text-truncate">
                                <span class="mb-0 lh-base d-block fw-semibold text-body fs-base">Upload de Arquivos</span>
                            </span>
                        </span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link disabled" data-bs-toggle="tab" href="#stepInfo">
                        <span class="d-flex align-items-center">
                            <i data-lucide="list-check" class="fs-24"></i>
                            <span class="flex-grow-1 ms-2 text-truncate">
                                <span class="mb-0 lh-base d-block fw-semibold text-body fs-base">Informações de pagamento</span>
                            </span>
                        </span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link disabled" data-bs-toggle="tab" href="#stepEnd">
                        <span class="d-flex align-items-center">
                            <i data-lucide="banknote-arrow-up" class="fs-24"></i>
                            <span class="flex-grow-1 ms-2 text-truncate">
                                <span class="mb-0 lh-base d-block fw-semibold text-body fs-base">Pagamento</span>
                            </span>
                        </span>
                    </a>
                </li>
            </ul>

            <!-- Content -->
            <div class="tab-content pt-3" data-wizard-content>
                <!-- Step 1 -->
                <div class="tab-pane fade show active" id="stepUpload">
                    <div class="row">
                        <div class="col">
                            <form action="#" method="post" class="dropzone" id="fileDropzone" data-previews-container="#file-previews" data-upload-preview-template="#uploadPreviewTemplate">
                                <input type="hidden" id="csrf_token" value="{{ csrf_token() }}">
                                <div class="dz-message needsclick">
                                    <div class="avatar-lg mx-auto mb-2">
                                        <span class="avatar-title bg-info-subtle text-info rounded-circle">
                                            <i class="ti ti-upload fs-24"></i>
                                        </span>
                                    </div>
                                    <h4 class="fs-base">Arraste e solte arquivos aqui ou clique para fazer upload</h4>
                                </div>
                            </form>
                            <div id="uploadError" class="text-danger mt-3" style="display:none">Anexe pelo menos um arquivo.</div>
                            <!-- Preview -->
                            <div class="dropzone-previews" id="file-previews"></div>
                            <!-- file preview template -->
                            <div class="d-none" id="uploadPreviewTemplate">
                                <div class="card mt-1 mb-0 border-dashed border">
                                    <div class="p-2">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <img data-dz-thumbnail src="#" class="avatar-sm rounded bg-light d-none" alt="">
                                                <span class="avatar-sm rounded bg-light d-flex align-items-center justify-content-center" data-dz-icon>
                                                    <i data-lucide="file" class="fs-24 text-body"></i>
                                                </span>
                                            </div>
                                            <div class="col ps-0">
                                                <a href="javascript:void(0);" class="fw-semibold" data-dz-name></a>
                                                <p class="mb-0 text-muted" data-dz-size></p>
                                            </div>
                                            <div class="col-auto">
                                                <!-- Button -->
                                                <a href="" class="btn btn-link btn-lg text-danger" data-dz-remove>
                                                    <i class="ti ti-x"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-wrap gap-2 mt-3">
                        <button type="button" class="btn btn-primary" data-wizard-next>Informações de pagamento <i data-lucide="chevron-right" class="ti ti-hand-stop align-middle md-1 fs-xl"></i></button>
                    </div>
                </div>

                <!-- Step 2 -->
                <div class="tab-pane fade" id="stepInfo">
                    <div class="row">
                        <div class="col">
                            <table id="expenses-payment-table" class="table table-striped table-hover align-middle mb-0">
                                <thead class="bg-light align-middle bg-opacity-25 thead-sm">
                                    <tr class="text-uppercase fs-xxs">
                                        <th style="width: 1%;"></th>
                                        <th style="width: 10%;">Arquivo</th>
                                        <th style="width: 25%;">COD</th>
                                        <th style="width: 10%;">Valor Total</th>
                                        <th style="width: 15%;">Beneficiário</th>
                                        <th style="width: 15%;">Emissor</th>
                                        <th style="width: 8%;">Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Os dados serão carregados via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="d-flex mt-3">
                        <button type="button" class="btn btn-success" data-wizard-next>Efetuar Pagamento</button>
                    </div>
                </div>

                <!-- Step 3 -->
                <div class="tab-pane fade" id="stepEnd">
                    <div class="row">

                    </div>
                </div>
            </div> <!-- tab-content -->
        </div> <!-- ins-wizard -->
    </div>
</div> <!-- end card-->
@endsection

@push('scripts')
<!-- Dropzone Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/dropzone/dropzone-min.js') }}"></script>
<!-- Bar Code Scanner Js -->
<script src="{{ asset('assets/scripts/zxing.min.js') }}" type="text/javascript"></script>
<!-- Wizard Form Demo js -->
<script src="{{ asset('assets/inspinia/js/pages/form-wizard.js') }}"></script>
<!-- Filepond Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/filepond/filepond.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/filepond/filepond-plugin-image-preview.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/filepond/filepond-plugin-file-validate-size.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/filepond/filepond-plugin-image-exif-orientation.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/filepond/filepond-plugin-file-encode.min.js') }}"></script>
<!-- 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 src="{{ asset('assets/scripts/ui-components.js') }}"></script>

<script>
const hints = new Map();
hints.set(ZXing.DecodeHintType.POSSIBLE_FORMATS, [
    ZXing.BarcodeFormat.CODE_128,
    ZXing.BarcodeFormat.EAN_13,
    ZXing.BarcodeFormat.EAN_8,
    ZXing.BarcodeFormat.CODE_39,
    ZXing.BarcodeFormat.CODE_93,
    ZXing.BarcodeFormat.ITF,
    ZXing.BarcodeFormat.CODABAR,
    ZXing.BarcodeFormat.UPC_A,
    ZXing.BarcodeFormat.UPC_E,
]);
hints.set(ZXing.DecodeHintType.TRY_HARDER, true);

const codeReader = new ZXing.BrowserMultiFormatReader(hints);

function scanFileBarcode(file) {
    if (file.type && !file.type.startsWith('image/')) {
        alert(`Arquivo ${file.name} erro ao tentar ler código de barras.`);
        return;
    }

    const img = new Image();
    img.src = URL.createObjectURL(file);

    img.onload = () => {
        codeReader.decodeFromImageElement(img)
            .then(result => {
                alert(`Arquivo ${file.name} tem código de barra: ${result.text}`);
            })
            .catch(err => {
                alert(`Arquivo ${file.name} erro ao tentar ler código de barras.`);
            });
    };
    img.onerror = () => {
            alert(`Arquivo ${file.name} erro ao tentar ler código de barras.`);
    };
}

$(function() {

    var stepInfoTab = $('a[data-bs-toggle="tab"][href="#stepInfo"]');

    // Configuração do Dropzone
    var ACCEPT = 'image/jpeg,image/png,application/pdf,.jpg,.jpeg,.png,.pdf';
    var ALLOWED_MIME = ['image/jpeg','image/png','application/pdf'];
    var ALLOWED_EXT = ['.jpg','.jpeg','.png','.pdf'];
    function isAllowed(file) {
        var t = (file && file.type ? file.type : '').toLowerCase();
        var n = (file && file.name ? file.name : '').toLowerCase();
        if (ALLOWED_MIME.indexOf(t) !== -1) return true;
        for (var i = 0; i < ALLOWED_EXT.length; i++) {
            if (n.endsWith(ALLOWED_EXT[i])) return true;
        }
        return false;
    }
    function acceptFn(file, done) {
        if (isAllowed(file)) return done();
        return done('Formato de arquivo não permitido. Aceitos: JPG, JPEG, PNG, PDF.');
    }

    if (window.Dropzone) { Dropzone.autoDiscover = false; }
    var dz;
    try { dz = Dropzone.forElement('#fileDropzone'); } catch (e) {}
    if (!dz) {
        dz = new Dropzone('#fileDropzone', {
            url: '#',
            autoProcessQueue: false,
            previewsContainer: '#file-previews',
            previewTemplate: $('#uploadPreviewTemplate').html(),
            acceptedFiles: ACCEPT,
            accept: acceptFn,
            dictInvalidFileType: 'Formato de arquivo não permitido. Aceitos: JPG, JPEG, PNG, PDF.'
        });
    } else {
        dz.options.acceptedFiles = ACCEPT;
        dz.options.accept = acceptFn;
        dz.options.dictInvalidFileType = 'Formato de arquivo não permitido. Aceitos: JPG, JPEG, PNG, PDF.';
        dz.options.autoProcessQueue = false;
        dz.options.previewsContainer = '#file-previews';
        dz.options.previewTemplate = $('#uploadPreviewTemplate').html();
    }
    if (dz && dz.hiddenFileInput) {
        dz.hiddenFileInput.setAttribute('accept', ACCEPT);
    }

    var previewsEl = $('#file-previews');
    function updatePreviewsVisibility() {
        if (!previewsEl || !previewsEl.length) return;
        var files = dz && dz.files ? dz.files : [];
        var has = files.length > 0;
        previewsEl.toggleClass('d-none', !has);
        if (has && uploadError && uploadError.length) uploadError.hide();
    }
    updatePreviewsVisibility();
    if (dz && typeof dz.on === 'function') {
        dz.on('addedfile', function(file) {
            if (!isAllowed(file)) {
                dz.removeFile(file);
                if (uploadError && uploadError.length) {
                    uploadError.show();
                    uploadError.text('Formato de arquivo não permitido. Aceitos: JPG, JPEG, PNG, PDF.');
                }
                return;
            }
            if (previewsEl && previewsEl.length) { previewsEl.removeClass('d-none'); }
            updatePreviewsVisibility();
            var isImage = file && file.type && file.type.indexOf('image') === 0;
            var $preview = $(file.previewElement);
            if ($preview && $preview.length) {
                var $imgEl = $preview.find('[data-dz-thumbnail]');
                var $iconEl = $preview.find('[data-dz-icon]');
                if (isImage) {
                    $imgEl.removeClass('d-none');
                    $iconEl.addClass('d-none');
                } else {
                    $imgEl.addClass('d-none');
                    $iconEl.removeClass('d-none');
                }
            }

            // Tenta ler o código de barras do arquivo
            scanFileBarcode(file);
        });
        dz.on('removedfile', function() {
            updatePreviewsVisibility();
        });
    }

    var uploadNextBtn = $('#stepUpload [data-wizard-next]');
    var uploadError = $('#uploadError');

    function startLoading() {
        if (uploadNextBtn && uploadNextBtn.length) {
            uploadNextBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2" role="status"></span>Lendo arquivos...');
        }
        if (dz && typeof dz.disable === 'function') { dz.disable(); }
    }
    function finishLoading() {
        if (uploadNextBtn && uploadNextBtn.length) {
            uploadNextBtn.prop('disabled', false).html('Informações de pagamento <i data-lucide="chevron-right" class="ti ti-hand-stop align-middle md-1 fs-xl"></i>');
        }
        if (dz && typeof dz.enable === 'function') { dz.enable(); }
    }

    function hasFiles() {
        var files = dz && typeof dz.getAcceptedFiles === 'function' ? dz.getAcceptedFiles() : (dz.files || []);
        return files && files.length > 0;
    }

    if (uploadNextBtn && uploadNextBtn.length) {
        uploadNextBtn.on('click', function(e) {
            if (!hasFiles()) {
                e.preventDefault();
                e.stopPropagation();
                if (typeof e.stopImmediatePropagation === 'function') e.stopImmediatePropagation();
                if (uploadError && uploadError.length) {
                    uploadError.show();
                    uploadError.text('Anexe pelo menos um arquivo.');
                }
                return;
            }
            if (uploadError && uploadError.length) uploadError.hide();

            startLoading();
        });
    }
});
</script>
@endpush