@extends('layouts.app')

@section('metropolitana')

    @include('conductores/metropolitana/activos/zonas/editar')

    <x-dashboard.heading
        contenido-heading="Zonas"
        modal-target="editarZonaMetropolitana"
        icon-class="fas fa-map"
        contenido-button="Cambiar zonas"
        :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-caret-square-down"
            contenido-icon="Activar o desactivar zonas"
        />
    </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/metropolitana/activos/"
                    :parametro-url="$src->id"
                    contenido-navtab="Activos"
                />
                <x-dashboard.cards.card-header.navtabs
                    :navbar-activo="null"
                    url-navtab="/conductores/metropolitana/activos"
                    :parametro-url="null"
                    contenido-navtab="Volver"
                />
            </ul>
        </div>
        <form action="{{ url('/conductores/metropolitana/activos/' . $src->id) }}" method="POST" id="actualizarVehiculoActivo">
            {{ csrf_field() }}
            <div class="card-body">
                <div class="form-row">

                    {!! $zonasMetropolitana !!}

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

    <script>
        $(document).ready(function()
        {
            $(function()
            {
                for (i = 1; i < 11; i++)
                {
                    $('#editarEstadoZonaMetropolitana' + i + '').each(function()
                    {
                        $(this).select2({ theme: 'bootstrap4', placeholder: $(this).val() });
                    });
                }
            });
        });
    </script>

@endsection