@extends('adminlte::page')
@section('title', env('APP_NAME') . ' - Ordenes de despacho')
@section('plugins.Datatables', true)
@section('plugins.Select2', true)
@section('plugins.Sweetalert2', true)
@section('content_header')
    <h1>Lista de Ordenes de Despachos</h1>
@stop

@section('content')

    <div class="acciones mb-2">
        <a href="{{ route('ordenes-de-despacho.create') }}" class="btn btn-primary mb-3">
            <i class="fas fa-plus"></i> Nuevo Orden de Despacho
        </a>
    </div>

    <div class="card">
        <div class="card-header bg-primary text-white">
            <h1 class="card-title"> <i class="fas fa-truck"></i> Lista de Ordenes de Despachos</h1>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="searchDate">Buscar por Fecha:</label>
                    <input type="date" id="searchDate" class="form-control" value="{{ date('Y-m-d') }}">
                </div>
                <div class="col-md-2" style="margin-top: 30px">
                    <button id="filterButton" class="btn btn-primary" >
                        <i class="fas fa-search"></i> Buscar
                    </button >
                    <button id="clearFilterButton" class="btn btn-secondary ml-2" >
                        <i class="fas fa-times"></i> Limpiar
                    </button>
                </div>
            </div>

            <div class="dt-responsive table-responsive ">
                <table id="table-ordenes" class="table  table-bordered table-hover" cellspacing="0"
                       style="width:100% !important">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Cliente</th>
                        <th>Serie Orden</th>
                        <th>Fecha Despacho</th>
                        <th>N. Jabas</th>
                        <th>N. Pollos</th>
                        <th>Peso Bruto</th>
                        <th>Tara</th>
                        <th>Peso Neto</th>
                        <th>Promedio</th>
                        <th>Estado</th>
                        <th>Acciones</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{-- data ajax datatables --}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- Modal Edit Cliente en Ordenes de Despacho-->
    <div class="modal fade" id="modalEditCustomer" role="dialog" aria-labelledby="modalEditCustomerLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form action="{{ route('ordenes-de-despacho.change-customer',':id:') }}" method="POST"
                  id="formEdit">
                @csrf
                <div class="modal-content">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title" id="modalEditCustomerLabel">Modificar cliente</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <h6><strong> <i class="fas fa-user"></i> CLIENTE ACTUAL</strong></h6>
                        <p id="current_customer"></p>
                        <br>
                        <input type="hidden" name="current_cliente_id" id="current_cliente_id">
                        <div class="row">
                            <!-- Select Cliente -->
                            <div class="col-md-12">

                                <div class="form-group">
                                    <label for="cliente_id" class="d-block">NUEVO CLIENTE</label>
                                    <select id="cliente_id" name="cliente_id" class="form-control select2 d-block"
                                            required>
                                        <option value="" disabled selected>Selecciona un cliente</option>
                                        @foreach ($clientes as $cliente)
                                            <option value="{{ $cliente->id }}">{{ $cliente->nombre_comercial }}</option>
                                        @endforeach
                                    </select>
                                    @error('cliente_id')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> Cerrar</button>
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Guardar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal Previsualizar (igual al que sale después de registrar despacho) -->
    <div class="modal fade" id="modalPrevisualizar" tabindex="-1" aria-labelledby="modalPrevisualizarLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-default text-black">
                    <h5 class="modal-title" id="modalPrevisualizarLabel">
                        <i class="fas fa-print mr-2"></i> Previsualizar documento
                    </h5>
                    <button type="button" class="close text-black" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div id="previewPdfContainer" class="border rounded" style="width:100%; height: 500px;">
                                <iframe id="previewPdfViewer" src="" width="100%" height="100%" frameborder="0"></iframe>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">Opciones de Documento</h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-4">
                                        <label class="font-weight-bold mb-2">Tipo de Documento:</label>
                                        <div class="d-grid gap-2">
                                            <a class="btn btn-primary btn-block btnPreviewA4" href="#" target="_blank">
                                                <i class="fas fa-file-pdf mr-2"></i> Formato A4
                                            </a>
                                            <a class="btn btn-secondary btn-block btnPreviewTicket" href="#" target="_blank">
                                                <i class="fas fa-receipt mr-2"></i> Formato Ticket
                                            </a>
                                            <a class="btn btn-info btn-block btnPreviewPublic" href="#" target="_blank">
                                                <i class="fas fa-share-alt mr-2"></i> Versión Pública
                                            </a>
                                            <button type="button" id="btnPreviewDescargar" class="btn btn-success btn-block">
                                                <i class="fas fa-download mr-2"></i> Descargar
                                            </button>
                                        </div>
                                    </div>
                                    <div class="mb-4">
                                        <label class="font-weight-bold mb-2">Compartir por WhatsApp:</label>
                                        <div class="input-group mb-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">+51</span>
                                            </div>
                                            <input id="previewWhatsappNumber" type="text" class="form-control" placeholder="Número de teléfono" autocomplete="off" />
                                        </div>
                                        <div class="form-group mb-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="previewWhatsappType" id="previewWhatsappWeb" value="web" checked>
                                                <label class="form-check-label" for="previewWhatsappWeb"><i class="fas fa-globe mr-1"></i> WhatsApp Web</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="previewWhatsappType" id="previewWhatsappApp" value="app">
                                                <label class="form-check-label" for="previewWhatsappApp"><i class="fab fa-whatsapp mr-1"></i> WhatsApp App</label>
                                            </div>
                                        </div>
                                        <button type="button" id="btnPreviewWhatsapp" class="btn btn-success btn-block">
                                            <i class="fab fa-whatsapp mr-2"></i> Enviar a WhatsApp
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times mr-2"></i> Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
@include('partials.data_export_css')
    <style>
        .select2-selection {
            height: 40px !important;
        }

        .select2-container {
            width: 100% !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            top: 5px !important;
        }
    </style>
