@extends('layouts.app')

@push('link')
    <link rel="stylesheet" href="{{mix('css/pages/master.css')}}">
@endpush

@section('contenido')
    <section class="master">
        <div class="master-cotizador">
            <div class="container-fluid w14">
                <div class="row">
                    <div class="col-12 text-center"><h2>Master Plan</h2></div>
                     <div class="col-12 col-md-12">
                        <ul class="tipo-lotes">
                           <li><a href='{{{route('front.masterplan')}}}' class="active"> Todos </a></li>
                            <li><a href='{{{route('front.residenciales')}}}' > Residenciales </a></li>
                            <li><a href='{{{route('front.mixtos')}}}'> Mixtos  </a></li>
                            <li><a href='{{{route('front.comerciales')}}}'> Comerciales </a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-md-12 pt-md-5 text-center">
                        {{--<img src="{{asset('img/nuna/Master.png')}}"/> --}}
                         @include('pages.components.lotificacion-etapa-1') 
                    </div>
                    
                    <div class="col-12 col-md-4">
                        <ul class="list-unstyled leyenda">
                            <li class="disponible">@lang('masterplan.disponible')</li>
                            <li class="apartado">@lang('masterplan.apartado')</li>
                            <li class="vendido">@lang('masterplan.vendido')</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal" tabindex="-1" role="dialog" id="mdMaster">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-uppercase" id="tlo">@lang('masterplan.md.tlo')</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{{route('front.masterplan.send')}}}" id="formMasterplan" method="post" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="id" id="idx" value="">
                        <div class="container-fluid m20">
                            
                            <div class="row">
                                <div class="col-4">
                              
                                <div class="col-12 3 m15" style="display:none">
                                    <h4><b>@lang('masterplan.md.area'):</b> <span id="m2"></span> m<sup>2</sup></h4>
                                </div>
                                <div class="col-12"></div>
                                <div class="col-12">
                                    <div class="row">
                                       <div class="col-12 " style="display:none">
                                            <label class="lb" for="plazo">@lang('masterplan.md.plazo')</label>
                                            <select name="plazo" id="plazo" class="form-control">
                                                <option value="">@lang('general.seleccione_una_opcion')</option>
                                                <option value="Contado">@lang('masterplan.contado')</option>
                                                <option value="Credito">@lang('masterplan.credito')</option>
                                            </select>
                                        </div> 
                                        <div class="col-12 m15 ">
                                            <label class="lb" for="s_mensualidades">@lang('masterplan.md.plazo')</label>
                                            <select name="s_mensualidades" id="s_mensualidades" class="form-control">
                                                <option value="">@lang('general.seleccione_una_opcion')</option>
                                                <option value="12">12 @lang('masterplan.meses')</option>
                                                <option value="24">24 @lang('masterplan.meses')</option>
                                                <option value="36">36 @lang('masterplan.meses')</option>
                                                <option value="48">48 @lang('masterplan.meses')</option>
                                                <option value="60">60 @lang('masterplan.meses')</option>
                                            </select>
                                            <input type="text" name="i_mensualidades" id="i_mensualidades" class="form-control d-none" style="pointer-events: none;">
                                        </div>
                                        <div class="col-12  m15" style="display:none">
                                            <label class="lb" for="precio_x_m2">@lang('masterplan.md.precio_x_m')</label>
                                            <input type="text" class="i-credito form-control" name="precio_x_m2" id="precio_x_m2" style="pointer-events: none;">
                                        </div>
                                        <div class="col-12  m15">
                                            <label class="lb" for="precio">@lang('masterplan.md.precio')</label>
                                            <input type="text" class="i-credito form-control" name="precio" id="precio" style="pointer-events: none;">
                                        </div>
                                        <div class="col-12 m15">
                                            <label class="lb" for="enganche">@lang('masterplan.md.enganche')</label>
                                            <input type="text" class="i-credito form-control" name="enganche" id="enganche" style="pointer-events: none;">
                                        </div>
                                        <div class="col-12 m15" style="display:none">
                                            <label class="lb" for="pago_mensual">@lang('masterplan.md.pago_mensual')</label>
                                            <input type="text" class="i-credito form-control" name="pago_mensual" id="pago_mensual" style="pointer-events: none;">
                                        </div>
                                        <div class="col-12 m15" id="col_anualidades" style="display:none">
                                            <label class="lb" for="anualidades">@lang('masterplan.md.anualidades')</label>
                                            <input type="text" class="i-credito form-control" name="anualidades" id="anualidades" style="pointer-events: none;">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 ">
                                    <div class="row">
                                        <p> Ingrese sus datos de contacto</p>
                                        <div class="col-12  m15">
                                            <label style="display:none" class="lb" for="nombre">@lang('masterplan.md.nombre')</label>
                                            <input type="text" class="form-control" name="nombre" id="nombre" placeholder="Nombre" required>
                                        </div>
                                        <div class="col-12  m15">
                                            <label style="display:none"  class="lb" for="telefono">@lang('masterplan.md.telefono')</label>
                                            <input type="text" class="form-control" name="telefono" id="telefono" placeholder="Telefono" required>
                                        </div>
                                        <div class="col-12  m15">
                                            <label style="display:none"  class="lb" for="correo">@lang('masterplan.md.correo')</label>
                                            <input type="email" class="form-control" name="correo" id="correo" placeholder="Correo" required>
                                        </div>
                                        <div class="col-12  m15">
                                            <label style="display:none"  class="lb" for="mensaje">@lang('masterplan.md.mensaje')</label>
                                            <input type="text" class="form-control" name="mensaje" id="mensaje" placeholder="Mensaje" required>
                                        </div>
                                        <div class="col-12 text-center pt-3 text-md-right">
                                            <div class="form-group m20">
                                                <input class="custom-checkbox" type="checkbox" id="terminos" value="1" required>
                                                <label for="terminos">
                                                    <span></span> <a href="#" target="_blank">@lang('masterplan.md.terminos')</a>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="col-8">
                                 <div class="bg m30 mx-auto" id="portada">
                                    <img src="{{asset('img/masterplan/base-modal-bg.jpg')}}" alt="Base">
                                </div>
                                <div class="col-12 col-md-10">
                                    <div class="row">
                                        
                                        <div class="col-12 col-md-6 m15 text-center text-md-right">
                                            <button type="submit" class="btn btn-verde">Solicitar Cotizacion </button>
                                        </div>
                                        <div class="col-12 col-md-6 m15 text-center text-md-right">
                                            <a id="plano" href='#' class="btn btn-verde" download>Descargar Plano</A>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                            <div class="container-fluid" style="display:none;">
                            <div style="background:url({{asset('img/banner-modal.jpg')}});background-position:center; background-size:cover; background-color: #11343A" class="w-100" >
                                <div class="plusvalia reset">
                                    <p class="p-plus">Conoce cuanto valdra tu inversión de hoy en 4 años...</p>
                                </div>
                            </div>
                        </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

    <div class="modal verde" tabindex="-1" role="dialog" id="mdSendSuccess">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content pt-4 pb-4">
                <div class="modal-body pb-1">
                    <h3 class="titulo text-center m30" style="color:black">Tu solicitud ha sido enviada, un asesor se pondra en contacto para darle segumiento gracias!</h3>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    @if (Session::has('message'))
        <script>
            $('#mdSendSuccess').modal('show');
        </script>
    @endif
    <script src="{{mix('js/masterplan.js')}}"></script>
@endpush