{{-- Modal Presentaciones --}}

<div 
    id="modalPresentaciones"
    class="fixed inset-0 z-50 hidden">


    {{-- Fondo oscuro --}}
    <div
        id="overlayPresentaciones"
        class="absolute inset-0 bg-black/50">
    </div>



    {{-- Contenido --}}
    <div class="relative flex min-h-screen items-center justify-center p-6">


        <div class="w-full max-w-5xl rounded-2xl bg-white shadow-2xl">


            {{-- Header --}}
            <div class="flex items-center justify-between border-b px-6 py-4">


                <div>

                    <h2 class="text-xl font-bold text-slate-800">
                        Presentaciones del producto
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Configure las formas de compra y venta.
                    </p>

                </div>



                <button
                    type="button"
                    id="cerrarPresentaciones"
                    class="rounded-lg p-2 hover:bg-slate-100">

                    <i class="fa-solid fa-xmark text-xl"></i>

                </button>


            </div>



            {{-- Body --}}
            <div class="p-6">


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


                    <table class="w-full text-sm">


                        <thead>

                            <tr class="bg-slate-100">


                                <th class="p-3 text-left">
                                    Presentación
                                </th>


                                <th class="p-3 text-center">
                                    Compra
                                </th>


                                <th class="p-3 text-center">
                                    Venta
                                </th>


                                <th class="p-3 text-center">
                                    Equivale unidades
                                </th>


                                <th class="p-3 text-center">
                                    Precio Compra
                                </th>


                                <th class="p-3 text-center">
                                    Precio Venta
                                </th>


                               <th class="p-3 text-center w-16">
                                    Acción
                                </th>


                            </tr>

                        </thead>



                       <tbody id="tablaPresentaciones">


@if(isset($producto) && $producto->presentaciones->count())


    @foreach($producto->presentaciones as $index => $pres)


        <tr class="border-b fila-presentacion">


        <td class="p-2">

            <select
                name="presentaciones[{{ $index }}][tipo]"
                class="tipo-presentacion w-full rounded-lg border">


                <option value="unidad"
                    @selected($pres->tipo=='unidad')>
                    Unidad
                </option>


                <option value="blister"
                    @selected($pres->tipo=='blister')>
                    Blíster
                </option>


                <option value="caja"
                    @selected($pres->tipo=='caja')>
                    Caja
                </option>


                <option value="frasco"
                    @selected($pres->tipo=='frasco')>
                    Frasco
                </option>


                <option value="sobre"
                    @selected($pres->tipo=='sobre')>
                    Sobre
                </option>


            </select>

        </td>



        <td class="text-center">

            <input
                type="checkbox"
                name="presentaciones[{{ $index }}][compra]"
                value="1"
                @checked($pres->es_compra)>

        </td>



        <td class="text-center">

            <input
                type="checkbox"
                name="presentaciones[{{ $index }}][venta]"
                value="1"
                @checked($pres->es_venta)>

        </td>



        <td>

            <input
                type="number"
                min="1"
                name="presentaciones[{{ $index }}][equivale]"
                value="{{ $pres->equivalencia ?? 1 }}"
                class="equivalencia w-24 rounded-lg border text-center">

        </td>



        <td>

            <input
                type="number"
                step="0.01"
                name="presentaciones[{{ $index }}][precio_compra]"
                value="{{ $pres->precio_compra }}"
                class="precio-compra w-full rounded-lg border">

        </td>



        <td>

            <input
                type="number"
                step="0.01"
                name="presentaciones[{{ $index }}][precio_venta]"
                value="{{ $pres->precio_venta }}"
                class="precio-venta w-full rounded-lg border">

        </td>



        <td class="text-center w-16">

            <button
                type="button"
                class="eliminarPresentacion inline-flex items-center justify-center rounded-lg p-2 text-red-500 hover:bg-red-50 hover:text-red-700"
                title="Eliminar presentación">

                🗑️

            </button>

        </td>


    </tr>


    @endforeach


@else

<tr class="border-b fila-presentacion">

    <td class="p-2">

        <select 
            name="presentaciones[0][tipo]"
            class="tipo-presentacion w-full rounded-lg border">

            <option value="unidad">
                Unidad
            </option>

        </select>

    </td>


    <td class="text-center">

        <input 
            type="checkbox"
            name="presentaciones[0][compra]"
            value="1"
            checked>

    </td>


    <td class="text-center">

        <input 
            type="checkbox"
            name="presentaciones[0][venta]"
            value="1"
            checked>

    </td>


    <td>

        <input
            type="number"
            min="1"
            name="presentaciones[0][equivale]"
            value="1"
            class="equivalencia w-24 rounded-lg border text-center">

    </td>


    <td>

        <input
            type="number"
            step="0.01"
            name="presentaciones[0][precio_compra]"
            value="{{ $producto->precio_compra ?? 0 }}"
            class="precio-compra w-full rounded-lg border">

    </td>


    <td>

        <input
            type="number"
            step="0.01"
            name="presentaciones[0][precio_venta]"
            value="{{ $producto->precio_venta ?? 0 }}"
            class="precio-venta w-full rounded-lg border">

    </td>


    <td class="text-center">
        {{-- sin eliminar porque es la unidad base --}}
    </td>


</tr>


@endif


