@extends('adminlte::page')

@section('title', 'Ordenes de despacho')
@section('plugins.Datatables', 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>



            <table class="table table-bordered" id="table-ordenes">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Cliente</th>
                        <th>Serie Orden</th>
                        <th>Fecha Despacho</th>
                        <th>Peso Total Bruto</th>
                        <th>Cantidad Jabas</th>
                        <th>Tara</th>
                        <th>Peso Total Neto</th>
                        <th>Estado</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($ordenes as $orden)
                        <tr>
                            <td>{{ $orden->id }}</td>
                            <td>{{ $orden->cliente->razon_social }}</td>
                            <td>{{ $orden->serie_orden }}</td>
                            <td>{{ \Carbon\Carbon::parse($orden->fecha_despacho)->format('d/m/Y') }}</td>
                            <td>{{ number_format($orden->peso_total_bruto, 2) }}</td>
                            <td>{{ $orden->cantidad_jabas }}</td>
                            <td>{{ number_format($orden->tara, 2) }}</td>
                            <td>{{ number_format($orden->peso_total_neto, 2) }}</td>
                            <td>
                                @if ($orden->estado_despacho)
                                    <span class="badge badge-success">Despachado</span>
                                @else
                                    <span class="badge badge-warning">Por Despachar</span>
                                @endif
                            </td>

                            <td>
                                <!-- Example single danger button -->
                                <div class="btn-group">
                                    <button type="button" class="btn btn-danger btn-sm dropdown-toggle"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Acciones
                                    </button>
                                    <div class="dropdown-menu">
                                        <!-- Aquí puedes añadir botones para ver, editar o eliminar -->
                                        <a class="dropdown-item"
                                            href="{{ route('ordenes-de-despacho.show', $orden->id) }}">Ver</a>

                                        {{-- <a href="{{ route('ordenes-de-despacho.edit', $orden->id) }}" class="dropdown-item">Editar</a> --}}

                                        @if (!$orden->ventas->isNotEmpty())
                                            <a class="dropdown-item"
                                                href="{{ route('ordenes-de-despacho.venta', ['id' => $orden->id]) }}">
                                                Generar venta </a>
                                        @endif


                                        <a class="dropdown-item"
                                            href="{{ route('ordenes-de-despacho.print', ['id' => $orden->id, 'format' => 'a4']) }}"
                                            target="_Blank"> PDF </a>

                                        <form id="delete-form-{{ $orden->id }}"
                                            action="{{ route('ordenes-de-despacho.destroy', $orden) }}" method="POST"
                                            style="display: inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" class="dropdown-item"
                                                onclick="confirmDelete({{ $orden->id }})">Eliminar</button>
                                        </form>


                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

        </div>
    </div>



@stop

@section('css')
    {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>

    <script>
        $(document).ready(function() {

            var table = $('#table-ordenes').DataTable({
                "columnDefs": [{
                    "targets": 3, // La columna de fecha
                    "render": function(data, type, row) {
                        return data; // No hacer formato de fecha por ahora
                    }
                }],
                "pageLength": 25,
                "order": [
                    [0, 'desc']
                ] // Ordenar la columna 0 de forma ascendente
            });


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

            // Filtrar cuando se hace clic en el botón de búsqueda
            $('#filterButton').on('click', function() {
                var selectedDate = $('#searchDate').val();

                if (selectedDate) {
                    var formattedDate = moment(selectedDate).format('DD/MM/YYYY');
                    table.column(3).search('^' + formattedDate + '$', true, false).draw();
                } else {
                    table.column(3).search('').draw();
                }
            });


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

@stop