@extends('layouts.app')

@section('styles')
    {{-- Style Here --}}
    <link rel="stylesheet" href="{{ asset('plugins/src/filepond/filepond.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/src/filepond/FilePondPluginImagePreview.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/src/notification/snackbar/snackbar.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/src/sweetalerts2/sweetalerts2.css') }}">

    @vite(['resources/scss/light/plugins/filepond/custom-filepond.scss'])
    @vite(['resources/scss/light/assets/components/tabs.scss'])
    @vite(['resources/scss/light/assets/elements/alert.scss'])
    @vite(['resources/scss/light/plugins/sweetalerts2/custom-sweetalert.scss'])
    @vite(['resources/scss/light/plugins/notification/snackbar/custom-snackbar.scss'])
    @vite(['resources/scss/light/assets/forms/switches.scss'])
    @vite(['resources/scss/light/assets/components/list-group.scss'])
    @vite(['resources/scss/light/assets/users/account-setting.scss'])

    @vite(['resources/scss/dark/plugins/filepond/custom-filepond.scss'])
    @vite(['resources/scss/dark/assets/components/tabs.scss'])
    @vite(['resources/scss/dark/assets/elements/alert.scss'])
    @vite(['resources/scss/dark/plugins/sweetalerts2/custom-sweetalert.scss'])
    @vite(['resources/scss/dark/plugins/notification/snackbar/custom-snackbar.scss'])
    @vite(['resources/scss/dark/assets/forms/switches.scss'])
    @vite(['resources/scss/dark/assets/components/list-group.scss'])
    @vite(['resources/scss/dark/assets/users/account-setting.scss'])

@endsection

