@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">
    <link href="{{ asset('assets/js/jquery-jplist/jplist.styles.css') }}" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet">
@endsection
@section('content')
<!-- Filtros -->
{{-- @include('hotelbeds.form-booking') --}}
<!-- Titulo -->
<div class="container-fluid title">
    <h3 class="text-center" style="margin-bottom: 0px;">{{__('Listado de Hoteles')}}</h3>
</div>
<!-- Listado -->
@php
    $detalle=true;
@endphp
<div class="row">
    <div class="col-12 col-lg-3">
        @if (!empty($hotelList))
        <!-- Filtros -->
        @include('hotelbeds.form-filtros')
        @endif
    </div>
    <div class="col-12 col-lg-9" data-jplist-group="hoteles">
        @forelse ($hotelList as $hotel)
        @include('hotelbeds.item-listado')
        @empty
        <div class="alert alert-info" role="alert">
            <p>{{__('Sin resultados disponibles')}}</p>
        </div>
        @endforelse
        <!-- no results control -->
        <div data-jplist-control="no-results" data-group="hoteles" data-name="no-results">Sin resultados</div>
    </div>
    <!-- pagination control -->
    <div class="row"
        data-jplist-control="pagination"
        data-group="hoteles"
        data-items-per-page="5"
        data-current-page="0"
        data-name="pagination">

        <button type="button" data-type="first">«</button>
        <button type="button" data-type="prev">‹</button>

        <div class="jplist-holder" data-type="pages">
            <button type="button" data-type="page">{pageNumber}</button>
        </div>

        <button type="button" data-type="next">›</button>
        <button type="button" data-type="last">»</button>
    </div>
</div>
<!-- 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', '')}}"
    </script>
    <script src="{{ asset('assets/lte/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></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 src="{{ asset('assets/js/jquery-jplist/jplist.min.js') }}"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyClVF64CNSoBE8K9GBIBeWVjtd0pWY6Fdw"></script>
    <script src="{{ asset('js/hotelbeds-index.js') }}"></script>
    <script>
        jplist.init();
    </script>
@endsection