@extends('layouts/layoutMaster')

@section('title', ($companyDetails['name'] ?? 'Client') . ' — Document Requests')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/moment/moment.js') }}"></script>
@endsection

@section('page-style')
    <style>
        .client-detail-nav .nav-link {
            color: #697a8d;
            border-radius: 0.375rem;
            padding: 0.55rem 1rem;
        }
        .client-detail-nav .nav-link:hover {
            background-color: rgba(105, 122, 141, 0.08);
        }
        .client-detail-nav .nav-link.active {
            color: #696cff;
            background-color: rgba(105, 108, 255, 0.08);
            font-weight: 600;
        }

        /* Top scrollbar */
        .top-scroll-wrapper {
            overflow-x: auto;
            overflow-y: hidden;
        }
        .top-scroll-wrapper .scroll-spacer {
            height: 1px;
        }

        /* Column min-widths */
        .dt-doc-requests th:nth-child(2),
        .dt-doc-requests td:nth-child(2) {
            min-width: 280px;
        }
        .dt-doc-requests th:nth-child(3),
        .dt-doc-requests td:nth-child(3) {
            min-width: 180px;
        }
    </style>
@endsection

@section('content')
    {{-- Page Header --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h4 class="fw-bold mb-1">Client Details</h4>
                    <p class="text-muted mb-0">Document requests for this client.</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ url('clients') }}">Clients</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $companyDetails['name'] ?? '' }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    {{-- Company Header Card --}}
    @include('companies.administrator._header', ['companyDetails' => $companyDetails])

    {{-- Left Nav + Right Content --}}
    <div class="row g-4">
        {{-- Left Sidebar Navigation --}}
        <div class="col-12 col-lg-3">
            @include('companies.administrator._nav', ['activePage' => 'documents-requests', 'companyDetails' => $companyDetails])
        </div>

        {{-- Right Content --}}
        <div class="col-12 col-lg-9">

            {{-- Stats Cards --}}
            <div class="row g-3 mb-4">
                <div class="col-sm-6 col-md-3">
                    <div class="card p-3">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-3">
                                <span class="avatar-initial rounded bg-label-primary"><i class="ti ti-file-plus ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">5</h5>
                                <small class="text-muted">Open</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card p-3">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-3">
                                <span class="avatar-initial rounded bg-label-warning"><i class="ti ti-clock ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">2</h5>
                                <small class="text-muted">Overdue</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card p-3">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-3">
                                <span class="avatar-initial rounded bg-label-success"><i class="ti ti-checks ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">12</h5>
                                <small class="text-muted">Completed</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card p-3">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-3">
                                <span class="avatar-initial rounded bg-label-secondary"><i class="ti ti-file-text ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">19</h5>
                                <small class="text-muted">Total</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Document Requests Table --}}
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                        <div>
                            <h5 class="card-title mb-0">Document Requests</h5>
                            <small class="text-muted">All document requests for this client across entities.</small>
                        </div>
                    </div>
                </div>

                {{-- Filters --}}
                <div class="card-body border-bottom pb-3">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label small text-muted mb-1">Status</label>
                            <select class="form-select form-select-sm" id="dr-filter-status">
                                <option value="">All Status</option>
                                <option value="In Progress">In Progress</option>
                                <option value="On Hold">On Hold</option>
                                <option value="Withdrawn">Withdrawn</option>
                                <option value="Completed">Completed</option>
                                <option value="Archived">Archived</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted mb-1">Entity</label>
                            <select class="form-select form-select-sm" id="dr-filter-entity">
                                <option value="">All Entities</option>
                                <option value="Salihin Advisory">Salihin Advisory</option>
                                <option value="Salihin GST">Salihin GST</option>
                                <option value="Salihin Consulting">Salihin Consulting</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted mb-1">Due Date</label>
                            <select class="form-select form-select-sm" id="dr-filter-due">
                                <option value="">Any Time</option>
                                <option value="overdue">Overdue</option>
                                <option value="today">Due Today</option>
                                <option value="week">This Week</option>
                                <option value="month">This Month</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small text-muted mb-1">&nbsp;</label>
                            <div>
                                <button class="btn btn-sm btn-label-secondary w-100" id="dr-clear-filters">
                                    <i class="ti ti-filter-off me-1"></i> Clear Filters
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Top Scrollbar --}}
                <div class="top-scroll-wrapper">
                    <div class="scroll-spacer"></div>
                </div>

                {{-- DR Table --}}
                <div class="card-datatable table-responsive" id="dr-table-wrapper">
                    <table class="table border-top dt-doc-requests">
                        <thead>
                            <tr>
                                <th>Request ID</th>
                                <th>Engagement / Title</th>
                                <th>Entity</th>
                                <th>Due Date</th>
                                <th>Status</th>
                                <th>Items</th>
                                <th>Last Activity</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- Sample row 1: In Progress, overdue --}}
                            <tr>
                                <td><span class="fw-medium">DR-2026-0042</span></td>
                                <td>
                                    <span class="fw-medium d-block">Annual Audit FY2025</span>
                                    <small class="text-muted">Financial Statements & Supporting Docs</small>
                                </td>
                                <td><span class="text-muted">Salihin Advisory</span></td>
                                <td class="text-nowrap">
                                    <span class="text-danger"><i class="ti ti-alert-circle ti-xs me-1"></i>10 Feb 2026</span>
                                </td>
                                <td><span class="badge bg-label-primary">In Progress</span></td>
                                <td class="text-nowrap">
                                    <span class="me-2" title="Files"><i class="ti ti-paperclip ti-xs text-primary"></i> 3</span>
                                    <span class="me-2" title="Discussions"><i class="ti ti-message ti-xs text-info"></i> 5</span>
                                    <span title="Users"><i class="ti ti-users ti-xs text-warning"></i> 2</span>
                                </td>
                                <td class="text-nowrap"><small class="text-muted">2 hours ago</small></td>
                                <td class="text-nowrap">
                                    <a href="javascript:void(0);" class="btn btn-sm btn-icon" title="View"><i class="ti ti-eye"></i></a>
                                    <a href="javascript:void(0);" class="btn btn-sm btn-icon" title="Archive"><i class="ti ti-archive"></i></a>
                                </td>
                            </tr>
                            {{-- Sample row 2: In Progress, not overdue --}}
                            <tr>
                                <td><span class="fw-medium">DR-2026-0039</span></td>
                                <td>
                                    <span class="fw-medium d-block">Tax Compliance FY2025</span>
                                    <small class="text-muted">Tax Computation & Form C</small>
                                </td>
                                <td><span class="text-muted">Salihin GST</span></td>
                                <td class="text-nowrap">28 Feb 2026</td>
                                <td><span class="badge bg-label-primary">In Progress</span></td>
                                <td class="text-nowrap">
                                    <span class="me-2" title="Files"><i class="ti ti-paperclip ti-xs text-primary"></i> 1</span>
                                    <span class="me-2" title="Discussions"><i class="ti ti-message ti-xs text-info"></i> 2</span>
                                    <span title="Users"><i class="ti ti-users ti-xs text-warning"></i> 3</span>
                                </td>
                                <td class="text-nowrap"><small class="text-muted">1 day ago</small></td>
                                <td class="text-nowrap">
                                    <a href="javascript:void(0);" class="btn btn-sm btn-icon" title="View"><i class="ti ti-eye"></i></a>
                                    <a href="javascript:void(0);" class="btn btn-sm btn-icon" title="Archive"><i class="ti ti-archive"></i></a>
                                </td>
                            </tr>
                            {{-- Sample row 3: On Hold --}}
                            <tr>
                                <td><span class="fw-medium">DR-2026-0035</span></td>
                                <td>
                                    <span class="fw-medium d-block">Secretarial Filing</span>
                                    <small class="text-muted">Annual Return Documents</small>
                                </td>
                                <td><span class="text-muted">Salihin Advisory</span></td>
                                <td class="text-nowrap">15 Mar 2026</td>
                                <td><span class="badge bg-label-warning">On Hold</span></td>
                                <td class="text-nowrap">
                                    <span class="me-2" title="Files"><i class="ti ti-paperclip ti-xs text-primary"></i> 0</span>
                                    <span class="me-2" title="Discussions"><i class="ti ti-message ti-xs text-info"></i> 1</span>
                                    <span title="Users"><i class="ti ti-users ti-xs text-warning"></i> 1</span>
                                </td>
                                <td class="text-nowrap"><small class="text-muted">3 days ago</small></td>
                                <td class="text-nowrap">
                                    <a href="javascript:void(0);" class="btn btn-sm btn-icon" title="View"><i class="ti ti-eye"></i></a>
                                    <a href="javascript:void(0);" class="btn btn-sm btn-icon" title="Archive"><i class="ti ti-archive"></i></a>
                                </td>
                            </tr>
                            {{-- Sample row 4: Completed --}}
                            <tr>
                                <td><span class="fw-medium">DR-2025-0128</span></td>
                                <td>
                                    <span class="fw-medium d-block">Annual Audit FY2024</span>
                                    <small class="text-muted">Audit Working Papers</small>
                                </td>
                                <td><span class="text-muted">Salihin Advisory</span></td>
                                <td class="text-nowrap">30 Nov 2025</td>
                                <td><span class="badge bg-label-success">Completed</span></td>
                                <td class="text-nowrap">
                                    <span class="me-2" title="Files"><i class="ti ti-paperclip ti-xs text-primary"></i> 8</span>
                                    <span class="me-2" title="Discussions"><i class="ti ti-message ti-xs text-info"></i> 12</span>
                                    <span title="Users"><i class="ti ti-users ti-xs text-warning"></i> 4</span>
                                </td>
                                <td class="text-nowrap"><small class="text-muted">28 Nov 2025</small></td>
                                <td class="text-nowrap">
                                    <a href="javascript:void(0);" class="btn btn-sm btn-icon" title="View"><i class="ti ti-eye"></i></a>
                                    <a href="javascript:void(0);" class="btn btn-sm btn-icon" title="Archive"><i class="ti ti-archive"></i></a>
                                </td>
                            </tr>
                            {{-- Sample row 5: Withdrawn --}}
                            <tr>
                                <td><span class="fw-medium">DR-2025-0115</span></td>
                                <td>
                                    <span class="fw-medium d-block">GST Audit FY2024</span>
                                    <small class="text-muted">GST-03 Return & Records</small>
                                </td>
                                <td><span class="text-muted">Salihin GST</span></td>
                                <td class="text-nowrap">15 Oct 2025</td>
                                <td><span class="badge bg-label-secondary">Withdrawn</span></td>
                                <td class="text-nowrap">
                                    <span class="me-2" title="Files"><i class="ti ti-paperclip ti-xs text-primary"></i> 0</span>
                                    <span class="me-2" title="Discussions"><i class="ti ti-message ti-xs text-info"></i> 3</span>
                                    <span title="Users"><i class="ti ti-users ti-xs text-warning"></i> 2</span>
                                </td>
                                <td class="text-nowrap"><small class="text-muted">12 Oct 2025</small></td>
                                <td class="text-nowrap">
                                    <a href="javascript:void(0);" class="btn btn-sm btn-icon" title="View"><i class="ti ti-eye"></i></a>
                                    <a href="javascript:void(0);" class="btn btn-sm btn-icon" title="Archive"><i class="ti ti-archive"></i></a>
                                </td>
                            </tr>
                            {{-- Sample row 6: Archived --}}
                            <tr>
                                <td><span class="fw-medium">DR-2024-0087</span></td>
                                <td>
                                    <span class="fw-medium d-block">Tax Compliance FY2023</span>
                                    <small class="text-muted">Tax Computation & Form C</small>
                                </td>
                                <td><span class="text-muted">Salihin Consulting</span></td>
                                <td class="text-nowrap">30 Jun 2024</td>
                                <td><span class="badge bg-label-dark">Archived</span></td>
                                <td class="text-nowrap">
                                    <span class="me-2" title="Files"><i class="ti ti-paperclip ti-xs text-primary"></i> 5</span>
                                    <span class="me-2" title="Discussions"><i class="ti ti-message ti-xs text-info"></i> 7</span>
                                    <span title="Users"><i class="ti ti-users ti-xs text-warning"></i> 3</span>
                                </td>
                                <td class="text-nowrap"><small class="text-muted">28 Jun 2024</small></td>
                                <td class="text-nowrap">
                                    <a href="javascript:void(0);" class="btn btn-sm btn-icon" title="View"><i class="ti ti-eye"></i></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('page-script')
    <script>
        $(function () {
            var clientId = '{{ $companyDetails['id'] ?? '' }}';

            // ── Document Requests DataTable ──
            var drDt = $('.dt-doc-requests').DataTable({
                searching: true,
                ordering: true,
                order: [[6, 'desc']],
                scrollX: true,
                columnDefs: [
                    { orderable: false, searchable: false, targets: -1 }
                ],
                language: {
                    emptyTable: 'No document requests found for this client.',
                    search: '',
                    searchPlaceholder: 'Search requests…'
                },
                initComplete: function () {
                    syncScrollWidth();
                }
            });

            // ── Top Scrollbar Sync ──
            var $tableWrapper = $('#dr-table-wrapper');
            var $topScroll = $('.top-scroll-wrapper');
            var $scrollSpacer = $topScroll.find('.scroll-spacer');

            function syncScrollWidth() {
                if ($tableWrapper.length && $tableWrapper[0].scrollWidth) {
                    $scrollSpacer.width($tableWrapper[0].scrollWidth);
                }
            }

            var isSyncingTop = false;
            var isSyncingBottom = false;

            $topScroll.on('scroll', function () {
                if (!isSyncingBottom) {
                    isSyncingTop = true;
                    $tableWrapper.scrollLeft($topScroll.scrollLeft());
                }
                isSyncingTop = false;
            });

            $tableWrapper.on('scroll', function () {
                if (!isSyncingTop) {
                    isSyncingBottom = true;
                    $topScroll.scrollLeft($tableWrapper.scrollLeft());
                }
                isSyncingBottom = false;
            });

            drDt.on('draw', function () {
                setTimeout(syncScrollWidth, 50);
            });
            $(window).on('resize', syncScrollWidth);

            // ── Filters ──
            $('#dr-filter-status').on('change', function () {
                drDt.column(4).search($(this).val(), false, false).draw();
            });
            $('#dr-filter-entity').on('change', function () {
                drDt.column(2).search($(this).val(), false, false).draw();
            });
            $('#dr-filter-due').on('change', function () {
                var val = $(this).val();
                if (val === 'overdue') {
                    drDt.column(3).search('ti-alert-circle', false, false).draw();
                } else {
                    drDt.column(3).search('', false, false).draw();
                }
            });
            $('#dr-clear-filters').on('click', function () {
                $('#dr-filter-status, #dr-filter-entity, #dr-filter-due').val('').trigger('change');
                drDt.search('').columns().search('').draw();
            });
        });
    </script>
@endsection