@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 Staff</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="belong_type" value="App\Models\Office" 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="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"> Company Name: </label>
                                <select style="width:100%;" class="form-control company_search select2" 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> Asign Roles</label>
                                <select class="form-control select2" id="role" name="role"
                                    data-placeholder="Select Roles" style="width: 100%;" required>
                                    @foreach ($vars['roles'] as $var)
                                        <option value="{{ $var->name }}">{{ $var->display_name }}</option>
                                    @endforeach
                                </select>
                            </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-orange 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">Staffs 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/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js">
    </script>
    <script type="text/javascript">
        $(function() {
            //Date picker
            $('.datepicker').datepicker({
                autoclose: true,
                format: 'yyyy/mm/dd'
            })
        })
        //CREATE USER AJAX SCRIPT

        // SELECT BRANCH BY USING 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()
                });
            }
        });

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


        $(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);

            $.ajax({
                type: "POST",
                url: '/users',
                processData: false,
                contentType: false,
                data: formdata,
                success: function(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


        //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 ").attr("action", url);
                    $('#Edit_user_class_modal').modal('show');
                },
            });
        });


        
    </script>
@endsection