<!DOCTYPE html>
<html lang="zxx">


<!-- Mirrored from wphtml.com/html/tf/duralux-demo/customers.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 12 Nov 2024 11:22:26 GMT -->

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keyword" content="">
    <meta name="author" content="WRAPCODERS">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!--! The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags !-->
    <!--! BEGIN: Apps Title-->
    <title>@yield('title', 'Default Title')</title>
    <!--! END:  Apps Title-->
    <!--! BEGIN: Favicon-->
    <link rel="shortcut icon" type="image/x-icon" href="{{ asset('assets/images/favicon.ico') }}">
    <!--! END: Favicon-->
    <!--! BEGIN: Bootstrap CSS-->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/bootstrap.min.css') }}">
    <!--! END: Bootstrap CSS-->
    <!--! BEGIN: Vendors CSS-->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/css/vendors.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/css/dataTables.bs5.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/css/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/css/select2-theme.min.css') }}">

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <!--! END: Vendors CSS-->
    <!--! BEGIN: Custom CSS-->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/theme.min.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/css/datepicker.min.css') }}">

    <!--! END: Custom CSS-->
    <!--! HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries !-->
    <!--! WARNING: Respond.js doesn"t work if you view the page via file: !-->
    <!--[if lt IE 9]>
   <script src="https:oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="https:oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
{{-- <style>
  #customerList {
        width: 100%;
        table-layout: fixed;
    }

    .sticky-col {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
        background-color: #fff;
    }

    .sticky-col:first-child {
        left: 0;
        z-index: 3;
    }

    .sticky-col:nth-child(2) {
        left: 100px;
        z-index: 2;
    }


    th, td {
        width: 150px;
        white-space: nowrap;
    }

    .sticky-col {
        background-color: #fff;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
    }
</style> --}}

