@extends('main')

 @section('css')
 @endsection

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        {{ $vars['title'] }}
      </h1>
    </section>


    <!-- Main content -->
    <section class="content">

      <div class="row">
        <div class="col-md-3">

          <!-- Profile Image -->
          <div class="card card-outline card-success">
            <div class="card-body card-profile">
                <div class="text-center">
                    <img class="profile-user-img img-responsive img-circle" @if(isset($vars['user']->img)) src="{{ url('/') }}/{{$vars['user']->img }}" @else src="{{ url('/') }}/user.png" @endif width="200" height="100" alt="User profile picture">
                </div>
              <h3 class="profile-username text-center">{{ ucwords($vars['user']->name) }}</h3>

              <p class="text-muted text-center">{{ ucwords($vars['position']) }}</p>

              <ul class="list-group list-group-unbordered">
                <li class="list-group-item">
                  <b>Gender</b> <a class="float-right">{{ ucwords($vars['user']->gender) }}</a>
                </li>
                <li class="list-group-item">
                  <b>Email</b> <a class="float-right" style="font-size: 13px;">{{ ucwords($vars['user']->email) }}</a>
                </li>
                    <li class="list-group-item">
                    <b>Phone Number</b> <a class="float-right">{{ ucwords($vars['user']->phone) }}</a>
                    </li>
                </li>
                    <li class="list-group-item">
                    <b>Company name</b> <a class="float-right">{{ ucwords($vars['user']->phone) }}</a>
                </li>
                </li>
                <li class="list-group-item">
                <b>Branch name</b> <a class="float-right">{{ ucwords($vars['user']->phone) }}</a>
            </li>

            <li class="list-group-item">
                <b>Ofice name</b> <a class="float-right">{{ ucwords($vars['user']->phone) }}</a>
            </li>
            <li class="list-group-item">
                <b>Role name</b> <a class="float-right">{{ ucwords($vars['user']->phone) }}</a>
            </li>

            <li class="list-group-item">
                <b>ermission name</b> <a class="float-right">{{ ucwords($vars['user']->phone) }}</a>
            </li>

                 <li class="list-group-item">
                  <b>Living Area</b> <a class="float-right">{{ ucwords($vars['user']->address) }}</a>
                </li>
                 <li class="list-group-item">
                  <b>Description</b> <a class="float-right">{{ ucwords($vars['user']->description) }}</a>
                </li>
              </ul>

              <a href="javascript:void(0)" class="btn bg-gradient-orange btn-block  editTr" data-id="{{ $vars['user']->uuid }}" ><li class="fa fa-pencil-square-o"></li><b>Edit Profile</b></a>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.Roles Tab pane   -->
        <div class="col-md-9">


            <div class="card card-success card-outline">
                <div class="card-header p-2">
                    <ul class="nav nav-pills">
                        <li class="active nav-item"><a class="nav-link active" href="#company" data-toggle="tab">Company</a></li>
                        <li class="nav-item"><a class="nav-link" href="#branch" data-toggle="tab"> Branch </a></li>
                         <li class="nav-item"><a class="nav-link" href="#office" data-toggle="tab"> Office </a></li>
                         <li class="nav-item"><a class="nav-link" href="#role" data-toggle="tab">Roles</a></li>
                        <li class="nav-item"><a class="nav-link" href="#permissions" data-toggle="tab">Permissions</a></li>

                    </ul>
                </div>
                
                <div class="card-body">
                    <div class="tab-content">
                        {{-- @if( Auth::user()->hasRole('admin') ||Auth::user()->hasRole('management') ||Auth::user()->hasRole('headmaster'))  --}}

                        <div class="tab-pane active" id="company">
                            <div class="timeline-body">

                                    <div class="row">
                                        <div class="form-group col-md-10">
                                            <label> Asign Company for {{ ucwords($vars['user']->name) }} </label>
                                            <select class="form-control select2 update_users_dtl" data-user="{{$vars['user']->id}}" data-url="users-update-companies" id="company_id" name="company_id" data-placeholder="Select Company" style="width: 100%;" required>
                                                <option value="">Select Company </option>
                                                @foreach ($vars['companies'] as $company)
                                                    <option  value="{{ $company->id }}" {{$vars['user']->company_id == $company->id ? 'selected':''}} >{{ $company->name }}</option>
                                                @endforeach 
                                            </select>
                                        </div>
                                    </div>
                                <br/>

                            </div>
                        </div>
                        <div class="tab-pane" id="branch">
                            <div class="timeline-body">
                                <div class="row">
                                    <div class="form-group col-md-10">
                                        <label> Assign Branch for {{ ucwords($vars['user']->name) }} </label>
                                        <input type="hidden" name="type" value="branch_id">
                                        <select class="form-control select2 update_users_dtl" data-user="{{$vars['user']->id}}" data-url="update-branch-user" id="branch_id" name="branch_id" data-placeholder="Select Branch" style="width: 100%;" required>
                                            <option value="">Select Branch</option>
                                            @foreach ($vars['branches'] as $branch)
                                                <option  value="{{ $branch->id }}" {{$vars['user']->branch_id == $branch->id ? 'selected':''}} >{{ $branch->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <br/>
                            </div>
                        </div>

                        <div class="tab-pane" id="office">
                            <div class="timeline-body">
                                    <div class="row">
                                        <div class="form-group col-md-10">
                                            <label> Asign Office for {{ ucwords($vars['user']->name) }} </label>
                                            <input type="hidden" name="type" value="office_id">
                                            <select class="form-control select2 update_users_dtl" data-user="{{$vars['user']->id}}" data-url="update-office-user" id="office_id" name="office_id" data-placeholder="Select Office" style="width: 100%;" required>
                                                <option value="">Select Office</option>
                                                @foreach ($vars['offices'] as $office)
                                                    <option  value="{{ $office->id }}" {{$vars['user']->office_id == $office->id ? 'selected':''}}>{{ $office->name }}</option>
                                                @endforeach 
                                            </select>
                                        </div>
                                    </div>
                                {{-- @endif --}}
                                <br/>
                            </div>
                        </div>


                        <div class="tab-pane" id="role">
                            <div class="timeline-body">
                                    <div class="row">
                                        <div class="form-group col-md-10">
                                            <label> Asign Role for {{ ucwords($vars['user']->name) }} </label>
                                            <input type="hidden" name="belong_type" value="{{get_class($vars['user'])}}">
                                            <input type="hidden" name="uuid" value="{{ $vars['user']->uuid }}">
                                            <select class="form-control select2 update_role_dtl" data-user = "{{$vars['user']->id}}" data-url="update-role-user" id="role_id" name="role_id" data-placeholder="Select Role" style="width: 100%;" required>
                                                <option value="">Select Role</option>
                                                @foreach ($vars['roles'] as $role)
                                                    <option  value="{{ $role->id }}" {{ in_array($role->id, $vars['user']->roles->pluck('id')->toArray())? 'selected' : '' }} >{{ $role->name }}</option>
                                                @endforeach 
                                            </select>
                                        </div>
                                    </div>
                                {{-- @endif --}}
                                <br/>
                            </div>
                        </div>


                        <div class="tab-pane" id="permissions">
                            <div class="timeline-body">
                                        <h4 class="timeline-header">Permission For {{ ucwords($vars['user']->name) }} </h4>
                                        @if(!$vars['user']->hasRole('cooperative|processing factory|blender'))
                                            <input type="hidden" name="uuid" value="{{ $vars['user']->uuid }}">
                                            <div class="row">
                                                <div class="form-group  col-md-10">
                                                    <label> Assign Permission </label>
                                                    <input type="hidden" name="belong_type" value="{{get_class($vars['user'])}}">
                                                    <select class="form-control select2 update_permission_dtl" data-user = "{{$vars['user']->id}}" data-url="update-permission-user" id="permission_id" name="permission_id"  data-placeholder="Select Permission" style="width: 100%;">
                                                        @foreach ($vars['permissions'] as $var)
                                                            <option  value="{{ $var->id }}" {{ in_array($var->id, $vars['user']->permissions->pluck('id')->toArray())? 'selected' : '' }} >{{ $var->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        @endif
                                        <br/>
                                        <h5>User's Currently Permissions</h5>
                                        <table id="work_station_table" class="table table-bordered table-striped">

                                            @if(count($vars['user']->permissions))
                                                @foreach ($vars['user']->permissions as $permission)
                                                    <tfoot>
                                                    <tr>
                                                        <th>
                                                            {{ ucwords($permission->name) }}
                                                        </th>
                                                    </tr>
                                                    </tfoot>
                                                @endforeach
                                            @endif
                                        </table>

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

          <div class="nav-tabs-custom">


            <div class="tab-content">
               <!-- /.Roles Tab pane   -->


              </div>
            </div>
            <!-- /.tab-content -->
          </div>


        </div>

    </section>
  {{--    @include('students/_guardian/_edit_guardian') --}}
     @include('users/_edit')
     @include('users/partials/_add')

@endsection



@section('js')

 <script type="text/javascript">

        $(function () {
            $('#payments').DataTable({
            'paging'      : true,
            'lengthChange': false,
            'searching'   : true,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : false
            })
        })


    $(document).on('click', '.editTr', 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 input[name=gender]").val(data.users.gender);
                $("#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');
            },
            });
        });



        let componetntId

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

        //  Swal.fire({
        //     title: "Do you want to save the changes?",
        //     showDenyButton: true,
        //     showCancelButton: true,
        //     confirmButtonText: "Save",
        //     denyButtonText: `Don't save`
        //     }).then((result) => {
        //     /* Read more about isConfirmed, isDenied below */
        //     if (result.isConfirmed) {
        //         Swal.fire("Saved!", "", "success");
        //     } else if (result.isDenied) {
        //         Swal.fire("Changes are not saved", "", "info");
        //     }
        //   });

        //   }

        // Update Company, branch and Office details            
        $(document).on('change', '.update_users_dtl', function(e){
            e.preventDefault();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            let id = $(this).val();
            let user_id = $(this).data('user');
            let url = $(this).data('url')
            let formData = new FormData();
            formData.append('update_id',id)
            formData.append('user_id',user_id)

            Swal.fire({
            title: "Do you want to save the changes?",
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: "Save",
            denyButtonText: `Don't save`
            }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: "POST",
                    url: `/${url}`,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        // $("#company_id").prepend(`<option value="${data.company.id}" selected >${data.company.name}</option>`);
                    },
                });
                Swal.fire("Saved!", "", "success");
            } else if (result.isDenied) {
                Swal.fire("Changes are not saved", "", "info");
            }
          });

            // $("#add_company_form").attr('action', joinedUrl )
        });


           // Update Roles             
           $(document).on('change', '.update_role_dtl', function(e){
            e.preventDefault();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            let id = $(this).val();
            let user_id = $(this).data('user');
            let url = $(this).data('url')
            let formData = new FormData();
            formData.append('update_id',id)
            formData.append('user_id',user_id)

            Swal.fire({
            title: "Do you want to save the changes?",
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: "Save",
            denyButtonText: `Don't save`
            }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: "POST",
                    url: `/${url}`,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        // $("#company_id").prepend(`<option value="${data.company.id}" selected >${data.company.name}</option>`);
                    },
                });
                Swal.fire("Saved!", "", "success");
            } else if (result.isDenied) {
                Swal.fire("Changes are not saved", "", "info");
            }
          });

            // $("#add_company_form").attr('action', joinedUrl )
        });


              // Update Permission            
              $(document).on('change', '.update_permission_dtl', function(e){
            e.preventDefault();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            let id = $(this).val();
            let user_id = $(this).data('user');
            let url = $(this).data('url')
            let formData = new FormData();
            formData.append('update_id',id)
            formData.append('user_id',user_id)

            Swal.fire({
            title: "Do you want to save the changes?",
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: "Save",
            denyButtonText: `Don't save`
            }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: "POST",
                    url: `/${url}`,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        // $("#company_id").prepend(`<option value="${data.company.id}" selected >${data.company.name}</option>`);
                    },
                });
                Swal.fire("Saved!", "", "success");
            } else if (result.isDenied) {
                Swal.fire("Changes are not saved", "", "info");
            }
          });

            // $("#add_company_form").attr('action', joinedUrl )
        });


 </script>



@endsection