@extends('admin_panel.adminLayout') @section('content')
    <script src="{{asset('js/lib/jquery.js')}}"></script>
    <script src="{{asset('js/dist/jquery.validate.js')}}"></script>
    <script src="{{asset('js/dist/additional-methods.js')}}"></script>

    <style>label.error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    padding:1px 20px 1px 20px;
    }</style>
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12 d-flex align-items-stretch grid-margin">
                <div class="row flex-grow">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <a style="color:green;" href="{{route('admin.user')}}">
                                    < Back to List</a>
                                    <br>
                                    <h4> Créer un Utilisateur </h4>
                                    <br>
                                    <form class="forms-sample" action="{{route('admin.user.store')}}" method="post"  id="product_form">
                                        {{csrf_field()}}
                                        <br>
                                        <div id="for_extension_error"></div>
                                        <div class="form-group">
                                            <label>Prénom et Nom *</label>
                                            <input type="text" class="form-control" id="Name" name="Name"  value="{{ old('Name') }}">
                                        </div>
                                        <div class="form-group">
                                            <label  for="Description">Téléphone*</label>
                                            <input type="textarea" class="form-control" id="Description" name="telephone" value="{{ old('telephone') }}" />
                                        </div>
                                
                                        <div class="form-group">
                                            <label>Email </label>
                                            <input type="text" class="form-control" name="email" id="Price" value="{{ old('email') }}">
                                        </div>
                                        <div class="form-group">
                                            <label>Type *</label>
                                            <select class="form-control" name="type" id="type">
                                                <option value="">Selectionnez le type d'utilisateur</option>
                                                <option value="1">Administrateur</option>
                                                <option value="2">Commerciale </option>
                                            </select>
                                        </div>
                                                        
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <h4>Région</h4>
                                                <select class="form-control" name="category" id="category">
                                                    <option selected>Selectionnez une région</option>
                                                    @foreach($regions as $r)
                                                        <option value="{{ $r->id }}"> {{ $r->region }} </option>
                                                    @endforeach
                                                </select>
                                            
                                                <h4>Agence</h4>
                                                <select class="browser-default custom-select input" name="subcategory" id="subcategory">
                                                
                                                </select>
                                            </div>
                                        </div> 
                                        <br />  
                                        <div class="form-group">
                                            <label for="">Mot de Passe *</label>
                                            <input type="password" class="form-control" name="password" />
                                        </div>
                                        <input type="submit" name="saveButton" class="btn btn-success mr-2" id="saveButton" value="Créer"  />
                                    </form>
                                    @if($errors->any())
                                        <ul>
                                            @foreach($errors->all() as $err)
                                            <tr>
                                                <td>
                                                    <li>{{$err}}</li>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </ul>
                                    @endif
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div> 

    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(document).ready(function () {
            $('#category').on('change',function(e) {
                var cat_id = e.target.value;
                
                $.ajax({
                    
                    url:"{{ route('user.region.agence') }}",
                    type:"POST",
                    data: { 
                        cat_id: cat_id,
                        '_token': "{{ csrf_token() }}"
                    },
                        
                    success:function (data) {
                        console.log(data); 
                        $('#subcategory').empty();
                        $.each(data.subcategories,function(index,subcategory){
                            
                            $('#subcategory').append('<option value="'+subcategory.id+'">'+subcategory.agence+'</option>');
                        }) 
                    }
                })
            });
        });
    </script>

@endsection