@extends('dashboard.layout.default')

@section('page_title',$page_title)

@section('content')
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">

          <div class="col-sm-12">
                <ol class="breadcrumb float-sm-left">
                    <li class="breadcrumb-item"><a href="{{Route('dashboard')}}">{{ __("pages.home") }}</a></li>
                    <li class="breadcrumb-item"><a href="{{Route('hotels.index')}}"
                    >{{__('pages.hotels')}}</a></li>
                    <li class="breadcrumb-item"></li>{{$page_title}}</li>
                </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        @if(session()->has('success'))
            <div class="alert alert-success">
                {{ session()->get('success') }}
            </div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    <div class="card card-info">
        <div class="card-header">
        <h3 class="card-title">{{$page_title}}</h3>
        </div>
        <!-- /.card-header -->
        <!-- form start -->
        <form method="POST" id="form" action="{{ Route('hotels.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="card-body">


            <div class="form-group">
                <label for="name">{{__('pages.name')}}</label>
                <input type="text" name="name" class="form-control" id="name"
                    value="{{old('name')}}" required>
            </div>

            <div class="form-group">
                <label>{{__('pages.country')}}</label>
                <select class="form-control select2bs4" name="country_id" style="width: 100%;" required>
                    <option value="">{{__('pages.choose')}} {{__('pages.country')}}</option>
                    @foreach($countries as $country)
                    <option value="{{  $country['id'] }}" {{ old('country_id') == $country['id']  ? "selected" : ""  }} >{{  $country['name'] }}
                    </option>
                    @endforeach
                </select>
            </div>
        
            <div class="form-group">
                <label>{{__('pages.city')}}</label>
                <select class="form-control select2bs4" name="city_id" style="width: 100%;" required>
                    <option value="">{{__('pages.choose')}} {{__('pages.city')}}</option>
                </select>
            </div>

    
            <!-- <div class="form-group">
                <label for="status">{{__('names.status')}}</label>
                <div class="input-group">
                    <input type="checkbox" data-toggle="toggle" name="status" {{ old('status') ? "checked" : ""  }} data-onstyle="success" data-offstyle="danger" >
                </div>
            </div> -->

            
            <div class="form-group">
                <label for="image">{{__('pages.image')}}</label>
                <div class="input-group">
                    <div class="custom-file">
                    <input type="file" name="image" class="custom-file-input" id="image">
                    <label class="custom-file-label" for="image">Choose file</label>
                    </div>
                    <div class="input-group-append">
                    <span class="input-group-text">Upload</span>
                    </div>
                </div>
            </div>
                    
            <div class="form-group">
                <label>{{__('pages.rate')}}</label>
                <div class="rate_input" style="direction: ltr !important;" data-rating="3"></div>
                <input type="hidden" name="rate" id="rate" value="3">
           </div>


<!-- example grabing rating from markup -->

        </div>
        <!-- /.card-body -->

        <div class="card-footer">
            <button type="submit" class="btn btn-primary">{{ trans('pages.submit') }}</button>
        </div>
        </form>
    </div>
    <!-- /.card -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

@endsection

@push('js_scripts')
<script src="{{asset('temp/dist/js/jquery.star-rating-svg.min.js') }}" type="text/javascript"></script>

<script>
        $(document).ready(function() {
            $('.select2bs4').select2({
                theme: 'bootstrap4'
            });
        });

        $(document).on('change', 'select[name="country_id"]', function() {
            var country_id = $(this).val();
            if (country_id) {
                // disable all inputs 
                $('select,input').prop('disabled', true);
                $.ajax({
                    url: "{{ Route('get_cities') }}",
                    type: "GET",
                    data: {
                        country_id: country_id
                    },
                    success: function(data) {
                        $('select[name="city_id"]').empty();
                        $('select[name="city_id"]').append('<option value="">{{__('pages.choose')}} {{__('pages.city')}}</option>');
                        $.each(data, function(key, item) {
                            $('select[name="city_id"]').append('<option value="' + item.id + '">' + item.name +
                                '</option>');
                        });
                    },
                    complete: function() {
                        // enable all inputs 
                        $('select,input').prop('disabled', false);
                    }
                });
            } else {
                $('select[name="city_id"]').empty();
            }
        });


    $(".rate_input").starRating({
        totalStars: 5,
        starShape: 'rounded',
        starSize: 40,
        emptyColor: 'lightgray',
        hoverColor: 'salmon',
        activeColor: 'crimson',
        useGradient: false,
        callback: function(currentRating, $el){
            $('#rate').val(currentRating);
        }
    });
</script>
@endpush