@extends('layouts/layoutMaster')

@section('title', 'Notifications')

@section('page-style')
    <style>
        .notification-item {
            transition: background-color 0.15s ease;
        }
        .notification-item:hover {
            background-color: rgba(67, 89, 113, 0.04);
        }
        .notification-icon {
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .notification-unread {
            background-color: rgba(105, 108, 255, 0.04);
        }
    </style>
@endsection

@section('content')
    {{-- Page Header: Title + Breadcrumb --}}
    <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">Notifications</h4>
                    <p class="text-muted mb-0">Stay up to date with all your portal activity.</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Profile</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Notifications</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    {{-- Nav Pills --}}
    @include('profile._nav', ['activePage' => 'notifications'])

    {{-- ============================================================ --}}
    {{-- Summary Stats --}}
    {{-- ============================================================ --}}
    <div class="row mb-4">
        <div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
            <div class="card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="notification-icon bg-label-primary">
                        <i class="ti ti-bell"></i>
                    </div>
                    <div>
                        <h5 class="mb-0">24</h5>
                        <small class="text-muted">Total</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
            <div class="card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="notification-icon bg-label-danger">
                        <i class="ti ti-circle-dot"></i>
                    </div>
                    <div>
                        <h5 class="mb-0">5</h5>
                        <small class="text-muted">Unread</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
            <div class="card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="notification-icon bg-label-success">
                        <i class="ti ti-checks"></i>
                    </div>
                    <div>
                        <h5 class="mb-0">19</h5>
                        <small class="text-muted">Read</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="notification-icon bg-label-warning">
                        <i class="ti ti-clock"></i>
                    </div>
                    <div>
                        <h5 class="mb-0">Today</h5>
                        <small class="text-muted">3 new</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ============================================================ --}}
    {{-- Notification List --}}
    {{-- ============================================================ --}}
    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                <div>
                    <h5 class="card-title mb-0">All Notifications</h5>
                    <small class="text-muted">Showing 12 of 24 notifications</small>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <div class="input-group input-group-sm input-group-merge" style="width: 250px;">
                        <span class="input-group-text"><i class="ti ti-search"></i></span>
                        <input type="text" class="form-control" placeholder="Search notifications...">
                    </div>
                    <button type="button" class="btn btn-sm btn-icon btn-outline-primary position-relative" style="overflow: visible;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Filters" onclick="new bootstrap.Offcanvas(document.getElementById('notificationFilters')).show()">
                        <i class="ti ti-filter"></i>
                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="font-size: 0.6rem; min-width: 18px; padding: 0.25em 0.4em; line-height: 1;">3</span>
                    </button>
                    <button type="button" class="btn btn-sm btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Refresh">
                        <i class="ti ti-refresh"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">
                        <i class="ti ti-checks me-1"></i> Mark All as Read
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body p-0">

            {{-- Date Separator: Today --}}
            <div class="px-3 py-2 bg-light border-bottom">
                <small class="fw-semibold text-muted text-uppercase">Today — 11 Feb 2026</small>
            </div>

            {{-- Notification 1: Unread --}}
            <div class="notification-item notification-unread d-flex align-items-start gap-3 p-3 border-bottom">
                <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox">
                </div>
                <div class="notification-icon bg-label-primary">
                    <i class="ti ti-file-upload"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">Document Uploaded — Tax Return FY2025</h6>
                            <p class="mb-0 text-muted small">Mega Corporation Sdn Bhd submitted the requested tax return document for your review.</p>
                        </div>
                        <small class="text-muted text-nowrap ms-3">2 min ago</small>
                    </div>
                    <div class="mt-1">
                        <span class="badge bg-label-primary">Documents</span>
                        <span class="badge bg-primary rounded-pill ms-1">New</span>
                    </div>
                </div>
            </div>

            {{-- Notification 2: Unread --}}
            <div class="notification-item notification-unread d-flex align-items-start gap-3 p-3 border-bottom">
                <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox">
                </div>
                <div class="notification-icon bg-label-warning">
                    <i class="ti ti-alert-triangle"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">Payment Overdue — Invoice #INV-2025-0187</h6>
                            <p class="mb-0 text-muted small">Global Trading Sdn Bhd has an overdue invoice of RM 15,200.00, due since 1 Feb 2026.</p>
                        </div>
                        <small class="text-muted text-nowrap ms-3">1 hr ago</small>
                    </div>
                    <div class="mt-1">
                        <span class="badge bg-label-warning">Finance</span>
                        <span class="badge bg-primary rounded-pill ms-1">New</span>
                    </div>
                </div>
            </div>

            {{-- Notification 3: Unread --}}
            <div class="notification-item notification-unread d-flex align-items-start gap-3 p-3 border-bottom">
                <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox">
                </div>
                <div class="notification-icon bg-label-info">
                    <i class="ti ti-exchange"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">Change Request Submitted — ABC Holdings Sdn Bhd</h6>
                            <p class="mb-0 text-muted small">A new change request for company registered address has been submitted for your review.</p>
                        </div>
                        <small class="text-muted text-nowrap ms-3">3 hrs ago</small>
                    </div>
                    <div class="mt-1">
                        <span class="badge bg-label-info">Change Request</span>
                        <span class="badge bg-primary rounded-pill ms-1">New</span>
                    </div>
                </div>
            </div>

            {{-- Date Separator: Yesterday --}}
            <div class="px-3 py-2 bg-light border-bottom">
                <small class="fw-semibold text-muted text-uppercase">Yesterday — 10 Feb 2026</small>
            </div>

            {{-- Notification 4: Read --}}
            <div class="notification-item d-flex align-items-start gap-3 p-3 border-bottom">
                <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox">
                </div>
                <div class="notification-icon bg-label-info">
                    <i class="ti ti-exchange"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">Change Request Approved</h6>
                            <p class="mb-0 text-muted small">The company address change request for ABC Holdings Sdn Bhd has been approved and updated.</p>
                        </div>
                        <small class="text-muted text-nowrap ms-3">10 Feb, 4:30 PM</small>
                    </div>
                    <div class="mt-1">
                        <span class="badge bg-label-info">Change Request</span>
                    </div>
                </div>
            </div>

            {{-- Notification 5: Read --}}
            <div class="notification-item d-flex align-items-start gap-3 p-3 border-bottom">
                <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox">
                </div>
                <div class="notification-icon bg-label-success">
                    <i class="ti ti-receipt-2"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">Payment Received — RM 8,500.00</h6>
                            <p class="mb-0 text-muted small">Payment received from Mega Corporation Sdn Bhd for Invoice #INV-2025-0145.</p>
                        </div>
                        <small class="text-muted text-nowrap ms-3">10 Feb, 11:20 AM</small>
                    </div>
                    <div class="mt-1">
                        <span class="badge bg-label-success">Finance</span>
                    </div>
                </div>
            </div>

            {{-- Notification 6: Read --}}
            <div class="notification-item d-flex align-items-start gap-3 p-3 border-bottom">
                <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox">
                </div>
                <div class="notification-icon bg-label-primary">
                    <i class="ti ti-file-check"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">Document Approved — Audit Confirmation Letter</h6>
                            <p class="mb-0 text-muted small">The audit confirmation letter for Global Trading Sdn Bhd has been reviewed and approved.</p>
                        </div>
                        <small class="text-muted text-nowrap ms-3">10 Feb, 9:05 AM</small>
                    </div>
                    <div class="mt-1">
                        <span class="badge bg-label-primary">Documents</span>
                    </div>
                </div>
            </div>

            {{-- Date Separator: 9 Feb --}}
            <div class="px-3 py-2 bg-light border-bottom">
                <small class="fw-semibold text-muted text-uppercase">9 Feb 2026</small>
            </div>

            {{-- Notification 7: Read --}}
            <div class="notification-item d-flex align-items-start gap-3 p-3 border-bottom">
                <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox">
                </div>
                <div class="notification-icon bg-label-danger">
                    <i class="ti ti-device-laptop"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">New Login Detected</h6>
                            <p class="mb-0 text-muted small">Your account was accessed from Chrome on Windows 11 in Kuala Lumpur, MY.</p>
                        </div>
                        <small class="text-muted text-nowrap ms-3">9 Feb, 2:15 PM</small>
                    </div>
                    <div class="mt-1">
                        <span class="badge bg-label-danger">Security</span>
                    </div>
                </div>
            </div>

            {{-- Notification 8: Read --}}
            <div class="notification-item d-flex align-items-start gap-3 p-3 border-bottom">
                <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox">
                </div>
                <div class="notification-icon bg-label-primary">
                    <i class="ti ti-file-upload"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">Document Request — Financial Statements FY2025</h6>
                            <p class="mb-0 text-muted small">You have a new document request from Salihin Audit Sdn Bhd for Mega Corporation Sdn Bhd.</p>
                        </div>
                        <small class="text-muted text-nowrap ms-3">9 Feb, 10:00 AM</small>
                    </div>
                    <div class="mt-1">
                        <span class="badge bg-label-primary">Documents</span>
                    </div>
                </div>
            </div>

            {{-- Notification 9: Read --}}
            <div class="notification-item d-flex align-items-start gap-3 p-3 border-bottom">
                <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox">
                </div>
                <div class="notification-icon bg-label-warning">
                    <i class="ti ti-alert-circle"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">Document Request Overdue — Bank Statements</h6>
                            <p class="mb-0 text-muted small">The bank statement request for ABC Holdings Sdn Bhd is 3 days overdue. Please follow up.</p>
                        </div>
                        <small class="text-muted text-nowrap ms-3">9 Feb, 8:00 AM</small>
                    </div>
                    <div class="mt-1">
                        <span class="badge bg-label-warning">Documents</span>
                    </div>
                </div>
            </div>

            {{-- Date Separator: 8 Feb --}}
            <div class="px-3 py-2 bg-light border-bottom">
                <small class="fw-semibold text-muted text-uppercase">8 Feb 2026</small>
            </div>

            {{-- Notification 10: Read --}}
            <div class="notification-item d-flex align-items-start gap-3 p-3 border-bottom">
                <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox">
                </div>
                <div class="notification-icon bg-label-secondary">
                    <i class="ti ti-speakerphone"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">System Maintenance Scheduled</h6>
                            <p class="mb-0 text-muted small">The portal will undergo scheduled maintenance on 15 Feb 2026 from 12:00 AM to 4:00 AM MYT.</p>
                        </div>
                        <small class="text-muted text-nowrap ms-3">8 Feb, 9:00 AM</small>
                    </div>
                    <div class="mt-1">
                        <span class="badge bg-label-secondary">System</span>
                    </div>
                </div>
            </div>

            {{-- Notification 11: Read --}}
            <div class="notification-item d-flex align-items-start gap-3 p-3 border-bottom">
                <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox">
                </div>
                <div class="notification-icon bg-label-success">
                    <i class="ti ti-receipt-2"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">New Invoice Issued — #INV-2025-0192</h6>
                            <p class="mb-0 text-muted small">A new invoice of RM 12,800.00 has been issued to Global Trading Sdn Bhd for audit services.</p>
                        </div>
                        <small class="text-muted text-nowrap ms-3">8 Feb, 8:30 AM</small>
                    </div>
                    <div class="mt-1">
                        <span class="badge bg-label-success">Finance</span>
                    </div>
                </div>
            </div>

            {{-- Notification 12: Read --}}
            <div class="notification-item d-flex align-items-start gap-3 p-3">
                <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox">
                </div>
                <div class="notification-icon bg-label-danger">
                    <i class="ti ti-key"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">Password Changed Successfully</h6>
                            <p class="mb-0 text-muted small">Your account password was changed. If you did not make this change, please contact support immediately.</p>
                        </div>
                        <small class="text-muted text-nowrap ms-3">8 Feb, 8:00 AM</small>
                    </div>
                    <div class="mt-1">
                        <span class="badge bg-label-danger">Security</span>
                    </div>
                </div>
            </div>

        </div>

        {{-- Pagination --}}
        <div class="card-footer d-flex justify-content-between align-items-center">
            <small class="text-muted">Showing 1–12 of 24 notifications</small>
            <nav aria-label="Notifications pagination">
                <ul class="pagination pagination-sm mb-0">
                    <li class="page-item disabled">
                        <a class="page-link" href="javascript:void(0);"><i class="ti ti-chevron-left ti-xs"></i></a>
                    </li>
                    <li class="page-item active">
                        <a class="page-link" href="javascript:void(0);">1</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="javascript:void(0);">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="javascript:void(0);"><i class="ti ti-chevron-right ti-xs"></i></a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    {{-- ============================================================ --}}
    {{-- Offcanvas: Filters (slide from right) --}}
    {{-- ============================================================ --}}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="notificationFilters" aria-labelledby="notificationFiltersLabel">
        <div class="offcanvas-header border-bottom">
            <h5 id="notificationFiltersLabel" class="offcanvas-title">
                <i class="ti ti-filter me-2"></i>Filter Notifications
            </h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">

            {{-- Status --}}
            <div class="mb-4">
                <label class="form-label fw-semibold">Status</label>
                <div class="d-flex flex-column gap-2">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterStatus" id="statusAll" checked>
                        <label class="form-check-label" for="statusAll">All Notifications</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterStatus" id="statusUnread">
                        <label class="form-check-label" for="statusUnread">
                            Unread Only
                            <span class="badge bg-label-danger rounded-pill ms-1">5</span>
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterStatus" id="statusRead">
                        <label class="form-check-label" for="statusRead">Read Only</label>
                    </div>
                </div>
            </div>

            <hr class="my-3">

            {{-- Category (multi-select checkboxes) --}}
            <div class="mb-4">
                <label class="form-label fw-semibold">Category</label>
                <small class="text-muted d-block mb-2">Select one or more categories</small>
                <div class="d-flex flex-column gap-2">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="catDocuments" checked>
                        <label class="form-check-label d-flex align-items-center gap-2" for="catDocuments">
                            <span class="badge bg-label-primary rounded-circle p-1"><i class="ti ti-file-text ti-xs"></i></span>
                            Documents
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="catFinance" checked>
                        <label class="form-check-label d-flex align-items-center gap-2" for="catFinance">
                            <span class="badge bg-label-success rounded-circle p-1"><i class="ti ti-receipt-2 ti-xs"></i></span>
                            Finance
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="catChangeRequest" checked>
                        <label class="form-check-label d-flex align-items-center gap-2" for="catChangeRequest">
                            <span class="badge bg-label-info rounded-circle p-1"><i class="ti ti-exchange ti-xs"></i></span>
                            Change Request
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="catSecurity" checked>
                        <label class="form-check-label d-flex align-items-center gap-2" for="catSecurity">
                            <span class="badge bg-label-danger rounded-circle p-1"><i class="ti ti-shield-lock ti-xs"></i></span>
                            Security
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="catSystem" checked>
                        <label class="form-check-label d-flex align-items-center gap-2" for="catSystem">
                            <span class="badge bg-label-secondary rounded-circle p-1"><i class="ti ti-speakerphone ti-xs"></i></span>
                            System
                        </label>
                    </div>
                </div>
            </div>

            <hr class="my-3">

            {{-- Date Range --}}
            <div class="mb-4">
                <label class="form-label fw-semibold">Date Range</label>
                <div class="d-flex flex-column gap-2">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterDate" id="dateLast7" checked onchange="document.getElementById('customDateRange').classList.add('d-none')">
                        <label class="form-check-label" for="dateLast7">Last 7 Days</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterDate" id="dateLast30" onchange="document.getElementById('customDateRange').classList.add('d-none')">
                        <label class="form-check-label" for="dateLast30">Last 30 Days</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterDate" id="dateLast90" onchange="document.getElementById('customDateRange').classList.add('d-none')">
                        <label class="form-check-label" for="dateLast90">Last 90 Days</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterDate" id="dateAll" onchange="document.getElementById('customDateRange').classList.add('d-none')">
                        <label class="form-check-label" for="dateAll">All Time</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="filterDate" id="dateCustom" onchange="document.getElementById('customDateRange').classList.remove('d-none')">
                        <label class="form-check-label" for="dateCustom">Custom Range</label>
                    </div>
                </div>
                {{-- Custom date inputs (hidden by default, shown when Custom Range is selected) --}}
                <div class="row g-2 mt-2 d-none" id="customDateRange">
                    <div class="col-6">
                        <label class="form-label small mb-1">From</label>
                        <input type="date" class="form-control form-control-sm">
                    </div>
                    <div class="col-6">
                        <label class="form-label small mb-1">To</label>
                        <input type="date" class="form-control form-control-sm">
                    </div>
                </div>
            </div>

        </div>
        <div class="offcanvas-footer border-top p-3">
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-primary flex-grow-1">
                    <i class="ti ti-filter me-1"></i> Apply Filters
                </button>
                <button type="button" class="btn btn-outline-secondary">
                    <i class="ti ti-x me-1"></i> Reset
                </button>
            </div>
        </div>
    </div>
@endsection