@extends('admin.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{asset('assets/admin/css/lib/toastr.css')}}">

    <style>
        .highlight{
            background: #FC0 !important;
        }
    </style>
@endsection
@section('content')
    <div class="side-title">
        <h3>{{$head ?? '' }}</h3>
    </div>

    <div class="border-item">
        <form class="form-row add_hall_from" method="post" action="{{ $action }}" enctype="multipart/form-data" autocomplete="off">
            @if($hotel ?? ''  && $hotel->id)
                @method('PUT')
            @endif
            @csrf
            <div class="form-group col-lg-12">
                <label for="location">{{ meta('address', $local) ?? __('hotels.address') }}</label>
                <div class="d-flex justify-content-between align-items-center">
                    <input type="text" name="address" id="location" class="form-control" placeholder="{{__('hotels.address') . __('hotels.choose_address_via_map')}}" value='{{ $hotel->address ?? "" }}'>
                    <button style="font-size: 12px" type="button" class="butn small modal-btn mr-2" data-toggle="modal" data-target="#exampleModalCenter">
                        <span>{{__('hotels.location')}}</span>
                    </button>
                    <input type="hidden" name="lat" value='{{ $hotel->lat ?? "" }}'>
                    <input type="hidden" name="lng" value='{{ $hotel->lng ?? "" }}'>
                </div>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('city_id', $local) ?? __('hotels.city_id') }} </label>
                <select name="city_id" class="form-control">
                    <option value="">{{ meta('city_id', $local) ?? __('hotels.city_id') }}</option>
                    @if(count($cities))
                        @foreach($cities as $city)
                            <option {{($hotel->city_id ?? null) == $city->id ? 'selected': ''}} value="{{$city->id}}">{{$city->name}}</option>
                        @endforeach
                    @endif
                </select>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('email', $local) ?? __('hotels.email') }} </label>
                <input type="email" class="form-control" name="email" placeholder="{{ meta('email', $local) ?? __('hotels.email') }}" value='{{ $hotel->email ?? "" }}'/>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('status', $local) ?? __('hotels.status') }} </label>
                <select name="status" class="form-control">
                    {{--                <option value="">{{ meta('status', $local) ?? __('hotels.status') }}</option>--}}
                    <option {{($hotel->status ?? null) == 1 ? 'selected': ''}} value="1">{{__('hotels.active')}}</option>
                    <option {{($hotel->status?? null) == 0 ? 'selected': ''}} value="0">{{__('hotels.non_active')}}</option>
                </select>
            </div>
            <div class="form-group col-lg-3">
                <label>{{ meta('show_in_hotel_home', $local) ?? __('hotels.show_in_hotel_home') }} </label>
                <select name="show_in_hotel_home" class="form-control">
                    <option {{($hotel->show_in_hotel_home ?? null) == 1 ? 'selected': ''}} value="1">{{__('hotels.yes')}}</option>
                    <option {{($hotel->show_in_hotel_home?? null) == 0 ? 'selected': ''}} value="0">{{__('hotels.no')}}</option>
                </select>
            </div>

            <div class="card p-3 mb-3 col-lg-12">
                <label>{{ meta('room_type', $local) ??  __('hotels.room_type') }} </label>
                <div class="row card-body room_type_container">
                    @if(count($hotelRooms ?? []))
                        @foreach($hotelRooms as $hotelRoom)
                            <div class="col-md-6 deleted_room_container">
                                <div class="custom-control d-flex justify-content-between mb-2">
                                    <a href="{{route('hotels.deleteRoom', $hotelRoom->id)}}" class="delete_room"><i class="fa fa-times fa-2x text-danger"></i></a>
                                    <label class="mr-2"> {{$hotelRoom->name}}</label>
                                    <a data-room-name="{{$hotelRoom->name}}" data-room-id="{{$hotelRoom->id}}" class="btn btn-secondary btn-sm edit_room_modal_link" href="#">{{__('hotels.show_dates')}}</a>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                <div class="col-md-12">
                    <a class="btn btn-outline-success btn-block btn-sm" data-toggle="modal" href="#add_room_modal"><h5><i class="fa fa-home"></i> {{__('hotels.add_room')}}</h5> </a>
                </div>
            </div>



            @foreach(languages() as $language)
                <div class="form-group col-lg-12">
                    <label>{{ meta('name', $language->local) ?? __('hotels.name') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="name_{{ $language->local }}" placeholder="{{ meta('name', $language->local) ?? __('hotels.name') }}" value='{{ $hotel[$language->local]->name ?? "" }}'/>
                </div>
                <div class="form-group col-lg-12">
                    <label>{{ meta('description', $language->local) ?? __('hotels.description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <textarea name="description_{{ $language->local }}" class="form-control {{ $errors->has('description_'.$language->local) ? 'is-invalid' : '' }}" placeholder="{{ meta('description', $language->local) ?? __('hotels.description') }}">{{ old("description_{$language->local}", $hotel[$language->local]->description ?? "") }}</textarea>
                </div>
            @endforeach
            <div class="col-md-12">
                <div class="custom-control custom-checkbox mb-2">
                    <input type="checkbox" {{ ($hotel->include_breakfast ?? null) ? 'checked' : '' }} value="1" class="custom-control-input" id="include_breakfast" name="include_breakfast">
                    <label class="custom-control-label" for="include_breakfast"> {{__('hotels.include_breakfast')}}</label>
                </div>
            </div>

            <div class="border-item photos hotel_images col-md-12 other_image_container">
                <div class="row">
                    @if ($hotel ?? false)
                        @foreach ($hotel['images'] as $photo)
                            <div class="col-md-4">
                                <div class="items">
                                    <div class="img">
                                        <a href="{{ asset($photo ?? '')}}" data-fancybox="gallery"><img src="{{ asset($photo ?? '')}}" alt=""></a>
                                    </div>
                                    <input type="hidden" name="images[]" value="{{ $photo ?? "" }}">
                                    <a href="#" class="close"><i class="fas fa-times"></i></a>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                <div class="text-center">
                    <input id="other_image_thumbnail" class="other_image_thumbnail" type="hidden"/>
                    <div class="clearfix"></div>
                    <span id="add">
                <a id="lfm" data-selector=".hotel_images" data-input-name="images[]" data-width="" data-cache="article_gallery" data-input=".other_image_thumbnail" data-preview="" data-show="" data-hide="" class="lfm add">
                    {{__('main.add_new_item')}}
                </a>
            </span>
                </div>
            </div>

            <div class="text-center mt-5 col-12">
                <button class="butn add_hall_button"><span>{{ __('dashboard.save') }}</span></button>
            </div>
        </form>
    </div>

    @include('admin/hotels/modals/location')
    @include('admin/hotels/modals/add_room')
    @include('admin/hotels/modals/edit_room')

@endsection

@section('inner_js')
    <!-- Editor JS files -->
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    {{--    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>--}}
    <script>
        var route_prefix = "{{ url(config('lfm.prefix')) }}";
        var url = "{{url('/')}}/",
            currentLanguage = "{{$local}}",
            inputName = '';
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
    <script src="{{ asset('assets/admin/js/articles.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lib/toastr.min.js') }}"></script>



    <script>

        let getCityAndSectorRoute = "{{route('hotels.getCityAndSector')}}";
        let fillAllDatesMessage = "{{__('hotels.fill_all_dates')}}";
        let selectRoomMessage = "{{__('hotels.select_room')}}";
        let fillPriceFieldMessage = "{{__('hotels.fill_all_price')}}";
        let hotel_id = "{{($hotel->id ?? null)}}",
            roomContainer = [],
            getRoomDatesRoute = "{{route('hotels.getRoomDates')}}",
            editRoomDatesRoute = "{{route('hotels.editRoomDates')}}",
            dateFrom = "{{__('hotels.dates_from')}}",
            dateTo = "{{__('hotels.dates_to')}}",
            price = "{{__('hotels.price')}}";

        localStorage.setItem('articleGallery', null);
        localStorage.setItem('oldArticleStorage', null);

        $('.add_hall_button').click(async function (e) {
            e.preventDefault();

            let form = $('.add_hall_from'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            if(roomContainer){
                data.append('room_type', JSON.stringify(roomContainer));
            }

            $('.discount_dates_input').each(function () {
                if ($(this).prop('checked') === false){
                    data.append('discount_dates[]', 0);
                    data.append('discount_percentage[]', 'empty');
                } else {
                    data.append('discount_dates[]', 1);
                    let inputSibling = $(this).siblings('.discount_percentage');
                    data.append('discount_percentage[]', inputSibling.val());

                }});


            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method
            });

            if (response.url){
                window.location.href = response.url;
            }

            if (response.errors){
                toasterError(response.errors);
            }


        });

        $(document).on('click', '.active_hall' , async function (e) {
            e.preventDefault();
            let url = $(this).data('href'),
                method = 'get';

            const response=await ajax({
                url,
                dataType: 'json',
                method,
            });
            if (response.message) {
                $(this).children('i').toggleClass('fa-check text-success fa-times text-danger')

            }
        });

        $('.add_date_link').click(function (e) {
            e.preventDefault();
            let random = Math.ceil(Math.random()*100000);
           let dateContent = `
                        <div class="d-flex justify-content-between align-items-center btn-outline-secondary date_item">
                            <a href="#" class="delete_date"><i class="fa fa-times text-danger fa-2x"></i></a>
                            <div class="form-group col-md-4">
                                <label for="date_from_${random}">Date From</label>
                                <input type="date" name="date_from[]" id="date_from_${random}" class="form-control dates">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="date_to_${random}">Date To</label>
                                <input type="date" name="date_to[]" id="date_to_${random}" class="form-control dates">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="price_${random}">Price</label>
                                <input type="number" min="1" name="price[]" id="price_${random}" class="form-control prices">
                            </div>
                        </div>`;
            $($(this).data('date-container')).append(dateContent);

        });

        $(document).on('click', '.delete_date', function (e) {
            e.preventDefault();
            $(this).parents('.date_item').remove();
        });

        $('.add_room_button').click(function () {
            let messages = [],
                room = $('select[name="room_id"]');
            if(room.val() === ''){
                messages.push(selectRoomMessage);
            }
            $('.add_room_date_container .dates').each(function () {
                if($(this).val() === ''){
                    messages.push(fillAllDatesMessage);
                    return false
                }
            });
            $('.add_room_date_container .prices').each(function () {
                if($(this).val() === ''){
                    messages.push(fillPriceFieldMessage);
                    return false
                }
            });
            if(messages.length){
                toasterError(messages[0]);
                return false;
            }

            let datesFrom = [],
                datesTo = [],
                price = [];
            $('.add_room_date_container input[name="date_from[]"]').each(function () {
                datesFrom.push($(this).val());
            });
            $('.add_room_date_container input[name="date_to[]"]').each(function () {
                datesTo.push($(this).val());
            });
            $('.add_room_date_container input[name="price[]"]').each(function () {
                price.push($(this).val());
            });
            // {1:{"date_from":[], "date_to":[], "price":[]}}
            let roomVal = parseInt(room.val());
            roomContainer[roomVal] = {date_from:datesFrom, date_to:datesTo, price:price};

            let selectedOption = $('select[name="room_id"] option:selected'),
                roomTypeContainer = $('.room_type_container');
            let roomFound = roomTypeContainer.find('.room_'+selectedOption.attr('value'));

            if(!roomFound.length){
                let roomContent = `
                <div class="col-md-4 append_room_container room_${selectedOption.attr('value')}">
                    <div class="custom-control d-flex justify-content-start mb-2">
                        <a data-room-id="${selectedOption.attr('value')}" href="#" class="append_delete_room"><i class="fa fa-times fa-2x text-danger"></i></a>
                        <label class="mr-2">${selectedOption.html()}</label>
                    </div>
                </div>`;
                roomTypeContainer.append(roomContent);
            }
        });

        $('.edit_room_button').click(async function () {
            let messages = [];
            $('.edit_room_date_container .dates').each(function () {
                if($(this).val() === ''){
                    messages.push(fillAllDatesMessage);
                    return false
                }
            });
            $('.edit_room_date_container .prices').each(function () {
                if($(this).val() === ''){
                    messages.push(fillPriceFieldMessage);
                    return false
                }
            });
            if(messages.length){
                toasterError(messages[0]);
                return false;
            }

            let datesFrom = [],
                datesTo = [],
                price = [];
            $('.edit_room_date_container input[name="date_from[]"]').each(function () {
                datesFrom.push($(this).val());
            });
            $('.edit_room_date_container input[name="date_to[]"]').each(function () {
                datesTo.push($(this).val());
            });
            $('.edit_room_date_container input[name="price[]"]').each(function () {
                price.push($(this).val());
            });
            let roomDates = {date_from:datesFrom, date_to:datesTo, price:price};

            let data = {
                    hotel_id:hotel_id,
                    room_id: $('input[name="room_id"]').val(),
                    room_dates:roomDates,
                    edit_room_dates_request_flag:true
                },
                url = editRoomDatesRoute,
                method = 'get';

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method
            });

            if(response.errors){
                toasterError(response.errors);
            }

            if(response.message){
                toasterSuccess(response.message);
                $('.edit_room_modal').modal('hide');
            }
        });

        $('.edit_room_modal_link').click(async function (e) {
            e.preventDefault();
            let data = {hotel_id:hotel_id,room_id: $(this).data('room-id')},
                url = getRoomDatesRoute,
                method = 'get';

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method
            });

            if(response.errors){
                toasterError(response.errors);
            }
            if(response.room_dates){
                let roomDateContainer = $('.edit_room_date_container');
                roomDateContainer.html('');
                $('.room_name').val($(this).data('room-name'));
                $('.room_id').val(response.room_id);

                response.room_dates.forEach(function (elem, index) {
                    roomDateContainer.append(`
                        <div class="d-flex justify-content-between align-items-center btn-outline-secondary date_item">
                        <a href="#" class="delete_date"><i class="fa fa-times text-danger fa-2x"></i></a>
                        <div class="form-group col-md-4">
                            <label for="date_from">${dateFrom}</label>
                            <input type="date" name="date_from[]" id="date_from_${index}" class="form-control dates" value="${elem['date_from']}">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="date_to">${dateTo}</label>
                            <input type="date" name="date_to[]" id="date_to_${index}" class="form-control dates" value="${elem['date_to']}">
                        </div>
                        <div class="form-group col-md-3">
                            <label for="price">${price}</label>
                            <input type="number" min="1" name="price[]" id="" class="form-control prices" value="${elem['price']}">
                        </div>
                    </div>
                    `);
                });

                $('.edit_room_modal').modal();
            }


        });

        $(document).on('click', '.append_delete_room', function (e) {
            e.preventDefault();
            let roomId = $(this).data('room-id');
            roomContainer.splice(roomId, 1);
            $(this).parents('.append_room_container').remove();
        });

        $('select[name="room_id"]').change(function () {
            if($(this).val() !== ''){
                // $('.date_item').remove()
            }
        });

        $('.delete_room').click(async function (e) {
            e.preventDefault();
            let url = $(this).attr('href'),
                method = 'GET';
            url = url+'?hotel_id='+hotel_id;
            const response=await ajax({
                url,
                dataType: 'json',
                method
            });

            if (response.message){
                let appendDeletedRoom = $(this).siblings('label').html(),
                    roomIdSelectBox =  $('select[name="room_id"]');
                roomIdSelectBox.append(`<option value="${response.deleted_room_id}">${appendDeletedRoom}</option>`);
                let optsLists = roomIdSelectBox.find('option');
                optsLists.sort(function (a,b) {
                    return parseInt($(a).val()) > parseInt($(b).val()) ? 1 : -1;
                });
                roomIdSelectBox.html('').append(optsLists);
                $(this).parents('.deleted_room_container').remove()
            }

        });




        let checkBoxInputs = $('input[type="checkbox"]');
        checkBoxInputs.click(function () {
            if($(this).prop('checked') === true){
                $($(this).data('price')).removeAttr('readonly')
            } else {
                $($(this).data('price')).val('');
                $($(this).data('price')).attr('readonly', 'readonly');
            }
        });

        checkBoxInputs.each(function () {
            if($(this).prop('checked') === true){
                $($(this).data('price')).removeAttr('readonly')
            } else {
                $($(this).data('price')).val('');
                $($(this).data('price')).attr('readonly', 'readonly');
            }
        });

    </script>

    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5HuBEjkPPxQH4c7Nhfx2-u5XXCtSIzUk&callback=initMap&libraries=&v=weekly" defer></script>
    {{--    <script src="{{ asset('assets/web/js/lib/google_maps.js') }}"></script>--}}

    <script>
        // The following example creates a marker in Stockholm, Sweden using a DROP
        // animation. Clicking on the marker will toggle the animation between a BOUNCE
        // animation and no animation.

        let latitude = null,
            longitude = null;
        if (navigator.geolocation) {
            navigator.geolocation.watchPosition(function (position) {
                // let lat = $('input.latitude'),
                //     lng = $('input.longitude');
                // latitude = lat.val(parseFloat(position.coords.latitude));
                // longitude = lng.val(parseFloat(position.coords.longitude));
                latitude = parseFloat(position.coords.latitude);
                longitude = parseFloat(position.coords.longitude);
                localStorage.setItem('lat', latitude);
                localStorage.setItem('lng', longitude);
            });
        } else {
            alert('Geolocation is not supported by this browser')
        }

        latitude = localStorage.getItem('lat');
        longitude = localStorage.getItem('lng');

        var marker;
        var save_location = $('.save_location');
        function initMap() {
            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 7,
                center: { lat: parseFloat(latitude) , lng: parseFloat(longitude) }
            });

            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: { lat: parseFloat(latitude) , lng: parseFloat(longitude) }
            });

            marker.addListener("dragend", function (map) {
                let lat = map.latLng.lat(), lng = map.latLng.lng();
                localStorage.setItem('lat', lat);
                localStorage.setItem('lng', lng);
                $('#latitude').val(lat);
                $('#longitude').val(lng);
                var geocoder = new google.maps.Geocoder();
                var infowindow = new google.maps.InfoWindow();

                google.maps.event.addListener(marker, 'dragend', function() {
                    infowindow.close();
                });

                var latlng = { lat: parseFloat(lat), lng: parseFloat(lng) };
                geocoder.geocode({ location: latlng }, function(results, status) {
                    if (status === "OK") {
                        if (results[0]) {
                            infowindow.setContent(results[0].formatted_address);
                            infowindow.open(map, marker);
                            document.getElementById('location').value = results[0].formatted_address
                        } else {
                            window.alert("No results found");
                        }
                    } else {
                        window.alert("Geocoder failed due to: " + status);
                    }
                });
                if (marker.getAnimation() !== null) {
                    marker.setAnimation(null);
                } else {
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            });
        }

        save_location.click(function (map) {
            let lat = localStorage.getItem('lat'),
                lng = localStorage.getItem('lng');
            localStorage.setItem('lat', lat);
            localStorage.setItem('lng', lng);
            $('input[name="lat"]').val(lat);
            $('input[name="lng"]').val(lng);
            var geocoder = new google.maps.Geocoder();
            var infowindow = new google.maps.InfoWindow();

            var latlng = { lat: parseFloat(lat), lng: parseFloat(lng) };
            geocoder.geocode({ location: latlng }, function(results, status) {
                if (status === "OK") {
                    if (results[0]) {
                        infowindow.setContent(results[0].formatted_address);
                        infowindow.open(map, marker);
                        document.getElementById('location').value = results[0].formatted_address
                    } else {
                        window.alert("No results found");
                    }
                } else {
                    window.alert("Geocoder failed due to: " + status);
                }
            });
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }

            $('.modal').modal('hide')
        });
    </script>

@endsection