@extends('layouts.frontpages')

@section('content')
    @include('partials.header')

    <div class="page contact">
        <div class="left-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">
                        <div class="contact-wrapper">
                            <h1 class="legend">
                                Contáctanos
                            </h1>
                            <p class="subtitle">
                                Aclara todas las dudas que tengas sobre <br> <span class="frank-hh">La Rosca</span>
                            </p>
                            <div class="col-md-12">
                                @if (count($errors->all()))
                                    <div class="alert alert-danger">
                                        @foreach ($errors->all() as $error)
                                            <p>
                                                <span class="help-block">
                                                    <strong>{{ $error }}</strong>
                                                </span>
                                            </p>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-12">
                                <br>
                                @if (session('status'))
                                    <div class="alert alert-info">
                                        {{ session('status') }}
                                    </div>
                                @endif
                            </div>
                            <form action="{{ route('contact.send') }}" method="post" class="form-common">
                                @csrf
                                <div class="row form-group">
                                    <div class="col">
                                        <label for="first_name">*Nombres:</label>
                                        <input type="text" name="first_name" class="form-control" required>
                                    </div>
                                    <div class="col">
                                        <label for="last_name">*Apellidos:</label>
                                        <input type="text" name="last_name" class="form-control" required>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col">
                                        <label for="cellphone">*Celular:</label>
                                        <input type="number" name="cellphone" class="form-control" required>
                                    </div>
                                    <div class="col">
                                        <label for="email">*Correo electrónico:</label>
                                        <input type="email" name="email" class="form-control" required>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col">
                                        <label for="department">Departamento:</label>
                                        <select name="department" class="form-control" id="department_id">
                                            <option value="">Selecciona departamento</option>
                                            @foreach ($departments as $item)
                                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col">
                                        <label for="city">Ciudad:</label>
                                        <select name="city" class="form-control" id="city_id" required>
                                            <option value="">Selecciona ciudad</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="message">*Mensaje:</label>
                                    <textarea name="message" cols="30" rows="4" class="form-control" required></textarea>
                                </div>
                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" required name="terms"
                                            id="terms-check">
                                        <label class="form-check-label" for="terms-check">
                                            Acepto términos y condiciones
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="authorize" id="habeas">
                                        <label class="form-check-label" for="habeas">
                                            Autorizo el tratamiento de mis datos de acuerdo con la finalidad establecida en
                                            la <span><a
                                                    href="https://www.laroscadd.com.co/storage/terms/Qa89oztC7hKwvBo1ES3oHhf4dv098lJzbjTGcnFJ.pdf"
                                                    target="_blank">política
                                                    de protección de datos personales</a></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-submit" type="submit">Enviar</button>
                                </div>
                                <p class="disclaimer">
                                    *Recuerda que la respuesta a tu solicitud puede tardar hasta 48 horas habiles.
                                </p>
                            </form>
                        </div>
                    </div>
                    <div class="col-md-1"></div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        @include('partials.footer')
                    </div>
                </div>
            </div>
        </div>
        <div class="right-section"></div>
    </div>
@stop