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

@section('content')

    <div class="card">
        <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">
                </div>
                <div class="col-md-1">
                    <button id="filterButton" class="btn btn-primary" style="margin-top: 2.3rem;">Buscar</button>
                </div>
            </div>

            <div class="dt-responsive table-responsive ">
                <table id="table-ordenes" class="table  table-no-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>Estado</th>
                        <th>Acciones</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{-- data ajax datatables --}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <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">
                        <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> 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">Cerrar</button>
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@stop

@section('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')

    <script>
        const base_url = "{{ route('ordenes-de-despacho.index') }}";
        $(document).ready(function () {
            $('.select2').select2();

            var 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: '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();
                tableOrders.ajax.url(base_url + "?date=" + selectedDate);
                tableOrders.draw();
            });


            // 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');
            });
        });
    </script>


    <script>
        function confirmDelete(userId) {
            Swal.fire({
                title: '¿Estás seguro?',
                text: "¡No podrás revertir esto!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, eliminarlo!',
                cancelButtonText: 'Cancelar'
            }).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() }}'
                        },
                        success: function (response) {
                            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) {
                            Swal.fire(
                                'Error!',
                                'No se pudo eliminar la orden de despacho',
                                '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