@extends('admin.layouts.app')

@push('css')
<style>
.stat-card .card-body { padding: 1rem 1.25rem; cursor: pointer; }
.stat-card:hover { box-shadow: 0 0 0 2px rgba(13,110,253,.25); }
.stat-card.active-filter { box-shadow: 0 0 0 2px rgba(13,110,253,.5); }
</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Órdenes MercadoLibre</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.meli.dashboard') }}">MarketPlace</a></li>
                    <li class="breadcrumb-item active">Órdenes</li>
                </ol>
            </div>
        </div>
    </div>
</div>

{{-- Stats Cards --}}
<div class="row">
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card" onclick="window.location='{{ route('admin.meli.orders.index') }}'">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-uppercase fw-medium text-muted mb-1" style="font-size:0.8rem">Total</p>
                        <h4 class="fs-20 fw-semibold mb-0">{{ number_format($stats['total']) }}</h4>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-primary-subtle rounded fs-3">
                            <i class="ri-shopping-bag-line text-primary"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card" onclick="filterBy('estado', 'NEW')">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-uppercase fw-medium text-muted mb-1" style="font-size:0.8rem">Nuevas</p>
                        <h4 class="fs-20 fw-semibold mb-0">{{ number_format($stats['new']) }}</h4>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-info-subtle rounded fs-3">
                            <i class="ri-add-circle-line text-info"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card" onclick="filterBy('o_status', 'paid')">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-uppercase fw-medium text-muted mb-1" style="font-size:0.8rem">Pagadas</p>
                        <h4 class="fs-20 fw-semibold mb-0">{{ number_format($stats['paid']) }}</h4>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-success-subtle rounded fs-3">
                            <i class="ri-money-dollar-circle-line text-success"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card" onclick="filterBy('o_status', 'shipped')">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-uppercase fw-medium text-muted mb-1" style="font-size:0.8rem">Enviadas</p>
                        <h4 class="fs-20 fw-semibold mb-0">{{ number_format($stats['shipped']) }}</h4>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-warning-subtle rounded fs-3">
                            <i class="ri-truck-line text-warning"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Main Card --}}
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header border-0">
                <div class="d-flex align-items-center">
                    <h5 class="card-title mb-0 flex-grow-1">
                        <i class="ri-shopping-bag-line text-muted me-1"></i> Listado de Órdenes
                    </h5>
                    <div class="flex-shrink-0 d-flex gap-2 align-items-center">
                        <a href="{{ route('admin.meli.orders.exportCsv', request()->query()) }}" class="btn btn-sm btn-outline-success" title="Exportar CSV con filtros actuales">
                            <i class="ri-file-excel-2-line me-1"></i> Exportar CSV
                        </a>
                        <form id="formFetchOrders" action="{{ route('admin.meli.orders.fetchNew') }}" method="POST" class="d-inline-flex align-items-center gap-2">
                            @csrf
                            <select name="days" class="form-select form-select-sm" style="width:auto">
                                <option value="7" selected>7 días</option>
                                <option value="15">15 días</option>
                                <option value="30">30 días</option>
                                <option value="45">45 días</option>
                                <option value="60">60 días</option>
                                <option value="75">75 días</option>
                                <option value="90">90 días</option>
                                <option value="180">6 meses</option>
                                <option value="365">1 año</option>
                            </select>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="confirmFetchOrders()">
                                <i class="ri-download-line me-1"></i> Descargar de ML
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Filters --}}
            <div class="card-body border-top border-bottom py-3">
                <form method="GET" action="{{ route('admin.meli.orders.index') }}" class="row g-3 align-items-end">
                    <div class="col-md-2">
                        <label class="form-label small">Estado</label>
                        <select name="estado" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">Todos</option>
                            <option value="NEW" {{ request('estado') == 'NEW' ? 'selected' : '' }}>Nuevo</option>
                            <option value="PROCESSED" {{ request('estado') == 'PROCESSED' ? 'selected' : '' }}>Procesado</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Status ML</label>
                        <select name="o_status" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">Todos</option>
                            <option value="paid" {{ request('o_status') == 'paid' ? 'selected' : '' }}>Pagado</option>
                            <option value="shipped" {{ request('o_status') == 'shipped' ? 'selected' : '' }}>Enviado</option>
                            <option value="delivered" {{ request('o_status') == 'delivered' ? 'selected' : '' }}>Entregado</option>
                            <option value="cancelled" {{ request('o_status') == 'cancelled' ? 'selected' : '' }}>Cancelado</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small">Buscar</label>
                        <div class="input-group input-group-sm">
                            <input type="text" name="search" class="form-control" placeholder="Order ID, nick, nombre, email..."
                                   value="{{ request('search') }}">
                            <button type="submit" class="btn btn-primary"><i class="ri-search-line"></i></button>
                        </div>
                    </div>
                    <div class="col-md-2">
                        @if(request()->hasAny(['estado', 'o_status', 'search']))
                            <a href="{{ route('admin.meli.orders.index') }}" class="btn btn-sm btn-outline-secondary w-100">
                                <i class="ri-close-line"></i> Limpiar
                            </a>
                        @endif
                    </div>
                </form>
            </div>

            {{-- Table --}}
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-striped align-middle table-nowrap mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Order ID</th>
                                <th>Comprador</th>
                                <th>Publicación</th>
                                <th class="text-end">Total</th>
                                <th class="text-center">Status ML</th>
                                <th class="text-center">Estado</th>
                                <th>Fecha</th>
                                <th>Hora</th>
                                <th width="100">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($orders as $order)
                            <tr>
                                <td>
                                    <span class="fw-medium font-monospace">{{ $order->order_id }}</span>
                                </td>
                                <td>
                                    <strong>{{ $order->buyer_nik }}</strong>
                                    @if($order->buyer_full_name)
                                        <br><small class="text-muted">{{ $order->buyer_full_name }}</small>
                                    @endif
                                </td>
                                <td>
                                    <span class="font-monospace small">{{ $order->mla_publ ?? '-' }}</span>
                                </td>
                                <td class="text-end">
                                    <strong>${{ number_format($order->o_tot_amou, 2, ',', '.') }}</strong>
                                </td>
                                <td class="text-center">
                                    @switch($order->o_status)
                                        @case('paid')
                                            <span class="badge bg-success-subtle text-success">Pagado</span>
                                            @break
                                        @case('shipped')
                                            <span class="badge bg-warning-subtle text-warning">Enviado</span>
                                            @break
                                        @case('delivered')
                                            <span class="badge bg-info-subtle text-info">Entregado</span>
                                            @break
                                        @case('cancelled')
                                            <span class="badge bg-danger-subtle text-danger">Cancelado</span>
                                            @break
                                        @default
                                            <span class="badge bg-secondary-subtle text-secondary">{{ $order->o_status }}</span>
                                    @endswitch
                                </td>
                                <td class="text-center">
                                    @if($order->estado == 'NEW')
                                        <span class="badge bg-info">Nuevo</span>
                                    @else
                                        <span class="badge bg-secondary">{{ $order->estado }}</span>
                                    @endif
                                    @if($order->hasImportedOrder())
                                        <br><span class="badge bg-success-subtle text-success mt-1" title="Orden interna #{{ $order->order_id_interno }}">
                                            <i class="ri-check-line"></i> Importada
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <small>{{ $order->o_f_crea ? $order->o_f_crea->format('d/m/Y') : '-' }}</small>
                                </td>
                                <td>
                                    <small>{{ $order->o_h_crea ?? '-' }}</small>
                                </td>
                                <td>
                                    <a href="{{ route('admin.meli.orders.show', $order->id) }}" class="btn btn-sm btn-primary" title="Ver detalle">
                                        <i class="ri-eye-line"></i>
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="9">
                                    <div class="text-center py-4">
                                        <i class="ri-shopping-bag-line d-block fs-1 text-muted mb-2"></i>
                                        <h6 class="text-muted">No hay órdenes</h6>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($orders->hasPages())
                    <div class="d-flex justify-content-between align-items-center p-3">
                        <div class="text-muted small">
                            Mostrando {{ $orders->firstItem() }} a {{ $orders->lastItem() }} de {{ $orders->total() }}
                        </div>
                        <div>{{ $orders->links() }}</div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
function filterBy(key, value) {
    const url = new URL(window.location.href);
    url.searchParams.set(key, value);
    window.location.href = url.toString();
}

function confirmFetchOrders() {
    var days = document.querySelector('#formFetchOrders select[name="days"]').value;
    var label = document.querySelector('#formFetchOrders select[name="days"] option:checked').text;
    Swal.fire({
        title: 'Descargar órdenes de MercadoLibre',
        html: 'Se descargarán todas las órdenes de los últimos <strong>' + label + '</strong>.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#0ab39c',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, descargar',
        cancelButtonText: 'Cancelar'
    }).then(function(result) {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Descargando órdenes...',
                html: 'Consultando la API de MercadoLibre.<br>Esto puede tardar unos segundos.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: function() { Swal.showLoading(); }
            });
            document.getElementById('formFetchOrders').submit();
        }
    });
}
</script>
@endpush