@extends('layouts.app')


@section('content')
    <div class="container-xl">
        <!-- Page title -->
        {{-- <div class="page-header d-print-none">
            <h2 class="page-title">
                {{ __('Users') }}
            </h2>
        </div> --}}
    </div>
    <div class="page-body">
        <div class="container-xl">

            {{-- <div class="alert alert-info">
                <div class="alert-title">Users page</div>
            </div> --}}

            <div class="card col-sm-12  mx-auto">
                <form class="card card-md" action="{{ route('user_update', $user->id) }}" method="post" autocomplete="off">
                    @csrf
                    @method('patch')   
            
                    <div class="card-body">
                        <h2 class="card-title text-center mb-4">{{ __('Edit User Data') }}</h2>
            
                        <div class="row mb-3">
                            <div class="col-lg-6">
                            <label class="form-label">{{ __('Name') }}</label>
                            <input type="text" name="name" value="{{$user->name}}" class="form-control  @error('name') is-invalid @enderror" placeholder="{{ __('Name') }}">
                            @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            </div>
                            <div class="col-lg-6">
                            <label class="form-label">{{ __('Email address') }}</label>
                            <input type="email" name="email" value="{{$user->email}}" class="form-control @error('email') is-invalid @enderror" placeholder="{{ __('Email Address') }}">
                            @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-lg-6">
                            <label class="form-label">{{ __('Change Password') }}</label>
                            <input type="password" name="password"  class="form-control @error('password') is-invalid @enderror" placeholder="{{ __('Password') }}" >
                            @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            </div>

                            <div class="col-lg-6">
                            <label class="form-label">Roles</label>
                            <select class="js-example-basic-multiple form-control multiple-select @error('user_role_id') is-invalid @enderror" id="roles" name="user_role_id" data-placeholder="Choose one.."  required>
                                @foreach ($roles as $role)
                                <option value="{{$role->user_role_id}}" {{$user->user_role_id == $role->user_role_id ? 'selected' : ''}} > {{$role->user_role_name}}</option>
                                @endforeach
                                @error('user_role_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                
                            </select>
                            </div>
                        </div>
                      

                            
                

                      
                         
                      
                       
            
            
                        <div class="form-footer">
                            <button type="submit" class="btn btn-primary w-40">{{ __('Update') }}</button>
                        </div>
                    </div>
                </form>
                {{-- @if( $users->hasPages() )
                <div class="card-footer pb-0">
                    {{ $users->links() }}
                </div>
                @endif --}}
            </div>


            @if($user->user_role->user_role_name == 'merchandise')
            <div class="card col-sm-12  mx-auto mt-2">
                <form class="card card-md" action="{{ route('store_route_assignments') }}" method="post" autocomplete="off">
                    @csrf
                    @method('post')   
            
                    <div class="card-body">
                        <h2 class="card-title text-center mb-4">{{ __('Edit Route Assignment') }}</h2>
                       <input type="hidden" name="user_id" id="userId">
                        
                        <div class=" row mb-3">
                          
                              
                                <div class="col-lg-4">
                            <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  >
                                <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 class="col-lg-4">
                            
                                <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-4">

                            <label class="form-label">Regions</label>
                            <select class=" form-control multiple-select @error('user_role_id') is-invalid @enderror" onchange="get_region(this)" id="region" data-placeholder="Choose one.."  required disabled>
                                @error('user_role_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                
                            </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-lg-4">
                                <label class="form-label">Area</label>
                                <select class=" form-control multiple-select @error('user_role_id') is-invalid @enderror" id="area" onchange="get_area(this)" data-placeholder="Choose one.."  required disabled>
                                    @error('user_role_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    
                                </select>
                            </div>
                        
                                <div class="col-lg-4">
                                <label class="form-label">Town</label>
                                <select class=" form-control multiple-select @error('user_role_id') is-invalid @enderror" id="town" onchange="get_town(this)" data-placeholder="Choose one.."  required disabled>    
                                    @error('user_role_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    
                                </select>
                                </div>

                                <div class="col-lg-4">
                                <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 required disabled>
                                    @error('route_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    
                                </select>
                                  </div>
                             </div>

                            
                        

                        
                
                       

                      
                         
                      
                       
            
            
                        <div class="form-footer">
                            <button type="submit" class="btn btn-primary w-40">{{ __('Save') }}</button>
                        </div>
                    </div>
                </form>
                {{-- @if( $users->hasPages() )
                <div class="card-footer pb-0">
                    {{ $users->links() }}
                </div>
                @endif --}}
            </div>
            @endif




            <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>{{ __('#') }}</th>
                                    <th>{{ __('Name') }}</th>
                                    <th>{{ __('Route') }}</th>
                                    <th>{{ __('Day') }}</th>
                                    <th>{{ __('Action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                $sr_no = 1;
                            @endphp
                            @foreach($route_assignments as $route_assignment)
                                <tr>
                                    <th>{{$sr_no++}}</th>
                                    <td>{{$route_assignment->user->name}}</td>
                                     <td>{{$route_assignment->route->route_name}}</td>
                                     <td>{{$route_assignment->day}}</td>
                                     <td><a role="button" class="delete_route_assignment del_icon_style" data-id="{{$route_assignment->id}}"><i class="ti ti-basket"></i></a></td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{-- @if( $users->hasPages() )
                    <div class="card-footer pb-0">
                        {{ $users->links() }}
                    </div>
                    @endif --}}
                </div>
            </div>

        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('.js-example-basic-multiple').select2();
        });
        </script>

<script>
    $(document).ready(function() {
        $("#userId").val("{{ $user->id }}");
    });
    </script>

<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);
                            
            })
        }

        $(document).ready(function() {
  $('.delete_route_assignment').click(function() {
    var id = $(this).data('id');
    $.ajax({
                url: 'delete_route_assignment/'+id
            }).done(function(res){
                location.reload(true);
            })
  });
})


   

        </script>

        

@endsection