@extends("theme.$theme.layout")
@section('styles')
    <link href="{{ asset('assets/lte/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/hotelbeds_booking.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/js/jquery-daterangepicker/daterangepicker.min.css') }}" rel="stylesheet">
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection


@section('content')
<!-- Titulo -->
<div class="container-fluid title">
    <h3 class="text-center" style="margin-bottom: 0px;">{{__('Hoteles')}}</h3>
</div>
<!-- Filtros -->
@include('hotelbeds.form-booking')
<!-- Titulo -->
<div class="container-fluid title">
    <h3 class="text-center" style="margin-bottom: 0px;">{{__('Hoteles recomendados')}}</h3>
</div>
<!-- Listado -->
@forelse ($hotelList as $hotel)
    @include('hotelbeds.item-listado', ["imageTypes" => $imageTypes])
@empty
<div class="alert alert-info" role="alert">
    <p>{{__('Sin resultados disponibles')}}</p>
</div>
@endforelse

<!-- Loader -->
<div class="modal fade" id="modalLoader" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalLoaderLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header align-self-center">
                <h5 class="modal-title" id="modalLoaderLabel">{{__('Buscando disponibilidad')}}</h5>
            </div>
            <div class="modal-body text-center">
                <div class="spinner-border text-info" role="status">
                    <span class="sr-only">{{__('Buscando')}}...</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
    <script>
        var urlImg   = "{{ isset(config('app.urlImages')['hotelbeds']) ? config('app.urlImages')['hotelbeds'] : ''}}";
        var urlFotos = "{{route('hotel.images', '')}}"
        var urlDescp = "{{route('hotel.description', '')}}"
        var urlFiltroFotos = "{{route('hotel.images.type')}}"
    </script>
    <script src="{{ asset('assets/lte/plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/lte/plugins/select2/js/i18n/'.App::getLocale().'.js') }}"></script>
    <script src="{{ asset('assets/lte/plugins/daterangepicker/moment.min.js') }}"></script>
    <script src="{{ asset('assets/js/jquery-daterangepicker/jquery.daterangepicker.min.js') }}"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyClVF64CNSoBE8K9GBIBeWVjtd0pWY6Fdw"></script>
    <script type="text/javascript" src="{{ asset('js/hotelbeds-index.js') }}"></script>
@endsection