@extends('layouts.master')
@section('title')
    @lang('Pedidos')
@endsection
@section('css')
    <link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Seporven Administrativo
        @endslot
        @slot('title')
            Pedidos de Ventas
        @endslot
    @endcomponent
    {{-- @php
        dd($data);
    @endphp --}}

    <div class="row">
        <div class="col-lg-12">
            <div class="card" id="orderList">
                <div class="card-header border-0">
                    <div class="row align-items-center gy-3">
                        <div class="col-sm">
                            <h5 class="card-title mb-0">Listado de Pedidos</h5>
                        </div>
                    </div>
                </div>
                <div class="card-body border border-dashed border-end-0 border-start-0">
                    <form>
                        <div class="row g-3">
                            <div class="col-xxl-5 col-sm-6">
                                <div class="search-box">
                                    <input type="text" class="form-control search" placeholder="Buscar por ID, Cliente, estatus de pedido, monta o zona...">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-xxl-2 col-sm-6">
                                <div>
                                    <input type="text" id="demo-datepicker" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" placeholder="Seleccione rango de fechas">
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-xxl-1 col-sm-4 d-none" id="btn-reset-date"> 
                                <div>
                                    <button type="button" class="btn btn-primary w-100" onclick="clearDateFilter();" >
                                        Limpiar Fecha
                                    </button> 
                                </div>
                            </div>
                            <div class="col-xxl-2 col-sm-4">
                                <div>
                                    <select class="form-control" name="choices-single-default" id="idVendor">
                                        <option value="all" selected>Todos los Vendedores</option>
                                        </select>
                                </div>
                            </div>
                        </div>
                        <!--end row-->
                    </form>
                </div>
                <div class="card-body pt-0">
                    <div>
                        <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active Allpy" data-bs-toggle="tab" id="All" href="#home1" role="tab" aria-selected="true" data-status="all">
                                    <i class="ri-store-2-fill me-1 align-bottom"></i> Todos los Pedidos
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link Pendingpy" data-bs-toggle="tab" id="Pending" href="#delivered" role="tab" data-status="1">
                                    <i class="ri-checkbox-circle-line me-1 align-bottom"></i> Pendientes
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link Approvedpy" data-bs-toggle="tab" id="Approved" href="#pickups" role="tab" aria-selected="false" data-status="2">
                                    <i class="ri-truck-line me-1 align-bottom"></i> Aprobados
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link Billedpy" data-bs-toggle="tab" id="Billed" href="#returns" role="tab" aria-selected="false" data-status="3">
                                    <i class="ri-arrow-left-right-fill me-1 align-bottom"></i> Facturados
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link Rejectedpy" data-bs-toggle="tab" id="Rejected" href="#cancelled" role="tab" aria-selected="false" data-status="4">
                                    <i class="ri-close-circle-line me-1 align-bottom"></i> Rechazados
                                </a>
                            </li>
                        </ul>

                        <div class="table-responsive table-card mb-1" id="orderList">

                                <table class="table align-middle table-nowrap">
                                    <thead class="table-light">
                                        <tr>
                                            <th class="sort" data-sort="id">Serial de Pedido</th>
                                            <th class="sort" data-sort="customer_name">Cliente</th>
                                            <th class="sort" data-sort="order_zone">Zona</th>
                                            <th class="sort" data-sort="date">Fecha</th>
                                            <th class="sort" data-sort="amount">Monto</th>
                                            <th class="sort" data-sort="vendor">Vendedor</th>
                                            <th class="sort" data-sort="status">Estatus</th>
                                            <th>Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody class="list form-check-all">
                                        <tr>
                                            <td class="id"></td>
                                            <td class="customer_name"></td>
                                            <td class="order_zone"></td>
                                            <td class="date"></td>
                                            <td class="amount"></td>
                                            <td class="vendor"></td>
                                            <td class="status"></td>
                                            <td class="action"></td>
                                        </tr>
                                    </tbody>
                                </table>


                            <div class="noresult" style="display: none">
                                <div class="text-center">
                                    <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px">
                                    </lord-icon>
                                    <h5 class="mt-2">Sorry! No Result Found</h5>
                                    <p class="text-muted">We've searched more than 150+ Orders We did
                                        not find any
                                        orders for you search.</p>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <div class="pagination-wrap hstack gap-2">
                                <a class="page-item pagination-prev disabled" href="#">
                                    Anterior
                                </a>
                                <ul class="pagination listjs-pagination mb-0"></ul>
                                <a class="page-item pagination-next" href="#">
                                    Siguiente
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
        <!--end col-->
    </div>
