<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Domain Links - Admin Dashboard</title>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary: #3b46f1;
            --primary-hover: #2a35d8;
            --primary-light: #eff6ff;
            --bg-main: #f8fafc;
            --bg-card: #ffffff;
            
            --text-main: #0f172a;
            --text-muted: #64748b;
            --text-label: #334155;
            --border-color: #e2e8f0;
            --border-hover: #cbd5e1;
            --font-family: 'Instrument Sans', sans-serif;
            
            --sidebar-width: 260px;
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.05);
            --border-radius: 12px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: var(--font-family); background-color: var(--bg-main); color: var(--text-main); min-height: 100vh; overflow-x: hidden; }

        .dashboard-layout { display: flex; position: relative; min-height: 100vh; }
        .main-content { margin-left: var(--sidebar-width); flex-grow: 1; padding: 2rem; display: flex; flex-direction: column; gap: 2rem; }

        .dashboard-header { display: flex; align-items: center; justify-content: space-between; }
        .dashboard-title { font-size: 1.75rem; font-weight: 800; color: #0e1c59; }

        .alert-success { background-color: #ecfdf5; border-left: 4px solid #10B981; padding: 1rem; border-radius: 8px; color: #065f46; font-weight: 600; margin-bottom: 1rem; }

        .top-actions { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
        .search-input { height: 40px; padding: 0.5rem 1rem; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.875rem; width: 300px; }
        .search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,70,241,0.1); }
        .add-btn { background-color: var(--primary); color: white; border: none; padding: 0.625rem 1.125rem; border-radius: 8px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }
        .add-btn:hover { background-color: var(--primary-hover); }

        .domain-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); margin-bottom: 1rem; overflow: hidden; }
        .domain-header { padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; background: #fdfdfd; border-bottom: 1px solid transparent; }
        .domain-header:hover { background: #f8fafc; }
        .domain-info h3 { font-size: 1.15rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.25rem; }
        .domain-info p { font-size: 0.85rem; color: var(--text-muted); }
        
        .domain-actions { display: flex; gap: 0.5rem; align-items: center; }
        .action-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #e2e8f0; background: white; display: flex; justify-content: center; align-items: center; cursor: pointer; color: #64748b; }
        .action-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
        .action-btn.delete:hover { background: #fef2f2; color: #ef4444; border-color: #ef4444; }

        .logins-container { padding: 1.5rem; border-top: 1px solid var(--border-color); background: #ffffff; }
        .logins-container.active { display: block; }

        .logins-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
        .logins-table th, .logins-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #f1f5f9; text-align: left; font-size: 0.875rem; }
        .logins-table th { font-weight: 700; color: var(--text-muted); text-transform: uppercase; font-size: 0.75rem; background: #fafbfd; }
        
        .password-cell { display: flex; align-items: center; gap: 0.5rem; }
        .copy-btn, .toggle-btn { background: none; border: none; cursor: pointer; color: #94a3b8; display: flex; align-items: center; }
        .copy-btn:hover, .toggle-btn:hover { color: var(--primary); }
        .copy-btn svg, .toggle-btn svg { width: 16px; height: 16px; }
        .pwd-input { border: none; background: transparent; font-family: inherit; font-size: 0.875rem; color: var(--text-main); pointer-events: none; }

        /* Modals */
        .modal { position: fixed; inset: 0; background: rgba(15,23,42,0.4); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.3s; }
        .modal.active { opacity: 1; pointer-events: auto; }
        .modal-card { background: white; border-radius: 16px; width: 100%; max-width: 500px; transform: scale(0.9); transition: 0.3s; }
        .modal.active .modal-card { transform: scale(1); }
        .modal-header { padding: 1.5rem; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
        .modal-title { font-weight: 800; font-size: 1.15rem; }
        .modal-close { background: none; border: none; cursor: pointer; color: #94a3b8; }
        .modal-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
        .modal-footer { padding: 1.5rem; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; gap: 0.75rem; }
        
        .form-group { display: flex; flex-direction: column; gap: 0.375rem; }
        .form-label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
        .form-input { padding: 0.625rem 1rem; border: 1px solid #e2e8f0; border-radius: 8px; font-family: inherit; font-size: 0.875rem; }
        .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,70,241,0.1); }
        .btn-cancel { padding: 0.625rem 1.125rem; border: 1px solid #e2e8f0; background: white; border-radius: 8px; font-weight: 600; cursor: pointer; }
        .btn-submit { padding: 0.625rem 1.125rem; border: none; background: var(--primary); color: white; border-radius: 8px; font-weight: 600; cursor: pointer; }
    </style>
     <!-- Favicon -->
    <link rel="icon" type="image/png" href="<?php echo e(asset('images/faviocntaskpannel.png')); ?>">
</head>
<body>
    <div class="dashboard-layout">
        <?php echo $__env->make('admin.sidebar.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

        <main class="main-content">
            <!-- <?php echo $__env->make('admin.sidebar.topbar', ['title' => 'Domain Links'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?> -->

            <div class="dashboard-header">
                <h1 class="dashboard-title">Domain Link Management</h1>
            </div>

            <?php if(session('success')): ?>
                <div class="alert-success">
                    <?php echo e(session('success')); ?>

                </div>
            <?php endif; ?>
            
             <div style="margin-bottom: 0.75rem; font-weight: 700; color: var(--text-main); font-size: 1.05rem;">
                Total Domain :- <?php echo e($domains->count()); ?>

            </div>

            <div class="top-actions">
                <input type="text" class="search-input" id="domainSearch" placeholder="Search websites...">
                <button class="add-btn" onclick="openDomainModal()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                    Add Website
                </button>
            </div>

            <div id="domainList">
                <?php $__currentLoopData = $domains; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $domain): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="domain-card" data-name="<?php echo e(strtolower($domain->name)); ?>" data-url="<?php echo e(strtolower($domain->url)); ?>">
                    <div class="domain-header">
                        <div class="domain-info">
                            <h3><?php echo e($domain->name); ?></h3>
                            <p><a href="<?php echo e($domain->url); ?>" target="_blank" onclick="event.stopPropagation()" style="color: var(--primary); text-decoration: none;"><?php echo e($domain->url); ?></a> | Added by: <?php echo e($domain->user->name ?? 'Unknown'); ?></p>
                        </div>
                        <div class="domain-actions">
                            <button class="action-btn" onclick="event.stopPropagation(); openLoginModal(<?php echo e($domain->id); ?>)" title="Add Login">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                            </button>
                            <button class="action-btn" onclick="event.stopPropagation(); openDomainModal(<?php echo e($domain->id); ?>, '<?php echo e($domain->name); ?>', '<?php echo e($domain->url); ?>')" title="Edit Website">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                            </button>
                            <form action="<?php echo e(route('domains.delete', $domain->id)); ?>" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to delete this website?');">
                                <?php echo csrf_field(); ?>
                                <button type="submit" class="action-btn delete" onclick="event.stopPropagation();" title="Delete Website">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                </button>
                            </form>
                        </div>
                    </div>
                    
                    <div class="logins-container" id="logins-<?php echo e($domain->id); ?>">
                        <?php if($domain->logins->count() > 0): ?>
                        <table class="logins-table">
                            <thead>
                                <tr>
                                    <th>Login Type</th>
                                    <th>Login URL</th>
                                    <th>Username</th>
                                    <th>Password</th>
                                    <th style="width: 100px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $__currentLoopData = $domain->logins; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $login): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <tr>
                                    <td><strong><?php echo e($login->login_type); ?></strong></td>
                                    <td><a href="<?php echo e($login->login_url); ?>" target="_blank" style="color: var(--primary);"><?php echo e($login->login_url); ?></a></td>
                                    <td>
                                        <div class="password-cell">
                                            <span id="user-<?php echo e($login->id); ?>"><?php echo e($login->username); ?></span>
                                            <?php if($login->username): ?>
                                            <button class="copy-btn" onclick="copyToClipboard('<?php echo e($login->username); ?>')" title="Copy Username">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                                            </button>
                                            <?php endif; ?>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="password-cell">
                                            <input type="password" class="pwd-input" id="pwd-<?php echo e($login->id); ?>" value="<?php echo e($login->password); ?>" readonly>
                                            <?php if($login->password): ?>
                                            <button class="toggle-btn" onclick="togglePassword('pwd-<?php echo e($login->id); ?>')" title="Toggle Visibility">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                            </button>
                                            <button class="copy-btn" onclick="copyToClipboard('<?php echo e(addslashes($login->password)); ?>')" title="Copy Password">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                                            </button>
                                            <?php endif; ?>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="domain-actions">
                                            <button class="action-btn" onclick="openLoginModal(<?php echo e($domain->id); ?>, <?php echo e($login->id); ?>, '<?php echo e($login->login_type); ?>', '<?php echo e($login->login_url); ?>', '<?php echo e($login->username); ?>')" title="Edit Login">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                                            </button>
                                            <form action="<?php echo e(route('domains.logins.delete', $login->id)); ?>" method="POST" style="display:inline;" onsubmit="return confirm('Delete this login credential?');">
                                                <?php echo csrf_field(); ?>
                                                <button type="submit" class="action-btn delete" title="Delete Login">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </tbody>
                        </table>
                        <?php else: ?>
                        <p style="color: var(--text-muted); font-size: 0.875rem;">No logins added for this website yet.</p>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </main>
    </div>

    <!-- Domain Modal -->
    <div class="modal" id="domainModal">
        <div class="modal-card">
            <form id="domainForm" method="POST" action="<?php echo e(route('domains.store')); ?>">
                <?php echo csrf_field(); ?>
                <div class="modal-header">
                    <h2 class="modal-title" id="domainModalTitle">Add Website</h2>
                    <button type="button" class="modal-close" onclick="closeModal('domainModal')">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">Website Name</label>
                        <input type="text" name="name" id="domainName" class="form-input" required placeholder="e.g. Task Pannel">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Domain URL</label>
                        <input type="url" name="url" id="domainUrl" class="form-input" placeholder="https://example.com">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('domainModal')">Cancel</button>
                    <button type="submit" class="btn-submit">Save Website</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Login Modal -->
    <div class="modal" id="loginModal">
        <div class="modal-card">
            <form id="loginForm" method="POST" action="<?php echo e(route('domains.logins.store')); ?>">
                <?php echo csrf_field(); ?>
                <input type="hidden" name="domain_id" id="loginDomainId">
                <div class="modal-header">
                    <h2 class="modal-title" id="loginModalTitle">Add Login Credential</h2>
                    <button type="button" class="modal-close" onclick="closeModal('loginModal')">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">Login Type</label>
                        <input type="text" name="login_type" id="loginType" class="form-input" required list="loginTypesList" placeholder="e.g. Admin, cPanel,user">
                        <datalist id="loginTypesList">
                            <option value="Admin Login">
                            <option value="Vendor Login">
                            <option value="User Login">
                            <option value="Finance">
                            <option value="cPanel">
                            <option value="Database">
                        </datalist>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Login URL</label>
                        <input type="url" name="login_url" id="loginUrl" class="form-input" placeholder="https://example.com/login">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Username</label>
                        <input type="text" name="username" id="loginUsername" class="form-input" placeholder="admin">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Password</label>
                        <input type="text" name="password" id="loginPassword" class="form-input" placeholder="">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('loginModal')">Cancel</button>
                    <button type="submit" class="btn-submit">Save Login</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function toggleLogins(domainId) {
            const container = document.getElementById('logins-' + domainId);
            const chevron = document.getElementById('chevron-' + domainId);
            container.classList.toggle('active');
            if(container.classList.contains('active')) {
                chevron.style.transform = 'rotate(180deg)';
            } else {
                chevron.style.transform = 'rotate(0deg)';
            }
        }

        function togglePassword(inputId) {
            const input = document.getElementById(inputId);
            if (input.type === "password") {
                input.type = "text";
            } else {
                input.type = "password";
            }
        }

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function() {
                // Optional: Show a tiny toast or indicator
                alert('Copied to clipboard!');
            }, function(err) {
                console.error('Could not copy text: ', err);
            });
        }

        function openModal(id) {
            document.getElementById(id).classList.add('active');
        }

        function closeModal(id) {
            document.getElementById(id).classList.remove('active');
        }

        function openDomainModal(id = null, name = '', url = '') {
            const form = document.getElementById('domainForm');
            const title = document.getElementById('domainModalTitle');
            if(id) {
                form.action = `/domains/${id}/update`;
                title.textContent = 'Edit Website';
                document.getElementById('domainName').value = name;
                document.getElementById('domainUrl').value = url;
            } else {
                form.action = `<?php echo e(route('domains.store')); ?>`;
                title.textContent = 'Add Website';
                form.reset();
            }
            openModal('domainModal');
        }

        function openLoginModal(domainId, loginId = null, type = '', url = '', username = '') {
            const form = document.getElementById('loginForm');
            const title = document.getElementById('loginModalTitle');
            document.getElementById('loginDomainId').value = domainId;
            
            if(loginId) {
                form.action = `/domains/logins/${loginId}/update`;
                title.textContent = 'Edit Login Credential';
                document.getElementById('loginType').value = type;
                document.getElementById('loginUrl').value = url;
                document.getElementById('loginUsername').value = username;
                document.getElementById('loginPassword').value = '';
            } else {
                form.action = `<?php echo e(route('domains.logins.store')); ?>`;
                title.textContent = 'Add Login Credential';
                form.reset();
                document.getElementById('loginDomainId').value = domainId; // Reset wipes hidden fields too usually
            }
            openModal('loginModal');
        }

        // Auto-dismiss success alert after 3 seconds
        document.addEventListener('DOMContentLoaded', function() {
            const successAlert = document.querySelector('.alert-success');
            if (successAlert) {
                setTimeout(() => {
                    successAlert.style.transition = 'opacity 0.5s ease';
                    successAlert.style.opacity = '0';
                    setTimeout(() => {
                        successAlert.remove();
                    }, 500);
                }, 3000);
            }
        });

        // Search filtering
        document.getElementById('domainSearch').addEventListener('input', function(e) {
            const term = e.target.value.toLowerCase();
            const cards = document.querySelectorAll('.domain-card');
            cards.forEach(card => {
                const name = card.getAttribute('data-name');
                const url = card.getAttribute('data-url');
                if(name.includes(term) || url.includes(term)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>
<?php /**PATH /home/sainikcanteen/public_html/task.sainikcanteen.co.in/resources/views/admin/domain/domain.blade.php ENDPATH**/ ?>