@extends('layouts.app')

@section('vehiculos')

    <x-dashboard.heading
        contenido-heading="Vehículos"
        modal-target=""
        icon-class=""
        contenido-button=""
        :restriccion-componente="null"
        :index-permiso="null"
    />

    <div class="form-row">
        <x-dashboard.icons
            column-icon="col-md-6 col-lg-6 col-xl-3"
            icon-class="fas fa-edit"
            contenido-icon="Actualizar vehículos diarios"
        />
    </div>

    @if (Session::has('success'))
        <div class="alert alert-success">
            {{ Session::get('success') }}
        </div>
    @endif

    <div class="card shadow">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <x-dashboard.cards.card-header.navtabs
                    :navbar-activo="null"
                    url-navtab="/conductores/listado-conductores"
                    :parametro-url="null"
                    contenido-navtab="Listado de Conductores"
                />
                <x-dashboard.cards.card-header.navtabs
                    :navbar-activo="null"
                    url-navtab="/conductores/valparaiso/activos"
                    :parametro-url="null"
                    contenido-navtab="Zona de Valparaíso"
                />
                <x-dashboard.cards.card-header.navtabs
                    :navbar-activo="null"
                    url-navtab="/conductores/metropolitana/activos"
                    :parametro-url="null"
                    contenido-navtab="Zona Metropolitana"
                />
                <x-dashboard.cards.card-header.navtabs
                    :navbar-activo="!null"
                    url-navtab="/conductores/vehiculos"
                    :parametro-url="null"
                    contenido-navtab="Vehículos"
                />
            </ul>
        </div>
        <form action="{{ url('/conductores/vehiculos') }}" method="POST" id="actualizarConductorVehiculo">
            {{ csrf_field() }}
            <div class="card-body">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <div class="card">
                                <h5 class="card-header bg-primary text-white" style="font-size: larger; font-weight: bold;">{{ __('Actualice la cantidad de vehículos que tiene') }}</h5>
                                <div class="card-body">

                                    <div class="form-group row">
                                        <div class="col-md-6 offset-md-4 text-md-right">
                                            <input type="hidden" class="form-control" id="editarConductorVehiculoID" name="editarConductorVehiculoID" value="{{ $data->id }}">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-4 col-form-label text-md-right">{{ __('Cantidad') }}</label>
                                        <div class="input-group col-md-6">
                                            <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-truck"></i></span></div>
                                            <select class="custom-select @error('editarCantidadConductorVehiculo') is-invalid @enderror" id="editarCantidadConductorVehiculo" name="editarCantidadConductorVehiculo" data-placeholder="Elija la cantidad..." placeholder="Ingrese la cantidad" autofocus>
                                                <option></option>
                                                <optgroup label="Vehículos">
                                                    @foreach ($vehiculos as $vehiculo)
                                                        <option value="{{ $vehiculo->id }}">{{ $vehiculo->cantidad }}</option>
                                                    @endforeach
                                                </optgroup>
                                            </select>
                                            @error('editarCantidadConductorVehiculo') <span class="invalid-feedback"><strong>{{ $message }}</strong></span> @enderror
                                            <label class="col-form-label primary-icon" style="font-size: 12px;"><strong>{{ __('Considere sólo los vehículos que reparten dentro de la Región Metropolitana.') }}</strong>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-4 col-form-label text-md-right">{{ __('Actualizado') }}</label>
                                        <div class="input-group col-md-6">
                                            <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-calendar-alt"></i></span></div>
                                            <input type="text" class="form-control" value="{{ $data->actualizado }}" readonly>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 offset-md-4">
                                            <label>{{ $data->editado }}</label>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-0">
                                        <div class="col-md-6 offset-md-4">
                                            <button type="submit" class="btn btn-primary" id="btn-modificarConductorVehiculo"><i class="fas fa-edit"></i>&nbsp;&nbsp;&nbsp;{{ __('Modificar') }}</button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <script>
        $(document).ready(function()
        {
            var id = $('#editarConductorVehiculoID').val();

            $('#editarCantidadConductorVehiculo').val(id);

            $(function()
            {
                $('#editarCantidadConductorVehiculo').each(function()
                {
                    $(this).select2({ theme: 'bootstrap4', placeholder: $(this).val() });
                });
            });

            $('#actualizarConductorVehiculo').on('submit', function()
            {
                $('#btn-modificarConductorVehiculo').attr('disabled', true);
                $('#btn-modificarConductorVehiculo').html('<i class="fas fa-edit"></i>&nbsp;&nbsp;&nbsp;Modificando...');
            });
        });
    </script>

@endsection