</tbody>


                    </table>


                </div>




                <button
                    type="button"
                    id="agregarPresentacion"
                    class="mt-5 rounded-lg bg-indigo-100 px-4 py-2 text-indigo-700 hover:bg-indigo-200">


                    <i class="fa-solid fa-plus"></i>

                    Agregar presentación


                </button>




            </div>





            {{-- Footer --}}

            <div class="flex justify-end gap-3 border-t px-6 py-4">


                <button
                    type="button"
                    id="cancelarPresentaciones"
                    class="rounded-lg border px-5 py-2">

                    Cancelar

                </button>



                <button
                    type="button"
                    id="guardarPresentaciones"
                    class="rounded-lg bg-brand-600 px-5 py-2 text-white">

                    Aceptar

                </button>


            </div>


        </div>


    </div>


</div>

<script>

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


    // ============================
    // ABRIR / CERRAR MODAL
    // ============================


    const btnAbrir = document.getElementById('btnPresentaciones');

    const modal = document.getElementById('modalPresentaciones');

    const cerrar = document.getElementById('cerrarPresentaciones');

    const cancelar = document.getElementById('cancelarPresentaciones');

    const overlay = document.getElementById('overlayPresentaciones');

    const guardar = document.getElementById('guardarPresentaciones');



    if(btnAbrir && modal){

        btnAbrir.addEventListener('click', function(){

            modal.classList.remove('hidden');

        });

    }



    function cerrarModal(){

        if(modal){

            modal.classList.add('hidden');

        }

    }



    if(cerrar){

        cerrar.addEventListener('click', cerrarModal);

    }



    if(cancelar){

        cancelar.addEventListener('click', cerrarModal);

    }



    if(overlay){

        overlay.addEventListener('click', cerrarModal);

    }



    // ============================
    // GUARDAR PRESENTACIONES
    // SOLO CIERRA MODAL
    // LOS INPUT YA ESTAN EN EL FORM
    // ============================


    if(guardar){

        guardar.addEventListener('click', function(){

            cerrarModal();

        });

    }




    // ============================
    // AGREGAR PRESENTACIONES
    // ============================


    let contadorPresentaciones = 1;


    const btnAgregar = document.getElementById('agregarPresentacion');

    const tabla = document.getElementById('tablaPresentaciones');



    if(btnAgregar && tabla){


        btnAgregar.addEventListener('click', function(){


            let fila = `

            <tr class="border-b fila-presentacion">


                <td class="p-2">


                    <select
                    name="presentaciones[${contadorPresentaciones}][tipo]"
                    class="w-full rounded-lg border">


                        <option value="unidad">
                            Unidad
                        </option>


                        <option value="blister">
                            Blíster
                        </option>


                        <option value="caja">
                            Caja
                        </option>


                        <option value="frasco">
                            Frasco
                        </option>


                        <option value="sobre">
                            Sobre
                        </option>


                    </select>


                </td>



                <td class="text-center">


                    <input
                    type="checkbox"
                    name="presentaciones[${contadorPresentaciones}][compra]"
                    value="1"
                    checked>


                </td>



                <td class="text-center">


                    <input
                    type="checkbox"
                    name="presentaciones[${contadorPresentaciones}][venta]"
                    value="1"
                    checked>


                </td>




                <td>


                    <input
                    type="number"
                    name="presentaciones[${contadorPresentaciones}][equivale]"
                    value="1"
                    min="1"
                    class="w-24 rounded-lg border text-center">


                </td>




                <td>


                    <input
                    type="number"
                    step="0.01"
                    name="presentaciones[${contadorPresentaciones}][precio_compra]"
                    class="w-full rounded-lg border">


                </td>




                <td>


                    <input
                    type="number"
                    step="0.01"
                    name="presentaciones[${contadorPresentaciones}][precio_venta]"
                    class="w-full rounded-lg border">


                </td>



                <td class="text-center">


                    <button
                    type="button"
                    class="eliminarPresentacion text-red-500 hover:text-red-700">


                        <i class="fa-solid fa-trash"></i>


                    </button>


                </td>



            </tr>


            `;



            tabla.insertAdjacentHTML(
                'beforeend',
                fila
            );



            contadorPresentaciones++;


        });


    }




    // ============================
    // ELIMINAR PRESENTACION
    // ============================


    document.addEventListener('click', function(e){


        const boton = e.target.closest('.eliminarPresentacion');


        if(boton){


            boton.closest('tr').remove();


        }


    });



});

// ============================
// GUARDAR PRESENTACIONES EN JSON
// ============================

const btnGuardarPresentaciones = document.getElementById('guardarPresentaciones');


if(btnGuardarPresentaciones){


    btnGuardarPresentaciones.addEventListener('click', function(){


        let presentaciones = [];


        document.querySelectorAll('.fila-presentacion').forEach(function(fila){


            let tipo = fila.querySelector('[name*="[tipo]"]').value;


            let compra = fila.querySelector('[name*="[compra]"]').checked ? 1 : 0;


            let venta = fila.querySelector('[name*="[venta]"]').checked ? 1 : 0;


            let equivale = fila.querySelector('[name*="[equivale]"]').value;


            let precioCompra = fila.querySelector('[name*="[precio_compra]"]').value || 0;


            let precioVenta = fila.querySelector('[name*="[precio_venta]"]').value || 0;



            presentaciones.push({

                tipo: tipo,
                compra: compra,
                venta: venta,
                equivale: equivale,
                precio_compra: precioCompra,
                precio_venta: precioVenta

            });



        });



        document.getElementById('presentaciones_json').value =
            JSON.stringify(presentaciones);



        document.getElementById('modalPresentaciones')
            .classList.add('hidden');


    });


}


</script>