@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">{{$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" action="{{ Route('hotels.update',['id' => $hotel['id']]) }}" enctype="multipart/form-data">
        @csrf
        @method('patch')        
        <div class="card-body">

            @if($hotel['image'])
                <div class="form-group text-center bg-primary" style="height: 200px;width: 100%;overflow: hidden;">
                    <img src="{{ asset('storage/images/hotels/'.$hotel['image']) }}" class="img-thumbnail" style="object-fit: contain;height: 100%;">
                </div>
            @endif

            <div class="form-group">
                <label for="name">{{__('pages.name')}}</label>
                <input type="text" name="name" class="form-control" id="name"
                    value="{{old('name', $hotel['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',$hotel['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>
                    @foreach($cities as $city)
                    <option value="{{  $city['id'] }}" {{ old('city_id',$hotel['city_id']
                        ) == $city['id']  ? "selected" : ""  }} >{{  $city['name'] }}
                    @endforeach
                </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',$hotel['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="{{ old('rate',$hotel['rate']) }}"></div>
                <input type="hidden" name="rate" id="rate" value="{{ old('rate',$hotel['rate']) }}">
           </div>
        
        </div>
        <!-- /.card-body -->

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

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

      @foreach($hotel['translations'] as $key => $lang)
          <form method="POST" action="{{ Route('hotels.update',['id' => $hotel['id'] , 'lang' => $lang->code]) }}">
              @csrf
              @method('patch')   
              <div class="card card-info">
                  <div class="card-header">
                      <h3 class="card-title">{{$page_title}} ( {{$lang['name']}} )</h3>
                  </div>
                  <!-- /.card-header -->
              
                  <div class="card-body">
                      <div class="form-group">
                          <label for="{{ $lang->code }}_name">{{__('names.name')}}</label>
                          <input type="text" name="{{ $lang->code }}_name" class="form-control" id="{{ $lang->code }}_name"  value="{{ old($lang->code.'_name', $lang['data']['name']->value ?? '') }}">
                      </div>

                      
                  </div>
                  <!-- /.card-body -->
                  <div class="card-footer">
                      <button type="submit" class="btn btn-primary text-center">{{__('pages.save')}}</button>
                  </div>
              </div>
              <!-- /.card -->
          </form>
      @endforeach


    </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,
        disableAfterRate: false,
        callback: function(currentRating, $el){
            $('#rate').val(currentRating);
        }
    });
</script>
@endpush