@extends('layouts.app')

@section('titulo','Nuevo Punto de Venta')

@section('contenido')

<div class="max-w-xl mx-auto">

    <h1 class="text-2xl font-bold mb-6 text-slate-800">
        Nuevo Punto de Venta
    </h1>


    <form method="POST"
          action="{{ route('puntos_venta.store') }}"
          class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 space-y-4">

        @csrf


        <div>
            <label class="text-sm font-medium text-slate-700">
                Local
            </label>

            <select name="local_id"
                    id="local_id"
                    class="w-full rounded-xl border border-slate-300 px-3 py-2 mt-1"
                    required>

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

                @foreach($locales as $local)

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

                @endforeach

            </select>
        </div>



        <div>
            <label class="text-sm font-medium text-slate-700">
                Almacén
            </label>

            <select name="almacen_id"
                    id="almacen_id"
                    class="w-full rounded-xl border border-slate-300 px-3 py-2 mt-1"
                    required>

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


                @foreach($almacenes as $almacen)

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

                        {{ $almacen->nombre }}

                    </option>

                @endforeach

            </select>
        </div>



        <div>
            <label class="text-sm font-medium text-slate-700">
                Código
            </label>

            <input type="text"
                   name="codigo"
                   class="w-full rounded-xl border border-slate-300 px-3 py-2 mt-1"
                   placeholder="Ej: PV001"
                   required>
        </div>



        <div>
            <label class="text-sm font-medium text-slate-700">
                Nombre Punto de Venta
            </label>

            <input type="text"
                   name="nombre"
                   class="w-full rounded-xl border border-slate-300 px-3 py-2 mt-1"
                   placeholder="Caja Principal"
                   required>
        </div>



        <div>
            <label class="text-sm font-medium text-slate-700">
                Impresora
            </label>

            <input type="text"
                   name="impresora"
                   class="w-full rounded-xl border border-slate-300 px-3 py-2 mt-1"
                   placeholder="EPSON TM-T20">
        </div>



        <div>
            <label class="text-sm font-medium text-slate-700">
                Estado
            </label>

            <select name="estado"
                    class="w-full rounded-xl border border-slate-300 px-3 py-2 mt-1">

                <option value="1">
                    Activo
                </option>

                <option value="0">
                    Inactivo
                </option>

            </select>
        </div>



        <div class="flex gap-3 pt-4">

            <a href="{{ route('puntos_venta.index') }}"
               class="flex-1 text-center bg-slate-100 text-slate-700 py-3 rounded-xl font-semibold">
                Cancelar
            </a>


            <button
                class="flex-1 bg-brand-600 text-white py-3 rounded-xl font-bold hover:bg-brand-700">

                Guardar

            </button>

        </div>


    </form>

</div>



<script>

document.getElementById('local_id').addEventListener('change',function(){

    let local = this.value;

    let almacenes = document.querySelectorAll('#almacen_id option');


    almacenes.forEach(option=>{

        if(option.value===""){
            option.style.display="block";
            return;
        }


        if(option.dataset.local == local){
            option.style.display="block";
        }
        else{
            option.style.display="none";
        }

    });


    document.getElementById('almacen_id').value="";

});

</script>


@endsection