@extends('crm.layouts.master')
@section('title','User Detail')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
@endsection
@section('main-content')
    <div class="breadcrumb">
        <h3>{{$user->name}} detail</h3>
        <input type="hidden" value="{{$user->id}}" id="user_id">
    </div>
    <div class="separator-breadcrumb border-top"></div>
    <div class="row">
        <div class="col-md-7 mb-4">
            <div class="card text-left mb-3 p-4">
                <div class="">
                    <div class="d-flex align-items-center">
                        {{--<img src="{{asset('assets/images/placeholder.png')}}" >--}}
                        <div class="rounded-circle text-white profile-name">
                            {{strtoupper(substr($user->name,0,1)) }}
                        </div>
                        <div class="mx-2 text-center mt-4">
                            <h4> {{$user->name}}</h4>
                            <p class="mb-0 fs-5"><i class="fa fa-user fs-4 pe-2"></i> {{$user->username}}</p>
                            <div class="d-flex justify-content-center mt-3 gap-2">
                                <button id="delete_user_btn{{$user->id}}" type="button" title="Delete Access" class="btn btn-light icon-btns border rounded-circle border-0" onclick="deleteUser(`{{$user->id}}`)"><i class="fa fa-trash"></i></button>
                                @if(Auth::user()->access_level == 'Admin' || Auth::user()->access_level == 'Office Manager')
                                    <button  type="button" class="btn btn-light border rounded-circle border-0 icon-btns" data-toggle="modal" data-target="#edit_access_modal" title="Edit Access"><i class="fa fa-edit"></i></button>
                                    <button  type="button" title="Reset Password" data-toggle="modal" data-target="#reset_password_modal" class="btn btn-light icon-btns border rounded-circle border-0" ><i class="fa fa-lock"></i></button>
                                @endif

                            </div>
                        </div>
                    </div>
                </div>
                <div class='profile-card-info'>
                    <div class="row">
                        <div class="mb-3 d-flex col-md-6"><b>Level :</b> <p class="mb-0">{{$user->access_level ?? 'emp'}}</p></div>
                        <div class="mb-3 d-flex col-md-6"><b>Office :</b> <p class="mb-0">{{$user->office->name ?? 'emp'}}</p></div>
                    </div>
                    <div class="row">
                        <div class="mb-3 d-flex col-md-6"><b>Desk :</b> <p class="mb-0">{{$user->desk->name ?? 'emp'}}</p></div>
                        <div class="mb-3 d-flex col-md-6"><b>Leads Allow :</b> <p class="mb-0">{{$user->leads_allow ?? 0}}</p></div>
                    </div>
                    <div class="row">
                        <div class="mb-3 d-flex col-md-6"><b>Leads Count :</b> <p class="mb-0">{{$user->leads->count() ?? 0}}</p></div>
                        <div class="mb-3 d-flex col-md-6"><b>Extension :</b> <p class="mb-0">{{$user->extension ?? 'emp'}}</p></div>
                    </div>
                    <div class="row">
                        <div class="mb-3 d-flex col-md-6"><b>Telegram user :</b> <p class="mb-0">{{$user->telegram ?? 'emp'}}</p></div>
                        <div class="mb-3 d-flex col-md-6"><b>Register Date :</b> <p class="mb-0">{{$user->create_date ?? ''}}</p></div>
                    </div>
                </div>
            </div>
            <div class="card text-left mb-3">
                <div class="card-body">
                    <div class=" mb-2">
                        <h3>Logs record</h3>
                    </div>
                    <div class="table-responsive">
                        <table class="display table table-bordered" id="logs_table" style="width:100%">
                            <thead>
                            <tr>
                                <th>ID#</th>
                                <th>Subject ID</th>
                                <th>Description</th>
                                <th>Create Date</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($history as $his)
                                <tr>
                                    <td>{{$his->id}}</td>
                                    <td>{{$his->subject_id}}</td>
                                    <td>{{$his->description}}</td>
                                    <td>{{date('Y-m-d',strtotime($his->created_at))}}</td>
                                    <td class="text-center">
                                        <a class="fs-4" id="delete_history_btn{{$his->id}}" onclick="deleteUserHistory(`{{$his->id}}`)"><i class="fa fa-trash"></i></a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>

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

        <div class="col-md-5 mb-4">
            <div class="card text-left mb-3">
                <div class="card-body">

                    <div class="d-flex justify-content-between">
                        <div class="text-center">
                            <h3>Approved Deposit</h3>
                            <h3>${{number_format($approve_deposit->sum('amount'))}}</h3>
                        </div>
                        {{--                        <div class="text-center">--}}
                        {{--                            <h3>Desk Amount</h3>--}}
                        {{--                            <h3>0</h3>--}}
                        {{--                        </div>--}}
                    </div>

                </div>
            </div>
            <div class="card text-left mb-3">
                <div class="card-body">
                    <div class="mb-2">
                        <h3>Deposit record</h3>
                    </div>
                    <div class="table-responsive">
                        <table class="display table table-bordered" id="deafult_ordering_table" style="width:100%">
                            <thead>
                            <tr>
                                <th>ID#</th>
                                <th>Lead</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Action Date</th>
                                <th>Create Date</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($transactions as $tran)
                                <tr>
                                    <td>{{$tran->id}}</td>
                                    <td>{{$tran->lead->fname ?? ''}} {{$tran->lead->lname ?? ''}}</td>
                                    <td>{{$tran->amount}}</td>
                                    <td>
                                        @if($tran->status == 0)
                                            <span class="badge-pill badge bg-primary">Pending</span>
                                        @else
                                            <span class="badge-pill badge bg-success">Approved</span>
                                        @endif

                                    </td>
                                    <td>{{$tran->action_date}}</td>
                                    <td>{{$tran->create_date}}</td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-secondary dropdown-toggle border-0" type="button" id="dropdownMenuButton{{$tran->id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Actions
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton{{$tran->id}}">

                                                @if((Auth::user()->access_level == 'Admin' || Auth::user()->access_level == 'Office Manager') && ($tran->status == 0) )
                                                    <a class="dropdown-item" title="Approve deposit" id="approve_transaction_btn{{$tran->id}}" onclick="approveTransaction(`{{$tran->id}}`)">Approve</a>
                                                @endif
                                                @if($userAccess->can_add_lead_transaction == 'Yes')
                                                    <a class="dropdown-item d-none"  title="Delete deposit" id="delete_transaction_btn{{$tran->id}}" onclick="deleteTransaction(`{{$tran->id}}`)">Delete</a>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Note Modal -->
    <div class="modal" id="edit_access_modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Edit Access</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form class="row" id="edit_user_access">
                        <div class=" col-md-6 form-group">
                            <label>Can View Lead Columns </label>
                            <div class="dropdown mx-2">
                                <button class="w-100 h-100 py-2 btn btn-secondary dropdown-toggle shadow-none" type="button" id="column_filters_dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="d-block py-1">Columns</span>
                                </button>
                                <div class="dropdown-menu" aria-labelledby="column_filters_dropdown">
                                    <div id="column_filters">
                                        <label class="dropdown-item" for="list_name"><input type="checkbox" class="column_filter" id="list_name" data-column="0"> List Name</label>
                                        <label class="dropdown-item" for="id_checkbox"><input type="checkbox" class="column_filter" id="id_checkbox" data-column="1"> ID</label>
                                        <label class="dropdown-item" for="fname_checkbox"><input type="checkbox" class="column_filter" id="fname_checkbox" data-column="2"> First Name</label>
                                        <label class="dropdown-item" for="lname_checkbox"><input type="checkbox" class="column_filter" id="lname_checkbox" data-column="3"> Last Name</label>
                                        <label class="dropdown-item" for="email_checkbox"><input type="checkbox" class="column_filter" id="email_checkbox" data-column="4"> Email</label>
                                        <label class="dropdown-item" for="total_calls_checkbox"><input type="checkbox" class="column_filter" id="total_calls_checkbox" data-column="5"> Total Calls</label>
                                        <label class="dropdown-item" for="connected_calls_checkbox"><input type="checkbox" class="column_filter" id="connected_calls_checkbox" data-column="6"> Connected Calls</label>
                                        <label class="dropdown-item" for="phone_checkbox"><input type="checkbox" class="column_filter" id="phone_checkbox" data-column="7"> Phone</label>
                                        <label class="dropdown-item" for="call_issue_checkbox"><input type="checkbox" class="column_filter" id="call_issue_checkbox" data-column="8"> Call Issue</label>
                                        <label class="dropdown-item" for="send_sms_checkbox"><input type="checkbox" class="column_filter" id="send_sms_checkbox" data-column="9"> SMS</label>
                                        <label class="dropdown-item" for="whatsapp_checkbox"><input type="checkbox" class="column_filter" id="whatsapp_checkbox" data-column="10"> WhatsApp</label>
                                        <label class="dropdown-item" for="brand_checkbox"><input type="checkbox" class="column_filter" id="brand_checkbox" data-column="11"> Brand</label>
                                        <label class="dropdown-item" for="status_checkbox"><input type="checkbox" class="column_filter" id="status_checkbox" data-column="12"> Status</label>
                                        <label class="dropdown-item" for="office_checkbox"><input type="checkbox" class="column_filter" id="office_checkbox" data-column="13"> Office</label>
                                        <label class="dropdown-item" for="desk_checkbox"><input type="checkbox" class="column_filter" id="desk_checkbox" data-column="14"> Desk</label>
                                        <label class="dropdown-item" for="user_checkbox"><input type="checkbox" class="column_filter" id="user_checkbox" data-column="15"> User</label>
                                        <label class="dropdown-item" for="country_checkbox"><input type="checkbox" class="column_filter" id="country_checkbox" data-column="16"> Country</label>
                                        <label class="dropdown-item" for="ftd_checkbox"><input type="checkbox" class="column_filter" id="ftd_checkbox" data-column="17"> FTD</label>
                                        <label class="dropdown-item" for="amount_checkbox"><input type="checkbox" class="column_filter" id="amount_checkbox" data-column="18"> Amount</label>
                                        <label class="dropdown-item" for="file_name_checkbox"><input type="checkbox" class="column_filter" id="file_name_checkbox" data-column="19"> File name</label>
                                        <label class="dropdown-item" for="create_date_checkbox"><input type="checkbox" class="column_filter" id="create_date_checkbox" data-column="20"> Create Date</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class=" col-md-6 form-group">
                            <label>Can View Lead Details</label>
                            <select class="form-select" id="can_view_lead_details">
                                <option value="">--Select Please--</option>
                                <option {{$userAccess->can_view_lead_details == 'Yes' ? 'selected' : '' }} value="Yes">Yes</option>
                                <option {{$userAccess->can_view_lead_details == 'No' ? 'selected' : '' }} value="No">No</option>
                            </select>
                        </div>

                        <div class=" col-md-6 form-group">
                            <label>Can Call To Lead</label>
                            <select class="form-select" id="can_call_lead">
                                <option value="">--Select Please--</option>
                                <option  {{$userAccess->can_call_lead == 'Yes' ? 'selected' : '' }} value="Yes">Yes</option>
                                <option  {{$userAccess->can_call_lead == 'No' ? 'selected' : '' }} value="No">No</option>
                            </select>
                        </div>
                        <div class=" col-md-6 form-group">
                            <label>Can Delete Lead</label>
                            <select class="form-select" id="can_delete_lead">
                                <option value="">--Select Please--</option>
                                <option  {{$userAccess->can_delete_lead == 'Yes' ? 'selected' : '' }} value="Yes">Yes</option>
                                <option  {{$userAccess->can_delete_lead == 'No' ? 'selected' : '' }} value="No">No</option>
                            </select>
                        </div>
                        <div class=" col-md-6 form-group">
                            <label>Can Add Lead Deposit</label>
                            <select class="form-select" id="can_add_lead_transaction">
                                <option value="">--Select Please--</option>
                                <option {{$userAccess->can_add_lead_transaction == 'Yes' ? 'selected' : '' }} value="Yes">Yes</option>
                                <option {{$userAccess->can_add_lead_transaction == 'No' ? 'selected' : '' }} value="No">No</option>
                            </select>
                        </div>
                        <div class=" col-md-6 form-group">
                            <label>Can Add or Delete Lead Notes</label>
                            <select class="form-select" id="can_add_lead_notes">
                                <option value="">--Select Please--</option>
                                <option {{$userAccess->can_add_lead_notes == 'Yes' ? 'selected' : '' }} value="Yes">Yes</option>
                                <option {{$userAccess->can_add_lead_notes == 'No' ? 'selected' : '' }} value="No">No</option>
                            </select>
                        </div>
                        <div class=" col-md-6 form-group">
                            <label>Can Delete Lead Logs</label>
                            <select class="form-select" id="can_delete_lead_logs">
                                <option value="">--Select Please--</option>
                                <option {{$userAccess->can_delete_lead_logs == 'Yes' ? 'selected' : '' }} value="Yes">Yes</option>
                                <option {{$userAccess->can_delete_lead_logs == 'No' ? 'selected' : '' }} value="No">No</option>
                            </select>
                        </div>
                        <div class=" col-md-6 form-group">
                            <label>Can listen recorded calls</label>
                            <select class="form-select" id="can_listen_recorded_calls">
                                <option value="">--Select Please--</option>
                                <option {{$userAccess->can_listen_recorded_calls == 'Yes' ? 'selected' : '' }} value="Yes">Yes</option>
                                <option {{$userAccess->can_listen_recorded_calls == 'No' ? 'selected' : '' }} value="No">No</option>
                            </select>
                        </div>
                        <div class="text-center">
                            <button class="btn btn-primary" id="edit_access_btn" type="submit">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="reset_password_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Reset Password</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form class="" id="reset_password">
                        <div class="form-group">
                            <label>New Password</label>
                            <input type="password" class="form-control" required id="password">
                        </div>
                        <div class="form-group">
                            <label>Confirm New Password</label>
                            <input type="password" class="form-control" required id="confirm_password">

                        </div>
                        <div class="text-center">
                            <button class="btn btn-primary" id="reset_password_btn" type="submit">Reset</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            // ordering or sorting
            $('#deafult_ordering_table').DataTable({
                "order": [
                    [0, "DESC"]
                ]
            });
            $('#logs_table').DataTable({
                "order": [
                    [0, "DESC"]
                ]
            });
            $('#notes_table').DataTable({
                "order": [
                    [0, "DESC"]
                ]
            });

            //check the checkbox
            var leadColumnAccess =`{{ $userAccess->lead_column_access }}`;

            leadColumnAccess=leadColumnAccess.split(',');
            leadColumnAccess = leadColumnAccess.map(function(str) {
                return parseInt(str, 10);
            });

            $('.column_filter').each(function() {
                var columnNumber = parseInt($(this).data('column'));
                if ($.inArray(columnNumber, leadColumnAccess) !== -1) {
                    $(this).prop('checked', true);
                }
            });
        });
        function EditDesk(id,name,office_id){
            $("#desk_id").val(id);
            $("#edit_office_id").val(office_id);
            $("#edit_name").val(name);
            // $("#edit_desk_modal").show();
        }
    </script>
@endsection