@extends('adminlte::page')

@section('title', 'Compras realizadas')

@section('content_header')
    <h1>Dashboard</h1>
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Lista de compras recientes</h3>
                </div>
                <div class="col-sm mt-3 px-4">
                    {{-- <a href="" class="btn btn-success px-4" id="exportList">Exportar lista</a> --}}
                </div>
                <div class="card-body ">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Correo</th>
                                <th>Nombre</th>
                                <th>Metodo de pago</th>
                                <th>Estado</th>
                                <th>Tipo de envio</th>
                                <th>Monto total</th>
                                <th>Pedido creado</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- Actions --}}
                            @forelse($purchases as $purchase)
                                <tr data-widget="expandable-table" aria-expanded="false" class="row-loading">
                                    <td>{{ $purchase->email }}</td>
                                    <td>{{ $purchase->full_name }} <p class="text-info">({{ $purchase->user_type }})</p>
                                    </td>
                                    <td>{{ $purchase->purchase_method }}</td>
                                    <td @if ($purchase->iam_purchase_status_id == 5) class="text-success" @endif
                                        @if ($purchase->iam_purchase_status_id == 6) class="text-danger" @endif
                                        @if ($purchase->iam_purchase_status_id == 7) class="text-info" @endif>
                                        {{ $purchase->status->purchase_status ?? 'Estado desconocido' }}
                                    </td>
                                    <td>{{ $purchase->shipment->shipment_type ?? 'Compra 100% digital' }}</td>
                                    <td>$ {{ $purchase->total_cart_amount }}@if (floor($purchase->total_cart_amount) == $purchase->total_cart_amount)
                                            .00
                                        @endif
                                    </td>
                                    <td>{{ $purchase->created_at }}</td>
                                </tr>
                                <tr class="expandable-body row-loading">
                                    <td colspan="7" disabled>
                                        <div class="d-flex mx-auto justify-content-between">
                                            <p class="mt-1">Pedido realizado: {{ $purchase->updated_at }}</p>
                                            <div class="row">
                                                @if ($purchase->iam_purchase_status_id == 3)
                                                    <a href="" class="btn btn-secondary m-1 makeShipment"
                                                        data-purchase-id="{{ $purchase->id }}">Crear envío</a>
                                                    <form id="makeShipmentForm_{{ $purchase->id }}"
                                                        action="{{ Route('makeShipment') }}" method="post">
                                                        @csrf
                                                        <input type="hidden" name="idPurchase"
                                                            value="{{ $purchase->id }}">
                                                    </form>
                                                @endif
                                                @if ($purchase->iam_purchase_status_id == 5 && $purchase->iam_shipment_id == 3)
                                                    <form action="{{ Route('sendPurchaseAgain') }}" method="post">
                                                        @csrf
                                                        <input type="hidden" name="idPurchase"
                                                            value="{{ $purchase->id }}">
                                                        <button type="submit" class="btn btn-secondary m-1">Renviar
                                                            producto</button>
                                                    </form>
                                                @endif
                                                {{-- Porque coloque esto?
                                                @if ($purchase->iam_purchase_status_id == 1 && $purchase->purchase_method == 'Tarjeta')
                                                    <a href="" class="btn btn-success m-1 sendPurchaseForm disabled"
                                                        data-purchase-id="{{ $purchase->id }}">Reenviar formulario</a>
                                                    <form id="sendPurchaseForm_{{ $purchase->id }}"
                                                        action="{{ Route('sendPurchaseForm') }}" method="post">
                                                        @csrf
                                                        <input type="hidden" name="idPurchase"
                                                            value="{{ $purchase->id }}">
                                                    </form>
                                                @endif --}}
                                                @if (
                                                    $purchase->iam_purchase_status_id == 6 ||
                                                        $purchase->iam_purchase_status_id == 7 ||
                                                        $purchase->iam_purchase_status_id == 5)
                                                @else
                                                    <a href="" class="btn btn-warning m-1 changeStatus"
                                                        data-purchase-id="{{ $purchase->id }}">Cambiar estado</a>
                                                @endif
                                                <a href="" class="btn btn-info m-1 showDetails"
                                                    data-purchase-id="{{ $purchase->id }}">Ver mas detalles</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                    <tr>
                                        <td class="bg-secondary" colspan="7" align="center">Sin registro</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        </div>

        {{-- Show details from the purchase --}}
        <div class="modal fade" id="showDetailsModal" tabindex="-1" role="dialog" aria-labelledby="purchasesDetails"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-xxl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-info" id="purchasesDetails"></h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="detailsContainer">
                            {{-- This show all the purchase details --}}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Change the status of the purchase --}}
        <div class="modal fade" id="changeStatusModal" tabindex="-1" role="dialog" aria-labelledby="changePurchaseStatus"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title text-info" id="changePurchaseStatus">Cambiar estado del pedido</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ Route('changeStatus') }}" method="post" id="changeStatusForm"
                            enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="idPurchase" id="idPurchase">
                            <div class="form-group">
                                <label for="statuses">Todos los estados</label>
                                <select name="status" id="statuses" class="form-control" required>
                                    {{-- Dynamic statuses --}}
                                </select>
                                <small id="confirmPurchase" style="display: none;">
                                    Al completar la compra se le enviara un correo al usuario si en su compra tiene productos
                                    digitales.
                                </small>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="extra" id="extra">
                                <label class="form-check-label" for="extra">
                                    Enviar un correo de notificación
                                </label>
                            </div>
                            <div id="showExtra" style="display: none;">
                                <div class="form-group mt-3">
                                    <label for="extraInfo">Informacion extra que debas enviarle al cliente? *opcional</label>
                                    <textarea name="extraInfo" id="extraInfo" class="form-control"
                                        placeholder="Puede ser el numero de seguimiento del paquete, info extra, etc." rows="3"></textarea>
                                </div>
                                <div class="form-group mt-3">
                                    <label for="extraFile">Archivos importantes para enviar al cliente(factura, alguna
                                        nota de compra, etc) *opcional</label>
                                    <input type="file" name="extraFile[]" id="extraFile" class="form-control" multiple>
                                    <small>Extensiones permitidas: pdf, docx, xml | max: 2MB por archivo</small>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-info">Cambiar estado</button>
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endsection

@section('js')
    @vite('resources/js/purchases/showPurchaseDetails.js')
    @vite('resources/js/purchases/changeStatus.js')
    @vite('resources/js/purchases/makeShipment.js')
    @vite('resources/js/purchases/sendPurchaseForm.js')
    {{-- No entiendo porque en produccion esto se muere si lo dejo asi y funciona si lo dejo con l minuscula (@vite('resources/js/purchases/exportPurchaselist.js')) --}}
    {{-- @vite('resources/js/purchases/exportPurchaseList.js') --}}
@endsection