<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Companies — WhatsApp Cloud API</title>
    <style>
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#f0f2f5; min-height:100vh; display:flex; flex-direction:column; }

        /* ── HEADER ── */
        header { background:#000; color:#fff; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 1.75rem; position:fixed; top:0;left:0;right:0; z-index:200; border-bottom:1px solid #1a1a1a; }
        .brand { display:flex; align-items:center; gap:.65rem; font-size:1rem; font-weight:700; color:#fff; }
        .brand svg { width:30px; height:30px; }
        .brand-logo { height:36px; width:auto; max-width:140px; object-fit:contain; flex-shrink:1; min-width:0; }
        .user-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid #333; flex-shrink:0; }
        .user-avatar-initials { width:32px; height:32px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; color:#000; flex-shrink:0; }
        .header-right { display:flex; align-items:center; gap:1rem; font-size:.85rem; }
        .header-right .username { color:#aaa; font-weight:500; }
        .btn-logout { background:transparent; border:1px solid #333; color:#ccc; padding:.38rem 1rem; border-radius:7px; cursor:pointer; font-size:.82rem; font-weight:600; transition:.2s; }
        .btn-logout:hover { border-color:#666; color:#fff; }

        /* ── LAYOUT ── */
        .layout { display:flex; flex:1; margin-top:58px; min-height:calc(100vh - 58px); }

        /* ── SIDEBAR ── */
        aside { width:248px; background:#000; position:fixed; top:58px; left:0; bottom:0; overflow-y:auto; padding:1.25rem 0 2rem; border-right:1px solid #1c1c1c; scrollbar-width:thin; scrollbar-color:#2a2a2a #000; }
        .nav-section-label { padding:1.2rem 1.4rem .4rem; font-size:.63rem; font-weight:700; letter-spacing:1.4px; color:#aab; text-transform:uppercase; }
        .nav-item { display:flex; align-items:center; gap:.8rem; padding:.7rem 1.4rem; color:#d1d5db; text-decoration:none; font-size:.88rem; font-weight:500; border-left:3px solid transparent; transition:.18s; white-space:nowrap; cursor:pointer; }
        .nav-item:hover { background:#25d366; color:#000; border-left-color:#1db954; }
        .nav-item:hover svg { opacity:1; color:#000; }
        .nav-item.active { background:#25d366; color:#000 !important; border-left-color:#1db954; font-weight:700; }
        .nav-item.active svg { opacity:1; color:#000; }
        .nav-item svg { width:17px; height:17px; flex-shrink:0; opacity:.7; }
        .nav-sep { height:1px; background:#1a1a1a; margin:.6rem 0; }

        /* ── MAIN ── */
        main { margin-left:248px; flex:1; padding:1.75rem 2rem; animation:fadeIn .18s ease both; }
        @keyframes fadeIn  { from{opacity:0;transform:translateY(8px)}  to{opacity:1;transform:translateY(0)} }
        @keyframes fadeOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-8px)} }

        .page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
        .page-header h1 { font-size:1.35rem; font-weight:800; color:#0f0f0f; }
        .page-header p  { font-size:.85rem; color:#9ca3af; margin-top:.2rem; }

        .btn-add { display:inline-flex; align-items:center; gap:.5rem; background:#0f0f0f; color:#fff; border:none; padding:.55rem 1.1rem; border-radius:9px; font-size:.85rem; font-weight:700; cursor:pointer; transition:.2s; text-decoration:none; }
        .btn-add:hover { background:#1a1a1a; }
        .btn-add svg { width:16px; height:16px; }

        /* ── STAT STRIP ── */
        .stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
        .strip-card { background:#fff; border-radius:12px; padding:1rem 1.25rem; box-shadow:0 1px 3px rgba(0,0,0,.06); display:flex; align-items:center; gap:.9rem; }
        .strip-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .strip-icon svg { width:18px; height:18px; }
        .s-blue   .strip-icon { background:#eff6ff; color:#3b82f6; }
        .s-green  .strip-icon { background:#f0fdf4; color:#16a34a; }
        .s-orange .strip-icon { background:#fff7ed; color:#ea580c; }
        .s-red    .strip-icon { background:#fef2f2; color:#dc2626; }
        .strip-val  { font-size:1.5rem; font-weight:800; color:#0f0f0f; line-height:1; }
        .strip-lbl  { font-size:.75rem; color:#9ca3af; margin-top:2px; }

        /* ── TOOLBAR ── */
        .toolbar { display:flex; align-items:center; gap:.75rem; margin-bottom:1.1rem; flex-wrap:wrap; }
        .search-wrap { position:relative; flex:1; min-width:220px; }
        .search-wrap svg { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:#9ca3af; pointer-events:none; }
        .search-input { width:100%; padding:.62rem 1rem .62rem 2.5rem; border:1.5px solid #e5e7eb; border-radius:10px; font-size:.88rem; background:#fff; outline:none; transition:.2s; }
        .search-input:focus { border-color:#25d366; box-shadow:0 0 0 3px rgba(37,211,102,.1); }
        .filter-select { padding:.62rem .9rem; border:1.5px solid #e5e7eb; border-radius:10px; font-size:.85rem; background:#fff; outline:none; cursor:pointer; color:#374151; transition:.2s; }
        .filter-select:focus { border-color:#25d366; }
        .btn-search { display:inline-flex; align-items:center; gap:.45rem; background:#25d366; color:#000; border:none; padding:.62rem 1.1rem; border-radius:10px; font-size:.85rem; font-weight:700; cursor:pointer; transition:.2s; }
        .btn-search:hover { background:#1db954; }
        .btn-reset { display:inline-flex; align-items:center; gap:.45rem; background:#f1f5f9; color:#64748b; border:none; padding:.62rem 1rem; border-radius:10px; font-size:.85rem; font-weight:600; cursor:pointer; transition:.2s; text-decoration:none; }
        .btn-reset:hover { background:#e2e8f0; }

        /* ── TABLE ── */
        .table-wrap { background:#fff; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); overflow:hidden; }
        table { width:100%; border-collapse:collapse; }
        thead { background:#f8fafc; }
        th { padding:.75rem 1.1rem; font-size:.72rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.6px; text-align:left; border-bottom:1px solid #f1f5f9; white-space:nowrap; }
        td { padding:.85rem 1.1rem; font-size:.85rem; color:#374151; border-bottom:1px solid #f8fafc; vertical-align:middle; }
        tr:last-child td { border-bottom:none; }
        tr:hover td { background:#fafffe; }

        .company-name { display:flex; align-items:center; gap:.75rem; }
        .company-avatar { width:36px; height:36px; border-radius:9px; background:linear-gradient(135deg,#25d366,#075e54); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; font-weight:700; flex-shrink:0; }
        .name-bold { font-weight:700; color:#0f0f0f; }
        .name-sub  { font-size:.75rem; color:#9ca3af; margin-top:1px; }

        .owner-info .ow-name  { font-weight:600; color:#0f0f0f; }
        .owner-info .ow-email { font-size:.76rem; color:#9ca3af; }

        /* plan / status pills */
        .pill { display:inline-block; padding:.22rem .65rem; border-radius:20px; font-size:.72rem; font-weight:700; letter-spacing:.2px; }
        .pill-active  { background:#f0fdf4; color:#15803d; }
        .pill-trial   { background:#fff7ed; color:#c2410c; }
        .pill-expired { background:#fef2f2; color:#b91c1c; }
        .pill-none    { background:#f1f5f9; color:#64748b; }

        /* action buttons */
        .actions { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
        .act-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; border:none; cursor:pointer; transition:.18s; }
        .act-btn svg { width:15px; height:15px; }
        .act-view   { background:#eff6ff; color:#3b82f6; }
        .act-view:hover { background:#dbeafe; }
        .act-edit   { background:#f0fdf4; color:#16a34a; }
        .act-edit:hover { background:#dcfce7; }
        .act-del    { background:#fef2f2; color:#dc2626; }
        .act-del:hover { background:#fee2e2; }
        .act-pkg    { background:#faf5ff; color:#9333ea; }
        .act-pkg:hover { background:#f3e8ff; }

        /* ── EMPTY STATE ── */
        .empty-state { padding:4rem 2rem; text-align:center; }
        .empty-state svg { width:48px; height:48px; color:#d1d5db; margin:0 auto 1rem; display:block; }
        .empty-state p { color:#9ca3af; font-size:.92rem; }

        /* ── PAGINATION ── */
        .pagination-wrap { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-top:1px solid #f1f5f9; font-size:.82rem; color:#6b7280; }
        .pag-links { display:flex; gap:.3rem; }
        .pag-links a, .pag-links span { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 .5rem; border-radius:7px; text-decoration:none; font-size:.82rem; font-weight:500; }
        .pag-links a { color:#374151; border:1px solid #e5e7eb; transition:.15s; }
        .pag-links a:hover { border-color:#25d366; color:#000; background:#f0fdf4; }
        .pag-links span.active-page { background:#25d366; color:#000; font-weight:700; border:1px solid #25d366; }
        .pag-links span.disabled-page { color:#d1d5db; border:1px solid #f1f5f9; }

        /* ── DRAWER ── */
        .drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:500; opacity:0; pointer-events:none; transition:opacity .25s; }
        .drawer-backdrop.open { opacity:1; pointer-events:all; }
        .drawer { position:fixed; top:0; right:-780px; width:780px; height:100vh; background:#fff; z-index:501; box-shadow:-8px 0 40px rgba(0,0,0,.18); transition:right .32s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column; }
        .drawer.open { right:0; }
        .drawer-header { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.5rem; border-bottom:1px solid #f1f5f9; flex-shrink:0; background:#fff; }
        .drawer-company { display:flex; align-items:center; gap:.9rem; }
        .drawer-avatar { width:44px; height:44px; border-radius:11px; background:linear-gradient(135deg,#25d366,#075e54); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; font-weight:800; }
        .drawer-title  { font-size:1.05rem; font-weight:800; color:#0f0f0f; }
        .drawer-sub    { font-size:.78rem; color:#9ca3af; margin-top:1px; }
        .drawer-close  { width:34px; height:34px; background:#f1f5f9; border:none; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#6b7280; transition:.18s; }
        .drawer-close:hover { background:#e2e8f0; color:#0f0f0f; }
        .drawer-close svg { width:16px; height:16px; }

        /* Drawer tabs */
        .drawer-tabs { display:flex; gap:0; border-bottom:1px solid #f1f5f9; padding:0 1.5rem; overflow-x:auto; flex-shrink:0; }
        .d-tab { padding:.75rem .9rem; font-size:.82rem; font-weight:600; color:#9ca3af; cursor:pointer; border-bottom:2.5px solid transparent; white-space:nowrap; transition:.18s; user-select:none; }
        .d-tab.active { color:#0f0f0f; border-bottom-color:#25d366; }
        .d-tab:hover:not(.active) { color:#374151; }

        /* Drawer body */
        .drawer-body { flex:1; overflow-y:auto; padding:1.5rem; }
        .d-panel { display:none; }
        .d-panel.active { display:block; }

        /* Info grid */
        .info-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }
        .info-box { background:#f8fafc; border-radius:10px; padding:1rem 1.1rem; }
        .info-label { font-size:.7rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.6px; margin-bottom:.4rem; }
        .info-val { font-size:.9rem; font-weight:600; color:#0f0f0f; word-break:break-all; }
        .info-val.muted { color:#9ca3af; font-weight:400; font-style:italic; }

        /* Section headings inside drawer */
        .d-section-title { font-size:.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#9ca3af; margin:1.5rem 0 .75rem; }

        /* Owner card */
        .owner-card { display:flex; align-items:center; gap:1rem; background:#f8fafc; border-radius:12px; padding:1rem 1.2rem; margin-bottom:1rem; }
        .owner-ava { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#6366f1,#8b5cf6); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.95rem; flex-shrink:0; }
        .owner-details .od-name  { font-weight:700; color:#0f0f0f; font-size:.9rem; }
        .owner-details .od-email { font-size:.78rem; color:#6b7280; margin-top:2px; }
        .owner-details .od-phone { font-size:.78rem; color:#6b7280; }

        /* Plan card */
        .plan-card { border:1.5px solid #e5e7eb; border-radius:12px; padding:1.1rem 1.2rem; margin-bottom:.85rem; }
        .plan-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
        .plan-name { font-weight:700; color:#0f0f0f; }
        .plan-row { display:flex; justify-content:space-between; font-size:.82rem; padding:.35rem 0; border-bottom:1px solid #f8fafc; }
        .plan-row:last-child { border-bottom:none; }
        .plan-row-label { color:#9ca3af; }
        .plan-row-val   { font-weight:600; color:#374151; }

        /* Timeline (message/payment history) */
        .timeline { list-style:none; }
        .tl-item { display:flex; gap:.9rem; padding-bottom:1.2rem; position:relative; }
        .tl-item::before { content:''; position:absolute; left:15px; top:28px; bottom:0; width:1px; background:#f1f5f9; }
        .tl-item:last-child::before { display:none; }
        .tl-dot { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .tl-dot svg { width:13px; height:13px; }
        .tl-dot-g { background:#f0fdf4; color:#16a34a; }
        .tl-dot-b { background:#eff6ff; color:#3b82f6; }
        .tl-dot-o { background:#fff7ed; color:#ea580c; }
        .tl-dot-r { background:#fef2f2; color:#dc2626; }
        .tl-content .tl-title { font-size:.85rem; font-weight:600; color:#0f0f0f; }
        .tl-content .tl-meta  { font-size:.75rem; color:#9ca3af; margin-top:2px; }

        /* Empty placeholder */
        .empty-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1rem; color:#9ca3af; font-size:.88rem; gap:.75rem; }
        .empty-tab svg { width:40px; height:40px; color:#d1d5db; }

        /* ── Dormant section ── */
        .dormant-section { margin-top:1.75rem; }
        .dormant-header { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.1rem; background:#fff7ed; border:1.5px solid #fed7aa; border-radius:12px 12px 0 0; cursor:pointer; }
        .dormant-header h3 { font-size:.85rem; font-weight:700; color:#c2410c; display:flex; align-items:center; gap:.5rem; }
        .dormant-header .dormant-count { font-size:.75rem; background:#c2410c; color:#fff; padding:.18rem .6rem; border-radius:20px; font-weight:700; }
        .dormant-header .dormant-toggle { font-size:.75rem; color:#c2410c; font-weight:600; }
        .dormant-body { display:none; }
        .dormant-body.open { display:block; }
        .dormant-body table { border-radius:0 0 12px 12px; overflow:hidden; }

        /* ── Shared modal backdrop ── */
        .modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:600; display:none; align-items:center; justify-content:center; padding:1rem; }
        .modal-backdrop.open { display:flex; }

        /* Delete modal */
        .modal { background:#fff; border-radius:16px; padding:2rem; max-width:400px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.25); text-align:center; }
        .modal h3 { font-size:1.1rem; font-weight:800; color:#0f0f0f; margin-bottom:.5rem; }
        .modal p  { font-size:.88rem; color:#6b7280; margin-bottom:1.5rem; }
        .modal-actions { display:flex; gap:.75rem; justify-content:center; }
        .btn-cancel-modal { background:#f1f5f9; color:#374151; border:none; padding:.65rem 1.4rem; border-radius:9px; font-size:.88rem; font-weight:600; cursor:pointer; }
        .btn-del-modal { background:#ef4444; color:#fff; border:none; padding:.65rem 1.4rem; border-radius:9px; font-size:.88rem; font-weight:700; cursor:pointer; }
        .btn-del-modal:hover { background:#dc2626; }

        /* Add Company modal */
        .add-modal { background:#fff; border-radius:18px; width:100%; max-width:540px; box-shadow:0 24px 70px rgba(0,0,0,.28); overflow:hidden; animation:modalPop .18s ease both; }
        .edit-modal { background:#fff; border-radius:18px; width:100%; max-width:580px; box-shadow:0 24px 70px rgba(0,0,0,.28); overflow:hidden; animation:modalPop .18s ease both; max-height:90vh; overflow-y:auto; }
        @keyframes modalPop { from{opacity:0;transform:scale(.96) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
        .add-modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.3rem 1.6rem; border-bottom:1px solid #f1f5f9; }
        .add-modal-header h3 { font-size:1.05rem; font-weight:800; color:#0f0f0f; }
        .add-modal-close { width:32px; height:32px; background:#f1f5f9; border:none; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#6b7280; transition:.15s; }
        .add-modal-close:hover { background:#e2e8f0; color:#0f0f0f; }
        .add-modal-body { padding:1.4rem 1.6rem; }
        .am-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
        .am-group { display:flex; flex-direction:column; gap:.35rem; }
        .am-group.full { grid-column:1/-1; }
        .am-label { font-size:.78rem; font-weight:600; color:#374151; }
        .am-label .opt { font-weight:400; color:#b0b7c3; }
        .am-input, .am-select, .am-textarea {
            padding:.62rem .9rem;
            border:1.5px solid #e5e7eb;
            border-radius:10px;
            font-size:.88rem;
            color:#111;
            background:#fff;
            outline:none;
            font-family:inherit;
            transition:.18s;
            width:100%;
        }
        .am-textarea { resize:vertical; min-height:70px; }
        .am-input:focus, .am-select:focus, .am-textarea:focus { border-color:#25d366; box-shadow:0 0 0 3px rgba(37,211,102,.1); }
        .am-input.err, .am-select.err { border-color:#ef4444; }
        .am-err { font-size:.74rem; color:#ef4444; margin-top:-2px; }
        .am-section { font-size:.65rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#9ca3af; margin:1rem 0 .6rem; grid-column:1/-1; }
        .add-modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:.75rem; padding:1rem 1.6rem; border-top:1px solid #f1f5f9; background:#fafafa; }
        .btn-save { background:#0f0f0f; color:#fff; border:none; padding:.65rem 1.5rem; border-radius:10px; font-size:.88rem; font-weight:700; cursor:pointer; transition:.18s; display:flex; align-items:center; gap:.5rem; }
        .btn-save:hover { background:#1a1a1a; }
        .btn-save svg { width:15px; height:15px; }
    </style>
</head>
<body>

<!-- HEADER -->
<?php
    $appLogo   = \App\Models\Setting::get('app_logo', '');
    $appName   = \App\Models\Setting::get('project_name', 'On Cloud API');
    $hasLogo   = $appLogo && file_exists(public_path('uploads/' . $appLogo));
    $userPhoto = $authUser->profile_photo_path ?? '';
    $hasPhoto  = $userPhoto && file_exists(public_path('uploads/' . $userPhoto));
    $initials  = strtoupper(substr($authUser->name ?? 'U', 0, 1));
?>
<header>
    <div class="brand">
        <?php if($hasLogo): ?>
            <img src="<?php echo e(asset('uploads/' . $appLogo)); ?>" class="brand-logo" alt="<?php echo e($appName); ?>">
        <?php else: ?>
            <svg viewBox="0 0 48 48" fill="none">
                <circle cx="24" cy="24" r="24" fill="#25D366"/>
                <path d="M24 10C16.268 10 10 16.268 10 24c0 2.637.718 5.107 1.97 7.23L10 38l7-1.93A13.93 13.93 0 0024 38c7.732 0 14-6.268 14-14S31.732 10 24 10z" fill="white"/>
                <path d="M19.5 17.5c-.4-.9-1-1-1.4-1h-1.2c-.4 0-1 .15-1.5.7s-2 2-2 4.85 2.05 5.6 2.35 5.95 4 6.3 9.75 8.6c4.8 1.9 5.75 1.5 6.75 1.4s3.25-1.35 3.7-2.65.45-2.4.3-2.65-1.15-1.1-2.4-1.7-3.05-1.5-3.5-1.65-.8-.25-1.15.25-1.3 1.65-1.6 2c-.3.3-.6.35-1.1.1s-2.15-1.05-4.1-2.8c-1.52-1.5-2.53-3.35-2.83-3.85s-.03-.75.22-1l.55-.65c.2-.2.3-.45.45-.75s.05-.55-.05-.75l-1.74-3.6z" fill="#25D366"/>
            </svg>
        <?php endif; ?>
    </div>
    <div class="header-right">
        <?php if($hasPhoto): ?>
            <img src="<?php echo e(asset('uploads/' . $userPhoto)); ?>" class="user-avatar" alt="<?php echo e($authUser->name); ?>">
        <?php else: ?>
            <div class="user-avatar-initials"><?php echo e($initials); ?></div>
        <?php endif; ?>
        <span class="username"><?php echo e($authUser->name); ?></span>
        <form method="POST" action="<?php echo e(route('logout')); ?>">
            <?php echo csrf_field(); ?>
            <button type="submit" class="btn-logout">Logout</button>
        </form>
    </div>
</header>

<div class="layout">
    <!-- SIDEBAR -->
    <aside>
        <div class="nav-section-label">Main</div>
        <a href="<?php echo e(route('dashboard')); ?>" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
            Dashboard
        </a>
        <div class="nav-sep"></div>
        <div class="nav-section-label">Management</div>
        <a href="#" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            Subscriptions
        </a>
        <a href="<?php echo e(route('companies')); ?>" class="nav-item active">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
            Companies
        </a>
        <a href="<?php echo e(route('pricing-plans')); ?>" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M9 12h6m-6 4h6"/></svg>
            Pricing Plans
        </a>
        <div class="nav-sep"></div>
        <div class="nav-section-label">Explore</div>
        <a href="#" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
            Today Messages
        </a>
        <a href="#" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/></svg>
            Today Campaigns
        </a>
        <a href="<?php echo e(route('apps')); ?>" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
            Apps
        </a>
        <div class="nav-sep"></div>
        <div class="nav-section-label">System</div>
        <a href="<?php echo e(route('settings')); ?>" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            Settings
        </a>
    </aside>

    <!-- MAIN -->
    <main>

        <?php if(session('success')): ?>
        <div style="background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:.7rem 1rem;border-radius:9px;margin-bottom:1rem;font-size:.85rem;font-weight:600;">
            <?php echo e(session('success')); ?>

        </div>
        <?php endif; ?>

        <div class="page-header">
            <div>
                <h1>Companies</h1>
                <p>All registered companies and their owners</p>
            </div>
            <button onclick="openAddModal()" class="btn-add">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                Add Company
            </button>
        </div>

        <!-- STAT STRIP -->
        <div class="stat-strip">
            <div class="strip-card s-blue">
                <div class="strip-icon"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
                <div><div class="strip-val"><?php echo e($total); ?></div><div class="strip-lbl">Total Companies</div></div>
            </div>
            <div class="strip-card s-green">
                <div class="strip-icon"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
                <div><div class="strip-val"><?php echo e($active); ?></div><div class="strip-lbl">Active</div></div>
            </div>
            <div class="strip-card s-orange">
                <div class="strip-icon"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
                <div><div class="strip-val"><?php echo e($trial); ?></div><div class="strip-lbl">On Trial</div></div>
            </div>
            <div class="strip-card s-red">
                <div class="strip-icon"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg></div>
                <div><div class="strip-val"><?php echo e($expired); ?></div><div class="strip-lbl">Expired</div></div>
            </div>
        </div>

        <!-- TOOLBAR -->
        <form method="GET" action="<?php echo e(route('companies')); ?>">
            <div class="toolbar">
                <div class="search-wrap">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 15.803 7.5 7.5 0 0016.803 15.803z"/></svg>
                    <input type="text" name="search" class="search-input" placeholder="Search company name, owner, email, phone…" value="<?php echo e(request('search')); ?>">
                </div>
                <select name="status" class="filter-select">
                    <option value="">All Status</option>
                    <option value="active"  <?php echo e(request('status')=='active'  ?'selected':''); ?>>Active</option>
                    <option value="trial"   <?php echo e(request('status')=='trial'   ?'selected':''); ?>>Trial</option>
                    <option value="expired" <?php echo e(request('status')=='expired' ?'selected':''); ?>>Expired</option>
                </select>
                <button type="submit" class="btn-search">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 15.803 7.5 7.5 0 0016.803 15.803z"/></svg>
                    Search
                </button>
                <?php if(request('search') || request('status')): ?>
                <a href="<?php echo e(route('companies')); ?>" class="btn-reset">✕ Clear</a>
                <?php endif; ?>
            </div>
        </form>

        <!-- TABLE -->
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Company</th>
                        <th>Owner</th>
                        <th>Owner Email</th>
                        <th>Phone</th>
                        <th>Status</th>
                        <th>Plan</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                <?php $__empty_1 = true; $__currentLoopData = $companies; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $company): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <?php
                    $owner    = $company->user;
                    $status   = $owner->plan_status ?? 'none';
                    $init     = strtoupper(substr($company->name, 0, 2));
                    $planName = $owner?->plan_id && isset($plans[$owner->plan_id]) ? $plans[$owner->plan_id]->name : null;
                ?>
                <tr>
                    <td style="color:#9ca3af;font-size:.8rem;"><?php echo e($companies->firstItem() + $i); ?></td>
                    <td>
                        <div class="company-name">
                            <div class="company-avatar"><?php echo e($init); ?></div>
                            <div>
                                <div class="name-bold"><?php echo e($company->name); ?></div>
                                <div class="name-sub"><?php echo e($company->address ?: 'No address'); ?></div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="owner-info">
                            <div class="ow-name"><?php echo e($owner?->name ?? '—'); ?></div>
                            <div class="ow-email"><?php echo e($owner?->whatsapp_num ?? ''); ?></div>
                        </div>
                    </td>
                    <td style="color:#6b7280;"><?php echo e($owner?->email ?? '—'); ?></td>
                    <td style="color:#6b7280;"><?php echo e($owner?->phone ?? '—'); ?></td>
                    <td>
                        <?php if($status === 'active'): ?>
                            <span class="pill pill-active">● Active</span>
                        <?php elseif($status === 'trial'): ?>
                            <span class="pill pill-trial">◑ Trial</span>
                        <?php elseif($status === 'expired'): ?>
                            <span class="pill pill-expired">✕ Expired</span>
                        <?php else: ?>
                            <span class="pill pill-none">— None</span>
                        <?php endif; ?>
                    </td>
                    <td style="font-size:.8rem;">
                        <?php if($planName): ?>
                            <span style="font-weight:600;color:#0f0f0f;"><?php echo e($planName); ?></span>
                        <?php elseif($owner?->plan_id): ?>
                            <span style="color:#9ca3af;">Plan #<?php echo e($owner->plan_id); ?></span>
                        <?php else: ?>
                            <span style="color:#d1d5db;">—</span>
                        <?php endif; ?>
                    </td>
                    <td style="font-size:.78rem;color:#9ca3af;">
                        <?php echo e($company->created_at?->format('d M Y') ?? '—'); ?>

                    </td>
                    <td>
                        <div class="actions">
                            <button class="act-btn act-view" title="View Details"
                                onclick="openDrawer(<?php echo e(json_encode([
                                    'id'          => $company->id,
                                    'name'        => $company->name,
                                    'address'     => $company->address,
                                    'currency'    => $company->currency,
                                    'description' => $company->description,
                                    'created_at'  => $company->created_at?->format('d M Y H:i'),
                                    'owner_name'  => $owner?->name,
                                    'owner_email' => $owner?->email,
                                    'owner_phone' => $owner?->phone,
                                    'owner_wa'    => $owner?->whatsapp_num,
                                    'plan_status' => $owner?->plan_status,
                                    'plan_id'     => $owner?->plan_id,
                                    'plan_name'   => $planName,
                                    'trial_ends'  => $owner?->trial_ends_at?->format('d M Y'),
                                    'pm_last_four'=> $owner?->pm_last_four,
                                    'cancel_url'  => $owner?->cancel_url,
                                    'business'    => $owner?->business_name,
                                ])); ?>)">
                                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            </button>
                            <button class="act-btn act-edit" title="Edit Company"
                                onclick="openEditModal(<?php echo e(json_encode([
                                    'id'           => $company->id,
                                    'name'         => $company->name,
                                    'address'      => $company->address,
                                    'currency'     => $company->currency,
                                    'description'  => $company->description,
                                    'owner_name'   => $owner?->name,
                                    'owner_email'  => $owner?->email,
                                    'owner_phone'  => $owner?->phone,
                                    'owner_wa'     => $owner?->whatsapp_num,
                                    'plan_status'  => $owner?->plan_status,
                                ])); ?>)">
                                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z"/></svg>
                            </button>
                            <button class="act-btn act-pkg" title="Update Package">
                                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"/></svg>
                            </button>
                            <button class="act-btn act-del" title="Delete"
                                onclick="confirmDelete(<?php echo e($company->id); ?>, '<?php echo e(addslashes($company->name)); ?>')">
                                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>
                            </button>
                        </div>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <tr>
                    <td colspan="9">
                        <div class="empty-state">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                            <p>No companies found<?php echo e(request('search') ? ' for "'.request('search').'"' : ''); ?>.</p>
                        </div>
                    </td>
                </tr>
                <?php endif; ?>
                </tbody>
            </table>

            <!-- PAGINATION -->
            <?php if($companies->hasPages()): ?>
            <div class="pagination-wrap">
                <span>Showing <?php echo e($companies->firstItem()); ?>–<?php echo e($companies->lastItem()); ?> of <?php echo e($companies->total()); ?> companies</span>
                <div class="pag-links">
                    <?php if($companies->onFirstPage()): ?>
                        <span class="disabled-page">‹</span>
                    <?php else: ?>
                        <a href="<?php echo e($companies->previousPageUrl()); ?>">‹</a>
                    <?php endif; ?>

                    <?php $__currentLoopData = $companies->getUrlRange(max(1,$companies->currentPage()-2), min($companies->lastPage(),$companies->currentPage()+2)); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php if($page == $companies->currentPage()): ?>
                            <span class="active-page"><?php echo e($page); ?></span>
                        <?php else: ?>
                            <a href="<?php echo e($url); ?>"><?php echo e($page); ?></a>
                        <?php endif; ?>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                    <?php if($companies->hasMorePages()): ?>
                        <a href="<?php echo e($companies->nextPageUrl()); ?>">›</a>
                    <?php else: ?>
                        <span class="disabled-page">›</span>
                    <?php endif; ?>
                </div>
            </div>
            <?php endif; ?>
        </div>

        <!-- DORMANT ACCOUNTS SECTION -->
        <?php if($dormantCompanies->isNotEmpty()): ?>
        <div class="dormant-section">
            <div class="dormant-header" onclick="toggleDormant()">
                <h3>
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Dormant Accounts
                    <span class="dormant-count"><?php echo e($dormantCompanies->count()); ?></span>
                </h3>
                <span class="dormant-toggle" id="dormantToggleLabel">▸ Show</span>
            </div>
            <div class="dormant-body" id="dormantBody">
                <div class="table-wrap" style="border-radius:0 0 12px 12px;border-top:1.5px solid #fed7aa;">
                    <table>
                        <thead style="background:#fff7ed;">
                            <tr>
                                <th>Company</th>
                                <th>Owner</th>
                                <th>Email</th>
                                <th>Status</th>
                                <th>Last Login</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        <?php $__currentLoopData = $dormantCompanies; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dc): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php
                            $dOwner = $dc->user;
                            $dInit  = strtoupper(substr($dc->name, 0, 2));
                        ?>
                        <tr>
                            <td>
                                <div class="company-name">
                                    <div class="company-avatar" style="background:linear-gradient(135deg,#fb923c,#ef4444);"><?php echo e($dInit); ?></div>
                                    <div>
                                        <div class="name-bold"><?php echo e($dc->name); ?></div>
                                        <div class="name-sub"><?php echo e($dc->address ?: 'No address'); ?></div>
                                    </div>
                                </div>
                            </td>
                            <td><div class="owner-info"><div class="ow-name"><?php echo e($dOwner?->name ?? '—'); ?></div></div></td>
                            <td style="color:#6b7280;font-size:.82rem;"><?php echo e($dOwner?->email ?? '—'); ?></td>
                            <td>
                                <?php $ds = $dOwner?->plan_status ?? 'none'; ?>
                                <?php if($ds === 'active'): ?> <span class="pill pill-active">● Active</span>
                                <?php elseif($ds === 'trial'): ?> <span class="pill pill-trial">◑ Trial</span>
                                <?php elseif($ds === 'expired'): ?> <span class="pill pill-expired">✕ Expired</span>
                                <?php else: ?> <span class="pill pill-none">— None</span>
                                <?php endif; ?>
                            </td>
                            <td style="font-size:.78rem;color:#ea580c;">
                                <?php echo e($dOwner?->last_login_at ? $dOwner->last_login_at->diffForHumans() : 'Never logged in'); ?>

                            </td>
                            <td>
                                <div class="actions">
                                    <button class="act-btn act-view" title="View Details"
                                        onclick="openDrawer(<?php echo e(json_encode([
                                            'id'          => $dc->id,
                                            'name'        => $dc->name,
                                            'address'     => $dc->address,
                                            'currency'    => $dc->currency,
                                            'description' => $dc->description,
                                            'created_at'  => $dc->created_at?->format('d M Y H:i'),
                                            'owner_name'  => $dOwner?->name,
                                            'owner_email' => $dOwner?->email,
                                            'owner_phone' => $dOwner?->phone,
                                            'owner_wa'    => $dOwner?->whatsapp_num,
                                            'plan_status' => $dOwner?->plan_status,
                                            'plan_id'     => $dOwner?->plan_id,
                                            'trial_ends'  => $dOwner?->trial_ends_at?->format('d M Y'),
                                            'pm_last_four'=> $dOwner?->pm_last_four,
                                            'cancel_url'  => $dOwner?->cancel_url,
                                            'business'    => $dOwner?->business_name,
                                        ])); ?>)">
                                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                    </button>
                                    <button class="act-btn act-del" title="Delete"
                                        onclick="confirmDelete(<?php echo e($dc->id); ?>, '<?php echo e(addslashes($dc->name)); ?>')">
                                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <?php endif; ?>

    </main>
</div>

<!-- DRAWER BACKDROP -->
<div class="drawer-backdrop" id="drawerBackdrop" onclick="closeDrawer()"></div>

<!-- DETAIL DRAWER -->
<div class="drawer" id="drawer">
    <div class="drawer-header">
        <div class="drawer-company">
            <div class="drawer-avatar" id="dAvatar">AC</div>
            <div>
                <div class="drawer-title" id="dTitle">Company Name</div>
                <div class="drawer-sub"  id="dSub">Created —</div>
            </div>
        </div>
        <button class="drawer-close" onclick="closeDrawer()">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
    </div>

    <div class="drawer-tabs">
        <div class="d-tab active" onclick="switchTab('overview',this)">Overview</div>
        <div class="d-tab" onclick="switchTab('subscriptions',this)">Subscriptions</div>
        <div class="d-tab" onclick="switchTab('apps',this)">Active Apps</div>
        <div class="d-tab" onclick="switchTab('payments',this)">Payment History</div>
        <div class="d-tab" onclick="switchTab('campaigns',this)">Campaigns</div>
        <div class="d-tab" onclick="switchTab('messages',this)">Messages</div>
    </div>

    <div class="drawer-body">

        <!-- OVERVIEW -->
        <div class="d-panel active" id="panel-overview">
            <div class="d-section-title">Owner Information</div>
            <div class="owner-card">
                <div class="owner-ava" id="dOwnerAva">?</div>
                <div class="owner-details">
                    <div class="od-name"  id="dOwnerName">—</div>
                    <div class="od-email" id="dOwnerEmail">—</div>
                    <div class="od-phone" id="dOwnerPhone">—</div>
                </div>
            </div>

            <div class="d-section-title">Company Details</div>
            <div class="info-grid">
                <div class="info-box"><div class="info-label">Company Name</div><div class="info-val" id="dCompanyName">—</div></div>
                <div class="info-box"><div class="info-label">Business Name</div><div class="info-val" id="dBusiness">—</div></div>
                <div class="info-box"><div class="info-label">Address</div><div class="info-val" id="dAddress">—</div></div>
                <div class="info-box"><div class="info-label">Currency</div><div class="info-val" id="dCurrency">—</div></div>
                <div class="info-box" style="grid-column:1/-1"><div class="info-label">Description</div><div class="info-val" id="dDesc">—</div></div>
            </div>

            <div class="d-section-title">Contact</div>
            <div class="info-grid">
                <div class="info-box"><div class="info-label">Phone</div><div class="info-val" id="dPhone">—</div></div>
                <div class="info-box"><div class="info-label">WhatsApp Number</div><div class="info-val" id="dWa">—</div></div>
            </div>
        </div>

        <!-- SUBSCRIPTIONS -->
        <div class="d-panel" id="panel-subscriptions">
            <div class="d-section-title">Current Subscription</div>
            <div class="plan-card">
                <div class="plan-top">
                    <div class="plan-name" id="dPlanName">No Plan</div>
                    <span class="pill" id="dPlanStatus">—</span>
                </div>
                <div class="plan-row"><span class="plan-row-label">Plan ID</span><span class="plan-row-val" id="dPlanId">—</span></div>
                <div class="plan-row"><span class="plan-row-label">Status</span><span class="plan-row-val" id="dPlanStatusRow">—</span></div>
                <div class="plan-row"><span class="plan-row-label">Trial Ends At</span><span class="plan-row-val" id="dTrialEnds">—</span></div>
                <div class="plan-row"><span class="plan-row-label">Cancel URL</span><span class="plan-row-val" id="dCancelUrl" style="font-size:.78rem;word-break:break-all;">—</span></div>
            </div>
            <div class="empty-tab" style="padding-top:1rem;">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"/></svg>
                Subscription billing records will appear here once integrated.
            </div>
        </div>

        <!-- ACTIVE APPS -->
        <div class="d-panel" id="panel-apps">
            <div class="empty-tab">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/></svg>
                No active apps connected to this company yet.
            </div>
        </div>

        <!-- PAYMENT HISTORY -->
        <div class="d-panel" id="panel-payments">
            <div class="d-section-title">Card on File</div>
            <div class="info-grid" style="margin-bottom:1.5rem;">
                <div class="info-box"><div class="info-label">Card Last 4 Digits</div><div class="info-val" id="dCard">—</div></div>
                <div class="info-box"><div class="info-label">Payment Method</div><div class="info-val">Credit / Debit Card</div></div>
            </div>
            <div class="d-section-title">Transaction History</div>
            <div class="empty-tab" style="padding-top:.5rem;">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"/></svg>
                Payment history will appear here once billing is integrated.
            </div>
        </div>

        <!-- CAMPAIGNS -->
        <div class="d-panel" id="panel-campaigns">
            <div class="d-section-title">Campaign Activity</div>
            <ul class="timeline" id="campaignTimeline">
                <li>
                    <div class="empty-tab">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/></svg>
                        No campaigns found for this company yet.
                    </div>
                </li>
            </ul>
        </div>

        <!-- MESSAGES -->
        <div class="d-panel" id="panel-messages">
            <div class="d-section-title">Full Message History</div>
            <ul class="timeline" id="msgTimeline">
                <li>
                    <div class="empty-tab">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/></svg>
                        Message history will appear here once messaging is integrated.
                    </div>
                </li>
            </ul>
        </div>

    </div>
</div>

<!-- ADD COMPANY MODAL -->
<div class="modal-backdrop" id="addModal" onclick="closeAddModal(event)">
    <div class="add-modal" onclick="event.stopPropagation()">
        <div class="add-modal-header">
            <h3>Add New Company</h3>
            <button class="add-modal-close" onclick="closeAddModal()">
                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        <form method="POST" action="<?php echo e(route('companies.store')); ?>" id="addCompanyForm">
            <?php echo csrf_field(); ?>
            <div class="add-modal-body">

                <?php if($errors->any()): ?>
                <div style="background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:.65rem 1rem;border-radius:9px;margin-bottom:1rem;font-size:.82rem;">
                    <?php echo e($errors->first()); ?>

                </div>
                <?php endif; ?>

                <div class="am-grid">
                    <div class="am-section">Company Information</div>

                    <div class="am-group full">
                        <label class="am-label">Company / Business Name <span style="color:#ef4444">*</span></label>
                        <input type="text" name="company_name" class="am-input <?php echo e($errors->has('company_name') ? 'err' : ''); ?>"
                            placeholder="e.g. Acme Corp" value="<?php echo e(old('company_name')); ?>" required>
                        <?php $__errorArgs = ['company_name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="am-err"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div class="am-group">
                        <label class="am-label">Currency <span class="opt">(optional)</span></label>
                        <select name="currency" class="am-select">
                            <option value="">Select currency</option>
                            <option value="USD" <?php echo e(old('currency')=='USD'?'selected':''); ?>>USD — US Dollar</option>
                            <option value="EUR" <?php echo e(old('currency')=='EUR'?'selected':''); ?>>EUR — Euro</option>
                            <option value="GBP" <?php echo e(old('currency')=='GBP'?'selected':''); ?>>GBP — British Pound</option>
                            <option value="PKR" <?php echo e(old('currency')=='PKR'?'selected':''); ?>>PKR — Pakistani Rupee</option>
                            <option value="INR" <?php echo e(old('currency')=='INR'?'selected':''); ?>>INR — Indian Rupee</option>
                            <option value="AED" <?php echo e(old('currency')=='AED'?'selected':''); ?>>AED — UAE Dirham</option>
                            <option value="SAR" <?php echo e(old('currency')=='SAR'?'selected':''); ?>>SAR — Saudi Riyal</option>
                            <option value="BDT" <?php echo e(old('currency')=='BDT'?'selected':''); ?>>BDT — Bangladeshi Taka</option>
                        </select>
                    </div>

                    <div class="am-group">
                        <label class="am-label">Address <span class="opt">(optional)</span></label>
                        <input type="text" name="company_address" class="am-input"
                            placeholder="City, Country" value="<?php echo e(old('company_address')); ?>">
                    </div>

                    <div class="am-group full">
                        <label class="am-label">Description <span class="opt">(optional)</span></label>
                        <textarea name="company_description" class="am-textarea" placeholder="Brief description of the company…"><?php echo e(old('company_description')); ?></textarea>
                    </div>

                    <div class="am-section">Owner Account</div>

                    <div class="am-group full">
                        <label class="am-label">Full Name <span style="color:#ef4444">*</span></label>
                        <input type="text" name="name" class="am-input <?php echo e($errors->has('name') ? 'err' : ''); ?>"
                            placeholder="Owner full name" value="<?php echo e(old('name')); ?>" required>
                        <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="am-err"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div class="am-group">
                        <label class="am-label">Email <span style="color:#ef4444">*</span></label>
                        <input type="email" name="email" class="am-input <?php echo e($errors->has('email') ? 'err' : ''); ?>"
                            placeholder="owner@example.com" value="<?php echo e(old('email')); ?>" required>
                        <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="am-err"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div class="am-group">
                        <label class="am-label">Password <span style="color:#ef4444">*</span></label>
                        <input type="password" name="password" class="am-input <?php echo e($errors->has('password') ? 'err' : ''); ?>"
                            placeholder="Min. 8 characters" required>
                        <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <span class="am-err"><?php echo e($message); ?></span> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div class="am-group">
                        <label class="am-label">Phone <span class="opt">(optional)</span></label>
                        <input type="tel" name="phone" class="am-input"
                            placeholder="+1 234 567 890" value="<?php echo e(old('phone')); ?>">
                    </div>

                    <div class="am-group">
                        <label class="am-label">WhatsApp No. <span class="opt">(optional)</span></label>
                        <input type="tel" name="whatsapp_num" class="am-input"
                            placeholder="+1 234 567 890" value="<?php echo e(old('whatsapp_num')); ?>">
                    </div>

                    <div class="am-group full">
                        <label class="am-label">Plan Status</label>
                        <select name="plan_status" class="am-select">
                            <option value="trial"   <?php echo e(old('plan_status','trial')=='trial'  ?'selected':''); ?>>Trial</option>
                            <option value="active"  <?php echo e(old('plan_status')=='active' ?'selected':''); ?>>Active</option>
                            <option value="expired" <?php echo e(old('plan_status')=='expired'?'selected':''); ?>>Expired</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="add-modal-footer">
                <button type="button" class="btn-cancel-modal" onclick="closeAddModal()">Cancel</button>
                <button type="submit" class="btn-save">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                    Create Company
                </button>
            </div>
        </form>
    </div>
</div>

<!-- EDIT COMPANY MODAL -->
<div class="modal-backdrop" id="editModal" onclick="closeEditModal(event)" style="overflow-y:auto;align-items:flex-start;padding:1.5rem 1rem;">
    <div class="edit-modal" onclick="event.stopPropagation()">
        <div class="add-modal-header">
            <h3>Edit Company</h3>
            <button class="add-modal-close" onclick="closeEditModal()">
                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <form method="POST" id="editCompanyForm" action="">
            <?php echo csrf_field(); ?> <?php echo method_field('PATCH'); ?>
            <div class="add-modal-body">
                <div class="am-grid">
                    <div class="am-section">Company Information</div>

                    <div class="am-group full">
                        <label class="am-label">Company Name <span style="color:#ef4444">*</span></label>
                        <input type="text" name="company_name" id="ec_name" class="am-input" required>
                    </div>
                    <div class="am-group">
                        <label class="am-label">Currency</label>
                        <select name="currency" id="ec_currency" class="am-select">
                            <option value="">Select currency</option>
                            <option value="USD">USD — US Dollar</option>
                            <option value="EUR">EUR — Euro</option>
                            <option value="GBP">GBP — British Pound</option>
                            <option value="PKR">PKR — Pakistani Rupee</option>
                            <option value="INR">INR — Indian Rupee</option>
                            <option value="AED">AED — UAE Dirham</option>
                            <option value="SAR">SAR — Saudi Riyal</option>
                            <option value="BDT">BDT — Bangladeshi Taka</option>
                        </select>
                    </div>
                    <div class="am-group">
                        <label class="am-label">Address <span class="opt">(optional)</span></label>
                        <input type="text" name="company_address" id="ec_address" class="am-input" placeholder="City, Country">
                    </div>
                    <div class="am-group full">
                        <label class="am-label">Description <span class="opt">(optional)</span></label>
                        <textarea name="company_description" id="ec_desc" class="am-textarea"></textarea>
                    </div>

                    <div class="am-section">Owner Account</div>

                    <div class="am-group full">
                        <label class="am-label">Full Name <span style="color:#ef4444">*</span></label>
                        <input type="text" name="owner_name" id="ec_owner_name" class="am-input" required>
                    </div>
                    <div class="am-group">
                        <label class="am-label">Email <span style="color:#ef4444">*</span></label>
                        <input type="email" name="owner_email" id="ec_email" class="am-input" required>
                    </div>
                    <div class="am-group">
                        <label class="am-label">New Password <span class="opt">(leave blank to keep)</span></label>
                        <input type="password" name="owner_password" id="ec_password" class="am-input" placeholder="Min. 8 characters">
                    </div>
                    <div class="am-group">
                        <label class="am-label">Phone <span class="opt">(optional)</span></label>
                        <input type="tel" name="owner_phone" id="ec_phone" class="am-input">
                    </div>
                    <div class="am-group">
                        <label class="am-label">WhatsApp No. <span class="opt">(optional)</span></label>
                        <input type="tel" name="owner_whatsapp" id="ec_wa" class="am-input">
                    </div>
                    <div class="am-group full">
                        <label class="am-label">Plan Status</label>
                        <select name="plan_status" id="ec_plan_status" class="am-select">
                            <option value="trial">Trial</option>
                            <option value="active">Active</option>
                            <option value="expired">Expired</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="add-modal-footer">
                <button type="button" class="btn-cancel-modal" onclick="closeEditModal()">Cancel</button>
                <button type="submit" class="btn-save">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" width="15" height="15"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>

<!-- DELETE CONFIRM MODAL -->
<div class="modal-backdrop" id="deleteModal">
    <div class="modal">
        <div style="width:52px;height:52px;background:#fef2f2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;">
            <svg width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="#dc2626" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
        </div>
        <h3>Delete Company?</h3>
        <p id="deleteModalText">This action cannot be undone.</p>
        <div class="modal-actions">
            <button class="btn-cancel-modal" onclick="closeDeleteModal()">Cancel</button>
            <form id="deleteForm" method="POST" style="display:inline;">
                <?php echo csrf_field(); ?>
                <?php echo method_field('DELETE'); ?>
                <button type="submit" class="btn-del-modal">Yes, Delete</button>
            </form>
        </div>
    </div>
</div>

<script>
    /* ── Drawer ── */
    function openDrawer(data) {
        const init = (data.name || 'CO').substring(0,2).toUpperCase();
        document.getElementById('dAvatar').textContent     = init;
        document.getElementById('dTitle').textContent      = data.name        || '—';
        document.getElementById('dSub').textContent        = 'Created ' + (data.created_at || '—');
        document.getElementById('dOwnerAva').textContent   = (data.owner_name||'?').substring(0,2).toUpperCase();
        document.getElementById('dOwnerName').textContent  = data.owner_name  || '—';
        document.getElementById('dOwnerEmail').textContent = data.owner_email || '—';
        document.getElementById('dOwnerPhone').textContent = data.owner_phone || '—';
        document.getElementById('dCompanyName').textContent= data.name        || '—';
        document.getElementById('dBusiness').textContent   = data.business    || '—';
        document.getElementById('dAddress').textContent    = data.address     || '—';
        document.getElementById('dCurrency').textContent   = data.currency    || '—';
        document.getElementById('dDesc').textContent       = data.description || 'No description';
        document.getElementById('dPhone').textContent      = data.owner_phone || '—';
        document.getElementById('dWa').textContent         = data.owner_wa    || '—';
        document.getElementById('dPlanName').textContent   = data.plan_name || (data.plan_id ? 'Plan #' + data.plan_id : 'No Plan');
        document.getElementById('dPlanId').textContent     = data.plan_id     || '—';
        document.getElementById('dPlanStatusRow').textContent = data.plan_status || '—';
        document.getElementById('dTrialEnds').textContent  = data.trial_ends  || '—';
        document.getElementById('dCancelUrl').textContent  = data.cancel_url  || '—';
        document.getElementById('dCard').textContent       = data.pm_last_four ? '•••• •••• •••• ' + data.pm_last_four : '—';

        const s = data.plan_status || '';
        const badge = document.getElementById('dPlanStatus');
        badge.className = 'pill ' + (s==='active'?'pill-active':s==='trial'?'pill-trial':s==='expired'?'pill-expired':'pill-none');
        badge.textContent = s ? s.charAt(0).toUpperCase()+s.slice(1) : '—';

        switchTab('overview', document.querySelector('.d-tab'));
        document.getElementById('drawer').classList.add('open');
        document.getElementById('drawerBackdrop').classList.add('open');
        document.body.style.overflow = 'hidden';
    }

    function closeDrawer() {
        document.getElementById('drawer').classList.remove('open');
        document.getElementById('drawerBackdrop').classList.remove('open');
        document.body.style.overflow = '';
    }

    function switchTab(name, el) {
        document.querySelectorAll('.d-tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.d-panel').forEach(p => p.classList.remove('active'));
        if (el) el.classList.add('active');
        const panel = document.getElementById('panel-' + name);
        if (panel) panel.classList.add('active');
    }

    /* ── Add Company Modal ── */
    function openAddModal() {
        document.getElementById('addModal').classList.add('open');
        document.body.style.overflow = 'hidden';
    }
    function closeAddModal(e) {
        if (e && e.target !== document.getElementById('addModal')) return;
        document.getElementById('addModal').classList.remove('open');
        document.body.style.overflow = '';
    }

    // Auto-open if there were validation errors on the add form
    <?php if($errors->any() && old('company_name') !== null): ?>
    openAddModal();
    <?php endif; ?>

    /* ── Delete ── */
    function confirmDelete(id, name) {
        document.getElementById('deleteModalText').textContent = 'Are you sure you want to delete "' + name + '"? This cannot be undone.';
        document.getElementById('deleteForm').action = '/companies/' + id;
        document.getElementById('deleteModal').classList.add('open');
    }
    function closeDeleteModal() {
        document.getElementById('deleteModal').classList.remove('open');
    }

    /* ── Edit Company Modal ── */
    function openEditModal(data) {
        document.getElementById('editCompanyForm').action = '/companies/' + data.id;
        document.getElementById('ec_name').value        = data.name        || '';
        document.getElementById('ec_address').value     = data.address     || '';
        document.getElementById('ec_currency').value    = data.currency    || '';
        document.getElementById('ec_desc').value        = data.description || '';
        document.getElementById('ec_owner_name').value  = data.owner_name  || '';
        document.getElementById('ec_email').value       = data.owner_email || '';
        document.getElementById('ec_phone').value       = data.owner_phone || '';
        document.getElementById('ec_wa').value          = data.owner_wa    || '';
        document.getElementById('ec_password').value    = '';
        const ps = document.getElementById('ec_plan_status');
        if (ps) ps.value = data.plan_status || 'trial';
        document.getElementById('editModal').classList.add('open');
        document.body.style.overflow = 'hidden';
    }
    function closeEditModal(e) {
        if (e && e.target !== document.getElementById('editModal')) return;
        document.getElementById('editModal').classList.remove('open');
        document.body.style.overflow = '';
    }

    /* ── Dormant section toggle ── */
    function toggleDormant() {
        const body  = document.getElementById('dormantBody');
        const label = document.getElementById('dormantToggleLabel');
        const open  = body.classList.toggle('open');
        label.textContent = open ? '▾ Hide' : '▸ Show';
    }

    /* ── Sidebar navigation with exit animation ── */
    document.querySelectorAll('.nav-item').forEach(el => {
        el.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            if (!href || href === '#') return;
            e.preventDefault();
            document.querySelector('main').style.animation = 'none';
            document.querySelector('main').offsetHeight;
            document.querySelector('main').style.cssText = 'animation:fadeOut .18s ease both';
            setTimeout(() => { window.location.href = href; }, 180);
        });
    });
</script>
</body>
</html>
<?php /**PATH /Applications/XAMPP/xamppfiles/htdocs/WhatsApp/whatsappcloudapi/resources/views/companies.blade.php ENDPATH**/ ?>