@extends('layouts.admin')

@section('content')
            <div class="container-detached">
                <div class="content-detached">
                    <!-- Tab content -->
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="profile">
                            <!-- Item Details -->
                            <div class="panel panel-flat">
                                <div class="panel-heading">
                                    <h6 class="panel-title">Assign Area</h6>
                                    <div class="heading-elements">
                                        <ul class="icons-list">
                                            <li><a data-action="collapse"></a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="panel-body">
                                    <form method="POST"
                                          action="{{ url('assign_area'.(empty($assign_area) ? '': '/' . $assign_area->id)) }}"
                                          enctype="multipart/form-data">
                                        {!! csrf_field() !!}
                                         <div class="row">
                                             <div class="col-md-3 col-sm-3">
                                                 <div class="form-group {{ $errors->has('country') ? ' has-error' : '' }}">
                                                     <label>Countries</label>
                                                     <select class="select select_country" name="country">
                                                         <option>Select Country</option>
                                                         @foreach($countries as $country)
                                                             <option value="{{$country->id}}" @if (old('country') == $country->name) selected="selected" @endif
                                                             >{{$country->name}}
                                                             </option>
                                                         @endforeach
                                                     </select>
                                                     @if ($errors->has('country'))
                                                         <span class="help-block"><strong>{{ $errors->first('country') }}</strong></span>
                                                     @endif
                                                 </div>
                                             </div>
                                             <div class="col-md-3 col-sm-3">
                                                 <div class="form-group {{ $errors->has('region') ? ' has-error' : '' }}">
                                                     <label>Regions</label>
                                                     <select class="select select_region" name="region" disabled>
                                                         <option value="">Select Region</option>
                                                     </select>
                                                     @if ($errors->has('region'))
                                                         <span class="help-block"><strong>{{ $errors->first('region') }}</strong></span>
                                                     @endif
                                                 </div>
                                             </div>
                                             <div class="col-md-3 col-sm-3">
                                                 <div class="form-group {{ $errors->has('city') ? ' has-error' : '' }}">
                                                     <label>Cities</label>
                                                     <select class="select select_city" name="city" disabled>
                                                         <option value="">Select City</option>
                                                     </select>
                                                     @if ($errors->has('region'))
                                                         <span class="help-block"><strong>{{ $errors->first('city') }}</strong></span>
                                                     @endif
                                                 </div>
                                             </div>
                                             <div class="col-md-3 col-sm-3">
                                                 <div class="form-group {{ $errors->has('area') ? ' has-error' : '' }}">
                                                     <label>Areas</label>
                                                     <select class="select select_area" name="area" disabled>
                                                         <option value="">Select Area</option>
                                                     </select>
                                                     @if ($errors->has('area'))
                                                         <span class="help-block"><strong>{{ $errors->first('area') }}</strong></span>
                                                     @endif
                                                 </div>
                                             </div>
                                        </div>
                                        <div class="text-right">
                                            @if(!empty($assign_area)) {!! method_field('PUT') !!} @endif
                                            {{ csrf_field() }}
                                            <button type="submit" class="btn btn-primary">
                                                @if(empty($assign_area)) Save @else Update
                                                @endif  <i class="icon-arrow-right14 position-right"></i></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <!-- /Item Details -->


                        </div>
                    </div>
                    <!-- /tab content -->

                </div>
            </div>
            <!-- /detached content -->
@endsection

@section('footer-content')
    <!-- Theme JS files -->
    <script type="text/javascript" src="{{asset('assets/js/core/libraries/jasny_bootstrap.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/plugins/forms/selects/select2.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/plugins/ui/moment/moment.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/plugins/ui/fullcalendar/fullcalendar.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/plugins/visualization/echarts/echarts.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/pages/user_profile_tabbed.js')}}"></script>
    <!-- /theme JS files -->

    <script>
        $('.select_country').on('change', function () {
            var country_id = $('option:selected', this).val();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{url('/country_regions') }}",
                dataType: 'json',
                type: 'POST',
                data: {country_id: country_id},
                success: function (data) {
                    $('.select_region').prop('disabled', false);
                    $('.select_region').empty();
                    $('.select_city').empty();
                    $('.select_area').empty();
                    $('.select_city').html('<option>Select City</option>');
                    $('.select_area').html('<option>Select Area</option>');

                    $('.select_region').html(data.select);

                }
            });
        });
        $(document).on('change','.select_region', function () {
            var region_id = $('option:selected', this).val();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{url('/region_cities') }}",
                dataType: 'json',
                type: 'POST',
                data: {region_id: region_id},
                success: function (data) {
                    $('.select_city').prop('disabled', false);
                    $('.select_city').empty();
                    $('.select_area').empty();
                    $('.select_area').html('<option>Select Area</option>');
                    $('.select_city').html(data.select);

                }
            });
        });
        $(document).on('change','.select_city', function () {
            var city_id = $('option:selected', this).val();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{url('/city_areas') }}",
                dataType: 'json',
                type: 'POST',
                data: {city_id: city_id},
                success: function (data) {
                    $('.select_area').prop('disabled', false);
                    $('.select_area').empty();
                    $('.select_area').html(data.select);

                }
            });
        });
    </script>
@endsection