@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@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">Orden #{{ $order->order_id }}</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"><a href="{{ route('admin.meli.orders.index') }}">Órdenes</a></li>
                    <li class="breadcrumb-item active">#{{ $order->order_id }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    {{-- Left Column --}}
    <div class="col-lg-8">
        {{-- Order Info --}}
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-shopping-bag-line me-1"></i> Información de la Orden</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-borderless table-sm mb-0">
                            <tr>
                                <td class="text-muted" width="140">Order ID</td>
                                <td><strong class="font-monospace">{{ $order->order_id }}</strong></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Publicación</td>
                                <td><span class="font-monospace">{{ $order->mla_publ ?? '-' }}</span></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Status ML</td>
                                <td>
                                    @switch($order->o_status)
                                        @case('paid')
                                            <span class="badge bg-success">Pagado</span>
                                            @break
                                        @case('shipped')
                                            <span class="badge bg-warning">Enviado</span>
                                            @break
                                        @case('delivered')
                                            <span class="badge bg-info">Entregado</span>
                                            @break
                                        @case('cancelled')
                                            <span class="badge bg-danger">Cancelado</span>
                                            @break
                                        @default
                                            <span class="badge bg-secondary">{{ $order->o_status }}</span>
                                    @endswitch
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">Estado Interno</td>
                                <td><span class="badge bg-{{ $order->estado == 'NEW' ? 'info' : 'secondary' }}">{{ $order->estado }}</span></td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-borderless table-sm mb-0">
                            <tr>
                                <td class="text-muted" width="140">Fecha Creación</td>
                                <td>{{ $order->o_f_crea ? $order->o_f_crea->format('d/m/Y') : '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Hora</td>
                                <td>{{ $order->o_h_crea ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Fecha Cierre</td>
                                <td>{{ $order->o_f_close ? $order->o_f_close->format('d/m/Y') : '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Última Actualización</td>
                                <td>{{ $order->o_f_l_upda ? $order->o_f_l_upda->format('d/m/Y') : '-' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Item & Amounts --}}
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-price-tag-3-line me-1"></i> Ítem y Montos</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-borderless table-sm mb-0">
                            <tr>
                                <td class="text-muted" width="140">SKU</td>
                                <td>{{ $order->i_sku ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Cantidad</td>
                                <td>{{ $order->oi_quanti ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Precio Unitario</td>
                                <td>${{ number_format($order->oi_unit_p ?? 0, 2, ',', '.') }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Tipo Listado</td>
                                <td>{{ $order->oi_l_ty_id ?? '-' }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-borderless table-sm mb-0">
                            <tr>
                                <td class="text-muted" width="140">Total Orden</td>
                                <td><strong class="fs-5 text-success">${{ number_format($order->o_tot_amou ?? 0, 2, ',', '.') }}</strong></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Envío</td>
                                <td>${{ number_format($order->mla_envio ?? 0, 2, ',', '.') }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Fee MP</td>
                                <td class="text-danger">${{ number_format($order->mpg_fee ?? 0, 2, ',', '.') }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Neto</td>
                                <td><strong>${{ number_format(($order->mla_total ?? 0) - ($order->mpg_fee ?? 0), 2, ',', '.') }}</strong></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Buyer Info --}}
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-user-line me-1"></i> Comprador</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-borderless table-sm mb-0">
                            <tr>
                                <td class="text-muted" width="140">Nickname</td>
                                <td><strong>{{ $order->buyer_nik }}</strong></td>
                            </tr>
                            <tr>
                                <td class="text-muted">Nombre</td>
                                <td>{{ $order->buyer_full_name ?: '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Email</td>
                                <td>{{ $order->buyer_mail ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Teléfono</td>
                                <td>{{ $order->mla_telef ?? '-' }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-borderless table-sm mb-0">
                            <tr>
                                <td class="text-muted" width="140">Domicilio</td>
                                <td>{{ $order->mla_domici ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Localidad</td>
                                <td>{{ $order->mla_locali ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Provincia</td>
                                <td>{{ $order->mla_provin ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Puntaje</td>
                                <td>{{ $order->mla_puntaj ?? '-' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Shipping --}}
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-truck-line me-1"></i> Envío</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-borderless table-sm mb-0">
                            <tr>
                                <td class="text-muted" width="140">Shipping ID</td>
                                <td class="font-monospace">{{ $order->s_shipp_id ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Status Envío</td>
                                <td>{{ $order->s_status ?? '-' }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-borderless table-sm mb-0">
                            <tr>
                                <td class="text-muted" width="140">Tracking</td>
                                <td class="font-monospace">{{ $order->mla_tracki ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">Estado Envío</td>
                                <td>{{ $order->shp_estado ?? '-' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Right Column --}}
    <div class="col-lg-4">
        {{-- Link Client --}}
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-link me-1"></i> Vincular Cliente</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.meli.orders.linkClient', $order->id) }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Código Cliente</label>
                        <input type="text" name="mla_client" class="form-control form-control-sm" value="{{ $order->mla_client }}"
                               maxlength="10" placeholder="Ej: 000123">
                    </div>
                    <button type="submit" class="btn btn-sm btn-primary w-100">
                        <i class="ri-link me-1"></i> Vincular
                    </button>
                </form>
            </div>
        </div>

        {{-- Link Document --}}
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-file-text-line me-1"></i> Vincular Documento</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.meli.orders.linkDocument', $order->id) }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Tipo</label>
                        <select name="doc_type" class="form-select form-select-sm">
                            <option value="remito">Remito</option>
                            <option value="recibo">Recibo</option>
                            <option value="factura">Factura</option>
                        </select>
                    </div>
                    <div class="row mb-3">
                        <div class="col-4">
                            <label class="form-label">Comp.</label>
                            <input type="text" name="co_doc" class="form-control form-control-sm" maxlength="2" placeholder="01">
                        </div>
                        <div class="col-8">
                            <label class="form-label">Número</label>
                            <input type="text" name="nu_doc" class="form-control form-control-sm" maxlength="8" placeholder="00001234">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-sm btn-outline-primary w-100">
                        <i class="ri-file-add-line me-1"></i> Vincular Documento
                    </button>
                </form>

                {{-- Current Documents --}}
                @if($order->co_remi || $order->co_reci || $order->co_docu)
                <hr>
                <h6 class="small text-muted mb-2">Documentos Vinculados</h6>
                <ul class="list-unstyled mb-0 small">
                    @if($order->co_remi && $order->nu_remi)
                        <li class="mb-1"><i class="ri-file-line text-primary me-1"></i> Remito: {{ $order->co_remi }}-{{ $order->nu_remi }}</li>
                    @endif
                    @if($order->co_reci && $order->nu_reci)
                        <li class="mb-1"><i class="ri-file-line text-success me-1"></i> Recibo: {{ $order->co_reci }}-{{ $order->nu_reci }}</li>
                    @endif
                    @if($order->co_docu && $order->nu_docu)
                        <li class="mb-1"><i class="ri-file-line text-warning me-1"></i> Factura: {{ $order->co_docu }}-{{ $order->nu_docu }}</li>
                    @endif
                </ul>
                @endif
            </div>
        </div>

        {{-- Observations --}}
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-sticky-note-line me-1"></i> Detalle / Observaciones</h5>
            </div>
            <div class="card-body">
                @if($order->mla_deta)
                    <p class="small mb-2"><strong>Detalle ML:</strong> {{ $order->mla_deta }}</p>
                @endif
                @if($order->observaciones)
                    <p class="small mb-0"><strong>Observaciones:</strong> {{ $order->observaciones }}</p>
                @endif
                @if(!$order->mla_deta && !$order->observaciones)
                    <p class="text-muted small mb-0">Sin observaciones</p>
                @endif
            </div>
        </div>

        {{-- Import as Internal Order --}}
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-exchange-line me-1"></i> Importar como Orden Interna</h5>
            </div>
            <div class="card-body">
                @if($order->hasImportedOrder())
                    <div class="alert alert-success mb-0 py-2">
                        <i class="ri-check-double-line me-1"></i>
                        Importada como orden interna
                        <a href="{{ route('orders.detail', $order->order_id_interno) }}" class="fw-semibold">
                            #{{ $order->order_id_interno }}
                        </a>
                    </div>
                @else
                    <p class="text-muted small mb-3">
                        Crea una orden interna del e-commerce a partir de esta orden de MercadoLibre.
                        Se vinculará automáticamente el comprador y los datos de envío.
                    </p>
                    <form id="formImportOrder" action="{{ route('admin.meli.orders.importAsOrder', $order->id) }}" method="POST">
                        @csrf
                        <button type="button" class="btn btn-sm btn-warning w-100" onclick="confirmImportOrder()">
                            <i class="ri-download-2-line me-1"></i> Importar como Orden
                        </button>
                    </form>
                @endif
            </div>
        </div>

        <button type="button" onclick="history.back()" class="btn btn-outline-secondary w-100">
            <i class="ri-arrow-left-line me-1"></i> Volver al listado
        </button>
    </div>
</div>

@endsection

@push('js')
<script>
function confirmImportOrder() {
    Swal.fire({
        title: 'Importar como Orden Interna',
        html: 'Se creará una orden interna del e-commerce a partir de esta orden de MercadoLibre <strong>#{{ $order->order_id }}</strong>.<br><br>El comprador será vinculado o creado automáticamente.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#f7b84b',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, importar',
        cancelButtonText: 'Cancelar'
    }).then(function(result) {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Importando orden...',
                html: 'Creando orden interna. Por favor espere.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: function() { Swal.showLoading(); }
            });
            document.getElementById('formImportOrder').submit();
        }
    });
}
</script>
@endpush