<style>
    .activity-date-time-row .form-control {
        flex: 1 1 145px !important;
        min-width: 0;
    }

    .activity-date-time-row > span {
        display: none;
    }

    .activity-dashboard-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        width: 100%;
    }

    @media (min-width: 1400px) {
        .activity-dashboard-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .activity-dashboard-grid > * {
        min-width: 0;
    }

    /* Global CSS */
    .arrow-steps {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin: 0 auto;
    }

    .arrow-steps .step {
        flex: 1;
        /* Ensures equal width for all steps */
        text-align: center;
        font-size: 12px;
        color: #666;
        cursor: default;
        margin: 0 2px;
        padding: 5px 10px;
        position: relative;
        background-color: #f5f5f5;
        user-select: none;
        transition: background-color 0.1s ease;
    }

    .arrow-steps .step:not(:last-child) {
        margin-right: 0;
        /* Removes gaps between steps */
    }

    .arrow-steps .step:after,
    .arrow-steps .step:before {
        content: " ";
        position: absolute;
        top: 0;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
    }

    .arrow-steps .step:after {
        right: -9.25px;
        border-left: 10px solid #f5f5f5;
        z-index: 2;
        transition: border-color 0.2s ease;
    }

    .arrow-steps .step:before {
        left: 0;
        border-left: 10px solid #fff;
        z-index: 0;
    }

    .arrow-steps .step:first-child:before {
        border: none;
    }

    .arrow-steps .step:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .arrow-steps .step:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .arrow-steps .step span {
        position: relative;
    }

    .arrow-steps .step span:before {
        opacity: 0;
        content: "✔";
        position: absolute;
        top: -2px;
        left: -15px;
    }

    .arrow-steps .step.done span:before {
        opacity: 1;
        transition: opacity 0.3s ease 0.5s;
    }

    .arrow-steps .step.current {
        color: #fff;
        background-color: #3454d1;
    }

    .arrow-steps .step.current:after {
        border-left: 10px solid #3454d1;
    }

    .arrow-steps .step.info {
        color: #fff;
        background-color: #6a87fa;
    }

    .arrow-steps .step.info:after {
        border-left: 10px solid #6a87fa;
    }

    .dropdown-submenu {
        position: relative;
    }

    /* Position the child dropdown to the right */
    .dropdown-submenu .dropdown-menu {
        position: absolute;
        left: 100%;
        /* Position to the right of the parent */
        top: 0;
        margin-top: 0;
        z-index: 1050;
        /* Ensure it is above other elements */
    }

    /* Ensure the child dropdown has a wider width */
    .dropdown-menu.right-position {
        min-width: 200px;
        /* Adjust this value to your preference */
    }

    /* Compact CRM workspace: keeps controls usable while removing repeated outer/card spacing. */
    .nxl-container > .nxl-content > .main-content {
        padding: 20px 24px 0;
    }

    /* CRM feature templates are rendered inside the app shell. Do not apply a second sidebar/top offset. */
    .nxl-container .nxl-container {
        top: 0;
        margin-left: 0;
        min-height: 0;
    }

    .nxl-container .nxl-container > .nxl-content > .page-header {
        position: static;
        min-height: 56px;
        margin-bottom: 0;
    }

    .nxl-container .nxl-content .main-content .card {
        margin: 0 0 16px;
    }

    /* The theme's 100px card-body bottom padding leaves large blank panels in CRM screens. */
    .nxl-container .nxl-content .main-content .card-body {
        padding-bottom: 20px;
    }

    .nxl-container .nxl-content .page-header {
        padding-right: 24px;
        padding-left: 24px;
    }

    main.main-content > .container-fluid {
        padding-top: 0;
        padding-bottom: 8px;
    }

    main.main-content > .container-fluid > .d-flex.mb-4,
    main.main-content > .container-fluid > .card.mb-4 {
        margin-bottom: 16px !important;
    }

    .nxl-container .card-body.p-0 > .d-flex.justify-content-between.p-4.mb-4 {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    .table td.text-center.py-5 {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /* Priority CRM detail screens: profile sections previously added 48px after every short block. */
    .profile-details.mb-5,
    .about-section.mb-5 {
        margin-bottom: 24px !important;
    }

    .deal-overview-details {
        padding-right: 24px !important;
        padding-bottom: 24px !important;
        padding-left: 24px !important;
    }

    /* Account overview and timeline grids should read as one continuous workspace. */
    .row.g-4.mb-5 {
        margin-bottom: 24px !important;
    }

    /* Dashboard, report, and campaign search panels do not need 48px between adjacent result groups. */
    .searching-for.mb-5,
    .recent-result.mb-5,
    .command-result.mb-5 {
        margin-bottom: 24px !important;
    }

    /* Keep operational workflow cards grouped while retaining an obvious separation. */
    main.main-content > .container-fluid > .card.mb-4,
    main.main-content > .container-fluid > .card.mb-3 {
        margin-bottom: 16px !important;
    }

    /* Compact the create-form/list handoff in Project detail tabs. */
    .tab-pane .card-body > form.row.mb-4 {
        margin-bottom: 16px !important;
    }

    /* Detail screens: a tab pane should not duplicate the padding already supplied by its card/list. */
    .nxl-container .nxl-content .tab-pane.p-4 {
        padding: 16px !important;
    }

    .nxl-container .nxl-content .tab-pane .pt-0.px-5.pb-5,
    .nxl-container .nxl-content .tab-pane .pt-0.px-4.pb-5 {
        padding-right: 24px !important;
        padding-bottom: 24px !important;
        padding-left: 24px !important;
    }

    /* Campaign create/edit forms previously added 24px under every individual field. */
    #createCampaignForm .col-md-6.mb-4,
    #updateCampaginForm .col-md-6.mb-4 {
        margin-bottom: 16px !important;
    }

    #createCampaignForm .card.mx-4.mb-4,
    #updateCampaginForm .card.mx-4.mb-4 {
        margin-right: 0 !important;
        margin-bottom: 16px !important;
        margin-left: 0 !important;
    }

    .nxl-container .p-4.text-center.text-muted {
        padding: 16px !important;
    }

    /* Workflow dashboard lower panels follow the same compact rhythm. */
    .operations-dashboard .row.mt-4,
    main .row.mt-4:has(> .col-lg-7 > .card):has(> .col-lg-5 > .card) {
        margin-top: 24px !important;
    }

    .crm-login-container {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .crm-login-container .card-body {
        padding: 20px;
    }

    /* Professional application navigation shared by every module. */
    .crm-navigation {
        border-right: 1px solid #e6eaf0;
        background: #fff;
        box-shadow: 7px 0 28px rgba(15, 23, 42, .035);
    }

    .crm-navigation .crm-navigation-header {
        min-height: 92px !important;
        padding: 12px 16px;
        border-bottom: 1px solid #edf0f4;
        background: linear-gradient(180deg, #fff 0%, #fafbfe 100%);
    }

    .crm-navigation .crm-navigation-brand {
        display: flex !important;
        height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        text-align: center;
    }

    .crm-navigation .crm-navigation-brand .logo-lg {
        color: #172033;
        font-weight: 750 !important;
        letter-spacing: -.01em;
    }

    .crm-navigation .navbar-content {
        padding: 10px 10px 18px;
    }

    .crm-navigation .nxl-navbar {
        padding: 0;
    }

    .crm-navigation .nxl-caption {
        margin: 12px 8px 6px;
        padding: 0 8px;
    }

    .crm-navigation .nxl-caption label {
        color: #94a3b8;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .11em;
        text-transform: uppercase;
    }

    .crm-navigation .nxl-navbar > .nxl-item {
        margin: 3px 0;
    }

    .crm-navigation .nxl-navbar > .nxl-item > .nxl-link {
        display: flex;
        min-height: 46px;
        align-items: center;
        gap: 10px;
        padding: 6px 10px;
        border: 1px solid transparent;
        border-radius: 11px;
        color: #526072;
        font-size: 13px;
        font-weight: 650;
        transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
    }

    .crm-navigation .nxl-navbar > .nxl-item > .nxl-link:hover {
        border-color: #e7eaf2;
        background: #f6f8fc;
        color: #3454d1;
        transform: translateX(2px);
    }

    .crm-navigation .nxl-navbar > .nxl-item > .nxl-link .nxl-micon {
        display: inline-flex;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: #f1f4f9;
        color: #64748b;
        font-size: 15px;
        transition: color .16s ease, background-color .16s ease;
    }

    .crm-navigation .nxl-navbar > .nxl-item.active > .nxl-link,
    .crm-navigation .nxl-navbar > .nxl-item > .nxl-link.active,
    .crm-navigation .nxl-navbar > .nxl-item > .nxl-link[aria-current="page"] {
        border-color: #dce3fb;
        background: linear-gradient(135deg, #eef2ff 0%, #f5f7ff 100%);
        color: #3454d1;
        box-shadow: inset 3px 0 0 #3454d1;
    }

    .crm-navigation .nxl-navbar > .nxl-item.active > .nxl-link .nxl-micon,
    .crm-navigation .nxl-navbar > .nxl-item > .nxl-link.active .nxl-micon {
        background: #3454d1;
        color: #fff;
        box-shadow: 0 5px 12px rgba(52, 84, 209, .2);
    }

    .crm-navigation .nxl-arrow {
        margin-left: auto;
        color: #a1aaba;
        font-size: 12px;
        transition: transform .2s ease, color .2s ease;
    }

    .crm-navigation .nxl-item.active > .nxl-link > .nxl-arrow {
        color: #3454d1;
        transform: rotate(90deg);
    }

    .crm-navigation .nxl-submenu {
        margin: 5px 4px 9px 26px;
        padding: 6px 5px 6px 13px;
        border-left: 1px solid #dfe5ee;
        border-radius: 0 9px 9px 0;
        background: #fafbfc;
    }

    .crm-navigation .nxl-submenu .nxl-item {
        position: relative;
        margin: 2px 0;
    }

    .crm-navigation .nxl-submenu .nxl-link {
        position: relative;
        min-height: 36px;
        padding: 8px 10px 8px 20px;
        border-radius: 8px;
        color: #697586;
        font-size: 12px;
        font-weight: 550;
        line-height: 1.35;
        transition: color .15s ease, background-color .15s ease;
    }

    .crm-navigation .nxl-submenu .nxl-link::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 7px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #c1c9d5;
        transform: translateY(-50%);
    }

    .crm-navigation .nxl-submenu .nxl-link:hover {
        background: #f0f3f9;
        color: #3454d1;
    }

    .crm-navigation .nxl-submenu .nxl-item.active > .nxl-link,
    .crm-navigation .nxl-submenu .nxl-link.active,
    .crm-navigation .nxl-submenu .nxl-link[aria-current="page"] {
        background: #eaf0ff;
        color: #3454d1;
        font-weight: 700;
    }

    .crm-navigation .nxl-submenu .nxl-item.active > .nxl-link::before,
    .crm-navigation .nxl-submenu .nxl-link.active::before {
        background: #3454d1;
        box-shadow: 0 0 0 3px rgba(52, 84, 209, .12);
    }

    [data-app-navigation="app-navigation-dark"] .crm-navigation,
    body.app-navigation-dark .crm-navigation {
        border-color: #293246;
        background: #182033;
    }

    [data-app-navigation="app-navigation-dark"] .crm-navigation .crm-navigation-header,
    body.app-navigation-dark .crm-navigation .crm-navigation-header {
        border-color: #293246;
        background: #182033;
    }

    [data-app-navigation="app-navigation-dark"] .crm-navigation .nxl-navbar > .nxl-item > .nxl-link,
    body.app-navigation-dark .crm-navigation .nxl-navbar > .nxl-item > .nxl-link {
        color: #c4ccda;
    }

    [data-app-navigation="app-navigation-dark"] .crm-navigation .nxl-submenu,
    body.app-navigation-dark .crm-navigation .nxl-submenu {
        border-color: #364057;
        background: #1d273b;
    }

    /* Shared professional form system for every Create and Edit screen. */
    .crm-form-page .page-header {
        border-bottom: 1px solid #e7eaf0;
        background: #fff;
    }

    .crm-form-page .page-header-title h5 {
        color: #172033;
        font-weight: 750;
        letter-spacing: -.01em;
    }

    .crm-form-page .main-content {
        padding-top: 20px !important;
    }

    .crm-form-page .main-content .card {
        border: 1px solid #e5e9f0;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
        overflow: hidden;
    }

    .crm-form-page .main-content .card-header {
        min-height: 58px;
        padding: 15px 20px;
        border-bottom: 1px solid #e8ebf0;
        background: linear-gradient(180deg, #fff 0%, #fafbfe 100%);
    }

    .crm-form-page .main-content .card-header h4,
    .crm-form-page .main-content .card-header h5,
    .crm-form-page .main-content .card-header h6,
    .crm-form-page .main-content form h4,
    .crm-form-page .main-content form h5,
    .crm-form-page .main-content form h6 {
        color: #202a3d;
        font-weight: 725;
        letter-spacing: -.01em;
    }

    .crm-form-page .main-content .card-body {
        padding: 22px;
    }

    .crm-form-page .main-content form .form-label {
        margin-bottom: 7px;
        color: #526072;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .025em;
    }

    .crm-form-page .main-content form .form-label .text-danger,
    .crm-form-page .main-content form .required {
        color: #dc3545 !important;
    }

    .crm-form-page .main-content form .form-control,
    .crm-form-page .main-content form .form-select,
    .crm-form-page .main-content form .input-group-text {
        min-height: 43px;
        border-color: #dce2eb;
        border-radius: 9px;
        background-color: #fff;
        color: #334155;
        font-size: 13px;
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }

    .crm-form-page .main-content form .input-group > .form-control,
    .crm-form-page .main-content form .input-group > .form-select {
        border-radius: 0 9px 9px 0;
    }

    .crm-form-page .main-content form .input-group > .input-group-text:first-child {
        border-radius: 9px 0 0 9px;
        background: #f7f9fc;
        color: #64748b;
    }

    .crm-form-page .main-content form textarea.form-control {
        min-height: 105px;
        resize: vertical;
        line-height: 1.55;
    }

    .crm-form-page .main-content form .form-control::placeholder {
        color: #a2acba;
    }

    .crm-form-page .main-content form .form-control:focus,
    .crm-form-page .main-content form .form-select:focus {
        border-color: #8298e4;
        background-color: #fff;
        box-shadow: 0 0 0 3px rgba(52, 84, 209, .09);
    }

    .crm-form-page .main-content form .form-control:disabled,
    .crm-form-page .main-content form .form-select:disabled,
    .crm-form-page .main-content form .form-control[readonly] {
        background: #f4f6f9;
        color: #7b8798;
    }

    .crm-form-page .main-content form .select2-container {
        width: 100% !important;
    }

    .crm-form-page .main-content form .select2-container .select2-selection--single,
    .crm-form-page .main-content form .select2-container .select2-selection--multiple {
        min-height: 43px;
        border-color: #dce2eb;
        border-radius: 9px;
    }

    .crm-form-page .main-content form .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 41px;
    }

    .crm-form-page .main-content form .select2-container .select2-selection--single .select2-selection__arrow {
        height: 41px;
    }

    .crm-form-page .main-content form .form-check-input {
        width: 17px;
        height: 17px;
        border-color: #cfd6e1;
    }

    .crm-form-page .main-content form .form-check-input:checked {
        border-color: #3454d1;
        background-color: #3454d1;
    }

    .crm-form-page .main-content form .is-invalid,
    .crm-form-page .main-content form .was-validated :invalid {
        border-color: #dc3545;
        box-shadow: none;
    }

    .crm-form-page .main-content form .invalid-feedback {
        margin-top: 5px;
        font-size: 11px;
    }

    .crm-form-page .main-content .nav-tabs {
        gap: 4px;
        padding: 8px 12px 0;
        border-bottom-color: #e6eaf0;
        background: #fafbfc;
    }

    .crm-form-page .main-content .nav-tabs .nav-link {
        padding: 10px 14px;
        border: 0;
        border-radius: 8px 8px 0 0;
        color: #64748b;
        font-size: 12px;
        font-weight: 650;
    }

    .crm-form-page .main-content .nav-tabs .nav-link.active {
        background: #fff;
        color: #3454d1;
        box-shadow: inset 0 -2px 0 #3454d1;
    }

    .crm-form-page .main-content form .btn {
        min-height: 40px;
        border-radius: 9px;
        font-weight: 650;
    }

    .crm-form-page .main-content form .btn-primary {
        border-color: #3454d1;
        background: #3454d1;
        box-shadow: 0 5px 12px rgba(52, 84, 209, .16);
    }

    .crm-form-page .main-content form .btn-primary:hover {
        border-color: #2947bd;
        background: #2947bd;
        transform: translateY(-1px);
    }

    .crm-form-page .main-content form .modal-footer,
    .crm-form-page .main-content form .card-footer,
    .crm-form-page .main-content form .form-actions {
        gap: 8px;
        padding: 15px 20px;
        border-top: 1px solid #e8ebf0;
        background: #fafbfc;
    }

    /* Professional shared header and footer */
    .crm-topbar {
        border-bottom: 1px solid #e7eaf0;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 4px 18px rgba(26, 39, 65, .045);
        backdrop-filter: blur(16px);
    }

    .crm-topbar .crm-topbar-inner {
        height: 80px;
        padding: 0 24px;
    }

    .crm-topbar .header-left,
    .crm-header-actions {
        gap: 10px;
    }

    .crm-header-icon {
        position: relative;
        display: inline-flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        margin: 0;
        border: 1px solid #e4e8ef;
        border-radius: 11px;
        color: #58677c;
        background: #fff;
        transition: .2s ease;
    }

    .crm-header-icon:hover {
        color: #3454d1;
        border-color: #ced6f5;
        background: #f6f8ff;
        transform: translateY(-1px);
    }

    #crm-fullscreen-toggle .maximize {
        display: inline-flex;
    }

    #crm-fullscreen-toggle .minimize {
        display: none;
    }

    body.full-screen-helper #crm-fullscreen-toggle .maximize {
        display: none;
    }

    body.full-screen-helper #crm-fullscreen-toggle .minimize {
        display: inline-flex;
    }

    .crm-workspace-context {
        min-width: 0;
        margin-left: 6px;
        padding-left: 16px;
        border-left: 1px solid #e7eaf0;
        line-height: 1.25;
    }

    .crm-workspace-eyebrow {
        display: block;
        max-width: 260px;
        overflow: hidden;
        color: #8a97a9;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .crm-workspace-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
        color: #1f2d3d;
        font-size: 15px;
        font-weight: 750;
    }

    .crm-live-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #17c666;
        box-shadow: 0 0 0 4px rgba(23, 198, 102, .12);
    }

    .crm-quick-create {
        display: inline-flex;
        min-height: 40px;
        align-items: center;
        gap: 8px;
        padding: 0 14px;
        border: 0;
        border-radius: 11px;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        background: linear-gradient(135deg, #3454d1 0%, #5271e8 100%);
        box-shadow: 0 7px 16px rgba(52, 84, 209, .2);
    }

    .crm-quick-create:hover,
    .crm-quick-create:focus {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 9px 20px rgba(52, 84, 209, .25);
    }

    .crm-action-menu,
    .crm-notification-menu,
    .crm-user-menu {
        margin-top: 10px !important;
        padding: 8px;
        overflow: hidden;
        border: 1px solid #e4e8ef !important;
        border-radius: 14px !important;
        background: #fff;
        box-shadow: 0 18px 50px rgba(32, 45, 72, .14) !important;
    }

    .crm-action-menu {
        width: 270px;
    }

    .crm-dropdown-label {
        display: block;
        padding: 8px 10px 6px;
        color: #95a0b1;
        font-size: 10px;
        font-weight: 750;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .crm-action-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 9px 10px;
        border-radius: 9px;
    }

    .crm-action-menu .dropdown-item:hover,
    .crm-user-menu .dropdown-item:hover {
        background: #f5f7fb;
    }

    .crm-action-menu .dropdown-item span:last-child {
        display: flex;
        min-width: 0;
        flex-direction: column;
    }

    .crm-action-menu .dropdown-item strong {
        color: #27364a;
        font-size: 12px;
    }

    .crm-action-menu .dropdown-item small {
        color: #8b97a8;
        font-size: 10px;
        font-weight: 500;
    }

    .crm-menu-icon {
        display: inline-flex;
        width: 34px;
        min-width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
    }

    .crm-notification-button {
        margin-right: 2px;
    }

    .crm-notification-count {
        position: absolute;
        top: -5px;
        right: -5px;
        display: inline-flex;
        min-width: 18px;
        height: 18px;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid #fff;
        border-radius: 9px;
        color: #fff;
        font-size: 8px;
        font-weight: 800;
        background: #ea4d4d;
    }

    .crm-notification-menu {
        width: min(380px, calc(100vw - 24px)) !important;
        padding: 0;
    }

    .crm-dropdown-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 17px 18px;
        border-bottom: 1px solid #edf0f4;
    }

    .crm-notification-list {
        max-height: 360px;
        overflow-y: auto;
    }

    .crm-notification-item {
        position: relative;
        display: flex;
        gap: 12px;
        padding: 13px 18px;
        border-bottom: 1px solid #f0f2f5;
        color: inherit;
    }

    .crm-notification-item.is-unread {
        background: #f7f9ff;
    }

    .crm-notification-item.is-unread::before {
        position: absolute;
        top: 18px;
        right: 13px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #3454d1;
        content: '';
    }

    .crm-notification-item strong,
    .crm-notification-item small,
    .crm-notification-item time {
        display: block;
        padding-right: 8px;
    }

    .crm-notification-item strong {
        margin-bottom: 2px;
        color: #27364a;
        font-size: 12px;
    }

    .crm-notification-item small,
    .crm-notification-item time {
        color: #8b97a8;
        font-size: 10px;
        font-weight: 500;
    }

    .crm-notification-item time {
        margin-top: 5px;
    }

    .crm-empty-notifications {
        display: flex;
        min-height: 180px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        color: #8b97a8;
    }

    .crm-empty-notifications i {
        margin-bottom: 7px;
        color: #17c666;
        font-size: 28px;
    }

    .crm-empty-notifications strong {
        color: #27364a;
    }

    .crm-dropdown-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 13px;
        color: #3454d1;
        font-size: 11px;
        border-top: 1px solid #edf0f4;
        background: #fafbfc;
    }

    .crm-user-trigger {
        display: flex;
        min-height: 44px;
        align-items: center;
        gap: 9px;
        margin-left: 2px;
        padding: 4px 7px 4px 4px;
        border: 1px solid #e4e8ef;
        border-radius: 13px;
        background: #fff;
    }

    .crm-user-avatar {
        display: inline-flex;
        width: 34px;
        min-width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .03em;
        background: linear-gradient(135deg, #263b80, #526fdf);
    }

    .crm-user-copy {
        min-width: 0;
        max-width: 150px;
        flex-direction: column;
        line-height: 1.2;
    }

    .crm-user-copy strong,
    .crm-user-copy small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .crm-user-copy strong {
        color: #27364a;
        font-size: 11px;
    }

    .crm-user-copy small {
        margin-top: 3px;
        color: #8b97a8;
        font-size: 9px;
        font-weight: 600;
    }

    .crm-user-menu {
        width: 290px;
        padding: 0;
    }

    .crm-user-menu-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 18px;
        background: linear-gradient(145deg, #f5f7ff, #fff);
    }

    .crm-user-avatar-lg {
        width: 44px;
        min-width: 44px;
        height: 44px;
        font-size: 13px;
    }

    .crm-user-menu-header p {
        color: #8491a3;
        font-size: 10px;
    }

    .crm-user-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border-top: 1px solid #edf0f4;
        border-bottom: 1px solid #edf0f4;
        color: #8390a2;
        font-size: 9px;
        font-weight: 650;
        background: #fafbfc;
    }

    .crm-user-meta .crm-live-dot {
        width: 6px;
        height: 6px;
        box-shadow: none;
    }

    .crm-user-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 1px 8px;
        width: calc(100% - 16px);
        padding: 9px 10px;
        border: 0;
        border-radius: 8px;
        font-size: 11px;
        background: transparent;
    }

    .crm-logout-button {
        color: #d94747 !important;
    }

    .crm-footer {
        display: flex;
        min-height: 72px;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-top: 14px;
        padding: 14px 24px !important;
        border-top: 1px solid #e4e8ef !important;
        color: #8491a3;
        background: #fff;
    }

    .crm-footer-brand,
    .crm-footer-links,
    .crm-footer-center {
        display: flex;
        align-items: center;
    }

    .crm-footer-brand {
        gap: 10px;
    }

    .crm-footer-mark {
        display: inline-flex;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #3454d1;
        background: #edf0ff;
    }

    .crm-footer-brand strong,
    .crm-footer-brand small {
        display: block;
        line-height: 1.25;
    }

    .crm-footer-brand strong {
        color: #2b394d;
        font-size: 11px;
    }

    .crm-footer-brand small,
    .crm-footer-center,
    .crm-footer-links {
        font-size: 9px;
        font-weight: 600;
    }

    .crm-footer-center,
    .crm-footer-links {
        gap: 18px;
    }

    .crm-footer-center span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .crm-footer-links a {
        color: #68778b;
    }

    .crm-footer-links a:hover {
        color: #3454d1;
    }

    html.app-skin-dark .crm-topbar,
    html.app-skin-dark .crm-header-icon,
    html.app-skin-dark .crm-user-trigger,
    html.app-skin-dark .crm-action-menu,
    html.app-skin-dark .crm-notification-menu,
    html.app-skin-dark .crm-user-menu,
    html.app-skin-dark .crm-footer {
        border-color: #25304a !important;
        background: #121a2d;
    }

    html.app-skin-dark .crm-workspace-title,
    html.app-skin-dark .crm-user-copy strong,
    html.app-skin-dark .crm-user-menu-header h6,
    html.app-skin-dark .crm-action-menu .dropdown-item strong,
    html.app-skin-dark .crm-notification-item strong,
    html.app-skin-dark .crm-footer-brand strong {
        color: #f3f5f9 !important;
    }

    html.app-skin-dark .crm-user-menu-header,
    html.app-skin-dark .crm-user-meta,
    html.app-skin-dark .crm-dropdown-footer,
    html.app-skin-dark .crm-notification-item.is-unread {
        border-color: #25304a;
        background: #162038;
    }

    @media (max-width: 767.98px) {
        .crm-topbar .crm-topbar-inner {
            padding: 0 14px;
        }

        .crm-workspace-context {
            margin-left: 2px;
            padding-left: 12px;
        }

        .crm-workspace-eyebrow {
            max-width: 130px;
        }

        .crm-header-actions {
            gap: 6px;
        }

        .crm-footer {
            align-items: flex-start;
            flex-direction: column;
            gap: 12px;
            padding: 16px !important;
        }

        .crm-footer-links {
            width: 100%;
            flex-wrap: wrap;
            gap: 10px 16px;
        }

        .crm-footer-links span {
            margin-left: auto;
        }
    }

    @media (max-width: 575.98px) {
        .nxl-container > .nxl-content > .main-content {
            padding: 16px 16px 0;
        }

        .nxl-container .nxl-container > .nxl-content > .page-header {
            min-height: 52px;
        }

        .crm-login-container {
            padding: 16px;
        }

        .deal-overview-details {
            padding-right: 16px !important;
            padding-left: 16px !important;
        }

        .nxl-container .nxl-content .tab-pane.p-4 {
            padding: 12px !important;
        }

        .nxl-container .nxl-content .tab-pane .pt-0.px-5.pb-5,
        .nxl-container .nxl-content .tab-pane .pt-0.px-4.pb-5 {
            padding-right: 16px !important;
            padding-bottom: 16px !important;
            padding-left: 16px !important;
        }

        .nxl-container .nxl-content .page-header {
            padding-right: 16px;
            padding-left: 16px;
        }

        .crm-form-page .main-content {
            padding-top: 12px !important;
        }

        .crm-form-page .main-content .card {
            border-radius: 11px;
        }

        .crm-form-page .main-content .card-body {
            padding: 16px;
        }
    }
