@extends('layouts.app')
@section('custom_styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@endsection
@section('content')
    <div class="page-body">
        <div class="container-xl">
            <div class="row">
                <div class="col-lg-12 bg-white">
                    <div>
                        <div class="">
                            <h2 class="text-center mt-3 mb-3">
                               
                                    <h1 class="text-center mt-3 mb-3">Add Route Assignments</h1>
                              
                            
                        </div>
                        <form method="post" action="{{ route('store_route_assignments') }}">
                            @csrf
                            @method('post')
                           
                            <div class="row mb-3">
                                <div class="col-lg-6">
                                    <label class="form-label">User</label>
                                    <select class=" form-control multiple-select @error('user_id') is-invalid @enderror" id="example2-ect2-multiple" name="user_id" data-placeholder="Choose one.." required >
                                        <option></option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
                                        @foreach($users as $user)
                                            <option value="{{$user->id}}">{{$user->name}}</option>
                                        @endforeach
                                        @error('user_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        
                                    </select>
                                </div>

                                <div class="col-lg-6">
                                    <label class="form-label">Days</label>
                                    <select class="js-example-basic-multiple form-control multiple-select @error('day_id') is-invalid @enderror" id="example2-selt2-multiple" name="day_id[]" data-placeholder="Choose one.." multiple  required>
                                        <option value="Monday">Monday</option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
                                        <option value="Tuesday">Tuesday</option>
                                        <option value="Wednesday">Wednesday</option>
                                        <option value="Thursday">Thursday</option>
                                        <option value="Friday">Friday</option>
                                        <option value="Saturday">Saturday</option>
                                        <option value="Sunday">Sunday</option>

                                    </select>
                                    @error('day_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                
                            </div>

                            <div class="row mb-3">
                                <div class="col-lg-6">
                                    <label class="form-label">Zones</label>
                                    <select class=" form-control  @error('zone') is-invalid @enderror" id="zone"  onchange="get_zone(this)" data-placeholder="Choose one.."  required>
                                        <option value="0">Choose one</option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
                                       
                                        @foreach($zones as $zone)
                                        <option value="{{$zone->zone_id}}">{{$zone->zone_name}}</option>
                                    @endforeach
                                    @error('zone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                        
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">Regions</label>
                                    <select class=" form-control  @error('region') is-invalid @enderror" id="region" onchange="get_region(this)"  data-placeholder="Choose one.."  disabled required>
                                        <option value="0">Choose one</option> <!-- Required for data-placeholder attribute to work with Select2 plugin -->
                                        @error('region')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-lg-6">
                                    <label class="form-label">Areas</label>
                                    <select class=" form-control  @error('area') is-invalid @enderror" id="area" onchange="get_area(this)"    data-placeholder="Choose one.."  disabled required>
                                        <option value="0">Choose one</option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
                                        @error('area')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">Towns</label> 
                                    <select class=" form-control  @error('town') is-invalid @enderror" id="town" onchange="get_town(this)"   data-placeholder="Choose one.."  disabled required>
                                        <option ></option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
                                        @error('town')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                        
                                        
                                    </select>
                                </div>
                            </div>
                        <div class="row mb-3">
                            
                            <div class="col-lg-6">
                                <label class="form-label">Routes</label>
                                <select class="js-example-basic-multiple form-control multiple-select @error('route_id') is-invalid @enderror" id="route" name="route_id[]" data-placeholder="Choose one.." multiple disabled required>
                                    <option value=""></option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
                                   
                                    @error('route_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    
                                </select>
                            </div>
                        </div>

                          


                           

                            <div class="modal-footer">
                                <a class="btn link-secondary" href="/shops">
                                    Cancel
                                </a>
                                <button type="submit" class="btn btn-primary ms-auto shop_submit">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                                  
                                        <span class="sub_html">Submit</span>
                                </button>
                            </div>
                           
                            
                        </form>
                        
                    </div>
                </div>
            </div>
            <div class="container-xl col-lg-12 mt-2">

                <div class="alert alert-info">
                    <div class="alert-title">Route Assignments</div>
                </div>
    
                <div class="card">
                    <div class="table-responsive">
                        <table class="table" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>{{ __('Name') }}</th>
                                    <th>{{ __('Route') }}</th>
                                    <th>{{ __('Day') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($route_assignments as $route_assignment)
                                <tr>
                                    <td>{{$route_assignment->user->name}}</td>
                                     <td>{{$route_assignment->route->route_name}}</td>
                                 
                                     <td>{{$route_assignment->day}}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{-- @if( $users->hasPages() )
                    <div class="card-footer pb-0">
                        {{ $users->links() }}
                    </div>
                    @endif --}}
                </div>
            </div>
        </div>
    </div>
        <!-- Page JS Plugins -->
        <script>

        $("#zone").change(function (zone_id) {
            if($("#zone option:selected").length){
                $('#region').removeAttr('disabled');    
            } 
          });

          $("#region").change(function () {
            
            if($("#region option:selected").length){
                $('#area').removeAttr('disabled');
            } 
            });

            $("#area").change(function () {
            if($("#area option:selected").length){
                $('#town').removeAttr('disabled');
            } 
            });

            $("#town").change(function () {
            if($("#town option:selected").length){
                $('#route').removeAttr('disabled');
            } 
            });


            function get_zone(get_id){
            var id = get_id.value;
            $.ajax({
                url: 'zone_region/'+id
            }).done(function(res){
                var row='';
                var i=0;
                row += '<option value="">Select One</option>';
                for( i=0;i<res.length;i++)
                {
                    row += '<option value="'+ res[i].region_id+'">'+ res[i].region_name+ '</option>';
                }

                $('#region').html(row);
                            
            })
        }

        function get_region(get_id){
            var id = get_id.value;
            $.ajax({
                url: 'region_area/'+id
            }).done(function(res){
                var row='';
                var i=0;
                row += '<option value="">Select One</option>';

                for( i=0;i<res.length;i++)
                {
                    row += '<option value="'+ res[i].area_id+'">'+ res[i].area_name+ '</option>';
                }

                $('#area').html(row);
                            
            })
        }


        function get_area(get_id){
            var id = get_id.value;
            $.ajax({
                url: 'area_town/'+id
            }).done(function(res){
                var row='';
                var i=0;
                row += '<option value="">Select One</option>';

                for( i=0;i<res.length;i++)
                {
                    row += '<option value="'+ res[i].town_id+'">'+ res[i].town_name+ '</option>';
                }

                $('#town').html(row);
                            
            })
        }


        function get_town(get_id){
            var id = get_id.value;
            $.ajax({
                url: 'town_route/'+id
            }).done(function(res){
                var row='';
                var i=0;
                row += '<option value="">Select One</option>';

                for( i=0;i<res.length;i++)
                {
                    row += '<option value="'+ res[i].route_id+'">'+ res[i].route_name+ '</option>';
                }

                $('#route').html(row);
                            
            })
        }
        </script>


        <script>
        $(document).ready(function() {
            $('.js-example-basic-multiple').select2();
        });
        </script>
    <script type="text/javascript">
        function get_shop_cate(get_id){
            var id = get_id.value;
            $.ajax({
                url: 'shop_category/change/'+id
            }).done(function(res){
                var row='';
                var i=0;
                row += '<option value="">Select One</option>';

                for( i=0;i<res.length;i++)
                {
                    row += '<option value="'+ res[i].shop_subcategory_id+'">'+ res[i].shop_subcategory_name+ '</option>';
                }

                $('#shopsubcategory_name_id').html(row);
                            
            })
        }


        </script>
@endsection