@extends('layouts.app')
@section('styles')
    <link rel="stylesheet" href="{{ asset("css/diaSinOT.css") }}">
@endsection

@section('content')

    <div class="container">
        <div class="card px-0 pt-4 pb-0 mt-3 mb-3 rounded">
            <h2 class="text-center">
                <strong>Flujo Instalación sin OT</strong>
            </h2>
            <div class="row">
                <div class="col-md-12 mx-0">
                    <form
                        id="msform"
                        name="form_dia_sin_ot"
                        class="form"
                        action="{{ route('diaSinOT.store') }}"
                        method="POST"
                    >

                        <!-- progressbar -->
                        <ul id="progressbar">
                            <li class="active" id="account"><strong>Tipo Instalación</strong></li>
                            <li id="personal"><strong>Datos Entidad</strong></li>
                            <li id="payment"><strong>Información Instalación</strong></li>
                            <li id="confirm"><strong>Dispositivo</strong></li>
                        </ul>
                        <!-- fieldsets -->
                        <fieldset id="fieldsetTipoInstalacion">
                            <section class="d-flex flex-column justify-content-around align-items-center">
                                <div class="form-group w-25">
                                    <select
                                        form="form_dia_sin_ot"
                                        name="tipo_instalacion"
                                        id="tipoInstalacion"
                                        class="form-control text-center"
                                        required
                                    >
                                        <option value="">Tipo de Instalación</option>
                                        <option value="1">Sin OT Empresa</option>
                                        <option value="2">Sin OT Persona</option>
                                    </select>
                                </div>
                                <hr class="w-75">
                                <button type="button" name="next" class="btn action-button text-white text-bold">Siguiente</button>
                            </section>
                        </fieldset>
                        <fieldset id="fieldsetEmpresa">
                            <section class="d-flex flex-column justify-content-around align-items-center">
                                <div class="form-group w-25">
                                    <select
                                        form="form_dia_sin_ot"
                                        name="empresa"
                                        id="empresa"
                                        class="form-control text-center"
                                        required
                                    >
                                        <option value="" required>Nombre empresa</option>
                                        @foreach ($empresas as $empresa)
                                            <option value="{{ $empresa->id }}">{{ $empresa->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group w-25">
                                    <input
                                        form="form_dia_sin_ot"
                                        name="direccion"
                                        id="direccion"
                                        class="form-control text-center"
                                        type="text"
                                        placeholder="Lugar Físico de la Instalación"
                                        required
                                    >
                                </div>
                                <div>
                                    <button type="button" name="previous" class="btn action-button-previous text-white text-bold mx-auto">Atrás</button>
                                    <button type="button" name="next" class="btn action-button text-white text-bold mx-auto">Siguiente</button>
                                </div>
                            </section>
                        </fieldset>
                        <fieldset id="fieldsetCliente">
                            <section class="row align-items-around justify-content-center align-items-center">
                                <div class="row">
                                    <div class="form-group col-6 offset-3">
                                        <select
                                            form="form_dia_sin_ot"
                                            name="cliente"
                                            id="cliente"
                                            class="form-control text-center"
                                            required
                                        >
                                            <option value="">Seleccione un Cliente</option>
                                            @foreach ($clientes as $cliente)
                                                <option value="{{ $cliente->rut_cliente }}">{{ $cliente->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-4 offset-3">
                                        <input
                                            type="text"
                                            class="form-control text-center"
                                            placeholder="Direccion"
                                            name="direccion"
                                            id="direccion_cliente"
                                        >
                                    </div>
                                    <div class="form-group col-2">
                                        <input
                                            type="text"
                                            class="form-control text-center"
                                            placeholder="Comuna"
                                            name="comuna"
                                            id="comuna"
                                        >
                                    </div>
                                </div>
                            </section>
                            <div>
                                <button type="button" name="previous" class="btn action-button-previous text-white text-bold mx-auto">Atrás</button>
                                <button type="button" name="next" class="btn action-button text-white text-bold mx-auto">Siguiente</button>
                            </div>
                        </fieldset>
                        <fieldset id="fieldsetInstalacion">
                            <section class="d-flex flex-column justify-content-around align-items-center">
                                <div class="form-group w-25">
                                    <select form="form_dia_sin_ot" name="empresa_instaladora" id="empresaInstaladora" required="required" class="form-control text-center mb-2">
                                        <option value="" required>Empresa Instaladora</option>
                                        @foreach ($empresasInstaladoras as $empresaInstaladora)
                                            <option value="{{ $empresaInstaladora->id }}">{{ $empresaInstaladora->nombre }}</option>
                                        @endforeach
                                    </select>
                                    <select form="form_dia_sin_ot" name="prestador" id="prestador" required="required" class="form-control text-center mb-2">
                                        <option value="" required>Prestador</option>
                                        @foreach ($prestadores as $prestador)
                                            <option value="{{ $prestador->id }}">{{ $prestador->nombre }}</option>
                                        @endforeach
                                    </select>
				    <select
                                        form="form_dia_sin_ot"
                                        name="actividad"
                                        id="actividad"
                                        class="form-control text-center"
                                        required
                                    >
                                        <option value="" required selected>Tipo de Servicio</option>
                                        @foreach ($actividades as $actividad)
                                            <option value="{{ $actividad->id_actividad }}">{{ $actividad->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <button type="button" name="previous" class="btn action-button-previous text-white text-bold mx-auto">Atrás</button>
                                    <button type="button" name="next" class="btn action-button text-white text-bold mx-auto">Siguiente</button>
                                </div>
                            </section>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection('content')

@section('scripts')
    {{-- GOOGLE MAPS --}}
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default" type="application/javascript"></script>
    <script src="{{ asset('js/googleMap.js') }}" type="application/javascript"></script>
    {{-- GOOGLE MAPS --}}

    <script src="{{ asset('js/diaSinOT.js') }}" type="module"></script>
@endsection('scripts')

{{-- <form-tipo-instalacion />

<script src="{{ asset('js/vue/app.js') }}" type="module"></script> --}}