@extends('layouts.base')

@section('content')
<!-- Page Title-->
<div class="page-title-overlap bg-dark pt-4">
    <div class="container d-lg-flex justify-content-between py-2 py-lg-3">
        <div class="order-lg-1 pe-lg-4 text-center text-lg-start">
            <h1 class="h3 text-light mb-0">Mis Ordenes</h1>
        </div>
    </div>
</div>

<div class="container pb-5 mb-2 mb-md-4">
    <div class="row">
        <!-- Sidebar-->
        <x-customer-sidebar :customer="$customer" :orders="$orders"></x-customer-sidebar>
        <!-- Content  -->
        <section class="col-lg-9">
            <!-- Toolbar-->
            <div class="d-flex flex-wrap justify-content-between align-items-center">
                <form action="{{route('account.orders')}}" method="get" class="w-100">
                    <div class="row">
                        <div class="col-12 col-md-4 mb-3">
                            <label class="fs-sm text-light text-nowrap opacity-75 me-2" for="status">Estatus</label>
                            <select class="form-select" name="status" id="status">
                                <option value="">Todos</option>
                                @foreach (App\Enums\OrderStatusEnum::fullCatalog() as $statusCatalog)
                                    <option value="{{$statusCatalog}}" @selected($status == $statusCatalog)>
                                        {{ __('order.status-' . $statusCatalog) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-4 mb-3">
                            <label class="fs-sm text-light text-nowrap opacity-75 me-2" for="delivery-status">Fecha:</label>
                            <input type="date" class="form-control" name="created_at" id="created-at" value="{{$created_at}}">
                        </div>
                    </div>
                </form>
            </div>
            <!-- Orders list-->
            <div class="table-responsive fs-md mb-4">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Folio #</th>
                            <th>Fecha de compra</th>
                            <th>Status Sistema</th>
                            <th>Total</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($orders as $order)
                            <tr>
                                <td class="py-3">
                                    <a class="nav-link-style fw-medium fs-sm" href="#order-details" data-bs-toggle="modal">
                                        {{$order->folio()}}
                                    </a>
                                </td>
                                <td class="py-3">
                                    {{ \App\Helpers\Dates::formatForUser($order->created_at) }}
                                </td>
                                <td class="py-3">
                                    @include('components.order-status',['status' => $order->status])
                                    @if ($order->cancellationRequest)
                                        <div>
                                            <span class="badge rounded-pill text-light bg-danger">Solicitud de cancelacion</span>
                                        </div>
                                    @endif
                                </td>
                                <td class="py-3">
                                    <x-amount-formatter :amount="$order->total" />
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <a class="btn btn-info btn-sm me-2" href="#order-details-{{$order->id}}" data-bs-toggle="modal">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                        @if ($order->status == 'pending_payment')
                                            <form action="{{ route('checkout.update', $order->id) }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="payment_submitted" value="1" >
                                                <input type="hidden" name="payment_concept" value="{{$order->payment_concept}}" >
                                                <button type="button"
                                                    onclick="confirmPaymentSubmitted(this, '{{$order->payment_concept}}')"
                                                    class="btn btn-primary btn-sm">
                                                    <span class="d-none d-sm-inline">Realicé Mi Pago</span>
                                                    <span class="d-inline d-sm-none">Realicé Mi Pago</span>
                                                    <i class="ci-arrow-right mt-sm-0 ms-1"></i>
                                                </button>
                                            </form>
                                        @endif
                                        @if ($order->canCancellationRequest())
                                            <button type="button"
                                                class="btn btn-danger btn-sm btnCancellationRequest"
                                                data-url="{{route('account.orders.cancellation.request', ['id' => $order->id])}}">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @if ($order->tracking_info)
                                <tr>
                                    <td colspan="6" class="p-0">
                                        <x-modal-order-detail :order="$order" />
                                    </td>
                                </tr>
                            @endif
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!-- Pagination-->
            {{ $orders->appends(request()->query())->links('vendor.pagination.bootstrap-5') }}
        </section>
    </div>
</div>
@endsection

@section('scripts')

@vite(['resources/js/Customer/Orders/List/app.js'])
<script type="module">
    CancellationRequest.init("btnCancellationRequest");
</script>
@if (session('message'))
    <script>
        Swal.fire({
            position: "center",
            icon: "{{ session('icon') }}",
            title: "{{ session('message') }}",
            showConfirmButton: false,
            timer: 3000,
        });
    </script>
@endif

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Obtén los elementos select por su ID
        var statusPaymentSelect = document.getElementById('status');
        var createdAtInput = document.getElementById('created-at');

        // Función para enviar el formulario
        function submitForm() {
            this.form.submit();
        }

        // Añade el evento change a los elementos select
        statusPaymentSelect.addEventListener('change', submitForm);
        createdAtInput.addEventListener('change', submitForm);
    });

    function confirmPaymentSubmitted(button, paymentConcept) {
        Swal.fire({
            title: 'Antes de continuar:',
            html: `<ul class='mx-auto text-start fs-5' style='max-width: 80%;'>
                        <li>Abre <b>aplicación bancaria</b></li>
                        <li>Ingresa el concepto de pago <b>${paymentConcept}</b></li>
                        <li>Debes ingresar el <b>monto exacto</b> de la operación</li>
                        <li>Una vez realizado el pago presiona el botón <b>"Realicé Mi Pago"</b></li>
                    </ul>`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Realicé Mi Pago',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                button.closest('form').submit();
            }
        });
    }
</script>

@endsection