@stop
@section('js')
@include('partials.data_export_js')
    <script>
        const base_url = "{{ route('ordenes-de-despacho.index') }}";
        $(document).ready(function () {
            $('.select2').select2();

            const tableOrders = $('#table-ordenes').DataTable({
                processing: true,
                serverSide: true,
                ajax: base_url, // Ruta para cargar los datos via AJAX
                columns: [
                    {data: 'id', name: 'id', orderable: false, searchable: false},
                    {data: 'cliente.razon_social', name: 'cliente.razon_social'},
                    {data: 'serie_orden', name: 'serie_orden'},
                    {data: 'fecha_despacho', name: 'fecha_despacho'},
                    {data: 'cantidad_jabas', name: 'cantidad_jabas'},
                    {data: 'cantidad_pollos', name: 'cantidad_pollos'},
                    {data: 'peso_total_bruto', name: 'peso_total_bruto'},
                    {data: 'tara', name: 'tara'},
                    {data: 'peso_total_neto', name: 'peso_total_neto'},
                    {data: 'promedio', name: 'promedio', orderable: false, searchable: false},
                    {data: 'estado', name: 'estado', orderable: false, searchable: false}, // Estado con badge
                    {data: 'acciones', name: 'acciones', orderable: false, searchable: false} // Acciones
                ],
                "pageLength": 10,
                order: [[0, 'desc']], // Ordenar por la primera columna (por id, en este caso) de forma descendente,
                dom: `<'row'
						<'col-md-7'l>
					<'col-md-5'f>
				>
				<'row '<'col-sm-12 col-12 col-md-12'tr>>
				<'row '<'col-sm-12 col-12 col-md-5 text-overflowp-2'i>
						<'col-sm-12 col-12  col-md-7 p-2'p>
				>`,
                iDisplayLength: 10,
                language: {
                    "url": "/js/spanish.json"
                },
            });

            // Maneja el clic en el botón de eliminación
            $(document).on('click', '.delete-button', function () {
                const id = $(this).data('id'); // Obtener el ID del registro

                // Mostrar alerta de confirmación
                Swal.fire({
                    title: '¿Estás seguro?',
                    text: "¡No podrás revertir esto!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí, eliminar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Si el usuario confirma, enviar solicitud AJAX para eliminar el registro
                        $.ajax({
                            url: `/ordenes-de-despacho/${id}`,
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                    'content') // Incluye el token CSRF
                            },
                            success: function (response) {
                                Swal.fire(
                                    'Eliminado!',
                                    'El registro ha sido eliminado.',
                                    'success'
                                ).then(() => {
                                    // Eliminar la fila de la tabla
                                    $(`button[data-id="${id}"]`).closest('tr')
                                        .remove();
                                });
                            },
                            error: function (xhr) {
                                Swal.fire(
                                    'Error!',
                                    'No se pudo eliminar el registro.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            });


            $('#filterButton').on('click', function () {
                const selectedDate = $('#searchDate').val();

                if (!selectedDate) {
                    Swal.fire({
                        title: 'No se puede buscar sin fecha',
                        text: 'Por favor, seleccione una fecha',
                        icon: 'warning',
                        timer: 3000,
                        showConfirmButton: false
                    });
                    return;
                }

                tableOrders.ajax.url(base_url + "?date=" + selectedDate);
                tableOrders.draw();
            });

            // Limpiar filtro
            $('#clearFilterButton').on('click', function(e) {
                e.preventDefault();
                $('#searchDate').val(''); // Limpiar el campo de fecha
                tableOrders.ajax.url(base_url); // Volver a la URL original sin filtros
                tableOrders.draw(); // Redibujar la tabla
            });


            // Manejar clic en el botón de Editar
            $(document).on('click', '.changeCustomerBtn', function () {
                const id = $(this).data('id');
                const customer = $(this).data('customer');
                const url = $('#formEdit').attr('action');
                $('#formEdit').attr('action', url.replaceAll(':id:', id))
                $('#current_cliente_id').val(customer.id);
                $('#current_customer').text(customer.razon_social);
                $('#modalEditCustomer').modal('show');
            });

            var previewPdfUrlDespacho = '';
            var previewNombreClienteDespacho = '';

            // Previsualizar: abre el mismo modal que después de registrar un despacho
            $(document).on('click', '.previsualizarBtn', function (e) {
                e.preventDefault();
                var urlPdf = $(this).data('url-pdf');
                var urlTicket = $(this).data('url-ticket');
                var urlPublic = $(this).data('url-public');
                var celular = $(this).data('celular') || '';
                var nombreCliente = $(this).data('nombre-cliente') || 'despacho';
                previewPdfUrlDespacho = urlPdf;
                previewNombreClienteDespacho = nombreCliente;
                $('#previewPdfViewer').attr('src', urlPdf);
                $('.btnPreviewA4').attr('href', urlPdf);
                $('.btnPreviewTicket').attr('href', urlTicket);
                $('.btnPreviewPublic').attr('href', urlPublic);
                $('#previewWhatsappNumber').val(celular);
                $('#modalPrevisualizar').modal('show');
            });

            $('#modalPrevisualizar').on('shown.bs.modal', function () {
                $(this).find('.modal-body').css('max-height', 'calc(100vh - 210px)').css('overflow-y', 'auto');
            });

            $('#btnPreviewDescargar').on('click', function () {
                if (!previewPdfUrlDespacho) return;
                var btn = $(this);
                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm mr-2"></span> Descargando...');
                var now = new Date();
                var dateStr = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0') + '-' + String(now.getHours()).padStart(2, '0') + String(now.getMinutes()).padStart(2, '0') + String(now.getSeconds()).padStart(2, '0');
                var filename = previewNombreClienteDespacho + '-despacho-' + dateStr + '.pdf';
                fetch(previewPdfUrlDespacho, { credentials: 'include' })
                    .then(function (res) { return res.blob(); })
                    .then(function (blob) {
                        var a = document.createElement('a');
                        a.href = window.URL.createObjectURL(blob);
                        a.download = filename;
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                        window.URL.revokeObjectURL(a.href);
                    })
                    .catch(function () { alert('No se pudo descargar el PDF.'); })
                    .finally(function () {
                        btn.prop('disabled', false).html('<i class="fas fa-download mr-2"></i> Descargar');
                    });
            });

            $('#btnPreviewWhatsapp').on('click', function () {
                var number = $('#previewWhatsappNumber').val().trim();
                if (!number) {
                    alert('Por favor, ingrese un número de teléfono.');
                    return;
                }
                if (!number.startsWith('51')) number = '51' + number;
                var urlPdf = $('.btnPreviewPublic').attr('href');
                var message = 'Descarga tu documento en PDF: ' + urlPdf;
                var type = $('input[name="previewWhatsappType"]:checked').val();
                var whatsappUrl = type === 'web'
                    ? 'https://web.whatsapp.com/send?phone=' + number + '&text=' + encodeURIComponent(message)
                    : 'https://wa.me/' + number + '?text=' + encodeURIComponent(message);
                window.open(whatsappUrl, '_blank');
            });
        });
    </script>


    <script>
        function confirmDelete(userId) {
            Swal.fire({
                title: '¿Estás seguro?',
                text: "¡Ingrese el motivo de eliminación, no podrás revertir esto!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, eliminarlo!',
                cancelButtonText: 'Cancelar',
                input: "text",
                inputLabel: 'Motivo de eliminación',
                inputPlaceholder: 'Ingrese el motivo de la eliminación...',
                inputAttributes: {
                    autocapitalize: "off",
                    placeholder: "Ingrese el motivo de la eliminación, max 10 caracteres"
                },
                inputValidator: (value) => {
                    if (!value) {
                        return 'Debe ingresar un motivo de eliminación';
                    }
                    if (value.length < 10) {
                        return 'El motivo debe tener al menos 10 caracteres';
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    // Realizar la solicitud AJAX para eliminar el usuario
                    $.ajax({
                        url: '{{ url('ordenes-de-despacho') }}/' + userId,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}',
                            'motivo_eliminacion' : result.value
                        },
                        success: function (response) {
                            // Verificar si la respuesta indica éxito o error
                            if (response.success === false) {
                                // Es un error del backend
                                Swal.fire(
                                    'Error!',
                                    response.message || 'No se pudo eliminar la orden de despacho',
                                    'error'
                                );
                            } else {
                                // Es un éxito
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Eliminado!',
                                    text: 'Orden despacho eliminado con éxito',
                                    timer: 3000,
                                    showConfirmButton: false
                                }).then(function () {
                                    location.reload(); // Recargar la página para ver el nuevo usuario
                                });
                            }
                        },
                        error: function (xhr) {
                            let errorMessage = 'No se pudo eliminar la orden de despacho';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMessage = xhr.responseJSON.message;
                            }
                            Swal.fire(
                                'Error!',
                                errorMessage,
                                'error'
                            );
                        }
                    });
                }
            });
        }
    </script>
    @if(session()->has('success'))
        <script>
            Swal.fire('Mensaje informativo', '{{session()->get('success')}}', 'success');
        </script>
    @endif
    @if(session()->has('info'))
        <script>
            Swal.fire('Mensaje informativo', '{{session()->get('info')}}', 'info');
        </script>
    @endif
    @if(session()->has('error'))
        <script>
            Swal.fire('Mensaje', '{{session()->get('error')}}', 'error');
        </script>
    @endif
@stop