@extends('padre.padre')

@section('contenido')
<div class="container-fluid py-3 px-3 px-md-4" style="max-width: 1600px;">
    {{-- Header & Acciones Principales --}}
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 pb-2 border-bottom gap-3">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1 small text-muted">
                    <li class="breadcrumb-item"><a href="{{ url('/inicio') }}" class="text-decoration-none text-muted">Inicio</a></li>
                    <li class="breadcrumb-item active fw-bold text-primary" aria-current="page">Remisiones</li>
                </ol>
            </nav>
            <div class="d-flex align-items-center gap-2">
                <span style="font-size: 28px;">📋</span>
                <h3 class="mb-0 fw-bold text-dark" style="letter-spacing: -0.5px;">Bandeja de Remisiones</h3>
                <span class="badge badge-soft-secondary px-2 py-1 rounded-pill small">
                    {{ $metricas['total'] }} registros
                </span>
            </div>
            <p class="text-muted mb-0 small">Control de despachos en firme, reserva de mercancía transitoria e integración con POS</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ url('/inicio') }}" class="btn btn-outline-secondary btn-sm px-3 d-flex align-items-center gap-1 rounded-3">
                <span>⬅️ Inicio</span>
            </a>
            <a href="{{ route('remisiones.exportar', request()->all()) }}" class="btn btn-success d-flex align-items-center gap-1 shadow-sm rounded-3 px-3 py-2 fw-bold" style="background: linear-gradient(135deg, #10b981, #059669); border:none;" title="Descargar reporte en Excel (.xlsx)">
                <span>📊 Exportar Excel</span>
            </a>
            <a href="{{ route('remisiones.create') }}" class="btn btn-primary d-flex align-items-center gap-2 shadow-sm rounded-3 px-3 py-2 fw-bold" style="background: linear-gradient(135deg, #2563eb, #1d4ed8); border:none;">
                <span>➕ Nueva Remisión</span>
            </a>
        </div>
    </div>

    {{-- Cards KPIs / Métricas Ejecutivas --}}
    <div class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm rounded-4 p-3 h-100 kpi-card" style="background: var(--card-bg, #fff); border-left: 4px solid #2563eb !important;">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 11px; letter-spacing: 0.5px;">Total Despachos</span>
                        <h3 class="fw-bold mb-0 mt-1 text-primary">{{ number_format($metricas['total']) }}</h3>
                        <small class="text-muted" style="font-size: 11px;">Historial acumulado</small>
                    </div>
                    <div class="icon-circle badge-soft-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; font-size: 24px;">
                        📑
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm rounded-4 p-3 h-100 kpi-card" style="background: var(--card-bg, #fff); border-left: 4px solid #f59e0b !important;">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 11px; letter-spacing: 0.5px;">Pendientes / Activas</span>
                        <h3 class="fw-bold mb-0 mt-1 text-warning">{{ number_format($metricas['pendientes']) }}</h3>
                        <small class="text-muted" style="font-size: 11px;">En tránsito o esperando POS</small>
                    </div>
                    <div class="icon-circle badge-soft-warning rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; font-size: 24px;">
                        ⏳
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm rounded-4 p-3 h-100 kpi-card" style="background: var(--card-bg, #fff); border-left: 4px solid #10b981 !important;">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 11px; letter-spacing: 0.5px;">En Cotización POS</span>
                        <h3 class="fw-bold mb-0 mt-1 text-success">{{ number_format($metricas['enviadas_pos']) }}</h3>
                        <small class="text-muted" style="font-size: 11px;">Listas para cobrar en caja</small>
                    </div>
                    <div class="icon-circle badge-soft-success rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; font-size: 24px;">
                        🛒
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm rounded-4 p-3 h-100 kpi-card" style="background: var(--card-bg, #fff); border-left: 4px solid #6366f1 !important;">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 11px; letter-spacing: 0.5px;">Valor Total Activo</span>
                        <h4 class="fw-bold mb-0 mt-1 font-monospace" style="color: #4f46e5;">$ {{ number_format($metricas['suma_total'], 0, ',', '.') }}</h4>
                        <small class="text-muted" style="font-size: 11px;">Excluye devoluciones</small>
                    </div>
                    <div class="icon-circle rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; font-size: 24px; background: rgba(99, 102, 241, 0.12);">
                        💰
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Toolbar de Filtros y Búsqueda --}}
    <div class="card border-0 shadow-sm rounded-4 mb-4" style="background: var(--card-bg, #fff);">
        <div class="card-body p-3 p-md-4">
            <form method="GET" action="{{ route('remisiones.index') }}">
                <div class="row g-2 align-items-end mb-2">
                    {{-- Buscador general --}}
                    <div class="col-12 col-md-4">
                        <label class="form-label small fw-bold text-dark mb-1">Buscar por Remisión / Cliente / Cédula</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white text-muted">🔍</span>
                            <input type="text" name="buscar" class="form-control" placeholder="Ej: REM-000001, Juan..." value="{{ request('buscar') }}">
                        </div>
                    </div>
                    {{-- Fechas --}}
                    <div class="col-6 col-md-2">
                        <label class="form-label small fw-bold text-dark mb-1">Desde Fecha</label>
                        <input type="date" name="desde" class="form-control" value="{{ request('desde') }}">
                    </div>
                    <div class="col-6 col-md-2">
                        <label class="form-label small fw-bold text-dark mb-1">Hasta Fecha</label>
                        <input type="date" name="hasta" class="form-control" value="{{ request('hasta') }}">
                    </div>
                    {{-- Bodega --}}
                    <div class="col-12 col-md-4">
                        <label class="form-label small fw-bold text-dark mb-1">Bodega</label>
                        <select name="bodega" class="form-select">
                            <option value="">Todas las Bodegas</option>
                            @foreach($bodegas as $b)
                                <option value="{{ $b->id }}" {{ request('bodega') == $b->id ? 'selected' : '' }}>{{ $b->nombreBodega }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row g-2 align-items-end">
                    {{-- Modalidad --}}
                    <div class="col-12 col-sm-6 col-md-4">
                        <label class="form-label small fw-bold text-dark mb-1">Modalidad de Despacho</label>
                        <select name="modalidad" class="form-select">
                            <option value="">Todas las Modalidades</option>
                            <option value="SALIDA_INMEDIATA" {{ request('modalidad') == 'SALIDA_INMEDIATA' ? 'selected' : '' }}>🔹 Salida Directa (Kardex)</option>
                            <option value="SEPARADO_TRANSITORIO" {{ request('modalidad') == 'SEPARADO_TRANSITORIO' ? 'selected' : '' }}>🔸 Separado (POS)</option>
                        </select>
                    </div>
                    {{-- Estado --}}
                    <div class="col-12 col-sm-6 col-md-4">
                        <label class="form-label small fw-bold text-dark mb-1">Estado</label>
                        <select name="estado" class="form-select">
                            <option value="">Todos los Estados</option>
                            <option value="PENDIENTE" {{ request('estado') == 'PENDIENTE' ? 'selected' : '' }}>Pendiente</option>
                            <option value="ENVIADA_POS" {{ request('estado') == 'ENVIADA_POS' ? 'selected' : '' }}>En Cotización POS</option>
                            <option value="DEVUELTA" {{ request('estado') == 'DEVUELTA' ? 'selected' : '' }}>Devuelta</option>
                            <option value="ANULADA" {{ request('estado') == 'ANULADA' ? 'selected' : '' }}>Anulada</option>
                        </select>
                    </div>
                    {{-- Botones de Acción: Filtrar, Limpiar y Exportar --}}
                    <div class="col-12 col-md-4 d-flex gap-2">
                        <button type="submit" class="btn btn-primary flex-grow-1 rounded-3 fw-bold d-flex align-items-center justify-content-center gap-1 shadow-sm" title="Aplicar Filtros">
                            <span>🔍 Filtrar</span>
                        </button>
                        @if(request()->anyFilled(['buscar', 'desde', 'hasta', 'modalidad', 'estado', 'bodega']))
                            <a href="{{ route('remisiones.index') }}" class="btn btn-outline-secondary rounded-3 px-3 d-flex align-items-center" title="Limpiar Filtros">
                                ✕
                            </a>
                        @endif
                        <a href="{{ route('remisiones.exportar', request()->all()) }}" class="btn btn-success rounded-3 fw-bold px-3 d-flex align-items-center justify-content-center gap-1 shadow-sm" style="background: #10b981; border-color: #10b981;" title="Exportar remisiones filtradas a Excel (.xlsx)">
                            <span>📊 Exportar Excel</span>
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Tabla Principal de Remisiones --}}
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden" style="background: var(--card-bg, #fff);">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" style="font-size: 13px;">
                <thead class="table-light" style="border-bottom: 2px solid var(--border-color, #e2e8f0); font-size: 11.5px;">
                    <tr>
                        <th class="ps-3 py-3 text-muted">DOCUMENTO</th>
                        <th class="text-muted">FECHA</th>
                        <th class="text-muted">CLIENTE / DESTINATARIO</th>
                        <th class="text-muted">ASESOR / BODEGA</th>
                        <th class="text-muted">MODALIDAD</th>
                        <th class="text-end text-muted">COSTO INTERNO</th>
                        <th class="text-end text-muted">TOTAL REMISIONADO</th>
                        <th class="text-center text-muted">ESTADO</th>
                        <th class="text-center pe-3 text-muted" style="width: 140px;">ACCIONES</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($remisiones as $rem)
                        <tr>
                            {{-- No. Remisión --}}
                            <td class="ps-3 fw-bold">
                                <a href="{{ route('remisiones.show', $rem->id) }}" class="text-decoration-none text-primary d-block font-monospace fs-6">
                                    {{ $rem->numero_remision }}
                                </a>
                                @if($rem->numero_cotizacion)
                                    <span class="badge bg-light text-dark border font-monospace" style="font-size: 10px;">
                                        Cot. POS: {{ $rem->numero_cotizacion }}
                                    </span>
                                @endif
                            </td>

                            {{-- Fecha --}}
                            <td>
                                <div class="fw-semibold text-dark">{{ date('d/m/Y', strtotime($rem->fecha)) }}</div>
                                <span class="text-muted small" style="font-size: 11px;">{{ date('h:i A', strtotime($rem->fecha)) }}</span>
                            </td>

                            {{-- Cliente --}}
                            <td>
                                <div class="fw-bold text-dark text-truncate" style="max-width: 220px;" title="{{ $rem->cliente_nombre }}">
                                    {{ $rem->cliente_nombre }}
                                </div>
                                <div class="text-muted small font-monospace" style="font-size: 11px;">CC/NIT: {{ $rem->cliente_cedula }}</div>
                            </td>

                            {{-- Asesor y Bodega --}}
                            <td>
                                <div class="text-truncate fw-semibold" style="max-width: 160px;">{{ $rem->vendedor_nombre }}</div>
                                <span class="badge bg-light text-dark border" style="font-size: 10.5px;">📍 {{ $bodegas[$rem->idbodega]->nombreBodega ?? ('Bodega #' . $rem->idbodega) }}</span>
                            </td>

                            {{-- Modalidad --}}
                            <td>
                                @if($rem->modalidad === 'SALIDA_INMEDIATA')
                                    <span class="badge badge-soft-primary px-2 py-1 rounded-pill" style="font-size: 11px;">
                                        🔹 Salida Inmediata
                                    </span>
                                @else
                                    <span class="badge badge-soft-warning px-2 py-1 rounded-pill" style="font-size: 11px;">
                                        🔸 Separado POS
                                    </span>
                                @endif
                            </td>

                            {{-- Costo --}}
                            <td class="text-end text-muted font-monospace small">
                                $ {{ number_format($rem->total_costo, 0, ',', '.') }}
                            </td>

                            {{-- Total --}}
                            <td class="text-end fw-bold font-monospace text-success fs-6">
                                $ {{ number_format($rem->total, 0, ',', '.') }}
                            </td>

                            {{-- Estado --}}
                            <td class="text-center">
                                @if($rem->estado === 'PENDIENTE')
                                    <span class="badge badge-soft-warning px-2 py-1 rounded-pill fw-bold">⏳ Pendiente</span>
                                @elseif($rem->estado === 'ENVIADA_POS')
                                    <span class="badge badge-soft-info px-2 py-1 rounded-pill fw-bold">🛒 En POS</span>
                                @elseif($rem->estado === 'FACTURADA_POS' || $rem->estado === 'FACTURADA')
                                    <span class="badge badge-soft-success px-2 py-1 rounded-pill fw-bold">✅ Facturada</span>
                                @elseif($rem->estado === 'DEVUELTA')
                                    <span class="badge badge-soft-secondary px-2 py-1 rounded-pill fw-bold">↩️ Devuelta</span>
                                @elseif($rem->estado === 'ANULADA')
                                    <span class="badge badge-soft-danger px-2 py-1 rounded-pill fw-bold">❌ Anulada</span>
                                @else
                                    <span class="badge badge-soft-secondary px-2 py-1 rounded-pill fw-bold">{{ $rem->estado }}</span>
                                @endif
                            </td>

                            {{-- Acciones --}}
                            <td class="text-center pe-3">
                                <div class="btn-group btn-group-sm rounded-3 shadow-sm overflow-hidden">
                                    {{-- Ver detalle --}}
                                    <a href="{{ route('remisiones.show', $rem->id) }}" class="btn btn-light border" title="Ver Detalle y Auditoría">
                                        👁️
                                    </a>
                                    
                                    {{-- Imprimir comprobante --}}
                                    <a href="{{ route('remisiones.imprimir', $rem->id) }}" target="_blank" class="btn btn-light border" title="Imprimir Guía de Despacho">
                                        🖨️
                                    </a>

                                    {{-- Enviar a Cotización POS (Solo para Separado Transitorio, para evitar duplicidad de inventario y costo) --}}
                                    @if($rem->estado === 'PENDIENTE' && $rem->modalidad === 'SEPARADO_TRANSITORIO')
                                        <button type="button" class="btn btn-success" title="Cargar a Cotizaciones de POSCloud" onclick="enviarAPos({{ $rem->id }}, '{{ $rem->numero_remision }}')">
                                            🛒
                                        </button>
                                    @endif

                                    {{-- Devolver a inventario (Solo si está pendiente en remisiones) --}}
                                    @if($rem->estado === 'PENDIENTE')
                                        <button type="button" class="btn btn-warning" title="Devolver a Inventario (Reingreso + Contracredito)" onclick="devolverRemision({{ $rem->id }}, '{{ $rem->numero_remision }}')">
                                            ↩️
                                        </button>
                                    @endif

                                    {{-- Cancelar Cotización POS si ya fue transferida --}}
                                    @if($rem->estado === 'ENVIADA_POS')
                                        <button type="button" class="btn btn-outline-danger" title="Cancelar Cotización POS (Las existencias quedan en bodega)" onclick="anularRemision({{ $rem->id }}, '{{ $rem->numero_remision }}')">
                                            ❌
                                        </button>
                                    @endif

                                    {{-- Anular si es transitoria y está pendiente --}}
                                    @if($rem->estado === 'PENDIENTE' && $rem->modalidad === 'SEPARADO_TRANSITORIO')
                                        <button type="button" class="btn btn-outline-danger" title="Anular Reserva" onclick="anularRemision({{ $rem->id }}, '{{ $rem->numero_remision }}')">
                                            ✕
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center py-5 text-muted">
                                <div style="font-size: 42px; margin-bottom: 10px;">📭</div>
                                <h5 class="fw-bold text-dark">No hay remisiones que coincidan con la búsqueda</h5>
                                <p class="small text-muted mb-3">Crea una nueva remisión para despachar productos o apartarlos para facturar en caja.</p>
                                <a href="{{ route('remisiones.create') }}" class="btn btn-primary btn-sm px-4 rounded-3 shadow-sm">
                                    ➕ Crear Primera Remisión
                                </a>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($remisiones->hasPages())
            <div class="card-footer bg-transparent border-0 d-flex justify-content-end py-3">
                {{ $remisiones->links() }}
            </div>
        @endif
    </div>
</div>

<script>
function enviarAPos(id, numero) {
    if (!confirm('¿Deseas enviar la remisión ' + numero + ' a Cotizaciones del POS?\n\n- Se reingresará la mercancía al inventario activo para que el cajero en el POS la pueda facturar con normalidad.\n- Quedará disponible en la pantalla de Cotizaciones del POS para cobro inmediato.')) {
        return;
    }

    fetch('{{ url("/remisiones/convertir-cotizacion") }}/' + id, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            alert('✅ ' + data.message);
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    })
    .catch(() => alert('Error de conexión al servidor.'));
}

function devolverRemision(id, numero) {
    if (!confirm('⚠️ ¿Estás seguro de DEVOLVER la remisión ' + numero + '?\n\n- Los productos reingresarán automáticamente al inventario físico.\n- Si tenía salida de Kardex, se registrará el contra-movimiento.\n- Si tenía asiento contable de costo, se reversará automáticamente.')) {
        return;
    }

    fetch('{{ url("/remisiones/devolver") }}/' + id, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            alert('✅ ' + data.message);
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    })
    .catch(() => alert('Error de conexión al servidor.'));
}

