@extends('crm.layouts.master')
@section('title', $user->name . ' — User Detail')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
    <style>
        /* ── Avatar circle ── */
        .ud-avatar {
            width: 72px; height: 72px; border-radius: 50%;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: #fff; font-size: 1.75rem; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; letter-spacing: .02em;
        }

        /* ── Icon action buttons ── */
        .ud-icon-btn {
            width: 38px; height: 38px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid #dee2e6; background: #fff; color: #495057;
            transition: background .15s, color .15s;
        }
        .ud-icon-btn:hover { background: #f1f3fa; color: #1a1a2e; }

        /* ── Info grid in profile card ── */
        .ud-info-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem;
            margin-top: 1.25rem;
        }
        .ud-info-item { display: flex; flex-direction: column; gap: .1rem; }
        .ud-info-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
                         font-weight: 600; color: #8f9bb3; }
        .ud-info-value { font-size: .9rem; font-weight: 500; color: #273444; }

        /* ── Stat card ── */
        .ud-stat-card { border-left: 4px solid #6366f1; }
        .ud-stat-card .ud-stat-label { font-size: .75rem; text-transform: uppercase;
                                        letter-spacing: .04em; font-weight: 600; color: #8f9bb3; }
        .ud-stat-card .ud-stat-value { font-size: 1.65rem; font-weight: 700; color: #1a1a2e;
                                        line-height: 1.15; margin-top: .15rem; }
    </style>
@endsection

@section('main-content')

<input type="hidden" value="{{ $user->id }}" id="user_id">

{{-- ── Breadcrumb ── --}}
<div class="breadcrumb d-flex align-items-center justify-content-between w-100">
    <h3>{{ $user->name }}</h3>
    <small class="text-muted">User Detail</small>
</div>
<div class="separator-breadcrumb border-top"></div>

<div class="row g-3">

    {{-- ════════════════════════
         LEFT COLUMN
    ════════════════════════ --}}
    <div class="col-lg-4">

        {{-- Profile card --}}
        <div class="card mb-3">
            <div class="card-body">
                <div class="d-flex align-items-center gap-3">
                    <div class="ud-avatar">{{ strtoupper(substr($user->name, 0, 1)) }}</div>
                    <div class="flex-grow-1 min-width-0">
                        <h5 class="mb-0 fw-bold">{{ $user->name }}</h5>
                        <p class="mb-0 text-muted" style="font-size:.84rem">
                            <i class="fa fa-user me-1"></i>{{ $user->username }}
                        </p>
                        <span class="badge bg-primary mt-1" style="font-size:.7rem">
                            {{ $user->access_level ?? 'Staff' }}
                        </span>
                    </div>
                    <div class="d-flex gap-2 flex-shrink-0">
                        @if(Auth::user()->access_level === 'Admin')
                        <button type="button" class="ud-icon-btn" title="Archive User"
                                onclick="deleteUser(`{{ $user->id }}`)" id="delete_user_btn{{ $user->id }}">
                            <i class="fa fa-trash text-danger" style="font-size:.85rem"></i>
                        </button>
                        @endif
                        @if(in_array(Auth::user()->access_level, ['Admin','Office Manager']))
                        <button type="button" class="ud-icon-btn" title="Edit Access"
                                data-bs-toggle="modal" data-bs-target="#edit_access_modal">
                            <i class="fa fa-edit" style="font-size:.85rem"></i>
                        </button>
                        <button type="button" class="ud-icon-btn" title="Reset Password"
                                data-bs-toggle="modal" data-bs-target="#reset_password_modal">
                            <i class="fa fa-lock" style="font-size:.85rem"></i>
                        </button>
                        @endif
                    </div>
                </div>

                <div class="ud-info-grid">
                    <div class="ud-info-item">
                        <span class="ud-info-label">Office</span>
                        <span class="ud-info-value">{{ $user->office->name ?? '—' }}</span>
                    </div>
                    <div class="ud-info-item">
                        <span class="ud-info-label">Desk</span>
                        <span class="ud-info-value">{{ $user->desk->name ?? '—' }}</span>
                    </div>
                    <div class="ud-info-item">
                        <span class="ud-info-label">Clients Count</span>
                        <span class="ud-info-value">{{ $user->leads->count() }}</span>
                    </div>
                    <div class="ud-info-item">
                        <span class="ud-info-label">Extension</span>
                        <span class="ud-info-value">{{ $user->extension ?? '—' }}</span>
                    </div>
                    <div class="ud-info-item" style="grid-column:1/-1">
                        <span class="ud-info-label">Registered</span>
                        <span class="ud-info-value">{{ $user->create_date ?? '—' }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Approved Deposit stat card --}}
        <div class="card mb-3 ud-stat-card">
            <div class="card-body">
                <div class="ud-stat-label">Approved Deposits</div>
                <div class="ud-stat-value">${{ number_format($approve_deposit->sum('amount')) }}</div>
            </div>
        </div>

    </div>

    {{-- ════════════════════════
         RIGHT COLUMN
    ════════════════════════ --}}
    <div class="col-lg-8">

        {{-- Deposit records --}}
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-semibold"><i class="fas fa-money-bill-wave me-2 text-success"></i>Deposit Records</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="display table table-sm table-hover mb-0" id="deafult_ordering_table" style="width:100%;font-size:.82rem">
                        <thead class="table-light">
                            <tr>
                                <th>ID</th>
                                <th>Lead</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Action Date</th>
                                <th>Create Date</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($transactions as $tran)
                            <tr>
                                <td>{{ $tran->id }}</td>
                                <td>{{ $tran->lead->fname ?? '' }} {{ $tran->lead->lname ?? '' }}</td>
                                <td class="fw-semibold">{{ $tran->amount }}</td>
                                <td>
                                    @if($tran->status == 0)
                                        <span class="badge bg-warning text-dark" style="font-size:.68rem">Pending</span>
                                    @else
                                        <span class="badge bg-success" style="font-size:.68rem">Approved</span>
                                    @endif
                                </td>
                                <td class="text-muted">{{ $tran->action_date }}</td>
                                <td class="text-muted">{{ $tran->create_date }}</td>
                                <td>
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
                                                data-bs-toggle="dropdown">Actions</button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            @if(in_array(Auth::user()->access_level, ['Admin','Office Manager']) && $tran->status == 0)
                                                <li><a class="dropdown-item" onclick="approveTransaction(`{{ $tran->id }}`)">
                                                    <i class="fa fa-check text-success me-2"></i>Approve
                                                </a></li>
                                            @endif
                                            @if($userAccess->can_add_lead_transaction == 'Yes')
                                                <li><a class="dropdown-item d-none text-danger" onclick="deleteTransaction(`{{ $tran->id }}`)">
                                                    <i class="fa fa-trash me-2"></i>Delete
                                                </a></li>
                                            @endif
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Logs record --}}
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-semibold"><i class="fas fa-history me-2 text-primary"></i>Activity Log</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="display table table-sm table-hover mb-0" id="logs_table" style="width:100%;font-size:.82rem">
                        <thead class="table-light">
                            <tr>
                                <th>ID</th>
                                <th>Subject</th>
                                <th>Description</th>
                                <th>Date</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($history as $his)
                            <tr>
                                <td>{{ $his->id }}</td>
                                <td>{{ $his->subject_id }}</td>
                                <td>{{ $his->description }}</td>
                                <td class="text-muted" style="white-space:nowrap">{{ date('Y-m-d', strtotime($his->created_at)) }}</td>
                                <td class="text-center">
                                    <a id="delete_history_btn{{ $his->id }}" onclick="deleteUserHistory(`{{ $his->id }}`)"
                                       class="text-danger" style="cursor:pointer">
                                        <i class="fa fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