@section('content')

    <div class="account-settings-container layout-top-spacing">

        <div class="account-content">
            <div class="col-xl-2 col-lg-3 col-md-3 col-sm-3 mb-2 ms-auto">
                <a href="{{ route('flota.list') }}" class="btn btn-primary mb-2 me-4">+ Regresar</a>
            </div>

            <div class="row mb-3">
                <div class="col-md-12">
                    <h2>Actualización de Unidades de la flotilla</h2>

                    <ul class="nav nav-pills" id="animateLine" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="animated-underline-home-tab" data-bs-toggle="tab" href="#animated-underline-home" role="tab" aria-controls="animated-underline-home" aria-selected="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg> Información Básica y Legal</button>
                        </li>

                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="animated-underline-preferences-tab" data-bs-toggle="tab" href="#animated-underline-preferences" role="tab" aria-controls="animated-underline-preferences" aria-selected="false" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> Información Mecánica</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="animated-underline-contact-tab" data-bs-toggle="tab" href="#animated-underline-contact" role="tab" aria-controls="animated-underline-contact" aria-selected="false" tabindex="-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg> Información Adicional</button>
                        </li>
                    </ul>
                </div>
            </div>

            <form action="{{ route('flota.update', $flota->id) }}" method="POST" enctype="multipart/form-data" class="section general-info">
                @csrf
                @method('PUT')

                <div class="tab-content" id="animateLineContent-4">

                    <div class="tab-pane fade show active" id="animated-underline-home" role="tabpanel">
                        <div class="row">
                            <div class="col-xl-12 col-lg-12 col-md-12 layout-spacing">
                                <div class="info">
                                    <h6 class="mb-4">Información General y Fotos</h6>
                                    <div class="row">
                                        <div class="col-xl-3">
                                            <div class="img-uploader-content space-y-4">

                                                <!--
                                                @foreach(['foto_frontal', 'foto_lateral', 'foto_trasera'] as $foto)
                                                    <div class="mb-3">
                                                        <label class="text-xs font-bold uppercase">{{ str_replace('_', ' ', $foto) }}</label>
                                                        @if($flota->$foto)
                                                            <div class="mb-2">
                                                                <img src="{{ asset('storage/'.$flota->$foto) }}" class="img-thumbnail" style="height: 50px">
                                                            </div>
                                                        @endif
                                                        <input type="file" class="filepond" name="{{ $foto }}" accept="image/png, image/jpeg"/>
                                                    </div>
                                                @endforeach-->
                                                <div class="profile-image">

                                                    <!-- // The classic file input element we'll enhance
                                                    // to a file pond, we moved the configuration
                                                    // properties to JavaScript -->

                                                    <div class="img-uploader-content">
                                                    <input type="file" class="filepond"
                                                    name="filepond" accept="image/png, image/jpeg, image/gif"/>
                                                    </div>

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

                                        <div class="col-xl-9">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label>Nombre de identificación</label>
                                                    <input type="text" name="nombre_identificacion" id="nombre_identificacion" class="form-control mb-3 @error('nombre_identificacion') is-invalid @enderror"
                                                           value="{{ old('nombre_identificacion', $flota->nombre_identificacion) }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <label>Marca</label>
                                                    <input type="text" name="marca" id="marca" class="form-control mb-3 @error('marca') is-invalid @enderror"
                                                           value="{{ old('marca', $flota->marca) }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <label>Modelo</label>
                                                    <input type="text" name="modelo" id="modelo" class="form-control mb-3 @error('modelo') is-invalid @enderror"
                                                           value="{{ old('modelo', $flota->modelo) }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <label>Clase</label>
                                                    <input type="text" name="clase" id="clase" class="form-control mb-3 @error('clase') is-invalid @enderror"
                                                           value="{{ old('clase', $flota->clase) }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <label>Año fabricacion</label>
                                                    <input type="text" name="anio_fabricacion" id="anio_fabricacion" class="form-control mb-3 @error('anio_fabricacion') is-invalid @enderror"
                                                           value="{{ old('anio_fabricacion', $flota->anio_fabricacion) }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <label>Color</label>
                                                    <input type="text" name="color" id="color" class="form-control mb-3 @error('color') is-invalid @enderror"
                                                           value="{{ old('color', $flota->color) }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <label>Combustible</label>
                                                    <select name="combustible" id="combustible" class="form-control mb-3">
                                                        @foreach(['Gasolina', 'Diesel', 'Hibrido', 'Electrico'] as $tipo)
                                                            <option value="{{ $tipo }}" {{ old('combustible', $flota->combustible) == $tipo ? 'selected' : '' }}>{{ $tipo }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-6">
                                                    <label>Km Actual</label>
                                                    <input type="number" step="0.01" name="km_actual" id="km_actual" class="form-control mb-3" value="{{ old('km_actual', $flota->km_actual) }}">
                                                </div>
                                                <h4 class="mb-3"> Información Legal</h4>
                                                <div class="col-md-4">
                                                    <label>Placas</label>
                                                    <input type="text" name="placas" id="placas" class="form-control mb-3 @error('placas') is-invalid @enderror" value="{{ old('placas', $flota->placas) }}">
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Número de serie</label>
                                                    <input type="text" name="numero_serie" id="numero_serie" class="form-control mb-3 @error('numero_serie') is-invalid @enderror" value="{{ old('numero_serie', $flota->numero_serie) }}">
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Numero de motor</label>
                                                    <input type="text" name="numero_motor" id="numero_motor" class="form-control mb-3 @error('numero_motor') is-invalid @enderror" value="{{ old('numero_motor', $flota->numero_motor) }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="animated-underline-preferences" role="tabpanel">
                        <div class="row">
                            <div class="col-xl-12 layout-spacing">
                                <div class="info">
                                    <h6 class="mb-4">Información Mecánica</h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Estado General</label>
                                            <input type="text" id="estado_general" name="estado_general" class="form-control mb-3" value="{{ old('estado_general', $flota->estado_general) }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Tipo de Transmisión</label>
                                            <input type="text" id="tipo_transmision" name="tipo_transmision" class="form-control mb-3" value="{{ old('tipo_transmision', $flota->tipo_transmision) }}">
                                        </div>
                                        <div class="col-md-3">
                                            <label>No. Ejes</label>
                                            <input type="number" id="numero_ejes" name="numero_ejes" class="form-control mb-3" value="{{ old('numero_ejes', $flota->numero_ejes) }}">
                                        </div>
                                        <div class="col-md-3">
                                            <label>No. Ruedas</label>
                                            <input type="number" id="numero_ruedas" name="numero_ruedas" class="form-control mb-3" value="{{ old('numero_ruedas', $flota->numero_ruedas) }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Dimensiones (m)</label>
                                            <input type="text" id="dimensiones" name="dimensiones" class="form-control mb-3" placeholder="Largo x Ancho x Alto" value="{{ old('dimensiones', $flota->dimensiones) }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="animated-underline-contact" role="tabpanel">
                        <div class="row">
                            <div class="col-xl-12 layout-spacing">
                                <div class="info">
                                    <h6 class="mb-4">Información Adicional</h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Personal a Cargo</label>
                                            <input type="text" id="persona_a_cargo" name="persona_a_cargo" class="form-control mb-3" value="{{ old('persona_a_cargo', $flota->persona_a_cargo) }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Estatus de la Unidad</label>
                                            <select name="estatus" id="estatus" class="form-control mb-3">
                                                <option value="disponible" {{ $flota->estatus == 'disponible' ? 'selected' : '' }}>Disponible</option>
                                                <option value="en_ruta" {{ $flota->estatus == 'en_ruta' ? 'selected' : '' }}>En Ruta</option>
                                                <option value="mantenimiento" {{ $flota->estatus == 'mantenimiento' ? 'selected' : '' }}>En Mantenimiento</option>
                                                <option value="baja" {{ $flota->estatus == 'baja' ? 'selected' : '' }}>Baja</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label>Manual Disponible</label>
                                            <select name="manual_usuario_disponible" id="manual_usuario_disponible" class="form-control mb-3">
                                                <option value="1" {{ $flota->manual_usuario_disponible ? 'selected' : '' }}>Sí</option>
                                                <option value="0" {{ !$flota->manual_usuario_disponible ? 'selected' : '' }}>No</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 text-end p-lg-3">
                        <button type="submit" class="btn btn-primary btn-lg px-5">Actualizar Expediente Completo</button>
                    </div>
                </div>
            </form>

        </div>

    </div>

@endsection

@section('scripts')
    {{-- Scripts Here --}}
    <script src="{{ asset('plugins/src/filepond/filepond.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/FilePondPluginFileValidateType.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/FilePondPluginImageExifOrientation.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/FilePondPluginImagePreview.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/FilePondPluginImageCrop.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/FilePondPluginImageResize.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/FilePondPluginImageTransform.min.js') }}"></script>
    <script src="{{ asset('plugins/src/filepond/filepondPluginFileValidateSize.min.js') }}"></script>

    <script src="{{ asset('plugins/src/notification/snackbar/snackbar.min.js') }}"></script>
    <script src="{{ asset('plugins/src/sweetalerts2/sweetalerts2.min.js') }}"></script>

    @vite(['resources/js/users/account-settings.js'])

    <script type="module">
        userProfile.addFiles("{{ Vite::asset('resources/images/user-profile.jpeg') }}");
    </script>
@endsection