@extends("layouts.admin.app")
<style>
    .rate {
        float: left;
        height: 46px;
        padding: 0 10px;
    }
    .rate:not(:checked) > input {
        position:absolute;
        top:-9999px;
    }
    .rate:not(:checked) > label {
        float:right;
        width:1em;
        overflow:hidden;
        white-space:nowrap;
        cursor:pointer;
        font-size:30px;
        color:#ccc;
    }
    .rate:not(:checked) > label:before {
        content: '★ ';
    }
    .rate > input:checked ~ label {
        color: #ffc700;
    }
    .rate:not(:checked) > label:hover,
    .rate:not(:checked) > label:hover ~ label {
        color: #deb217;
    }
    .rate > input:checked + label:hover,
    .rate > input:checked + label:hover ~ label,
    .rate > input:checked ~ label:hover,
    .rate > input:checked ~ label:hover ~ label,
    .rate > label:hover ~ input:checked ~ label {
        color: #c59b08;
    }

</style>
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__("hotels")}}</h1>
            <p>{{__("all-hotels")}}</p>
        </div>

        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
            <li class="breadcrumb-item"><a href="{{route("admin.hotel.index")}}">{{__("hotels")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__("Create")}}</a></li>
        </ul>
    </div>
@endsection

@section("content")

    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{__("create-new-hotel")}}</h3>
                <div class="tile-body">
                    <form method="post" action="{{route("admin.hotel.store")}}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{__("English name")}}</label>
                                    <input class="form-control @if($errors->has('name_en')) is-invalid @endif" type="text" name="name_en" placeholder="{{__("enter-en-name")}}" value="{{inputValue("name_en")}}">
                                </div>
                                @error("name_en")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{__("Arabic name")}}</label>
                                    <input class="form-control @if($errors->has('name_ar')) is-invalid @endif" type="text" name="name_ar" placeholder="{{__("enter-ar-name")}}" value="{{inputValue("name_ar")}}">
                                </div>
                                @error("name_ar")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{__("Phone Number")}}</label>
                                    <input class="form-control @if($errors->has('phone_number')) is-invalid @endif" type="text" name="phone_number" placeholder="{{__("Enter Phone Number")}}" value="{{inputValue("phone_number")}}">
                                </div>
                                @error("phone_number")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{__("whatsapp-number")}}</label>
                                    <input class="form-control @if($errors->has('whatsapp_number')) is-invalid @endif" type="text" name="whatsapp_number" placeholder="{{__("enter-whatsapp-number")}}" value="{{inputValue("whatsapp_number")}}">
                                </div>
                                @error("whatsapp_number")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{__("far-from-alharam")}}</label>
                                    <div class="input-group mb-3">                                 
                                        <input class="form-control @if($errors->has('far_from_alharam')) is-invalid @endif" type="number" step="any" name="far_from_alharam" placeholder="{{__("enter-far-from-alharam")}}" value="{{inputValue("far_from_alharam")}}">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">{{__("km")}}</div>
                                        </div>
                                    </div>
                                    @error("far_from_alharam")
                                    <div class="input-error">{{$message}}</div>
                                    @enderror
                     
                                </div>
                            </div>
                             </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group" style="padding: 0; margin: 0">
                                        <label class="control-label">{{__('Rate')}}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group" style="padding: 0; margin: 0">
                                        <div class="rate">
                                            <input type="radio" id="star5" name="rate" value="5" @if(old('rate')=="5") checked @endif/>
                                            <label for="star5" title="text">5 stars</label>
                                            <input type="radio" id="star4" name="rate" value="4" @if(old('rate')=="4") checked @endif/>
                                            <label for="star4" title="text">4 stars</label>
                                            <input type="radio" id="star3" name="rate" value="3" @if(old('rate')=="3") checked @endif/>
                                            <label for="star3" title="text">3 stars</label>
                                            <input type="radio" id="star2" name="rate" value="2" @if(old('rate')=="2") checked @endif/>
                                            <label for="star2" title="text">2 stars</label>
                                            <input type="radio" id="star1" name="rate" value="1" @if(old('rate')=="1") checked @endif/>
                                            <label for="star1" title="text">1 star</label>
                                        </div>
                                    </div>
                               
                                </div>
                            </div>
                            @error("rate")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                            <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{__("located-in")}}</label>
                                    <select class="form-control" name="city" id="city">
                                        <option></option>
                                        @foreach($cities as $city)
                                            <option value="{{ $city->id }}" @if(old('city')==$city->id) selected @endif>{{ $city->name_en }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error("city")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{__("Location")}}</label>
                                    <br>
                                    <button type="button" class="btn btn-primary mb-3" data-toggle="modal" data-target="#location">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </button>
                                <input type="hidden" name="lat" id="lat" value="{{inputValue("lat")}}">
                                <input type="hidden" name="lng" id="lng" value="{{inputValue("lng")}}">
                                @error("location")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                                <div class="modal fade" id="location" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lgx">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="location">{{__("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 id="map" class="col-lg-12"></div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary" data-dismiss="modal">{{__("Save changes")}}</button>
                                              </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{__("English Description")}}</label>
                                    <textarea class="form-control @if($errors->has('description_en')) is-invalid @endif" type="text" name="description_en" placeholder="{{__("Enter English Description")}}">{{inputValue("description_en")}}</textarea>
                                </div>
                                @error("description_en")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{__("Arabic Description")}}</label>
                                    <textarea class="form-control @if($errors->has('description_ar')) is-invalid @endif" type="text" name="description_ar" placeholder="{{__("Enter Arabic Description")}}">{{inputValue("description_ar")}}</textarea>
                                </div>
                                @error("description_ar")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                        </div>
                        <hr>

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{__("main-image")}}</label>
                                    <div class="upload-button-box">
                                        <button class="btn btn-primary form-control button-upload-file">
                                            <input class="input-file show-uploaded" data-upload-type="single"
                                                data-imgs-container-class="uploaded-images-1" type="file"
                                                name="main_image">
                                            <span class="upload-file-content">
                                                <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                                <span class="upload-file-content-text">{{__("main-image")}}</span>
                                            </span>
                                        </button>
                                    </div>
                                    <div class="invalid-feedback" style="display: none">
                                    </div>
                                </div>
                                @error("main_image")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-3 col-md-5 col-sm-6">
                                <div class="uploaded-images-1">
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row dis-none ads-photo">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{ __('gallery-images') }}</label>
                                    <div>
                                        <button class="btn btn-primary form-control button-upload-file">
                                            <input class="input-file show-uploaded" data-upload-type="multi" data-imgs-container-class="uploaded-images" multiple type="file" name="gallery[]" accept="image/x-png,image/gif,image/jpeg">
                                            <span class="upload-file-content">
                                                <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                                <span class="upload-file-content-text">{{ __('gallery-images') }}</span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                @error("gallery")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-3 col-md-5 col-sm-6">
                                <div class="uploaded-images">
                                </div>
                            </div>
                        </div>
                      
                        <div class="tile-footer">
                            <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Create")}}</button>
                        </div>
                    </form>
                </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section("scripts")
<script type="text/javascript">
     $("#city").select2({
            placeholder: "{{__('select-city')}}",
            width: "100%",
        });
        let map;
        function initMap() {
           
            map = new google.maps.Map(document.getElementById("map"), {
           
                center: { lat: 24.676339, lng :46.697277 },
                zoom: 8,
                scrollwheel: true,
            });

            const uluru = { lat: 24.676339, lng: 46.697277 };
            let marker = new google.maps.Marker({
                position: uluru,
                map: map,
                draggable: true
            });

            google.maps.event.addListener(marker,'position_changed',
                function (){
                    let lat = marker.position.lat();
                    let lng = marker.position.lng();
                    $("#lat").val(lat);
                    $("#lng").val(lng);
                })

            google.maps.event.addListener(map,'click',
                function (event){
                    pos = event.latLng
                    marker.setPosition(pos)
                })

        }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{env("GOOGLE_API_KEY")}}&callback=initMap" type="text/javascript"></script>
@endsection