@extends('main')
@section('css')
    <link rel="stylesheet"
          {{-- href="{{ url('/') }}/assets/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css"> --}}
@endsection
@section('content')
    {{-- <!-- Content Header (Page header) --> --}}
    <section class="content-header">
        <h1>
        </h1>
        <ol class="breadcrumb">

        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-4">
                <div class="card card-outline card-success">
                    <div class="card-header with-border">
                        <h3 class="card-title">Add Agent</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form class="prevent-resubmit-form" id="create_user_form" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="belong_id" value="1" required>
                        <input type="hidden" name="role" value="agent" required>
                        <input type="hidden" name="belong_type" value="App\Models\Office" required>
                        <input type="hidden" name="entered_by_id" value="{{auth()->user()->id}}" required>

                        
                        <input type="hidden" name="entered_by_id" value="{{auth()->user()->id}}" required>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Name:</label>
                                <input type="text" name="name" class="form-control" placeholder="Full Name.." required>
                            </div>

                            <div class="form-group">
                                <label for="exampleInputEmail1 select2">Company Name</label>
                                  <select style="width:100%;" class="form-control company_search select2" id="company_header_selector_reset" name="company_id" >
                                   <option value="">Select campany name</option>
                                   @foreach(\App\Models\Company::get() as $company)
                                   <option value="{{$company->id}}">{{$company->name}}</option>
                                   @endforeach
                                 </select>
                              </div>


                              <div class="form-group">
                                <label for="exampleInputEmail1"> Branch Name: </label>
                                <select style="width:100%;" class="form-control branch_search select2" name="branch_id">
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="exampleInputEmail1"> Office Name: </label>
                                <select style="width:100%;" class="form-control office_search select2" name="office_id">
                                    <option value="">Select office name</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="exampleInputPassword1">Gender:</label>
                                @if($errors->has('gender') )
                                    <strong class="text-danger">{{ $errors->first('gender') }}</strong>
                                @endif
                                <select class="form-control select2" name="gender" required>
                                    <option value="" selected disabled> Select Gender</option>
                                    <option value="Male"> Male</option>
                                    <option value="Female"> Female</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="exampleInputEmail1">Email:</label>
                                @if($errors->has('email') )
                                    <strong class="text-danger">{{ $errors->first('email') }}</strong>
                                @endif
                                <input type="text" name="email" class="form-control" placeholder="Email..">
                            </div>

                            <div class="form-group">
                                <label for="exampleInputEmail1">Phone:</label>
                                @if($errors->has('phone') )
                                    <strong class="text-danger">{{ $errors->first('phone') }}</strong>
                                @endif
                                <input type="text" name="phone" class="form-control" placeholder="Phone.." required>
                            </div>


                            <div class="form-group">
                                <label for="exampleInputEmail1">Password:</label>
                                <input type="password" class="form-control" placeholder="Password" name="password"
                                       required>
                            </div>
                        </div>
                        <!-- /.card-body -->
                        <div class="card-footer">
                            <button type="submit" class="btn bg-gradient-teal float-right prevent-resubmit-button">
                                Submit
                            </button>
                        </div>
                    </form>
                </div>
                <!-- /.card -->
            </div>

            <div class="col-md-8">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title">Agents List</h3>
                    </div>
                    <div class="card-body ">
                        <table class="table table-striped data-table" id="user_table">
                            <thead>
                            <tr>
                                <th>Name</th>
                                <th>Gender</th>
                                {{--  <th>Email </th> --}}
                                <th>Phone</th>
                                <th>Roles</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>

                            @foreach($vars['users'] as  $row)

                                <tr>
                                    <td>{{ucfirst($row->name)}}</td>
                                    <td>{{ucfirst($row->gender)   }}</td>
                                    {{--   <td>{{$row->email   }}</td> --}}
                                    <td>{{$row->phone }}</td>
                                    <td>
                                        @foreach($row->roles as $role)
                                            @if($role->name == 'admin')
                                                <span class="label label-sm label-warning">{{$role->display_name}}</span>
                                            @else
                                                <span class="label label-sm label-success arrowed arrowed-right">{{$role->display_name}}</span>
                                            @endif
                                        @endforeach
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            @if( Auth::user()->hasRole('admin') || Auth::user()->hasRole('board') )
                                                <a href="{{ url('users/'.$row->uuid ) }}" class="btn btn-success " type="button" data-toggle="tooltip" title="View User" data-original-title="View"><i
                                                            class="fa fa-eye text-white" ></i></a>
                                                <a href="javascript:void(0)" class="btn btn-info edit_user" data-id="{{$row->uuid}}" data-toggle="tooltip" title="Edit User" data-original-title="Edit"><i class="fa fa-pencil-alt"></i></a>

                                                <a href="javascript:void(0)" class="btn btn-danger deleteTr" data-address="users" data-id="{{$row->uuid}}" type="button" data-toggle="tooltip" title="Delete User" data-original-title="Delete"><i class="fas fa-trash"></i></a>


                                        @endif


                                    </td>
                                </tr>
                            @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
    @include('users/_edit');
