<x-app-layout>

    <div>
        @section('title', 'Crear Remota')

        <div class="col">
            <form action="{{ route('remotas.update',$remota->id) }}" method="POST" class="row g-3" id="formRemota">
                @csrf
                <!-- Card -->
                <div class="card border-0 scroll-mt-3" id="basicInformationSection">
                    <div class="card-header">
                        <h2 class="h3 mb-0 text-center">Editar Remota</h2>
                    </div>

                    @include('remotas.inputs-form')


                </div>

            </form>

        </div>

        {{-- <select id="proveedor">
            <!-- Opciones de proveedores aquí -->
            <option value="">Seleccione</option>
            <option value="1">Proveedor 1</option>
            <option value="2">Proveedor 2</option>
        </select>

        <select id="plan">
            <!-- Opciones de planes aquí -->
        </select> --}}

    </div>
    <script>
        var url = "{{ route('planes.porProveedor') }}";

    document.getElementById('proveedor_id').addEventListener('change', function() {
    var proveedor = this.value;

    // console.log(url +'/'+ proveedor);
    try {
        fetch(url +'/'+ proveedor)
            .then(function(response) {

                if (!response.ok) {
                    throw new Error('Error en la respuesta del servidor');
                }
                return response.json();

            })
            .then(function(data) {
                console.log(data);
                var select = document.getElementById('plan_id');
                var costo = document.getElementById('costo_plan');
                select.innerHTML = '';

                var option = document.createElement('option');
                var option = document.createElement('option');
                option.value = "";
                option.text = "Seleccione una opcion";
                select.add(option);
                data.forEach(function(plan) {
                    var option = document.createElement('option');
                    // agregar info de data
                    option.setAttribute('data-precio', plan.precio);
                    option.value = plan.id;
                    option.text = plan.nombre;
                    select.add(option);
                });
            })
            .catch(function(error) {
                console.error('Error:', error);
            });
    } catch (error) {
        console.error('Error:', error);
    }
    document.getElementById('plan_id').addEventListener('change', function() {
        let select_plan = document.getElementById('plan_id');
        // console.log(plan_cambiado);
        let plan_Seleccionado = select_plan.options[select_plan.selectedIndex];
        let precio_plan_seleccionado = plan_Seleccionado.getAttribute('data-precio');
        var costo = document.getElementById('costo_plan');
        costo.value = precio_plan_seleccionado;



    });
});





    </script>

</x-app-layout>