@php
$val = fn ($campo, $def = '') => old($campo, $producto->{$campo} ?? $def);
@endphp

{{-- ===================== COLUMNA PRINCIPAL ===================== --}}
<div class="lg:col-span-2 space-y-6">

    {{-- Información General --}}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">

        <h3 class="text-lg font-semibold text-slate-800 mb-5">
            Información General
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    Nombre del producto *
                </label>

                <input
                    type="text"
                    name="nombre"
                    value="{{ $val('nombre') }}"
                    required
                    class="w-full rounded-lg border border-slate-300 px-4 py-2.5 focus:border-brand-500 focus:ring-brand-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    Principio activo
                </label>

                <input
                    type="text"
                    name="principio_activo"
                    value="{{ $val('principio_activo') }}"
                    class="w-full rounded-lg border border-slate-300 px-4 py-2.5">
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    Laboratorio
                </label>

                <input
                    type="text"
                    name="laboratorio"
                    value="{{ $val('laboratorio') }}"
                    class="w-full rounded-lg border border-slate-300 px-4 py-2.5">
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    Presentación
                </label>

                <input
                    type="text"
                    name="presentacion"
                    value="{{ $val('presentacion') }}"
                    class="w-full rounded-lg border border-slate-300 px-4 py-2.5">
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    Concentración
                </label>

                <input
                    type="text"
                    name="concentracion"
                    value="{{ $val('concentracion') }}"
                    class="w-full rounded-lg border border-slate-300 px-4 py-2.5">
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    Código de barras
                </label>

                <input
                    type="text"
                    name="codigo_barras"
                    value="{{ $val('codigo_barras') }}"
                    class="w-full rounded-lg border border-slate-300 px-4 py-2.5">
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    Categoría
                </label>

                <select
                    name="categoria_id"
                    class="w-full rounded-lg border border-slate-300 px-4 py-2.5">

                    <option value="">Seleccione...</option>

                    @foreach($categorias as $cat)
                        <option
                            value="{{ $cat->id }}"
                            @selected($val('categoria_id')==$cat->id)>
                            {{ $cat->nombre }}
                        </option>
                    @endforeach

                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    Proveedor
                </label>

                <select
                    name="proveedor_id"
                    class="w-full rounded-lg border border-slate-300 px-4 py-2.5">

                    <option value="">Seleccione...</option>

                    @foreach($proveedores as $prov)
                        <option
                            value="{{ $prov->id }}"
                            @selected($val('proveedor_id')==$prov->id)>
                            {{ $prov->razon_social }}
                        </option>
                    @endforeach

                </select>
            </div>

        </div>

    </div>

   {{-- Información Comercial --}}
<div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">

    <h3 class="text-lg font-semibold text-slate-800 mb-5">
        Información Comercial
    </h3>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">
                Precio de compra (S/)
            </label>

            <input
                type="number"
                step="0.01"
                name="precio_compra"
                value="{{ $val('precio_compra',0) }}"
                class="w-full rounded-lg border border-slate-300 px-4 py-2.5">
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">
                Precio de venta (S/)
            </label>

            <input
                type="number"
                step="0.01"
                name="precio_venta"
                value="{{ $val('precio_venta',0) }}"
                class="w-full rounded-lg border border-slate-300 px-4 py-2.5">
        </div>

    </div>

    <div class="mt-6 border-t pt-5">

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

            <div>

                <h4 class="font-semibold text-slate-700">
                    Presentaciones de venta
                </h4>

                <p class="text-sm text-slate-500 mt-1">
                    Configure si este producto se vende por unidad, blíster, caja o cualquier otra presentación.
                </p>

            </div>

           <button
                type="button"
                id="btnPresentaciones"
                class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-white font-medium hover:bg-indigo-700">

                <i class="fa-solid fa-boxes-stacked"></i>

                Configurar presentaciones

            </button>

        </div>

    </div>

</div>

</div>

{{-- ===================== COLUMNA LATERAL ===================== --}}

<div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">

    <h3 class="text-lg font-semibold text-slate-800 mb-5">
        Opciones
    </h3>


    <div class="space-y-4">


        <label class="flex items-center gap-3">

            <input
                type="checkbox"
                name="activo"
                value="1"
                @checked($val('activo',true))
                class="rounded border-slate-300">

            <span class="text-sm">
                Producto activo
            </span>

        </label>



        <label class="flex items-center gap-3">

            <input
                type="checkbox"
                name="requiere_receta"
                value="1"
                @checked($val('requiere_receta'))
                class="rounded border-slate-300">


            <span class="text-sm">
                Requiere receta médica
            </span>

        </label>



        <label class="flex items-center gap-3">

            <input
                type="checkbox"
                name="controlado"
                value="1"
                @checked($val('controlado'))
                class="rounded border-slate-300">


            <span class="text-sm">
                Medicamento controlado
            </span>

        </label>


    </div>


</div>



{{-- BOTONES --}}

<div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">


    <button
        type="submit"
        class="w-full rounded-lg bg-brand-600 py-3 font-semibold text-white hover:bg-brand-700">


        Guardar Producto


    </button>



    <a
        href="{{ route('productos.index') }}"
        class="mt-3 block w-full rounded-lg border border-slate-300 py-3 text-center font-medium text-slate-600 hover:bg-slate-50">


        Cancelar


    </a>


</div>


{{-- ===================== MODAL ===================== --}}

<input 
    type="hidden" 
    name="presentaciones_json" 
    id="presentaciones_json">

@include('productos.modals.presentaciones')