@extends('layouts.app')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
@endsection
@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-xxl-11 col-xl-11 col-lg-11 col-md-12 col-12">
            <div class="card border border-0 shadow-sm">
                <div class="card-header bg-white border-0 pb-0">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                        <h4 class="fw-bold mt-2">Listado de Ordenes</h4>
                    </div>
                </div>
                <div class="card-body bg-white pt-0">
                    <table id="orders" class="display responsive nowrap">
                        <thead class="table-light">
                            <tr class="text-center">
                                <th scope="col" class="text-center">Folio</th>
                                <th scope="col" class="text-center">Cliente</th>
                                <th scope="col" class="text-center">Total</th>
                                <th scope="col" class="text-center">Estatus</th>
                                <th scope="col" class="text-center">Fecha</th>
                                <th scope="col" class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody class="text-center">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
    <script src="https://cdn.datatables.net/v/bs5/dt-2.1.4/af-2.7.0/b-3.1.1/b-colvis-3.1.1/b-print-3.1.1/cr-2.0.4/date-1.5.3/fc-5.0.1/fh-4.0.1/kt-2.12.1/r-3.0.2/rg-1.5.0/rr-1.5.0/sc-2.4.3/sb-1.8.0/sp-2.3.2/sl-2.0.5/sr-1.4.1/datatables.min.js"></script>
    @vite(['resources/js/CustomerSupport/Orders/List/app.js'])
    <script type="module">
        List.init(
            'orders',
            {{ Js::from($orders) }},
            {
                status: {{ Js::from(\App\Enums\OrderStatusEnum::fullCatalog(true)) }}
            });
    </script>

    <script>
    function confirmDelete(button) {
        Swal.fire({
            title: '¿Estás seguro?',
            text: "Esta acción no se puede deshacer.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                // Si el usuario confirma, envía el formulario
                button.closest('form').submit();
            }
        });
    }
    </script>

    @if (session('message'))
        <script>
            Swal.fire({
                position: "center",
                icon: "{{ session('icon') }}",
                title: "{{ session('message') }}",
                showConfirmButton: false,
                timer: 2000,
            });
        </script>
    @endif

@endsection