@extends('layouts.app')

@section('content')
    <x-menu></x-menu>
    <!-- Start Masthead -->
    <section class="masthead js-masthead-height pb-0" id="Inicio">
        <div class="masthead__style-overlay"></div>
        <div class="masthead__style-watter">
            <div class="container-fluid pt-4 px-2 px-md-5">
                <div class="owl-carousel js-owl-masthead">
                    @foreach($mastheads as $masthead)
                        <x-masthead :title="$masthead->title"
                                    :description="$masthead->description"
                                    :image="$masthead->image"
                                    :btn1-url="$masthead->btn_1_url"
                                    :btn1-icon="$masthead->btn_1_icon"
                                    :btn1-text="$masthead->btn_1_text"
                                    :btn1-color="$masthead->btn_1_color"
                                    :btn2-url="$masthead->btn_2_url"
                                    :btn2-icon="$masthead->btn_2_icon"
                                    :btn2-text="$masthead->btn_2_text"
                                    :btn2-color="$masthead->btn_2_color"
                                    :btn1-show="$masthead->btn_1_show"
                                    :btn2-show="$masthead->btn_2_show">

                        </x-masthead>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <!-- Start Section -->
    <section class="section pb-40">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h2 class="section__heading section__heading-center"> Optimizando Experiencias, Eliminando
                        Obstáculos.</h2>
                </div>
            </div>
            <div class="row h-100">
                @foreach($painPoints as $painPoint)
                    <x-pain-point :lead="$painPoint->lead"
                                  :title="$painPoint->title"
                                  :description="$painPoint->description"
                                  :url="$painPoint->url"
                                  :position="$painPoint->position"
                                  :active="$painPoint->active"
                    >
                    </x-pain-point>
                @endforeach
            </div>
        </div>
    </section>
    <!-- End Section -->

    <!-- Start Section -->
    <section class="section section__gray">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 text-center">
                    @if($uf)
                        <h2 class="section__heading section__heading-center">Kuup lo resuelve desde ${{ $priceLow }} +IVA por mes</h2>
                    @else
                        <<h2 class="section__heading section__heading-center">Kuup lo resuelve desde {{ $priceLow }} UF +IVA por mes</h2>
                    @endif
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="owl-carousel js-owl-dif">
                        @foreach($painPointSolutions as $painPointSolution)
                            <x-pain-point-solution :title="$painPointSolution->title"
                                                   :description="$painPointSolution->description"
                                                   :icon="$painPointSolution->icon"
                                                   :url="$painPointSolution->url"
                            >
                            </x-pain-point-solution>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Section -->

    <!-- Start Section -->
    <section class="section pt-40 pb-40" id="Funcionalidades">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <h2 class="section__heading section__heading-center">Características de Nuestro Servicio</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 offset-lg-2 text-center mb-40">
                    <p>
                        Ponemos a tu disposición lo último en tecnología para que tu negocio funcione como lo hacen las
                        grandes marcas.
                    </p>
                </div>
            </div>
            <div class="row">
                @foreach($features as $feature)
                    <x-feature-normal :title="$feature->title"
                                      :shortDescription="$feature->short_description"
                                      :url="$feature->url"
                                      :icon="$feature->icon">
                    </x-feature-normal>
                @endforeach
            </div>
        </div>
        <div class="row">
            <div class="col-12 text-center">
                <a href="{{ route('features') }}" class="btn btn-primary btn-rounded btn-stroke">
                    Ver más funcionalidades <i class="fa fa-long-arrow-right"></i>
                </a>
            </div>
        </div>
    </section>
    <!-- End Section -->

    <!-- Start Section -->
    <section class="section section__gray pt-40" id="Precios">
        <x-plan :price-plans="$pricePlans"
                :table-descriptions="$tableDescriptions"
                :uf="$uf">
        </x-plan>
    </section>
    <!-- End Section -->

    <x-banner></x-banner>

    <!-- Start Section -->
    <section class="section section__gray">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 text-center">
                    <h2 class="section__heading section__heading-center">Testimonios</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="owl-carousel js-owl-testimoni-2">
                        @foreach($testimonials as $testimonial)
                            <div class="item h-100">
                                <div class="column__boxed-testimonials h-100">
                                    <img src="{{ asset($testimonial->image) }}"
                                         class="testimoni__avatar-image column__boxed-img"
                                         alt="{{ $testimonial->name }}"/>
                                    <h5 class="column__boxed-title">{{ $testimonial->name }}</h5>
                                    <p>
                                        {!! $testimonial->text !!}
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Section -->

    <!-- Start Section -->
    <section class="section">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h2 class="section__heading section__heading-center">Marcas que lo utilizan</h2>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="owl-active-nav">
                        <div class="owl-carousel js-owl-clients">
                            <x-client></x-client>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section pt-40 section__gray" id="Contacto">
        <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