@extends('master.principal')
@section('header')
    <link rel="stylesheet" href="{{ asset('/assets/front/css/turnos.css') }}">
    <title> Turnos | {{ config('vw.name') }} </title>
@endsection
@section('content')
    <div id="headerBreadcrumb" class="header__breadcrumb absolute" style="top: 98px;">
        <a href="{{ route('inicio') }}">Inicio</a> / Turnos
    </div>

    <div class="trucks--detailed">

        <div class="sectionTitle">
            <div>
                <div class="yellowBorder"></div>
            </div>
            <div class="title">
                <span>Reserva de Turnos Online</span>
            </div>
        </div>

    </div>
    <form action="{{ route('solicitar.turno') }}" method="POST">
        @csrf
        <div id="sectionColumn">
            <div class="main">
                <section class="wrapper row">

                    <div class="row">



                        <div class="col-md-12">
                            @if (session('mensaje'))
                            <style>.hide-after-send {opacity: 0;z-index:-9}</style>
                                
                                    {{ session('mensaje') }}
                                
                            @endif
                            <div id="success-project-contact-form" class="no-margin-lr" style="display: none;"></div>
                        </div>

                        <div class="col-md-6 col-sm-12 hide-after-send">

                            <h5 class="mb-3">Fechas tentativas del turno solicitado:</h5>

                            <div class="row">
                                
                                 <div class="col-md-4">
                                    <div class="form-group">
                                        <select name="sucursal" required class="form-control">
                                        <option value="">Seleccionar Sucursal</option>
                                        <option value="Casa Central">Casa Central</option>
                                        <option value="Suc. Concordia">Sucursal Concordia</option>
                                        <option value="Suc. Santa Fe">Sucursal Santa Fe</option>
                                        <option value="Agente Reconquista">Agente Reconquista</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <input type="date" name="fecha" class="form-control" required="">
                                    </div>
                                </div>

                                <div class="col-md-4 mt-2">

                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="horario" value="Mañana"
                                            id="inlineRadio1">
                                        <label class="form-check-label" for="inlineRadio1">Mañana</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="horario" value="Tarde"
                                            id="inlineRadio2">
                                        <label class="form-check-label" for="inlineRadio2">Tarde</label>
                                    </div>

                                </div>

                            </div>

                        </div>


                        <div class="col-md-6 hide-after-send">

                            <h5 class="mb-3">Datos del vehículo:</h5>

                            <div class="form-group">
                                <input type="text" name="modelo" placeholder="Modelo*" class="form-control mb-4"
                                    required="">
                            </div>

                            <div class="row">

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" name="patente" placeholder="Patente*" class="form-control mb-4"
                                            required="">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" name="km" placeholder="Kilometraje*" class="form-control mb-4"
                                            required="">
                                    </div>
                                </div>

                            </div>

                        </div>

                        <div class="col-md-6 hide-after-send">

                            <h5 class="mb-3">Datos de contacto:</h5>

                            <div class="row">

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" name="razon" placeholder="Razón social*"
                                            class="form-control mb-4" required="">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" name="cuit" id="cuit" placeholder="CUIT*"
                                            class="form-control mb-4" required="">
                                    </div>

                                </div>

                            </div>

                            <div class="form-group">
                                <input type="text" name="direccion" id="direccion" placeholder="Dirección*"
                                    class="form-control mb-4" required="">
                            </div>

                            <div class="row">

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" name="telefono" id="telefono" placeholder="Teléfono*"
                                            class="form-control mb-4" required="">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" name="cp" id="cp" placeholder="CP*" class="form-control mb-4"
                                            required="">
                                    </div>
                                </div>

                            </div>

                            <div class="form-group">
                                <input type="email" name="email" id="email" placeholder="E-mail*" class="form-control mb-4"
                                    required="">
                            </div>

                        </div>

                        <div class="col-md-6 hide-after-send">

                            <h5 class="mb-3">Tipo de servicio:</h5>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="asentamiento" id="asentamiento"
                                    value="Asentamiento">
                                <label class="form-check-label" for="asentamiento"> Asentamiento</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="lubricacion" id="lubricacion"
                                    value="Lubricación">
                                <label class="form-check-label" for="lubricacion">Lubricación</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="mp1" id="mp1" value="MP 1">
                                <label class="form-check-label" for="mp1">MP 1</span>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="mp2" id="mp2" value="MP 2">
                                <label class="form-check-label" for="mp2">MP 2</span>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="otros" id="otros" value="Otros">
                                <label class="form-check-label" for="otros">Otros</span>
                            </div>

                            <hr>

                            <textarea name="comment" id="comment" placeholder="Envíenos información adicional o sus comentarios" rows="6"
                                class="form-control" style="height: 167px;"></textarea>

                        </div>




                    </div>
                    <div class="col-md-3 text-right pb-4 d-flex submit hide-after-send">
                        <button id="reserva-button" type="submit" class="btn btn-secondary">ENVIAR SOLICITUD DE
                            TURNO</button>
                    </div>
            </div>

            </section>
        </div>
    </form>
    </div>
@endsection