@extends('base')
@section('content')
    @if($establecimiento->telefono)
        <a href="https://api.whatsapp.com/send/?phone={{ $establecimiento->indicativo.$establecimiento->telefono }}"
           class="whatsapp" target="_blank"> <i class="mdi mdi-whatsapp whatsapp-icon"></i></a>
    @endif
    <div class="row" id="wizard-view"
         data-lang='{ "cancel": "@lang('front.cancel')", "current": "@lang('front.paso_actual'):", "finish": "@lang('front.finalizar')", "next": "@lang('front.next')", "previous": "@lang('front.previous')", "loading": "@lang('front.loading') ..."}'
        data-documentvalidation="{{ route('front.validate_document') }}">
        <div class="col-12 grid-margin">
            <div class="card" style="min-height: 100vh; overflow: auto">
                <div class="card-body">
                    <h4 class="card-title text-uppercase">{{__('front.gestionar_reserva')}}
                        <div class="float-right">
                            @include('front.components.switcher')
                        </div>
                    </h4>
                    <form id="example-form" action="#"
                          data-action="{{ route('front.registrar',['uuid'=>$establecimiento->uuid]) }}"
                    >
                        @csrf
                        <input type="hidden" name="locale" id="locale_hidden" value="{{ app()->getLocale() }}">
                        <input id="rediret" type="hidden" value="{{ $url_after_send }}">
                        <div>
                            <h3>{{__('front.datos')}}</h3>
                            <section>
                                <h3>{{__('front.datos_reserva')}}</h3>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="motivo">{{__('front.motivo')}} *</label>
                                            <select class="form-control" name="motivo" id="motivo" required>
                                                <option value="">{{__('front.seleccionar')}}</option>
                                                @foreach($data['motivo'] as $m)
                                                    <option value="{{ $m }}">{{ __('front.reasons.'.$m) }}</option>
                                                @endforeach
                                            </select>
                                            <span class="invalid-feedback">{{ __('front.campo_obligatorio') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="tipo_acomodacion">{{__('front.tipo_acomodacion')}} *</label>
                                            <select class="form-control" name="tipo_acomodacion" id="tipo_acomodacion"
                                                    required>
                                                <option value="">{{__('front.seleccionar')}}</option>
                                                @foreach($data['acomodacion'] as $m)
                                                    <option value="{{ $m }}">{{ __('front.acomodacion.'.$m) }}</option>
                                                @endforeach
                                            </select>
                                            <span class="invalid-feedback">{{ __('front.campo_obligatorio') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="check_in">{{__('front.fecha_llegada')}} *</label>
                                            <input type="date" name="check_in" id="check_in" class="form-control"
                                                   required
                                                   aria-describedby="check_in_help"
                                                   placeholder="{{__('front.fecha_llegada')}}">
                                            <span class="invalid-feedback">{{ __('front.campo_obligatorio') }}</span>

                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="check_out">{{__('front.fecha_salida')}} *</label>
                                            <input type="date" name="check_out" id="check_out" class="form-control"
                                                   required
                                                   aria-describedby="check_out_help"
                                                   placeholder="{{__('front.fecha_salida')}}">
                                            <span class="invalid-feedback">{{ __('front.campo_obligatorio') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="precio">{{__('front.valor_reserva')}}
                                                <small>({{__('front.pesos_colombianos')}})</small> *</label>
                                            <input type="text" data-inputmask="'alias': 'currency'" name="precio"
                                                   required
                                                   id="precio" class="form-control"
                                                   aria-describedby="precio_help">
                                            <span class="invalid-feedback">{{ __('front.campo_obligatorio') }}</span>

                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="pais_residencia">{{__('front.ciudad_residencia')}} *</label>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <select class="form-control select-country"
                                                            name="pais_residencia" id="pais_residencia"
                                                            required data-url="{{route('front.countries')}}"
                                                            data-target="#ciudad_residencia" data-lang="{{ app()->getLocale() }}">
                                                        <option>{{__('front.pais')}}</option>
                                                    </select>
                                                    <i class="text-secondary small">{{__('front.pais')}}</i>
                                                    <span
                                                        class="invalid-feedback">{{ __('front.campo_obligatorio') }}</span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <select class="form-control select-state"
                                                            name="ciudad_residencia" id="ciudad_residencia"
                                                            required
                                                            data-url="{{route('front.countries')}}"
                                                            data-target="#ciudad_residencia">
                                                        <option>{{__('front.city')}}</option>
                                                    </select>
                                                    <i class="text-secondary small">{{__('front.city')}}</i>
                                                    <span
                                                        class="invalid-feedback">{{ __('front.campo_obligatorio') }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="pais_procedencia">{{__('front.ciudad_procedencia')}} *</label>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <select class="form-control select-country"
                                                            name="pais_procedencia" id="pais_procedencia"
                                                            required data-target="#ciudad_procedencia"
                                                            data-lang="{{ app()->getLocale() }}">
                                                        <option>{{ __('front.pais') }}</option>
                                                    </select>
                                                    <i class="text-secondary small">{{__('front.pais')}}</i>
                                                    <span
                                                        class="invalid-feedback">{{ __('front.campo_obligatorio') }}</span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <select class="form-control select-state"
                                                            name="ciudad_procedencia" id="ciudad_procedencia"
                                                            data-url="{{route('front.countries')}}"
                                                            required>
                                                        <option value="">{{__('front.city')}}</option>
                                                    </select>
                                                    <i class="text-secondary small">{{__('front.city')}}</i>
                                                    <span
                                                        class="invalid-feedback">{{ __('front.campo_obligatorio') }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </section>
                            <h3>{{__('front.huesped')}}</h3>
                            <section>
                                <h3>{{__('front.principal')}}</h3>
                                @include('front.components.huesped', ['huesped' => 'principal','unique'=>uniqid(),'nacionalidades' => \App\Helper\Helper::getNacionalities() ])
                            </section>
                            <h3>{{__('front.acompanantes')}}</h3>
                            <section>
                                <h3>{{__('front.acompanantes_reserva')}}</h3>
                                <div class="row">
                                    <div class="col-lg-12 clearfix" >
                                        <div class="list-group" id="nav-acompanantes">
                                        </div>
                                    </div>
                                    <div id="acompananntes" class="col-lg-12">
                                        <div class='alert alert-warning' role='alert'>
                                        <b>{{__('front.si_no_hay')}}</b>
                                        </div>
                                    </div>
                                </div>
                                <buttton type="buttton" id="agregar-acompanante"
                                         class="btn btn-primary btn-block"
                                         data-href="{{ route('front.huesped') }}">
                                    <i class="mdi mdi-account-plus"></i> {{__('front.anadir_acompanante')}}
                                </buttton>
                            </section>
                            <h3>{{__('front.finalizar')}}</h3>
                            <section>
                                <h3>{{__('front.finalizar')}}</h3>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{__('front.telefono_contacto')}} <i
                                                    class="text-secondary small">{{__('front.optional')}}</i> </label>
                                            <input type="text" name="telefono"
                                                   id="telefono" class="form-control check-required"
                                                   placeholder="Teléfono">
                                            <span class="invalid-feedback">{{ __('front.campo_obligatorio') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{__('front.correo_electronico')}} <i
                                                    class="text-secondary small">{{__('front.optional')}}</i></label>
                                            <input type="email" name="email"
                                                   data-inputmask="'alias': 'email'"
                                                   id="email" class="form-control check-required"
                                                   placeholder="{{__('front.correo_electronico')}}">
                                            <span class="invalid-feedback">{{ __('front.campo_obligatorio') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <a href="https://digitra.rent/politicas/"
                                           target="_blank">{{__('front.ver_politicas')}}</a>
                                        <div class="form-group">
                                            <div class="form-check form-check-primary">
                                                <label class="form-check-label">
                                                    <i class="invalid-feedback">{{ __('front.campo_obligatorio') }}</i>
                                                    <input type="checkbox" class="form-check-input checked-required"
                                                           name="acepta_tratamiento_datos" value="1">
                                                    {{ __('front.acepta_tratamiento') }}
                                                </label>

                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="form-check form-check-primary">
                                                <label class="form-check-label">
                                                    <i class="invalid-feedback">{{ __('front.campo_obligatorio') }}</i>
                                                    <input type="checkbox" class="form-check-input  checked-required"
                                                           name="acepta_tratamiento_datos" value="1">
                                                    {{ __('front.acepta_terminos') }}
                                                </label>

                                            </div>
                                        </div>
                                        <p class="text-justify">
                                            {{__('front.terminos_condiciones')}}
                                        </p>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @include('front.components.sweetalert')
@endsection
@section('scripts')
    <script src="{{ route('assets.lang') }}"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ asset('front/vendors/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('front/vendors/jquery-steps/jquery.steps.min.js') }}"></script>
    <script src="https://parsleyjs.org/dist/parsley.js"></script>
    <script src="{{ asset('front/vendors/moment/moment.js') }}"></script>
     <script src="{{ asset('front/js/wizard.js') }}?{{ uniqid() }}"></script>

    <script src="{{ asset('front/vendors/inputmask/jquery.inputmask.bundle.js') }}"></script>
    <script src="{{ asset('front/js/inputmask.js') }}"></script>
    <script src="{{ asset('front/js/select2.js') }}?{{ uniqid() }}"></script>
    <script src="{{ asset('front/js/app.js') }}?{{ uniqid() }}"></script>
    <!-- CAMBIAR -->
    <script>
        $(document).ready(function () {

            function sn(){
                $(".select-nacionalidad").select2({
                    placeholder: "{{ __('front.seleccionar') }}",
                    allowClear: true,
                    theme: "bootstrap",
                    width: '100%',
                    language: {
                        noResults: function () {
                            return "{{ __('front.no_results') }}";
                        },
                        searching: function () {
                            return "{{ __('front.buscar') }}";
                        }
                    }
                });
            }
            sn();

        });
    </script>
@endsection