@extends('layouts.app')

@section('content')
    <x-menu></x-menu>

    <!-- Start Section -->
    <section class="section pt-40">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 order-lg-4 js-match-height">
                    <div class="contact__main p-0">
                        @if(Session::has('success-email'))
                            <div class="alert alert-success text-center alert-dismissible fade show">
                                <strong>Tu mensaje fue enviado con éxito!</strong>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif
                        <h2 class="section__heading">Contacto</h2>
                        <p>Escríbenos y estaremos felices de responderte lo antes posible <br>
                            <small>(*) Campos requeridos</small>
                        </p>
                        <form class="row" action="{{ route('contact.send-mail')  }}" method="POST">
                            @csrf
                            <div class="col-md-6 form-group">
                                <label for="name">(*) Nombre y Apellido</label>
                                <input type="text" class="form-control" name="name" id="name" aria-label="name"
                                       placeholder="Nombre Apellido" value="{{ old('name') }}">
                                @error('name')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 form-group">
                                <label for="name">(*) Teléfono</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1">+56</span>
                                    </div>
                                    <input type="number" class="form-control" name="phone" id="phone" aria-label="phone"
                                           placeholder="912345678" value="{{ old('phone') }}">
                                </div>
                                @error('phone')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 form-group">
                                <label for="name">Nombre del Negocio</label>
                                <input type="text" class="form-control" name="brand" id="brand" aria-label="brand"
                                       placeholder="El Nombre del Negocio" value="{{ old('brand') }}">
                                @error('brand')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 form-group">
                                <label for="email">(*) Correo Electrónico</label>
                                <input type="text" class="form-control" name="email" id="email" aria-label="email"
                                       placeholder="nombre@mail.cl" value="{{ old('email') }}">
                                @error('email')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 form-group">
                                <label for="subject">(*) Área</label>
                                <select class="form-control js-select" id="area" name="area" aria-label="area"
                                        aria-describedby="area">
                                    <option value="">Selecciona un área</option>
                                    <option
                                        value="Contratar Servicio" {{ old('area') == 'Contratar Servicio' ? "selected" : "" }}>
                                        Contratar Servicio
                                    </option>
                                    <option value="Soporte" {{ old('area') == 'Soporte' ? "selected" : "" }}>Soporte
                                    </option>
                                    <option value="Ventas" {{ old('area') == 'Ventas' ? "selected" : "" }}>Ventas
                                    </option>
                                    <option value="Otro" {{ old('area') == 'Otro' ? "selected" : "" }}>Otro</option>
                                </select>
                                @error('area')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 form-group">
                                <label for="subject">Que plan te gustaría?</label>
                                <select class="form-control js-select" id="plan" name="plan" aria-label="plan"
                                        aria-describedby="plan">
                                    <option value="">Selecciona un plan</option>
                                    <option
                                        value="Personalizado" {{ old('plan') == 'Personalizado' ? "selected" : "" }}>
                                        Personalizado
                                    </option>
                                    <option
                                        value="Básico Mensual" {{ old('plan') == 'Básico Mensual' ? "selected" : "" }}>
                                        Básico Mensual
                                    </option>
                                    <option value="Medio" {{ old('plan') == 'Medio Mensual' ? "selected" : "" }}>
                                        Medio Mensual
                                    </option>
                                    <option value="Full Mensual" {{ old('plan') == 'Full Mensual' ? "selected" : "" }}>
                                        Full Mensual
                                    </option>
                                    <option
                                        value="Básico Anual" {{ old('plan') == 'Básico Anual' ? "selected" : "" }}>
                                        Básico Anual
                                    </option>
                                    <option value="Medio Anual" {{ old('plan') == 'Medio Anual' ? "selected" : "" }}>
                                        Medio Anual
                                    </option>
                                    <option value="Full Anual" {{ old('plan') == 'Full Anual' ? "selected" : "" }}>
                                        Full Anual
                                    </option>
                                </select>
                                @error('plan')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-12 form-group">
                                <label for="comment">Comentario</label>
                                <textarea class="form-control" id="comment" name="comment" aria-describedby="comment"
                                          rows="8"
                                          style="resize: none;"
                                          placeholder="Algún comentario adicional que nos quieras dejar?">{{ old('comment') }}</textarea>
                            </div>

                            <div class="col-md-12 form-action">
                                <button type="submit" class="btn btn-primary btn-rounded">
                                    Enviar Mensaje
                                    <i class="fa fa-long-arrow-right"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-lg-4 js-match-height">
                    <aside class="aside__left contact__aside">
                        <div class="contact__aside--content">
                            {{--<div class="contact__aside--widget">
                                <h5 class="contact__aside--widget-title"><i class="fa fa-home"></i> Office address</h5>
                                <p>St.Kemacetan timur No.13 Block Q2 Jakarta - Indonesia</p>
                            </div>--}}
                            <div class="contact__aside--widget">
                                <h5 class="contact__aside--widget-title"><i class="fa fa-whatsapp"></i> Whatsapp</h5>
                                <p>
                                    <a id="phone-wsp-contact" href="https://wa.me/+56934323000/?text=Hola Kuup.cl">+56 9 3432 3000</a>
                                </p>
                            </div>
                            <div class="contact__aside--widget">
                                <h5 class="contact__aside--widget-title"><i class="fa fa-phone"></i> Teléfono</h5>
                                <p>
                                    <a id="phone-tel-contact" href="tel:+56934323000">+56 9 3432 3000</a>
                                </p>
                            </div>
                            <div class="contact__aside--widget">
                                <h5 class="contact__aside--widget-title"><i class="fa fa-envelope"></i> Correo
                                    Electrónico
                                </h5>
                                <p>
                                    <a id="mail-contact" href="mailto:contacto@kuup.cl">contacto@kuup.cl</a>
                                </p>
                            </div>
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </section>
    <!-- End Section -->
@endsection