@extends('layouts.app')

@section('titulo', 'Catálogo Virtual')

@section('contenido')

<style>
/* =========================================================
   ESTILOS PRINCIPALES
========================================================= */

.table-premium {
    border-collapse: collapse;
    width: 100%;
}

.table-premium thead {
    background: #f8fafc;
    text-transform: uppercase;
    font-size: .7rem;
    color: #64748b;
    letter-spacing: 0.05em;
}

.table-premium thead th {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    text-align: left;
}

.table-premium tbody td {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    vertical-align: middle;
}

.table-premium tbody tr:hover {
    background: #f8fafc;
}

.table-container {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* =========================================================
   HEADER
========================================================= */

.header-section {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
    margin-bottom: 20px;
}

.header-icon {
    width: 36px;
    height: 36px;
    background: #dbeafe;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
}

.header-icon svg {
    width: 18px;
    height: 18px;
}

.breadcrumb {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-bottom: 2px;
}

/* =========================================================
   BOTÓN
========================================================= */

.btn-new {
    background: #2563eb;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    text-decoration: none;
    cursor: pointer;
}

.btn-new:hover {
    background: #1d4ed8;
    color: white;
}

.btn-new svg {
    width: 16px;
    height: 16px;
}

/* =========================================================
   KPI CARDS
========================================================= */

.kpi-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.kpi-card .kpi-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.kpi-card .kpi-value {
    margin-top: 4px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
}

.kpi-card .kpi-value.green {
    color: #16a34a;
}

.kpi-card .kpi-value.amber {
    color: #d97706;
}

/* =========================================================
   BADGES
========================================================= */

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.status-active {
    background: #dcfce7;
    color: #166534;
}

.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.status-info {
    background: #dbeafe;
    color: #1d4ed8;
}

/* =========================================================
   CONFIGURACIÓN
========================================================= */

.config-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

.form-group select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fafbfc;
    font-size: 0.875rem;
    color: #334155;
}

.form-group select:focus {
    outline: none;
    border-color: #2563eb;
    background: white;
}

/* =========================================================
   INFO API
========================================================= */

.api-box {
    background: #0f172a;
    border-radius: 8px;
    padding: 12px 16px;
    color: #e2e8f0;
    font-family: monospace;
    font-size: 0.8rem;
    overflow-x: auto;
}

.info-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
}

/* =========================================================
   ACCIONES
========================================================= */

.action-btn {
    padding: 4px 6px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #94a3b8;
    display: inline-block;
}

.action-btn:hover {
    background: #f1f5f9;
    color: #2563eb;
}

.action-btn svg {
    width: 16px;
    height: 16px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .config-grid {
        grid-template-columns: 1fr;
    }

}
</style>


