@extends('layouts.dashboard')

@section('dashboard')
    @if (session('message'))
        <div class="alert alert-success mb-3">
            {{ session('message') }}
        </div>
    @endif


    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Flujo Agil</strong></li>
    </ul>
    <h1 class="titulo-h1 mb-4">Flujo Agil</h1>
    <form class="form-registro" method="post" action="{{ route('actualizar-flujo-agil') }}">
        {{ csrf_field() }}
        <div class="card border-0 rounded-0">
            <div class="card-body">
                <h3 class="py-3">Sin Cajero</h3>
                <div class="row my-md-4 align-items-center">
                    <div class="col-auto">
                        <label class="mt-3 mb-2 mt-md-2 m-lg-0 text-uppercase">Sin Cajero:</label>
                    </div>
                    <div class="col-md-5">
                        <div class="col-auto custom-switch">

                            <input type="checkbox" name="caja-rapida" class="custom-control-input" id="custom-switch"
                                value="si">
                            <label class="custom-control-label text-uppercase" for="custom-switch"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card border-0 rounded-0 mt-3">
            <div class="card-body">
                <h3 class="py-3">Sin Bodeguero</h3>
                <div class="row my-md-4 align-items-center">
                    <div class="col-auto">
                        <label class="mt-3 mb-2 mt-md-2 m-lg-0 text-uppercase">Compras:</label>
                    </div>
                    <div class="col-md-5">
                        <div class="col-auto custom-switch">
                            <input type="checkbox" name="picking-agil" class="custom-control-input"
                                id="custom-switch-picking-agil" value="si">
                            <label class="custom-control-label text-uppercase" for="custom-switch-picking-agil"></label>
                        </div>
                    </div>
                </div>
                <div class="row my-md-4 align-items-center">
                    <div class="col-auto">
                        <label class="mt-3 mb-2 mt-md-2 m-lg-0 text-uppercase">Confirmación de Stock:</label>
                    </div>
                    <div class="col-md-5">
                        <div class="col-auto custom-switch">
                            <input type="checkbox" name="confirmar-stock" class="custom-control-input"
                                id="custom-switch-confirma-stock" value="si">
                            <label class="custom-control-label text-uppercase" for="custom-switch-confirma-stock"></label>
                        </div>
                    </div>
                </div>
                <div class="row my-md-4 align-items-center">
                    <div class="col-auto">
                        <label class="mt-3 mb-2 mt-md-2 m-lg-0 text-uppercase">Entrega Rapida:</label>
                    </div>
                    <div class="col-md-5">
                        <div class="col-auto custom-switch">
                            <input type="checkbox" name="entrega-rapida" class="custom-control-input"
                                id="custom-switch-entrega-rapida" value="si">
                            <label class="custom-control-label text-uppercase" for="custom-switch-entrega-rapida"></label>
                        </div>
                    </div>
                </div>
                <div class="row my-md-4 align-items-center">
                    <div class="col-auto">
                        <label class="mt-3 mb-2 mt-md-2 m-lg-0 text-uppercase">Entrega Inmediata:</label>
                    </div>
                    <div class="col-md-5">
                        <div class="col-auto custom-switch">
                            <input type="checkbox" name="entrega-inmediata" class="custom-control-input"
                                id="custom-switch-entrega-inmediata" value="si">
                            <label class="custom-control-label text-uppercase" for="custom-switch-entrega-inmediata"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-right mt-4">
            <button type="submit" class="btn btn-primary btn-sm">Guardar cambios</button>
        </div>
    </form>

    <script>
        const firstSwitch = document.getElementById("custom-switch");
        const secondSwitch = document.getElementById("custom-switch-confirma-stock");

        // Función para sincronizar los switches
        function sincronizarSwitches() {
            secondSwitch.checked = firstSwitch.checked;
        }

        // Agregar un event listener para el primer switch
        firstSwitch.addEventListener("change", sincronizarSwitches);

        // Agregar un event listener para el segundo switch
        // secondSwitch.addEventListener("change", function() {
        //     firstSwitch.checked = secondSwitch.checked;
        // });

        // Inicialmente, sincroniza los switches
        //sincronizarSwitches();


    </script>
@endsection