function anularRemision(id, numero) {
    if (!confirm('¿Deseas ANULAR la remisión ' + numero + '?\n\nSe liberará la reserva de inventario separado.')) {
        return;
    }

    fetch('{{ url("/remisiones/anular") }}/' + id, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            alert('✅ ' + data.message);
            location.reload();
        } else {
            alert('❌ ' + data.message);
        }
    })
    .catch(() => alert('Error de conexión al servidor.'));
}
</script>

<style>
/* Badges con alto contraste y legibilidad universal (Compatibles con Bootstrap 5.0) */
.badge-soft-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}
.badge-soft-success {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}
.badge-soft-primary {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}
.badge-soft-info {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
}
.badge-soft-danger {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}
.badge-soft-secondary {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme='dark'] .badge-soft-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}
[data-theme='dark'] .badge-soft-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}
[data-theme='dark'] .badge-soft-primary {
    background-color: rgba(37, 99, 235, 0.2) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(37, 99, 235, 0.4) !important;
}
[data-theme='dark'] .badge-soft-info {
    background-color: rgba(14, 165, 233, 0.2) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(14, 165, 233, 0.4) !important;
}
[data-theme='dark'] .badge-soft-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}
[data-theme='dark'] .badge-soft-secondary {
    background-color: rgba(148, 163, 184, 0.2) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
}
</style>
@endsection