<div class="max-w-[1650px] mx-auto space-y-4 px-4 sm:px-6">

    {{-- =====================================================
         HEADER
    ====================================================== --}}
    <div class="header-section">

        <div class="flex flex-wrap items-center justify-between gap-3">

            <div>

                <div class="breadcrumb">
                    Productos & Catálogo
                </div>

                <div class="flex items-center gap-3 mt-1">

                    <div class="header-icon">

                        <svg
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M3 7.5L12 3l9 4.5v9L12 21l-9-4.5v-9z"
                            />

                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M3 7.5L12 12l9-4.5M12 12v9"
                            />
                        </svg>

                    </div>

                    <h1 class="text-xl font-bold text-slate-800">
                        Catálogo Virtual
                    </h1>

                </div>

            </div>


            @if(auth()->check() && auth()->user()->rol === 'admin')

                <span class="status-badge status-info">
                    Solo Administrador
                </span>

            @endif

        </div>

    </div>


    {{-- =====================================================
         MENSAJES
    ====================================================== --}}

    @if(session('ok'))

        <div class="rounded-lg border border-emerald-200
                    bg-emerald-50 px-4 py-3
                    text-sm text-emerald-700">

            {{ session('ok') }}

        </div>

    @endif


    @if(session('error'))

        <div class="rounded-lg border border-red-200
                    bg-red-50 px-4 py-3
                    text-sm text-red-700">

            {{ session('error') }}

        </div>

    @endif


    @if($errors->any())

        <div class="rounded-lg border border-red-200
                    bg-red-50 px-4 py-3
                    text-sm text-red-700">

            <ul class="list-disc ml-5 space-y-1">

                @foreach($errors->all() as $error)

                    <li>{{ $error }}</li>

                @endforeach

            </ul>

        </div>

    @endif


    {{-- =====================================================
         KPI CARDS
    ====================================================== --}}

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

        <div class="kpi-card">

            <p class="kpi-label">
                Estado
            </p>

            <p class="kpi-value {{ $configuracion ? 'green' : 'amber' }}">

                {{ $configuracion ? 'Activo' : 'Pendiente' }}

            </p>

        </div>


        <div class="kpi-card">

            <p class="kpi-label">
                Local configurado
            </p>

            <p class="kpi-value">

                {{ $configuracion->local_nombre ?? '—' }}

            </p>

        </div>


        <div class="kpi-card">

            <p class="kpi-label">
                Almacén configurado
            </p>

            <p class="kpi-value">

                {{ $configuracion->almacen_nombre ?? '—' }}

            </p>

        </div>

    </div>


    {{-- =====================================================
         CONFIGURACIÓN
    ====================================================== --}}

    <div class="config-section">

        <div class="flex flex-wrap items-center
                    justify-between gap-3 mb-5">

            <div>

                <h2 class="text-base font-semibold text-slate-800">

                    Configuración del Catálogo

                </h2>

                <p class="text-sm text-slate-500 mt-1">

                    Selecciona el local y almacén que serán
                    utilizados como fuente del catálogo virtual.

                </p>

            </div>


            @if($configuracion)

                <span class="status-badge status-active">

                    Configuración activa

                </span>

            @else

                <span class="status-badge status-inactive">

                    Sin configurar

                </span>

            @endif

        </div>


        <form
            method="POST"
            action="{{ route('catalogo-virtual.configurar') }}"
        >

            @csrf


            <div class="config-grid">

                {{-- LOCAL --}}

                <div class="form-group">

                    <label for="local_id">
                        Local
                    </label>

                    <select
                        id="local_id"
                        name="local_id"
                        required
                    >

                        <option value="">
                            Seleccionar local
                        </option>


                        @foreach($locales as $local)

                            <option
                                value="{{ $local->id }}"

                                @selected(
                                    old(
                                        'local_id',
                                        $configuracion->local_id ?? ''
                                    ) == $local->id
                                )
                            >

                                {{ $local->nombre }}

                            </option>

                        @endforeach

                    </select>

                </div>


                {{-- ALMACÉN --}}

                <div class="form-group">

                    <label for="almacen_id">
                        Almacén
                    </label>

                    <select
                        id="almacen_id"
                        name="almacen_id"
                        required
                    >

                        <option value="">
                            Seleccionar almacén
                        </option>


                        @foreach($almacenes as $almacen)

                            <option
                                value="{{ $almacen->id }}"
                                data-local-id="{{ $almacen->local_id }}"

                                @selected(
                                    old(
                                        'almacen_id',
                                        $configuracion->almacen_id ?? ''
                                    ) == $almacen->id
                                )
                            >

                                {{ $almacen->nombre }}

                                @if($almacen->tipo)

                                    — {{ $almacen->tipo }}

                                @endif

                            </option>

                        @endforeach

                    </select>

                </div>

            </div>


            <div class="flex justify-end mt-5">

                <button
                    type="submit"
                    class="btn-new"
                >

                    <svg
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M5 13l4 4L19 7"
                        />
                    </svg>

                    Guardar configuración

                </button>

            </div>

        </form>

    </div>


    {{-- =====================================================
         INFORMACIÓN DE API
    ====================================================== --}}

    <div class="config-section">

        <div class="flex items-center gap-3 mb-4">

            <div class="header-icon">

                <svg
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M8 9l3 3-3 3m5 0h3M5 5h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2z"
                    />
                </svg>

            </div>

            <div>

                <h2 class="text-base font-semibold text-slate-800">
                    API del Catálogo Virtual
                </h2>

                <p class="text-sm text-slate-500">
                    Endpoint para que el sistema externo consulte
                    productos y stock.
                </p>

            </div>

        </div>


        <div class="api-box">

            GET /api/catalogo-virtual

        </div>


        <div class="info-box mt-4">

            <p class="text-sm font-semibold text-slate-700 mb-3">

                Información disponible

            </p>


            <div class="grid grid-cols-1 sm:grid-cols-2
                        lg:grid-cols-3 gap-2 text-sm text-slate-600">

                <div>• ID del producto</div>

                <div>• Código de barras</div>

                <div>• Nombre</div>

                <div>• Categoría</div>

                <div>• Precio de venta</div>

                <div>• Precio mayorista</div>

                <div>• Stock total</div>

                <div>• Stock por lote</div>

                <div>• Número de lote</div>

                <div>• Fecha de vencimiento</div>

                <div>• Local</div>

                <div>• Almacén</div>

            </div>

        </div>

    </div>


    {{-- =====================================================
         TABLA DE CONFIGURACIÓN
    ====================================================== --}}

    <div class="table-container">

        <div class="px-5 py-4 border-b border-slate-200">

            <div class="flex items-center justify-between">

                <div>

                    <h2 class="text-base font-semibold text-slate-800">

                        Configuración actual

                    </h2>

                    <p class="text-xs text-slate-500 mt-1">

                        Origen configurado para el catálogo virtual.

                    </p>

                </div>

            </div>

        </div>


        <div class="overflow-x-auto">

            <table class="table-premium">

                <thead>

                    <tr>

                        <th>ID</th>

                        <th>LOCAL</th>

                        <th>ALMACÉN</th>

                        <th>ESTADO</th>

                    </tr>

                </thead>


                <tbody>

                    @if($configuracion)

                        <tr>

                            <td>

                                <span class="font-mono
                                             text-slate-700
                                             font-medium text-sm">

                                    {{ $configuracion->id }}

                                </span>

                            </td>


                            <td>

                                <span class="font-medium
                                             text-slate-700">

                                    {{ $configuracion->local_nombre }}

                                </span>

                            </td>


                            <td>

                                <span class="font-medium
                                             text-slate-700">

                                    {{ $configuracion->almacen_nombre }}

                                </span>

                            </td>


                            <td>

                                <span class="status-badge status-active">

                                    Activo

                                </span>

                            </td>

                        </tr>

                    @else

                        <tr>

                            <td
                                colspan="4"
                                class="text-center py-10
                                       text-slate-400"
                            >

                                No existe una configuración
                                para el Catálogo Virtual.

                            </td>

                        </tr>

                    @endif

                </tbody>

            </table>

        </div>

    </div>

</div>


<script>

document.addEventListener('DOMContentLoaded', function () {

    const localSelect =
        document.getElementById('local_id');

    const almacenSelect =
        document.getElementById('almacen_id');


    if (!localSelect || !almacenSelect) {
        return;
    }


    function filtrarAlmacenes() {

        const localId =
            localSelect.value;


        Array.from(
            almacenSelect.options
        ).forEach(function (option) {

            if (!option.value) {

                option.hidden = false;

                return;
            }


            const pertenece =
                option.dataset.localId === localId;


            option.hidden =
                !pertenece;

        });


        const selected =
            almacenSelect.options[
                almacenSelect.selectedIndex
            ];


        if (
            selected &&
            selected.value &&
            selected.dataset.localId !== localId
        ) {

            almacenSelect.value = '';

        }

    }


    localSelect.addEventListener(
        'change',
        filtrarAlmacenes
    );


    filtrarAlmacenes();

});

</script>

@endsection