@endsection



@section('js')
    {{-- <script src="{{ url('/') }}/assets/datepicker/dist/js/bootstrap-datepicker.min.js"></script> --}}
    <script type="text/javascript">


        // $(function () {
        //     $('.datepicker').datepicker({
        //         autoclose: true,
        //         format: 'yyyy/mm/dd'
        //     })
        // })
        //CREATE USER AJAX SCRIPT

        $(document).on('submit', '#create_user_form', function (e) {
            e.preventDefault();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var formdata = new FormData(this);


            console.log("Tried to ");
            $.ajax({
                type: "POST",
                url: '/user_agent_broker',
                processData: false,
                contentType: false,
                data: formdata,
                success: function (data) {

                    console.log(data);
                    $('#user_table').prepend(data);
                    document.getElementById("create_user_form").reset();
                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                    close_modal('guardian_create_model');
                    // show_alert('warning', 'User created successful, use your latest four digits of your phone number as initial password');
                    swal({
                        title: 'User created Succesfully',
                        text: "Keep safe the password for security maintainances",
                        type: 'success',
                        confirmButtonText: 'Ok',
                        confirmButtonClass: 'btn btn-success',
                        buttonsStyling: false
                    })
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                    close_modal('guardian_create_model');
                    show_alert('danger', xhr.responseText);
                }
            });
        });
        //END CREATE USER


        //  SEARCH FOR BRANCH ID ACORDING TO THE COMPANY ID
        $(document).on('change','.company_search', function(e) {
            Swal.showLoading();
            if ($(this).val()) {
                let formService = new FormData();
                formService.append('id', $(this).val());
                formService.append('table', "App\\Models\\Branch");
                asyncFetchAnyData(url = "find_model_detail", formService).then((risks) => {
                    $(`#create_user_form select[name="branch_id"]`).children().remove();
                    $(`.branch_search`).append(`${risks.view}`).trigger('change.select2');
                    Swal.hideLoading()
                });
            }
        });

         //  SEARCH FOR OFFICE ID ACORDING TO THE  ID
        $(document).on('change','.branch_search', function(e) {
            Swal.showLoading();
            if ($(this).val()) {
                let formService = new FormData();
                formService.append('id', $(this).val());
                formService.append('table', "App\\Models\\Office");
                asyncFetchAnyData(url = "find_model_detail", formService).then((risks) => {
                    $(`#create_user_form select[name="office_id"]`).children().remove();
                    $(`.office_search`).append(`${risks.view}`).trigger('change.select2');
                    Swal.hideLoading()
                });
            }
        });

        //EDIT USER SCRIPT
        $(document).on('click', '.edit_user', function () {
            var id = $(this).data("id");
            url = "/users/" + id;
            $.ajax({
                type: "GET",
                url: '/users/' + id + '/edit',
                success: function (data) {
                    // console.log(data);
                    $("#edit_user_form input[name=name]").val(data.users.name);
                    $("#edit_user_form select[name=gender]").val(data.users.gender).trigger('change');
                    $("#edit_user_form input[name=phone]").val(data.users.phone);
                    $("#edit_user_form input[name=email]").val(data.users.email);
                    $("#edit_user_form select[name=company_id]").val(data.users.company_id).trigger('change');
                    $("#edit_user_form select[name=branch_id]").val(data.users.branch_id).trigger('change');
                    $("#edit_user_form select[name=office_id]").val(data.users.office_id).trigger('change');
                    $("#edit_user_form ").attr("action", url);
                    $('#Edit_user_class_modal').modal('show');
                },
            });
        });


    </script>

@endsection