</style>

@php
    $crmRouteName = (string) request()->route()?->getName();
    $isCrmFormPage = request()->is('*create*') || request()->is('*edit*')
        || str_contains($crmRouteName, 'create') || str_contains($crmRouteName, 'edit');
@endphp
<body @class(['crm-form-page' => $isCrmFormPage])>
    <!--! ================================================================ !-->
    <!--! [Start] Navigation Manu !-->
    <!--! ================================================================ !-->
    @include('layouts.sidebar')

    <!--! ================================================================ !-->
    <!--! [End]  Navigation Manu !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! [Start] Header !-->
    <!--! ================================================================ !-->
    @include('layouts.header')

    <!--! ================================================================ !-->
    <!--! [End] Header !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! [Start] Main Content !-->
    <!--! ================================================================ !-->
    <main class="nxl-container">
        <div class="nxl-content">
            @yield('content')
        </div>
        <!-- [ Footer ] start -->
        @include('layouts.footer')

        <!-- [ Footer ] end -->
    </main>
    <!--! ================================================================ !-->
    <!--! [End] Main Content !-->
    @yield('modals')
    @yield('contactmodals')
    <!-- Modal -->
    <div class="modal fade" id="addCompanyModal" tabindex="-1" aria-labelledby="addCompanyModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCompanyModalLabel">Add
                        New Company</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addCompanyForm">
                        <div class="mb-3">
                            <label for="newCompanyName" class="form-label">Company Name</label>
                            <input type="text" class="form-control" id="newCompanyName" name="new_company_name"
                                placeholder="Enter company name" required>
                        </div>
                        <button type="button" class="btn btn-primary" onclick="saveNewCompany()">Save</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! [Start] Search Modal !-->
    <!--! ================================================================ !-->
    <div class="modal fade-scale" id="searchModal" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-top modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header search-form py-0">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="feather-search fs-4 text-muted"></i>
                        </span>
                        <input type="text" class="form-control search-input-field" placeholder="Search...">
                        <span class="input-group-text">
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </span>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="searching-for mb-5">
                        <h4 class="fs-13 fw-normal text-gray-600 mb-3">I'm searching for...</h4>
                        <div class="row g-1">
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);"
                                    class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-compass"></i>
                                    <span>Recent</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);"
                                    class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-command"></i>
                                    <span>Command</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);"
                                    class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-users"></i>
                                    <span>Peoples</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);"
                                    class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-file"></i>
                                    <span>Files</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);"
                                    class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <i class="feather-video"></i>
                                    <span>Medias</span>
                                </a>
                            </div>
                            <div class="col-md-4 col-xl-2">
                                <a href="javascript:void(0);"
                                    class="d-flex align-items-center gap-2 px-3 lh-lg border rounded-pill">
                                    <span>More</span>
                                    <i class="feather-chevron-down"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="recent-result mb-5">
                        <h4 class="fs-13 fw-normal text-gray-600 mb-3">Recnet <span
                                class="badge small bg-gray-200 rounded ms-1 text-dark">3</span></h4>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-airplay fs-5"></i>
                                <div class="fs-13 fw-semibold">CRM dashboard redesign</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">/<i
                                    class="feather-command ms-1 fs-12"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-file-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">Create new eocument</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">N /<i
                                    class="feather-command ms-1 fs-12"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-user-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">Invite project colleagues</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">P /<i
                                    class="feather-command ms-1 fs-12"></i></a>
                        </div>
                    </div>
                    <div class="command-result mb-5">
                        <h4 class="fs-13 fw-normal text-gray-600 mb-3">Command <span
                                class="badge small bg-gray-200 rounded ms-1 text-dark">5</span></h4>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-user fs-5"></i>
                                <div class="fs-13 fw-semibold">My profile</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">P /<i
                                    class="feather-command ms-1 fs-12"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-users fs-5"></i>
                                <div class="fs-13 fw-semibold">Team profile</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">T /<i
                                    class="feather-command ms-1 fs-12"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-user-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">Invite colleagues</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">I /<i
                                    class="feather-command ms-1 fs-12"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-briefcase fs-5"></i>
                                <div class="fs-13 fw-semibold">Create new project</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">CP /<i
                                    class="feather-command ms-1 fs-12"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-life-buoy fs-5"></i>
                                <div class="fs-13 fw-semibold">Support center</div>
                            </a>
                            <a href="javascript:void(0);" class="badge border rounded text-dark">SC /<i
                                    class="feather-command ms-1 fs-12"></i></a>
                        </div>
                    </div>
                    <div class="file-result mb-4">
                        <h4 class="fs-13 fw-normal text-gray-600 mb-3">Files <span
                                class="badge small bg-gray-200 rounded ms-1 text-dark">3</span></h4>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-folder-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">CRM Desing Project <span
                                        class="fs-12 fw-normal text-muted">(56.74 MB)</span></div>
                            </a>
                            <a href="javascript:void(0);" class="file-download"><i class="feather-download"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-folder-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">Admin Dashboard Project <span
                                        class="fs-12 fw-normal text-muted">(46.83 MB)</span></div>
                            </a>
                            <a href="javascript:void(0);" class="file-download"><i class="feather-download"></i></a>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <a href="javascript:void(0);" class="d-flex align-items-start gap-3">
                                <i class="feather-folder-plus fs-5"></i>
                                <div class="fs-13 fw-semibold">CRM Dashboard Project <span
                                        class="fs-12 fw-normal text-muted">(68.59 MB)</span></div>
                            </a>
                            <a href="javascript:void(0);" class="file-download"><i class="feather-download"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--! ================================================================ !-->
    <!--! [End] Search Modal !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! [Start] Language Select !-->
    <!--! ================================================================ !-->
    <div class="modal fade-scale" id="languageSelectModal" aria-hidden="true"
        aria-labelledby="languageSelectModalLabel" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="languageSelectModalLabel">Select Language</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/sa.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Arabic </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/bd.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Bengali </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/ch.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Chinese </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/hr.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Croatian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/dk.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Danish </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/nl.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Dutch </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select active">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/us.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>English </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/fi.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Filipino </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/fr.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>French </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/de.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>German </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/il.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Hebrew </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/in.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Hindi </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/id.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Indonesian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/it.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Italian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/jp.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Japanese </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/kr.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Korean </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/ir.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Persian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/pt.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Portuguese </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/ru.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Russian </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/es.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Spanish </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/sv.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Swedish </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/tr.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Turkish </span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/pk.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Urdo</span>
                            </a>
                        </div>
                        <div class="col-6 col-md-4 col-lg-3 language_select">
                            <a href="javascript:void(0);" class="d-flex align-items-center gap-2">
                                <div class="avatar-image avatar-sm"><img src="{{ asset('assets/vendors/img/flags/1x1/vi.svg') }}"
                                        alt="" class="img-fluid"></div>
                                <span>Vietnamese</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--! ================================================================ !-->
    <!--! [End] Language Select !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! BEGIN: Downloading Toast !-->
    <!--! ================================================================ !-->
    <div class="position-fixed" style="right: 5px; bottom: 5px; z-index: 999999">
        <div id="toast" class="toast bg-black hide" data-bs-delay="3000" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div
                class="toast-header px-3 bg-transparent d-flex align-items-center justify-content-between border-bottom border-light border-opacity-10">
                <div class="text-white mb-0 mr-auto">Downloading...</div>
                <a href="javascript:void(0)" class="ms-2 mb-1 close fw-normal" data-bs-dismiss="toast"
                    aria-label="Close">
                    <span class="text-white">&times;</span>
                </a>
            </div>
            <div class="toast-body p-3 text-white">
                <h6 class="fs-13 text-white">Project.zip</h6>
                <span class="text-light fs-11">4.2mb of 5.5mb</span>
            </div>
            <div class="toast-footer p-3 pt-0 border-top border-light border-opacity-10">
                <div class="progress mt-3" style="height: 5px">
                    <div class="progress-bar progress-bar-striped progress-bar-animated w-75 bg-dark"
                        role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </div>
    <!--! ================================================================ !-->
    <!--! END: Downloading Toast !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! BEGIN: Theme Customizer !-->
    <!--! ================================================================ !-->
    <div class="theme-customizer">
        <div class="customizer-handle">
            {{-- <a href="javascript:void(0);" class="cutomizer-open-trigger bg-primary">
                <i class="feather-settings"></i>
            </a> --}}
        </div>
        <div class="customizer-sidebar-wrapper">
            <div
                class="customizer-sidebar-header px-4 ht-80 border-bottom d-flex align-items-center justify-content-between">
                <h5 class="mb-0">Theme Settings</h5>
                <a href="javascript:void(0);" class="cutomizer-close-trigger d-flex">
                    <i class="feather-x"></i>
                </a>
            </div>
            <div class="customizer-sidebar-body position-relative p-4" data-scrollbar-target="#psScrollbarInit">
                <!--! BEGIN: [Navigation] !-->
                <div class="position-relative px-3 pb-3 pt-4 mt-3 mb-5 border border-gray-2 theme-options-set">
                    <label
                        class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label"
                        style="top: -12px">Navigation</label>
                    <div class="row g-2 theme-options-items app-navigation" id="appNavigationList">
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-navigation-light" name="app-navigation"
                                value="1" data-app-navigation="app-navigation-light" checked>
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-navigation-light">Light</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-navigation-dark" name="app-navigation"
                                value="2" data-app-navigation="app-navigation-dark">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-navigation-dark">Dark</label>
                        </div>
                    </div>
                </div>
                <!--! END: [Navigation] !-->
                <!--! BEGIN: [Header] !-->
                <div class="position-relative px-3 pb-3 pt-4 mt-3 mb-5 border border-gray-2 theme-options-set mt-5">
                    <label
                        class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label"
                        style="top: -12px">Header</label>
                    <div class="row g-2 theme-options-items app-header" id="appHeaderList">
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-header-light" name="app-header"
                                value="1" data-app-header="app-header-light" checked>
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-header-light">Light</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-header-dark" name="app-header"
                                value="2" data-app-header="app-header-dark">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-header-dark">Dark</label>
                        </div>
                    </div>
                </div>
                <!--! END: [Header] !-->
                <!--! BEGIN: [Skins] !-->
                <div class="position-relative px-3 pb-3 pt-4 mt-3 mb-5 border border-gray-2 theme-options-set">
                    <label
                        class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label"
                        style="top: -12px">Skins</label>
                    <div class="row g-2 theme-options-items app-skin" id="appSkinList">
                        <div class="col-6 text-center position-relative single-option light-button active">
                            <input type="radio" class="btn-check" id="app-skin-light" name="app-skin"
                                value="1" data-app-skin="app-skin-light">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-skin-light">Light</label>
                        </div>
                        <div class="col-6 text-center position-relative single-option dark-button">
                            <input type="radio" class="btn-check" id="app-skin-dark" name="app-skin"
                                value="2" data-app-skin="app-skin-dark">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-skin-dark">Dark</label>
                        </div>
                    </div>
                </div>
                <!--! END: [Skins] !-->
                <!--! BEGIN: [Typography] !-->
                <div class="position-relative px-3 pb-3 pt-4 mt-3 mb-0 border border-gray-2 theme-options-set">
                    <label
                        class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label"
                        style="top: -12px">Typography</label>
                    <div class="row g-2 theme-options-items font-family" id="fontFamilyList">
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-lato" name="font-family"
                                value="1" data-font-family="app-font-family-lato">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-lato">Lato</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-rubik" name="font-family"
                                value="2" data-font-family="app-font-family-rubik">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-rubik">Rubik</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-inter" name="font-family"
                                value="3" data-font-family="app-font-family-inter" checked>
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-inter">Inter</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-cinzel" name="font-family"
                                value="4" data-font-family="app-font-family-cinzel">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-cinzel">Cinzel</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-nunito" name="font-family"
                                value="6" data-font-family="app-font-family-nunito">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-nunito">Nunito</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-roboto" name="font-family"
                                value="7" data-font-family="app-font-family-roboto">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-roboto">Roboto</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-ubuntu" name="font-family"
                                value="8" data-font-family="app-font-family-ubuntu">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-ubuntu">Ubuntu</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-poppins" name="font-family"
                                value="9" data-font-family="app-font-family-poppins">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-poppins">Poppins</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-raleway" name="font-family"
                                value="10" data-font-family="app-font-family-raleway">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-raleway">Raleway</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-system-ui"
                                name="font-family" value="11" data-font-family="app-font-family-system-ui">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-system-ui">System UI</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-noto-sans"
                                name="font-family" value="12" data-font-family="app-font-family-noto-sans">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-noto-sans">Noto Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-fira-sans"
                                name="font-family" value="13" data-font-family="app-font-family-fira-sans">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-fira-sans">Fira Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-work-sans"
                                name="font-family" value="14" data-font-family="app-font-family-work-sans">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-work-sans">Work Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-open-sans"
                                name="font-family" value="15" data-font-family="app-font-family-open-sans">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-open-sans">Open Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-maven-pro"
                                name="font-family" value="16" data-font-family="app-font-family-maven-pro">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-maven-pro">Maven Pro</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-quicksand"
                                name="font-family" value="17" data-font-family="app-font-family-quicksand">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-quicksand">Quicksand</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-montserrat"
                                name="font-family" value="18" data-font-family="app-font-family-montserrat">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-montserrat">Montserrat</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-josefin-sans"
                                name="font-family" value="19" data-font-family="app-font-family-josefin-sans">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-josefin-sans">Josefin Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-ibm-plex-sans"
                                name="font-family" value="20" data-font-family="app-font-family-ibm-plex-sans">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-ibm-plex-sans">IBM Plex Sans</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-source-sans-pro"
                                name="font-family" value="5" data-font-family="app-font-family-source-sans-pro">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-source-sans-pro">Source Sans Pro</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-montserrat-alt"
                                name="font-family" value="21" data-font-family="app-font-family-montserrat-alt">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-montserrat-alt">Montserrat Alt</label>
                        </div>
                        <div class="col-6 text-center single-option">
                            <input type="radio" class="btn-check" id="app-font-family-roboto-slab"
                                name="font-family" value="22" data-font-family="app-font-family-roboto-slab">
                            <label
                                class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                for="app-font-family-roboto-slab">Roboto Slab</label>
                        </div>
                    </div>
                </div>
                <!--! END: [Typography] !-->
            </div>
            <div class="customizer-sidebar-footer px-4 ht-60 border-top d-flex align-items-center gap-2">
                <div class="flex-fill w-50">
                    <a href="javascript:void(0);" class="btn btn-danger"
                        data-style="reset-all-common-style">Reset</a>
                </div>
                <div class="flex-fill w-50">
                    <a href="javascript:void(0);" class="btn btn-primary">Download</a>
                </div>
            </div>
        </div>
    </div>

    <!--! ================================================================ !-->
    <!--! [End] Theme Customizer !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! Footer Script !-->
    <!--! ================================================================ !-->
    <!--! BEGIN: Vendors JS !-->
    <script src="{{ asset('assets/vendors/js/vendors.min.js') }}"></script>
    <!-- vendors.min.js {always must need to be top} -->
    <script src="{{ asset('assets/vendors/js/dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/vendors/js/dataTables.bs5.min.js') }}"></script>
    <script src="{{ asset('assets/vendors/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/vendors/js/select2-active.min.js') }}"></script>

    <!--! END: Vendors JS !-->
    <!--! BEGIN: Apps Init  !-->
    <script src="{{ asset('assets/js/common-init.min.js') }}"></script>
    <script src="{{ asset('assets/js/customers-init.min.js') }}"></script>
    <!--! END: Apps Init !-->
    <!--! BEGIN: Theme Customizer  !-->
    <script src="{{ asset('assets/js/settings-init.min.js') }}"></script>
    
    <script src="{{ asset('assets/js/theme-customizer-init.min.js') }}"></script>

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script src="{{ asset('assets/vendors/js/datepicker.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const now = new Date();
            const localDate = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
            const today = localDate.toISOString().slice(0, 10);
            const currentTime = localDate.toISOString().slice(0, 16);
            const operationalDates = new Set([
                'start_date','end_date','due_date','received_on','close_by',
                'proposed_start_date','proposed_end_date','actual_start_date','actual_end_date',
                'create_date','closing_date','closed_date','delivery_date','lost_date','issue_date','due_at',
                'date_time','remind_at','scheduled_at','next_run_at','paid_at','due_date_time'
            ]);
            document.querySelectorAll('form:not([method="GET"]) input[type="date"], form:not([method="get"]) input[type="date"]').forEach(function (input) {
                if (!input.value && operationalDates.has(input.name)) input.value = today;
            });
            document.querySelectorAll('form:not([method="GET"]) input[type="datetime-local"], form:not([method="get"]) input[type="datetime-local"]').forEach(function (input) {
                if (!input.value && operationalDates.has(input.name)) input.value = currentTime;
            });
        });
    </script>
    <script>
        // Shared actions for the legacy list-page export dropdowns.  Older templates only rendered labels,
        // leaving PDF/CSV/XML/Excel/Print as javascript:void(0) links.
        document.addEventListener('click', function (event) {
            const link = event.target.closest('.dropdown-menu a.dropdown-item');
            if (!link || !/^javascript:void\(0\);?$/.test(link.getAttribute('href') || '')) return;
            const action = (link.textContent || '').trim().toLowerCase();
            const format = ({pdf:'pdf', csv:'csv', xml:'xml', text:'txt', excel:'xlsx', print:'print'})[action];
            if (!format) return;
            event.preventDefault();
            if (location.pathname === '/leads' && format !== 'print') {
                location.href = '/leads/export/' + format + location.search;
                return;
            }
            const table = [...document.querySelectorAll('table')].find(item => item.offsetParent !== null && item.rows.length > 1);
            if (!table) { window.alert('There is no visible data table to export.'); return; }
            const rows = [...table.querySelectorAll('tr')].map(row => [...row.querySelectorAll('th,td')].map(cell => cell.innerText.replace(/\s+/g, ' ').trim()));
            const filename = (document.title || 'crm-export').replace(/[^a-z0-9]+/gi, '-').replace(/^-|-$/g, '').toLowerCase();
            const download = (content, type, extension) => { const url = URL.createObjectURL(new Blob([content], {type})); const a = document.createElement('a'); a.href = url; a.download = filename + '.' + extension; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); };
            if (format === 'csv') download(rows.map(row => row.map(value => '"' + value.replace(/"/g, '""') + '"').join(',')).join('\r\n'), 'text/csv;charset=utf-8', 'csv');
            else if (format === 'xlsx') download('<html><meta charset="utf-8"><table>' + rows.map(row => '<tr>' + row.map(value => '<td>' + value.replace(/&/g,'&amp;').replace(/</g,'&lt;') + '</td>').join('') + '</tr>').join('') + '</table></html>', 'application/vnd.ms-excel', 'xls');
            else if (format === 'xml') download('<?xml version="1.0" encoding="UTF-8"?><records>' + rows.slice(1).map(row => '<record>' + row.map((value, index) => '<' + (rows[0][index] || 'value').toLowerCase().replace(/[^a-z0-9]+/g, '_') + '>' + value.replace(/&/g,'&amp;').replace(/</g,'&lt;') + '</' + (rows[0][index] || 'value').toLowerCase().replace(/[^a-z0-9]+/g, '_') + '>').join('') + '</record>').join('') + '</records>', 'application/xml;charset=utf-8', 'xml');
            else if (format === 'txt') download(rows.map(row => row.join('\t')).join('\r\n'), 'text/plain;charset=utf-8', 'txt');
            else { const win = window.open('', '_blank'); win.document.write('<title>' + filename + '</title><style>table{border-collapse:collapse;width:100%}th,td{border:1px solid #555;padding:6px;text-align:left}</style>' + table.outerHTML); win.document.close(); win.focus(); win.print(); }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (!window.jQuery || !jQuery.fn.select2) return;
            jQuery('.crm-remote-lookup').each(function () {
                const select = jQuery(this);
                if (select.hasClass('select2-hidden-accessible')) select.select2('destroy');
                select.select2({
                    width: '100%', allowClear: !this.multiple,
                    placeholder: this.dataset.placeholder || 'Type to search', minimumInputLength: 1,
                    ajax: {
                        url: @json(route('workflow.related-records')),
                        dataType: 'json', delay: 250,
                        data: params => ({type: this.dataset.lookupType, q: params.term || ''}),
                        processResults: items => ({results: items}), cache: true
                    }
                });
            });
        });
    </script>
    @if (request()->is('customers-create*'))
        <script src="{{ asset('assets/vendors/js/lslstrength.min.js') }}"></script>
        <script src="{{ asset('assets/js/customers-create-init.min.js') }}"></script>
    @endif
    

    @yield('scripts')
    @stack('scripts')
    <!--! END: Theme Customizer !-->
</body>

</html>