{{-- ═══ MODALS ═══ --}}

{{-- Edit Access Modal --}}
<div class="modal fade" id="edit_access_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-edit me-2"></i>Edit Access — {{ $user->name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form class="row g-3" id="edit_user_access">

                    <div class="col-md-12">
                        <label class="form-label fw-semibold">Visible Lead Columns</label>
                        <div class="dropdown">
                            <button class="btn btn-outline-secondary dropdown-toggle w-100" type="button"
                                    id="column_filters_dropdown" data-bs-toggle="dropdown">
                                Select Columns
                            </button>
                            <div class="dropdown-menu p-2" aria-labelledby="column_filters_dropdown" style="min-width:340px">
                                <div id="column_filters" class="row g-1">
                                    @foreach($leadTableColumns as $column)
                                    <div class="col-6">
                                        <label class="dropdown-item rounded py-1" for="col_{{ $column['index'] }}">
                                            <input type="checkbox" class="column_filter form-check-input me-2"
                                                   id="col_{{ $column['index'] }}" data-column="{{ $column['index'] }}">
                                            {{ $column['label'] }}
                                            @if(isset($column['tables']) && $column['tables'] === ['clients'])
                                                <small class="text-muted">(Clients only)</small>
                                            @endif
                                        </label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    @foreach([
                        ['can_view_lead_details','Can View Lead Details'],
                        ['can_call_lead','Can Call Lead'],
                        ['can_delete_lead','Can Delete Lead'],
                        ['can_add_lead_transaction','Can Add Client Deposit'],
                        ['can_add_lead_notes','Can Add Notes'],
                        ['can_delete_lead_notes','Can Delete Notes'],
                        ['can_delete_lead_logs','Can Delete Lead Logs'],
                        ['can_listen_recorded_calls','Can Listen Recorded Calls'],
                        ['can_view_client_portal','Can View Client Portal'],
                        ['can_reset_client_password','Can Reset Client Password'],
                    ] as [$field, $label])
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">{{ $label }}</label>
                        <select class="form-select" id="{{ $field }}">
                            <option value="">-- Select --</option>
                            <option {{ $userAccess->$field == 'Yes' ? 'selected' : '' }} value="Yes">Yes</option>
                            <option {{ $userAccess->$field == 'No'  ? 'selected' : '' }} value="No">No</option>
                        </select>
                    </div>
                    @endforeach

                    <div class="col-12 text-end">
                        <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">Cancel</button>
                        <button class="btn btn-primary" id="edit_access_btn" type="submit">
                            <i class="fa fa-save me-1"></i>Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Reset Password Modal --}}
<div class="modal fade" id="reset_password_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-lock me-2"></i>Reset Password</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="reset_password">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">New Password <span class="text-danger">*</span></label>
                        <input type="password" class="form-control" required id="password" placeholder="••••••••">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Confirm Password <span class="text-danger">*</span></label>
                        <input type="password" class="form-control" required id="confirm_password" placeholder="••••••••">
                    </div>
                    <div class="d-flex gap-2 justify-content-end">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button class="btn btn-primary" id="reset_password_btn" type="submit">
                            <i class="fa fa-lock me-1"></i>Reset Password
                        </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 () {
            $('#deafult_ordering_table').DataTable({ order: [[0,'DESC']], pageLength: 10 });
            $('#logs_table').DataTable({ order: [[0,'DESC']], pageLength: 10 });

            // Pre-check column access checkboxes
            var leadColumnAccess = `{{ $userAccess->lead_column_access }}`.split(',').map(Number);
            $('.column_filter').each(function () {
                if (leadColumnAccess.includes(parseInt($(this).data('column')))) {
                    $(this).prop('checked', true);
                }
            });
        });
    </script>
@endsection