@extends('padre.padre')
@section('contenido')
    <!-- SweetAlert2 & FontAwesome -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            --secondary-gradient: linear-gradient(135deg, #ef4444 0%, #991b1b 100%);
            --accent-color: #3b82f6;
            --success-color: #10b981;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --bg-light: #f8fafc;
            --card-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
            --border-radius: 1rem;
        }

        body {
            background-color: var(--bg-light);
            font-family: 'Outfit', 'Inter', sans-serif;
        }

        .premium-header {
            background: var(--primary-gradient);
            padding: 1.5rem 2rem;
            color: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 15px rgba(30, 58, 138, 0.15);
            margin-bottom: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .premium-header h1 {
            font-weight: 800;
            font-size: 1.6rem;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .premium-header p {
            margin: 0.25rem 0 0;
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .glass-card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(0, 0, 0, 0.03);
            padding: 1.5rem;
            margin-bottom: 2rem;
            transition: transform 0.2s;
        }

        .form-label-modern {
            font-weight: 700;
            font-size: 0.85rem;
            color: #334155;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .form-control-modern {
            border-radius: 0.5rem;
            border: 1.5px solid #cbd5e1;
            padding: 0.6rem 1rem;
            font-size: 0.9rem;
            font-weight: 600;
            color: #1e293b;
            transition: all 0.2s;
        }

        .form-control-modern:focus {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
            outline: none;
        }

        .btn-modern {
            padding: 0.6rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 700;
            font-size: 0.9rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s;
            border: none;
            cursor: pointer;
        }

        .btn-modern-primary {
            background-color: var(--accent-color);
            color: white;
        }

        .btn-modern-primary:hover {
            background-color: #2563eb;
            transform: translateY(-1px);
        }

        .btn-modern-danger {
            background-color: var(--danger-color);
            color: white;
        }

        .btn-modern-danger:hover {
            background-color: #dc2626;
            transform: translateY(-1px);
        }

        .premium-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 0.5rem;
        }

        .premium-table th {
            background: #f1f5f9;
            color: #475569;
            font-weight: 700;
            font-size: 0.8rem;
            text-transform: uppercase;
            padding: 1rem;
            border: none;
        }

        .premium-table tr {
            transition: all 0.2s;
        }

        .premium-table td {
            background: white;
            padding: 1rem;
            border-top: 1px solid #f1f5f9;
            border-bottom: 1px solid #f1f5f9;
            color: #334155;
            font-size: 0.9rem;
            font-weight: 600;
        }

        .premium-table td:first-child {
            border-left: 1px solid #f1f5f9;
            border-top-left-radius: 0.5rem;
            border-bottom-left-radius: 0.5rem;
        }

        .premium-table td:last-child {
            border-right: 1px solid #f1f5f9;
            border-top-right-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
        }

        .premium-table tr:hover td {
            background: #f8fafc;
            border-color: #e2e8f0;
        }

        .badge-modern {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        .badge-success-modern {
            background-color: #dcfce7;
            color: #166534;
        }

        .badge-warning-modern {
            background-color: #fef3c7;
            color: #92400e;
        }

        /* Soporte para Modo Oscuro */
        [data-theme='dark'] .glass-card {
            background: var(--card-bg, #1e293b) !important;
            color: var(--text-dark, #f8fafc) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        [data-theme='dark'] .premium-table th {
            background: #334155 !important;
            color: #e2e8f0 !important;
        }
        [data-theme='dark'] .premium-table td {
            background: var(--card-bg, #1e293b) !important;
            color: #f1f5f9 !important;
            border-color: #334155 !important;
        }
        [data-theme='dark'] .form-label-modern {
            color: #cbd5e1 !important;
        }
        [data-theme='dark'] .form-control-modern {
            background: #0f172a !important;
            color: #f8fafc !important;
            border-color: #475569 !important;
        }
    </style>

    <div class="container-fluid py-4">
        <!-- CABECERA PREMIUM -->
        <div class="premium-header">
            <div>
                <h1><i class="fa-solid fa-file-invoice-dollar"></i> Anulación de Facturas de Compra</h1>
                <p>Módulo aislado para la reversión y devolución segura de mercancía al inventario</p>
            </div>
            @include('menu.botonRegresar')
        </div>

        <!-- FORMULARIO DE BÚSQUEDA -->
        <div class="glass-card">
            <form action="{{ url('/anulacioncompras') }}" method="GET" class="row g-3 align-items-end">
                <div class="col-md-2">
                    <label class="form-label-modern">Fecha Inicial</label>
                    <input type="date" name="fi" value="{{ $fi }}" class="form-control form-control-modern">
                </div>
                <div class="col-md-2">
                    <label class="form-label-modern">Fecha Final</label>
                    <input type="date" name="ff" value="{{ $ff }}" class="form-control form-control-modern">
                </div>
                <div class="col-md-2">
                    <label class="form-label-modern">N° Factura</label>
                    <input type="text" name="factura" value="{{ $factura ?? '' }}" placeholder="Ej: 119707070..." class="form-control form-control-modern">
                </div>
                <div class="col-md-3">
                    <label class="form-label-modern">Bodega</label>
                    <select name="bodega" class="form-control form-control-modern">
                        <option value="0">--- Todas las Bodegas ---</option>
                        @foreach($bodegas as $b)
                            <option value="{{ $b->id }}" {{ $bodegaSeleccionada == $b->id ? 'selected' : '' }}>
                                {{ $b->nombreBodega }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label-modern">Proveedor</label>
                    <input type="text" list="provedores-list" name="clientes" value="{{ $cliente }}" placeholder="Buscar por NIT o Nombre..." class="form-control form-control-modern">
                    <datalist id="provedores-list">
                        @foreach($proveedores as $p)
                            <option value="{{ $p->cedula }}">{{ $p->Nombre }} {{ $p->apellido }}</option>
                        @endforeach
                    </datalist>
                </div>
                <div class="col-md-12 d-flex justify-content-end gap-2 mt-3">
                    <a href="{{ url('/anulacioncompras') }}" class="btn-modern btn-light border" style="background: #f1f5f9; color: #475569;">
                        <i class="fa-solid fa-rotate-left"></i> Limpiar
                    </a>
                    <button type="submit" class="btn-modern btn-modern-primary">
                        <i class="fa-solid fa-magnifying-glass"></i> Consultar Facturas
                    </button>
                </div>
            </form>
        </div>

        <!-- LISTA DE RESULTADOS -->
        @if(isset($compras) && count($compras) > 0)
            <div class="glass-card">
                <h3 style="font-weight: 800; font-size: 1.1rem; color: #1e293b; margin-bottom: 1.5rem;">
                    <i class="fa-solid fa-list-check"></i> Compras Encontradas
                </h3>
                <div class="table-responsive">
                    <table class="premium-table">
                        <thead>
                            <tr>
                                <th>Factura #</th>
                                <th>Proveedor</th>
                                <th>Fecha Compra</th>
                                <th>Bodega</th>
                                <th>Tipo Pago</th>
                                <th>Total Factura</th>
                                <th class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($compras as $compra)
                                @php
                                    $nombreBod = $bodegas->firstWhere('id', $compra->idbodegaCo)->nombreBodega ?? 'N/A';
                                @endphp
                                <tr>
                                    <td><span style="font-family: monospace; font-size: 1rem; color: #0f172a; font-weight: 700;">{{ $compra->factcompra }}</span></td>
                                    <td>
                                        <div style="font-weight: 800; color: #1e293b;">{{ $compra->nombre_provedor }} {{ $compra->apellido_provedor }}</div>
                                        <div style="font-size: 0.75rem; color: #64748b;">NIT: {{ $compra->provedor }}</div>
                                    </td>
                                    <td>{{ date('d/m/Y', strtotime($compra->fechacompra)) }}</td>
                                    <td><span style="font-weight: 700; color: #475569;">{{ $nombreBod }}</span></td>
                                    <td>
                                        @if($compra->CompCredicto > 0)
                                            <span class="badge-modern badge-warning-modern"><i class="fa-solid fa-credit-card"></i> Crédito</span>
                                        @else
                                            <span class="badge-modern badge-success-modern"><i class="fa-solid fa-money-bill-wave"></i> Contado</span>
                                        @endif
                                        @if(!empty($compra->saldoAbonado) && floatval($compra->saldoAbonado) > 0)
                                            <div class="mt-1">
                                                <span class="badge bg-warning text-dark border border-warning" style="font-size: 0.75rem;" title="Esta factura registra abonos aplicados">
                                                    <i class="fa-solid fa-hand-holding-dollar me-1"></i>Abono: ${{ number_format($compra->saldoAbonado, 0) }}
                                                </span>
                                            </div>
                                        @endif
                                    </td>
                                    <td style="font-size: 1rem; color: #0f172a; font-weight: 800;">
                                        ${{ number_format($compra->totalcompra, 2) }}
                                    </td>
                                    <td class="text-center">
                                        @if(!empty($compra->saldoAbonado) && floatval($compra->saldoAbonado) > 0)
                                            <button type="button" class="btn-modern btn-secondary btn-sm opacity-75" disabled title="No se puede anular porque registra abonos aplicados. Debe anular primero los abonos en Cuentas por Pagar.">
                                                <i class="fa-solid fa-lock"></i> Con Abonos
                                            </button>
                                        @else
                                            <button onclick="confirmarAnulacion('{{ $compra->factcompra }}', '{{ $compra->provedor }}', '{{ $compra->idbodegaCo }}')" class="btn-modern btn-modern-danger btn-sm">
                                                <i class="fa-solid fa-trash-can"></i> Anular Compra
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @elseif(($fi && $ff) || !empty($factura) || !empty($cliente))
            <div class="glass-card text-center py-5">
                <i class="fa-solid fa-circle-exclamation text-muted mb-3" style="font-size: 3rem;"></i>
                <h4 style="font-weight: 800; color: #475569;">No se encontraron facturas</h4>
                <p class="text-muted">Ajusta los filtros de búsqueda e intenta nuevamente.</p>
            </div>
        @endif
    </div>

    <!-- SCRIPT DE PROCESAMIENTO AJAX Y SWAL -->
    <script>
        function confirmarAnulacion(factcompra, provedor, idbodegaCo) {
            Swal.fire({
                title: '¿Confirmar Anulación?',
                text: "Esta acción descontará los productos del inventario actual, eliminará lotes de vencimientos y revertirá asientos contables relacionados. ¡No se puede deshacer!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#475569',
                confirmButtonText: 'Sí, Anular Compra',
                cancelButtonText: 'Cancelar',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Procesando Anulación...',
                        text: 'Revirtiendo inventario y eliminando registros de compra. Por favor, espera.',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    // Petición POST con Fetch API nativa
                    fetch('{{ url("/anularcompra") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            _token: '{{ csrf_token() }}',
                            factcompra: factcompra,
                            provedor: provedor,
                            idbodegaCo: idbodegaCo
                        })
                    })
                    .then(async response => {
                        const data = await response.json();
                        return { ok: response.ok, status: response.status, body: data };
                    })
                    .then(res => {
                        Swal.close();
                        if (res.ok && res.body.estado === 'ok') {
                            Swal.fire({
                                title: '¡Anulada con éxito!',
                                text: res.body.mensaje,
                                icon: 'success',
                                confirmButtonColor: '#3b82f6'
                            }).then(() => {
                                window.location.reload();
                            });
                        } else {
                            Swal.fire({
                                title: 'No se pudo anular',
                                text: res.body.mensaje || 'Error al procesar la anulación.',
                                icon: 'error',
                                confirmButtonColor: '#3b82f6'
                            });
                        }
                    })
                    .catch(err => {
                        Swal.close();
                        Swal.fire({
                            title: 'Error de Servidor',
                            text: 'Ocurrió un error inesperado al comunicarse con el servidor.',
                            icon: 'error',
                            confirmButtonColor: '#3b82f6'
                        });
                    });
                }
            });
        }
    </script>
@endsection