@extends('admin.layouts.container')
@section('content')
    <div class="side-title">
        <h3>{{$head ?? '' }}</h3>
    </div>

    <div class="border-item">
        <form class="form-row add_umrah_trip_form" method="post" action="{{ $action }}" enctype="multipart/form-data" autocomplete="off">
            @if($umrahTrip ?? ''  && $umrahTrip->id)
                @method('PUT')
            @endif
            @csrf

            {{--            <div class="form-group col-lg-3">--}}
            {{--                <label>{{ meta('umrah_trip_type', $local) ?? __('umrahTrips.umrah_trip_type') }} </label>--}}
            {{--                <select name="umrah_trip_type" class="form-control">--}}
            {{--                    <option value="">{{__('umrahTrips.umrah_trip_type')}}</option>--}}
            {{--                    <option {{($umrahTrip->umrah_trip_type) == 'u' ? 'selected' : ''}} value="u">{{__('umrahTrips.u')}}</option>--}}
            {{--                    <option {{($umrahTrip->umrah_trip_type) == 'ut' ? 'selected' : ''}} value="ut">{{__('umrahTrips.ut')}}</option>--}}
            {{--                    <option {{($umrahTrip->umrah_trip_type) == 'uta' ? 'selected' : ''}} value="uta">{{__('umrahTrips.uta')}}</option>--}}
            {{--                </select>--}}
            {{--            </div>--}}
            {{--            <div class="form-group col-lg-3">--}}
            {{--                <label>{{ meta('umrah_trip_date', $local) ?? __('umrahTrips.umrah_trip_date') }} </label>--}}
            {{--                <input type="date" class="form-control {{ $errors->has('umrah_trip_date') ? 'is-invalid' : '' }}" name="umrah_trip_date" placeholder="{{ meta('umrah_trip_date', $local) ?? __('umrahTrips.umrah_trip_date') }}" value='{{ old("umrah_trip_date", $umrahTrip->umrah_trip_date ?? "") }}' {{ ($umrahTrip->email ?? null)}}/>--}}
            {{--            </div>--}}

            <div class="form-group col-lg-4">
                <label>{{ meta('status', $local) ?? __('umrahTrips.status') }} </label>
                <select name="status" class="form-control {{ $errors->has('status') ? 'is-invalid' : '' }}">
                    <option {{old('status', $umrahTrip->status ?? null) == 1 ? 'selected' : '' }} value="1">{{__('umrahTrips.active')}}</option>
                    <option {{old('status', $umrahTrip->status ?? null) == '0' ? 'selected' : '' }} value="0">{{__('umrahTrips.non_active')}}</option>
                </select>
            </div>
            <div class="form-group col-lg-4">
                <label>{{ meta('departure_city', $local) ?? __('umrahTrips.departure_city') }} </label>
                <select name="departure_city" class="form-control">
                    <option value="">{{ meta('departure_city', $local) ?? __('umrahTrips.departure_city') }}</option>
                    @if(count($cities))
                        @foreach($cities as $city)
                            <option {{($umrahTrip->departure_city ?? null) == $city->id ? 'selected': ''}} value="{{$city->id}}">{{$city->name}}</option>
                        @endforeach
                    @endif
                </select>
            </div>

            <div class="form-group col-lg-4">
                <label>{{ meta('arrival_city', $local) ?? __('umrahTrips.arrival_city') }} </label>
                <select name="arrival_city" class="form-control">
                    {{--                    @if(in_array(($umrahTrip->umrah_trip_type ?? null), ['ut', 'uta']))--}}
                    @if(count($cities))
                        @foreach($cities as $city)
                            @if($city->id == ($umrahTrip->departure_city ?? null)) @continue @endif
                            <option {{($umrahTrip->arrival_city ?? null) == $city->id ? 'selected': ''}} value="{{$city->id}}">{{$city->name}}</option>
                        @endforeach
                    @else
                        <option value="">{{ meta('arrival_city', $local) ?? __('umrahTrips.arrival_city') }}</option>
                    @endif

                    {{--                    @endif--}}
                </select>
            </div>


            <label>{{ meta('umrah_trip_date', $local) ?? __('umrahTrips.umrah_trip_date') }}</label>
            <div class="col-md-12 umrah_trip_date_container row">
                @if(count($umrahTrip->umrah_trip_date ?? []))
                    @foreach($umrahTrip->umrah_trip_date as $umrahTripDate)
                        <div class="col-md-3 justify-content-between align-items-center {{$loop->iteration != 1 ? 'deleted_umrah_trip_date' : ''}}">
                            <div class="form-group mb-4">
                                <a style="cursor: pointer" class="{{$loop->iteration != 1 ? 'delete_umrah_trip_date_link' : ''}} mr-2"> <i class="fas fa-times fa-2x text-danger"></i> </a>
                                <input type="date" name="umrah_trip_date[]" class="form-control" value='{{ $umrahTripDate }}'>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="col-md-3 justify-content-between align-items-center deleted_umrah_trip_date">
                        <div class="form-group mb-4">
                            <a style="cursor: pointer" class="delete_umrah_trip_date_link mr-2"> <i class="fas fa-times fa-2x text-danger"></i> </a>
                            <input type="date" name="umrah_trip_date[]" class="form-control" value=''>
                        </div>
                    </div>
                @endif
            </div>
            <div class="form-group col-md-12">
                <a href="#" class="add_umrah_trip_date_link btn btn-primary ml-2"><i class="fa fa-plus"></i> {{__('umrahTrips.add_date')}} </a>
            </div>

            <div class="form-group col-lg-12 point_container">
                <label for="location">{{ meta('point_address', $local) ?? __('umrahTrips.point_address') }}</label>
                @if(count($umrahTrip->rally_point_info ?? []))
                    @foreach($umrahTrip->rally_point_info as $point)
                        <div class="d-flex justify-content-between align-items-center mb-4 {{$loop->iteration != 1 ? 'deleted_point' : ''}}">
                            @if($loop->iteration != 1)
                                <a href="#" class="delete_point_link ml-2"> <i class="fas fa-times fa-2x text-danger"></i> </a>
                            @endif
                            <input type="text" name="point_address[]" class="form-control" placeholder="{{__('umrahTrips.point_address') . __('umrahTrips.choose_address_via_map')}}" value='{{ $point['address'] }}'>
                            <button style="font-size: 12px" type="button" class="butn small modal-btn mr-2 point_map_button" data-toggle="modal" data-target="#exampleModalCenter">
                                <span>{{__('umrahTrips.point_location')}}</span>
                            </button>
                            <input type="hidden" name="lat[]" value='{{ $point['lat'] }}'>
                            <input type="hidden" name="lng[]" value='{{ $point['lng'] }}'>
                        </div>
                    @endforeach
                @else
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <input type="text" name="point_address[]" class="form-control" placeholder="{{__('umrahTrips.point_address') . __('umrahTrips.choose_address_via_map')}}" value='{{ $umrahTrip->address ?? "" }}'>
                        <button style="font-size: 12px" type="button" class="butn small modal-btn mr-2 point_map_button" data-toggle="modal" data-target="#exampleModalCenter">
                            <span>{{__('umrahTrips.point_location')}}</span>
                        </button>
                        <input type="hidden" name="lat[]" value='{{ $umrahTrip->lat ?? "" }}'>
                        <input type="hidden" name="lng[]" value='{{ $umrahTrip->lng ?? "" }}'>
                    </div>
                @endif


            </div>
            <div class="form-group col-md-12">
                <a href="#" class="add_point_link btn btn-primary ml-2"><i class="fa fa-plus"></i> {{__('umrahTrips.add_point')}} </a>
            </div>
            {{-- House type --}}
            <div class="card p-3 mb-3 col-lg-12">
                <label>{{ meta('house_type', $local) ??  __('umrahTrips.house_type') }} </label>
                <div class="row card-body">
                    <div class="col-md-6">
                        <div class="custom-control custom-checkbox mb-2">
                            <input data-price=".house_private_price" type="checkbox" {{ ($umrahTrip->house_private ?? null) == 'private' ? 'checked' : '' }} value="private" class="custom-control-input" id="house_private" name="house_private">
                            <label class="custom-control-label" for="house_private"> {{__('umrahTrips.house_private')}}</label>
                        </div>
                        <input readonly type="number" min="1" name="house_private_price" class="form-control house_private_price" placeholder="{{ meta('house_private_price', $local) ??  __('umrahTrips.house_private_price') }}" value="{{$umrahTrip->house_private_price ?? ''}}">
                    </div>
                    <div class="col-md-6">
                        <div class="custom-control custom-checkbox mb-2">
                            <input data-price=".house_group_price" type="checkbox" {{ ($umrahTrip->house_group ?? null) == 'group' ? 'checked' : '' }} value="group" class="custom-control-input" id="house_group" name="house_group">
                            <label class="custom-control-label" for="house_group"> {{__('umrahTrips.house_group')}}</label>
                        </div>
                        <input readonly type="number" min="1" name="house_group_price" class="form-control house_group_price" placeholder="{{ meta('house_group_price', $local) ??  __('umrahTrips.house_group_price') }}" value="{{$umrahTrip->house_group_price ?? ''}}">
                    </div>
                </div>
            </div>

            <div class="form-group col-lg-6">
                <label>{{ meta('days_counts', $local) ?? __('umrahTrips.days_counts') }} </label>
                <input type="number" min="1" class="form-control {{ $errors->has('days_counts') ? 'is-invalid' : '' }}" name="days_counts" placeholder="{{ meta('days_counts', $local) ?? __('umrahTrips.days_counts') }}" value='{{ old("days_counts", $umrahTrip->days_counts ?? "") }}' {{ ($umrahTrip->email ?? null)}}/>
            </div>
            <div class="form-group col-lg-6">
                <label>{{ meta('maximum_person_count', $local) ?? __('umrahTrips.maximum_person_count') }} </label>
                <input type="number" min="1" class="form-control {{ $errors->has('maximum_person_count') ? 'is-invalid' : '' }}" name="maximum_person_count" placeholder="{{ meta('maximum_person_count', $local) ?? __('umrahTrips.maximum_person_count') }}" value='{{ old("maximum_person_count", $umrahTrip->maximum_person_count ?? "") }}' {{ ($umrahTrip->maximum_person_count ?? null)}}/>
            </div>


            @foreach(languages() as $language)
                <div class="form-group col-lg-12">
                    <label>{{ meta('name', $language->local) ?? __('umrahTrips.name') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                    <input type="text" class="form-control" name="name_{{ $language->local }}" placeholder="{{ meta('name', $language->local) ?? __('umrahTrips.name') }}" value='{{ $umrahTrip[$language->local]->name ?? "" }}'/>
                </div>

                <div class="form-group col-lg-12">
                    <label>{{ meta('description', $language->local) ?? __('umrahTrips.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) ?? __('umrahTrips.description') }}">{{ old("description_{$language->local}", $umrahTrip[$language->local]->description ?? "") }}</textarea>
                </div>

            @endforeach


            {{--Start image container--}}
            <div class="form-group col-lg-12">
                <label>{{ meta('image', $local) ?? __('umrahTrips.image') }} </label>
                <input id="image_thumbnail" class="image_thumbnail" type="hidden" name="image" value="{{old("image", $umrahTrip->image ?? "")}}"/>

                <div class="photos main_photo {{ old('image', $umrahTrip->image ?? '') ? ' wow fadeInUp' : 'hide' }}">
                    <div class="col-lg-4">
                        <div class="items">
                            <div class="img">
                                <a href="#" id="lfm" data-input=".image_thumbnail" data-preview=".image_holder" class="lfm" data-hide=".pick_button">
                                    <img src="{{asset(old('image', $umrahTrip->image ?? ''))}} "  id="image_holder" class="image_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".image_thumbnail" data-hide=".main_photo" data-show=".pick_button"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <span class="input-group-btn pick_button {{ old('image', $umrahTrip->image ?? '') ? 'hide' : '' }} ">
                        <a id="lfm" data-input=".image_thumbnail" data-preview=".image_holder" data-show=".main_photo" data-hide=".pick_button" class="lfm btn btn-primary text-light">
                            <i class="fas fa-camera-retro"></i> Choose
                        </a>
                    </span>
            </div>
            {{--End image container--}}

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


    <div class="modal fade map_modal" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">{{__('umrahTrips.point_location')}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div style="border:0; height: 400px; width: 100%" class="map" id="map"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="butn color small save_location"><span>{{__('umrahTrips.save_location')}}</span></button>
                </div>
            </div>
        </div>
    </div>


@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>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            imagePath = "{{asset('')}}",
            currentLanguage = "{{$local}}",
            inputName = null;
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>



    <script>

        let getCityRoute = "{{route('umrahTrips.getCities')}}";

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

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

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

            $('.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_umrah_trip' , 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')

            }
        });

        $('select[name="departure_city"]').change(async function (e) {
            e.preventDefault();

            let arrivalCity = $('select[name="arrival_city"]');
            arrivalCity.html(`<option value="">{{ __('umrahTrips.arrival_city') }}</option>`);

            if($(this).val() === ''){
                return  false
            }
            let data = {city_id: $(this).val()},
                url = getCityRoute,
                method = 'get';
            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method
            });

            if (response.cities.length){
                for (let i = 0; i < response.cities.length; i++){
                    arrivalCity.append(`<option value="`+response.cities[i].id+`">`+response.cities[i].name+`</option>`)
                }
            }
            if (response.errors){
                toasterError(response.errors);
            }


        });

        $('.add_umrah_trip_date_link').click(function (e) {
            e.preventDefault();
            $('.umrah_trip_date_container').append(`<div class="col-md-3 justify-content-between align-items-center deleted_umrah_trip_date">
                            <div class="form-group mb-4">
                                <a style="cursor: pointer" class="delete_umrah_trip_date_link mr-2"> <i class="fas fa-times fa-2x text-danger"></i> </a>
                                <input type="date" name="umrah_trip_date[]" class="form-control" value=''>
                            </div>
                        </div>`);
        });
        $(document).on('click', '.delete_umrah_trip_date_link', function (e) {
            e.preventDefault();
            $(this).parents('.deleted_umrah_trip_date').remove();
        });

        $('.add_point_link').click(function (e) {
            e.preventDefault();
            $('.point_container').append(`<div class="d-flex justify-content-between align-items-center mb-4 deleted_point">
                        <a href="#" class="delete_point_link ml-2"> <i class="fas fa-times fa-2x text-danger"></i> </a>
                        <input type="text" name="point_address[]" class="form-control" placeholder="{{__('umrahTrips.point_address') . __('umrahTrips.choose_address_via_map')}}" value=''>
                        <button style="font-size: 12px" type="button" class="butn small modal-btn mr-2 point_map_button" data-toggle="modal" data-target="#exampleModalCenter">
                            <span>{{__('umrahTrips.point_location')}}</span>
                        </button>
                        <input type="hidden" name="lat[]" value=''>
                        <input type="hidden" name="lng[]" value=''>
                    </div>`);

        });

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

        $(document).on('click', '.point_map_button', function () {
            $(this).siblings('input[type="text"]').addClass('active_point_address');
            $(this).siblings('input[name="lat[]"]').addClass('active_lat');
            $(this).siblings('input[name="lng[]"]').addClass('active_lng');
        });

        // let umrah_trip_type = $('select[name="umrah_trip_type"]');

        $('select[name="umrah_trip_type"]').change(function () {
            if ($(this).val() === 'u'){
                $('.show_both, .show_uta').addClass('d-none');
                $('select[name="departure_city"]').val('');
                $('select[name="arrival_city"]').html(`<option value="">{{ __('umrahTrips.arrival_city') }}</option>`);
                $('input[name="point_address[]"]').val('');
                $('select[name="house_type"]').val('');
            }
            if ($(this).val() === 'ut'){
                $('.show_both').removeClass('d-none');
                $('.show_uta').addClass('d-none');
                $('select[name="house_type"]').val('');
            }
            if ($(this).val() === 'uta'){
                $('.show_both, .show_uta').removeClass('d-none');
            }
        })


        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=AIzaSyDmKWSrqleW9VEP9PlC2vaS208Jc10UtZw&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.

        var 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);
            });

            latitude = localStorage.getItem('lat') ? localStorage.getItem('lat') : 21.84434556082845;
            longitude = localStorage.getItem('lng') ? localStorage.getItem('lng') : 39.64611875000001;
        } else {
            alert('Geolocation is not supported by this browser')
        }

        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);
                let activeLat = $('.active_lat'),
                    activeLng = $('.active_lng');

                activeLat.val(lat);
                activeLng.val(lng);

                // activeLat.removeClass('active_lat');
                // activeLng.removeClass('active_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);
                            let activePointAddress = $('.active_point_address');
                            activePointAddress.val(results[0].formatted_address);
                            activePointAddress.removeClass('active_point_address');
                            // document.querySelector('.active_point_address').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);
            let activeLat = $('.active_lat'),
                activeLng = $('.active_lng');

            activeLat.val(lat);
            activeLng.val(lng);

            activeLat.removeClass('active_lat');
            activeLng.removeClass('active_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);
                        let activePointAddress = $('.active_point_address');
                        activePointAddress.val(results[0].formatted_address);
                        activePointAddress.removeClass('active_point_address');
                        // 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')
        });

        $('.map_modal').on('hide.bs.modal', function () {
            let activeLat = $('.active_lat'),
                activeLng = $('.active_lng');
            activeLat.removeClass('active_lat');
            activeLng.removeClass('active_lng');
        })
    </script>

@endsection