<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'MindNode Creator - Industrial Pump Logic')</title>
    
    <!-- Premium Typography -->
    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    
    <!-- Mermaid -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>

    <!-- jQuery & Select2 -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <style>
        :root {
            --sidebar-width: 320px;
            --properties-width: 300px;
            --header-height: 56px;
            --primary: #E5442A;
            --primary-light: #fdece9;
            --bg-main: #f8fafc;
            --bg-card: #ffffff;
            --border: #e2e8f0;
            --text-main: #0f172a;
            --text-muted: #64748b;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Select2 Premium Styling */
        .select2-container--default .select2-selection--single {
            height: 38px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-main);
            display: flex;
            align-items: center;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: var(--text-main);
            font-size: 13px;
            padding-left: 12px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }
        .select2-dropdown {
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .select2-search--dropdown .select2-search__field {
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 6px 10px;
            font-size: 13px;
        }
        .select2-results__option {
            padding: 8px 12px;
            font-size: 13px;
        }
        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary);
        }

        body {
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            color: var(--text-main);
            background-color: var(--bg-main);
            height: 100vh;
            overflow: hidden;
        }

        .app-container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        /* Header Styles */
        header {
            height: var(--header-height);
            background: var(--bg-card);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            z-index: 10;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo-box {
            width: 32px;
            height: 32px;
            background: var(--primary);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .project-info h1 {
            font-size: 15px;
            font-weight: 600;
        }

        .project-info p {
            font-size: 11px;
            color: var(--text-muted);
        }

        .header-nav {
            display: flex;
            gap: 24px;
        }

        .nav-link {
            text-decoration: none;
            color: var(--text-muted);
            font-weight: 500;
            font-size: 13px;
        }

        .nav-link.active {
            color: var(--text-main);
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn {
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            border: 1px solid var(--border);
            background: white;
            transition: all 0.2s;
        }

        .btn:hover { 
            background: #f1f5f9; 
            border-color: #cbd5e1;
        }
        .btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
        .btn-primary:hover { 
            background: #b1301a; 
            color: white; 
            border-color: #b1301a;
        }

        /* Main Grid Layout */
        main {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

        .panel {
            background: var(--bg-card);
            display: flex;
            flex-direction: column;
            transition: width 0.3s ease, min-width 0.3s ease, border 0.3s ease;
            overflow: hidden;
        }

        .panel.collapsed {
            width: 0 !important;
            min-width: 0 !important;
            border: none !important;
        }

        .panel-header {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background 0.2s;
            cursor: pointer;
        }

        .panel-header:hover {
            background: var(--bg-main);
        }

        .panel-header h2 {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            font-weight: 700;
        }

        /* Common Form Components */
        .property-group {
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .field label {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            display: block;
        }

        .input, .textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-family: inherit;
            font-size: 13px;
            outline: none;
            background: var(--bg-main);
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .input:focus, .textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-light);
            background: white;
        }

        .textarea {
            height: 100px;
            resize: none;
        }

        @media (max-width: 1024px) {
            :root {
                --sidebar-width: 280px;
                --properties-width: 280px;
            }
        }

        @media (max-width: 768px) {
            main {
                flex-direction: column;
                overflow-y: auto;
            }
            .sidebar, .properties-panel {
                width: 100% !important;
                height: auto !important;
                border: none !important;
                border-bottom: 1px solid var(--border) !important;
            }
            body {
                overflow-y: auto;
            }
        }

        /* Premium Pagination Styles */
        .pagination-container {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 0;
            border-top: 1px solid var(--border);
            margin-top: 32px;
        }
        .pagination-mobile {
            display: none;
            width: 100%;
            justify-content: space-between;
            gap: 12px;
        }
        .pagination-desktop {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .pagination-info {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
        }
        .info-highlight {
            color: var(--text-main);
            font-weight: 800;
        }
        .pagination-links-group {
            display: flex;
            background: white;
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .pagination-link {
            min-width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: var(--text-muted);
            font-weight: 600;
            font-size: 13px;
            border-right: 1px solid var(--border);
            transition: all 0.2s;
        }
        .pagination-link:last-child {
            border-right: none;
        }
        .pagination-link:hover:not(.disabled):not(.active) {
            background: var(--bg-main);
            color: var(--primary);
        }
        .pagination-link.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        .pagination-link.disabled {
            color: #cbd5e1;
            cursor: not-allowed;
            background: #f8fafc;
        }
        .pagination-link.nav-icon {
            padding: 0 12px;
        }

        @media (max-width: 640px) {
            .pagination-desktop { display: none; }
            .pagination-mobile { display: flex; }
            .pagination-link-btn {
                flex: 1;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--border);
                border-radius: 8px;
                background: white;
                text-decoration: none;
                font-weight: 600;
                font-size: 13px;
                color: var(--text-main);
            }
            .pagination-link-btn.disabled {
                opacity: 0.5;
                pointer-events: none;
            }
        }

        @stack('styles')
    </style>
</head>

<body>

    <div class="app-container">
        @include('layouts.header')

        @yield('content')
    </div>

    <script>const baseUrl = @json(url('/'));</script>
    @stack('scripts')
    
    <script>
        lucide.createIcons();

        function toggleLeftPanel() {
            const sidebar = document.getElementById('left-panel');
            if (sidebar) sidebar.classList.toggle('collapsed');
        }

        function toggleRightPanel() {
            const props = document.getElementById('right-panel');
            if (props) props.classList.toggle('collapsed');
        }
    </script>
    <!-- Global Modal Structure -->
    <div id="globalModal" style="display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; padding:20px;">
        <div id="modalBackdrop" style="position:absolute; inset:0; background:rgba(15, 23, 42, 0.4); backdrop-filter:blur(4px);" onclick="closeModal()"></div>
        <div id="modalContent" style="position:relative; background:white; width:100%; max-width:400px; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,0.15); border:1px solid var(--border); overflow:hidden; animation:modalSlide 0.3s ease-out;">
            <div id="modalHeader" style="padding:20px 24px 0 24px; display:flex; align-items:center; gap:12px;">
                <div id="modalIcon" style="width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;"></div>
                <h3 id="modalTitle" style="margin:0; font-size:18px; font-weight:700; color:var(--text-main);"></h3>
            </div>
            <div id="modalBody" style="padding:16px 24px 24px 24px;">
                <p id="modalMessage" style="margin:0; color:var(--text-muted); font-size:14px; line-height:1.5;"></p>
                <div id="modalInputContainer" style="display:none; margin-top:16px;">
                    <input type="text" id="modalInput" class="input" style="width:100%; background:var(--bg-main);" placeholder="Enter value...">
                </div>
                <div id="modalOptionsContainer" style="display:none; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;"></div>
            </div>
            <div id="modalFooter" style="padding:16px 24px; background:var(--bg-main); border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px;">
                <button id="modalCancelBtn" class="btn" style="" onclick="closeModal()">Cancel</button>
                <button id="modalConfirmBtn" class="btn btn-primary" style=""></button>
            </div>
        </div>
    </div>

    <style>
        @keyframes modalSlide {
            from { opacity:0; transform:translateY(20px) scale(0.95); }
            to { opacity:1; transform:translateY(0) scale(1); }
        }
    </style>

    <script>
        let modalResolve = null;

        function showModal(options = {}) {
            const modal = document.getElementById('globalModal');
            const title = document.getElementById('modalTitle');
            const message = document.getElementById('modalMessage');
            const icon = document.getElementById('modalIcon');
            const inputContainer = document.getElementById('modalInputContainer');
            const input = document.getElementById('modalInput');
            const confirmBtn = document.getElementById('modalConfirmBtn');
            const cancelBtn = document.getElementById('modalCancelBtn');

            const optionsContainer = document.getElementById('modalOptionsContainer');

            // Reset
            title.innerText = options.title || 'Notification';
            message.innerText = options.message || '';
            confirmBtn.innerText = options.confirmText || 'Confirm';
            cancelBtn.style.display = options.showCancel === false ? 'none' : 'flex';
            inputContainer.style.display = options.showInput ? 'block' : 'none';
            optionsContainer.style.display = 'none';
            if(options.showInput) input.value = options.inputValue || '';
            
            if (options.mode === 'choice' && options.choices) {
                optionsContainer.style.display = 'grid';
                optionsContainer.innerHTML = options.choices.map((c, i) => `
                    <button class="btn" style="justify-content:center; padding:12px; height:auto; flex-direction:column; gap:8px;" onclick="modalResolve(${i}); closeModal();">
                        <i data-lucide="${c.icon || 'circle'}" size="20"></i>
                        <span style="font-weight:600;">${c.label}</span>
                        <small style="font-size:10px; color:var(--text-muted);">${c.desc || ''}</small>
                    </button>
                `).join('');
                confirmBtn.style.display = 'none';
                cancelBtn.style.display = 'none';
                lucide.createIcons({ portal: optionsContainer });
            } else {
                confirmBtn.style.display = 'flex';
                cancelBtn.style.display = options.showCancel === false ? 'none' : 'flex';
            }
            
            // Icon Styling
            icon.style.background = options.type === 'danger' ? '#fee2e2' : options.type === 'success' ? '#dcfce7' : '#f0f9ff';
            icon.style.color = options.type === 'danger' ? '#ef4444' : options.type === 'success' ? '#22c55e' : 'var(--primary)';
            
            const iconName = options.type === 'danger' ? 'alert-circle' : options.type === 'success' ? 'check-circle' : options.showInput ? 'edit' : 'help-circle';
            icon.innerHTML = `<i data-lucide="${iconName}" size="20"></i>`;
            lucide.createIcons({ portal: icon });

            modal.style.display = 'flex';
            if(options.showInput) setTimeout(() => input.focus(), 100);

            return new Promise((resolve) => {
                modalResolve = resolve;
                confirmBtn.onclick = () => {
                    closeModal();
                    resolve(options.showInput ? input.value : true);
                };
            });
        }

        function closeModal() {
            document.getElementById('globalModal').style.display = 'none';
            if(modalResolve) {
                // If closed without confirm (backdrop click)
                // modalResolve(null); 
            }
        }

        // Global Alert/Confirm overrides (Optional but safer to use named functions)
        window.customAlert = (msg) => showModal({ message: msg, showCancel: false, confirmText: 'OK' });
        window.customConfirm = (msg, type='danger') => showModal({ message: msg, type: type });
        window.customPrompt = (msg, val='') => showModal({ message: msg, showInput: true, inputValue: val });
    </script>
</body>
</html>