<!--end row-->

<!-- MODAL DE VER Y CAMBIO DE ESTATUS -->
<div class="modal fade" id="viewOrderModal" tabindex="-1" aria-labelledby="viewOrderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewOrderModalLabel">Detalle del Pedido #<span id="modal-order-id"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-6">
                        <h6>Cliente:</h6>
                        <p id="modal-client-name" class="text-muted"></p>
                        <h6>RIF:</h6>
                        <p id="modal-client-rif" class="text-muted"></p>
                    </div>
                    <div class="col-6 text-end">
                        <h6>Fecha de Emisión:</h6>
                        <p id="modal-issue-date" class="text-muted"></p>
                        <h6>Estatus Actual:</h6>
                        <div id="modal-status-badge"></div>
                    </div>
                </div>
                <hr>
                <h6>Dirección de Entrega:</h6>
                <p id="modal-delivery-address" class="text-muted"></p>
                
                <div class="row mb-3">
                    <div class="col-12">
                        <h6>Descripción del Pedido:</h6>
                        <textarea id="modal-order-description" class="form-control" rows="2" placeholder="Ingrese una descripción o nota para el pedido..."></textarea>
                    </div>
                </div>

                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Producto</th>
                            <th>Cant.</th>
                            <th>Precio Unit.</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody id="modal-products-body"></tbody>
                </table>

                <div class="text-end">
                    <h5>Total: <span id="modal-total-amount"></span></h5>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="updateOrderStatus(2)">Aprobar</button>
                <button type="button" class="btn btn-danger" onclick="updateOrderStatus(4)">Rechazar</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div> 

<!-- MODAL DE EDICION -->
<div class="modal fade" id="editProductsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl"> <div class="modal-content">
            <div class="modal-header bg-light p-3">
                <h5 class="modal-title">Detalle y Edición de Pedido: <span id="edit-order-serial" class="text-primary"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3 pb-3 border-bottom">
                    <div class="col-md-6">
                        <p class="text-muted mb-1">CLIENTE</p>
                        <h6 id="edit-client-name" class="fw-bold"></h6>
                        <p class="text-muted mb-0">RIF: <span id="edit-client-rif"></span></p>
                    </div>
                    <div class="col-md-6 text-md-end">
                        <p class="text-muted mb-1">VENDEDOR</p>
                        <h6 id="edit-seller-name" class="fw-bold"></h6>
                        <p class="text-muted mb-0">Emisión: <span id="edit-issue-date"></span></p>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-nowrap align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Código</th>
                                <th>Descripción</th>
                                <th class="text-center" style="width: 150px;">Cantidad</th>
                                <th>U.M</th>
                                <th class="text-end" style="width: 150px;">Precio Unit.</th>
                                <th class="text-end">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody id="edit-products-body">
                            </tbody>
                        <tfoot class="table-light">
                            <tr>
                                <td colspan="5" class="text-end fw-bold">TOTAL PEDIDO:</td>
                                <td class="text-end fw-bold text-primary" id="edit-total-amount" style="font-size: 1.1rem;">$0.00</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-label waves-effect waves-light" onclick="saveUpdatedQuantities()">
                    <i class="ri-save-line label-icon align-middle fs-16 me-2"></i> Guardar Cambios
                </button>
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- MODAL DE HISTORIAL -->
<div class="modal fade" id="historyOrderModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-light p-3">
                <h5 class="modal-title">Historial del Pedido #<span id="history-order-serial" class="text-primary"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="max-height: 450px; overflow-y: auto;">
                <div id="history-content" class="list-group list-group-flush">
                    </div>
                
                <div id="history-loader" class="text-center my-3" style="display: none;">
                    <div class="spinner-border text-primary" role="status"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
    <script src="{{ URL::asset('build/libs/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/choices.js/public/assets/scripts/choices.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/list.js/list.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/list.pagination.js/list.pagination.min.js') }}"></script>

    <!--ecommerce-customer init js -->
    <script src="{{ URL::asset('build/js/pages/orders.init.js') }}"></script>
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>

    <script src="{{ URL::asset('build/js/app.js') }}"></script>
@endsection