@extends("theme.$theme.layout$ext")
@section('styles')
    <link href="{{ asset('css/circuito.css') }}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/assets/js/jquery-daterangepicker/daterangepicker.min.css" />
@endsection
@section('content')
<!-- Titulo -->
<div class="container-fluid title">
    <div class="container">
        <p class="text-center pt-5">{{ $circuito->description }}</p>
    </div>
</div>
<!-- Detalle -->
<div class="container">
    @include('circuito.circuito',['detalle' => true, 'edit' => true])
    @include('circuito.form-availability')
    @isset($circuito->information)
    <h4 class="titulo_rojo pl-0">
        <i class="fas fa-suitcase"></i>
        {{__('Información General')}}
    </h4>
    <ul class="list-unstyled">
        <li class="circuito_text_gray pt-0">
            <i class="fas fa-check-circle"></i>
            {{ $circuito->information->textDestination }}
        </li>
        <li class="circuito_text_gray">
            {{ $circuito->information->textDate }}
        </li>
    </ul>
    @endisset

    <div class="row">
        <div class="col-sm-6 col-md-6">
            @if(isset($circuito->servicesIncluded) && count($circuito->servicesIncluded))
            <h5 class="titulo_rojo pl-0">
                <i class="fas fa-suitcase"></i>
                {{__('Included')}}
            </h5>
            <ul class="list-unstyled circuito_text_gray pt-0">
            @foreach ($circuito->servicesIncluded as $included)
                <li>
                    <i class="fas fa-check-circle"></i>
                    {!! $included->servicio !!}
                </li>
            @endforeach
            </ul>
            @endif
        </div>
        <div class="col-sm-6 col-md-6">
            @if(isset($circuito->servicesNotIncluded) && count($circuito->servicesNotIncluded))
            <h5 class="titulo_rojo pl-0">
                <i class="fas fa-exclamation-circle"></i>
                {{__('Not Included')}}
            </h5>
            <ul class="list-unstyled circuito_text_gray pt-0 pl-2">
            @foreach ($circuito->servicesNotIncluded as $noIncluded)
                <li>
                    <i class="fas fa-times-circle"></i>
                    {!! $noIncluded->servicio !!}
                </li>
            @endforeach
            </ul>
        @endif
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-12">
        @isset($circuito->information->packageRemark)
            <h5 class="titulo_rojo pl-0">
                <i class="fas fa-exclamation-circle"></i>
                {{__('Important Notes')}}
            </h5>
            <ul class="circuito_text_gray pt-0 pl-2">
                {!! $circuito->information->importantNotes() !!}
            </ul>
        @endisset
        </div>
    </div>


    @if(isset($circuito->itinerary) && count($circuito->itinerary))
        <h5 class="titulo_rojo pl-0">
            <i class="fas fa-map"></i>
            {{__('Itinerario')}}
        </h5>
        <div class="row">

            <div class="col-sm-9 col-md-9">

                <dl class="circuito_text_gray">
                    @foreach ($circuito->itinerary as $dia)
                        <dt>{{ $dia->title }}</dt>
                        <dd>{{ $dia->description }}</dd>
                    @endforeach
                </dl>
            </div>
            <div class="col-sm-3 col-md-3">
                @isset($circuito->information->routeImage)
                    <a href="{{ $circuito->information->urlImage("","route")}}" data-toggle="lightbox" data-title="{{$circuito->information->textDestination}}" data-gallery="gallery">
                        <img src="{{ $circuito->information->urlImage("","route")}}" class="img-fluid mb-2" alt="Route"/>
                    </a>

                @endisset
            </div>

        </div>

    @endif

    @if(isset($circuito->hoteles) && count($circuito->hoteles))
    <h4 class="titulo_rojo pl-0">
        <i class="fas fa-suitcase"></i>
        {{__('Opciones')}}
    </h4>


    
    @endif

</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>

<!-- Actualización de imagen -->
<div class="modal fade" id="modalDetailUpdate" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Actualizar de detalle</h4>
            </div>
            <div class="modal-body">
                <form action="{{route('detalle_update')}}" method="post" id="updateForm">
                    {{ csrf_field() }}
                    <input type="file" id="image" name="image"/>
                    <input type="hidden" id="id" name="id" value=""/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{__('Cerrar')}}</button>
                <button type="button" class="btn btn-primary" id="btnSaveChanges">{{__('Guardar cambios')}}</button>
              </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
    <script type="text/javascript">
        var habilitarFechas = true;
        var listaFechas = @json($fechas_dis, JSON_PRETTY_PRINT);

        $(document).ready(function () {

            $('#modalDetailUpdate').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                var circuito_id = button.data('id'); // Extract info from data-* attributes
                var modal = $(this)
                modal.find('#id').val(circuito_id);
            });

            var $btnSave = $('#btnSaveChanges');
            $btnSave.on('click', function () {
                updateImage();
            });

        });

        function updateImage() {
            var $imageInput, $updateForm;
            $imageInput = $('#image');
            $updateForm = $('#updateForm');

            var formData = new FormData();
            formData.append('image', $imageInput[0].files[0]);

            $.ajax({
                url: $updateForm.attr('action') + '?' + $updateForm.serialize(),
                method: $updateForm.attr('method'),
                data: formData,
                processData: false,
                contentType: false
            }).done(function (data) {
                if (data.success)
                    $('#modalDetailUpdate').modal('hide');
                    $img_id = "#circuit-img-" + data.id;
                    $($img_id).attr('src', data.path);

            }).fail(function (x, y, z) {
                alert('La imagen no tiene el formato correcto');
                $('#modalDetailUpdate').modal('hide');
            });
        };


    </script>
    <script type="text/javascript" src="/assets/lte/plugins/daterangepicker/moment.min.js"></script>
    <script type="text/javascript" src="/assets/js/jquery-daterangepicker/jquery.daterangepicker.min.js"></script>
    <script src="{{ asset('js/circuito-detalle.js') }}"></script>

@endsection