<style>
    :root {
        --primary-dark: #08182f;
        --primary-light: #0f2847;
        --secondary: #ba3226;
        --text-dark: #2c3e50;
        --border-light: #e8ecef;
        --bg-light: #f8f9fa;
    }

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

    body {
        background: linear-gradient(135deg, #f5f7fa 0%, #e8ecef 100%);
        font-family: "Inter", "Segoe UI", sans-serif;
        color: var(--text-dark);
        min-height: 100vh;
    }

    .navbar-modern {
        background: var(--primary-dark);
        padding: 1.2rem 0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .navbar-brand-modern {
        font-size: 1.5rem;
        font-weight: 700;
        color: white;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        transition: transform 0.3s ease;
    }

    .navbar-brand-modern:hover {
        transform: translateX(5px);
    }

    .navbar-brand-modern i {
        color: var(--secondary);
        font-size: 1.8rem;
    }

    .main-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2.5rem 1.5rem;
    }

    .card-modern {
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
        overflow: hidden;
        border: none;
    }

    .card-header-modern {
        background: linear-gradient(135deg,
                var(--primary-dark) 0%,
                var(--primary-light) 100%);
        padding: 1.75rem 2rem;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-title-modern {
        color: white;
        font-size: 1.4rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 0;
    }

    .card-title-modern i {
        color: var(--secondary);
        font-size: 1.5rem;
    }

    .btn-add-modern {
        background: var(--secondary);
        color: white;
        border: none;
        padding: 0.7rem 1.5rem;
        border-radius: 8px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(186, 50, 38, 0.3);
        cursor: pointer;
    }

    .btn-add-modern:hover {
        background: #a32a20;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(186, 50, 38, 0.4);
        color: white;
    }

    .table-container {
        padding: 0;
        overflow: hidden;
    }

    .table-modern {
        margin: 0;
        width: 100%;
    }

    .table-modern thead {
        background: #f8f9fa;
        border-bottom: 2px solid var(--border-light);
    }

    .table-modern thead th {
        padding: 1.25rem 1.5rem;
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--primary-dark);
        border: none;
    }

    .table-modern tbody tr {
        border-bottom: 1px solid var(--border-light);
        transition: all 0.2s ease;
    }

    .table-modern tbody tr:hover {
        background: #f8f9fa;
    }

    .table-modern tbody td {
        padding: 1.25rem 1.5rem;
        vertical-align: middle;
        border: none;
    }

    .id-badge {
        display: inline-block;
        background: linear-gradient(135deg,
                var(--primary-dark),
                var(--primary-light));
        color: white;
        padding: 0.4rem 0.8rem;
        border-radius: 6px;
        font-weight: 700;
        font-size: 0.9rem;
    }

    .icon-container {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        background: var(--bg-light);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        transition: all 0.3s ease;
        border: 2px solid var(--border-light);
    }

    .icon-container:hover {
        transform: scale(1.1);
        border-color: var(--secondary);
    }

    .icon-container img {
        max-width: 35px;
        max-height: 35px;
        object-fit: contain;
    }

    .country-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--primary-dark);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .service-tag {
        display: inline-block;
        background: linear-gradient(135deg,
                rgba(186, 50, 38, 0.1),
                rgba(186, 50, 38, 0.05));
        color: var(--secondary);
        padding: 0.4rem 0.9rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        margin: 0.2rem;
        border: 1px solid rgba(186, 50, 38, 0.2);
        transition: all 0.3s ease;
    }

    .service-tag:hover {
        background: var(--secondary);
        color: white;
        transform: translateY(-2px);
    }

    .action-btn-group {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
    }

    .action-btn {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.95rem;
    }

    .btn-view-modern {
        background: linear-gradient(135deg,
                rgba(59, 130, 246, 0.1),
                rgba(59, 130, 246, 0.05));
        color: #3b82f6;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .btn-view-modern:hover {
        background: #3b82f6;
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

    .btn-edit-modern {
        background: linear-gradient(135deg,
                rgba(34, 197, 94, 0.1),
                rgba(34, 197, 94, 0.05));
        color: #22c55e;
        border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .btn-edit-modern:hover {
        background: #22c55e;
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    }

    .btn-delete-modern {
        background: linear-gradient(135deg,
                rgba(239, 68, 68, 0.1),
                rgba(239, 68, 68, 0.05));
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .btn-delete-modern:hover {
        background: #ef4444;
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }

    .nav-tabs-modern {
        background: #f8f9fa;
        border: none;
        padding: 0;
        border-bottom: 2px solid var(--border-light);
    }

    .nav-tabs-modern .nav-item {
        flex: 1;
    }

    .nav-tabs-modern .nav-link {
        border: none;
        color: var(--text-dark);
        font-weight: 600;
        padding: 1.25rem 1rem;
        transition: all 0.3s ease;
        border-bottom: 3px solid transparent;
        background: transparent;
        text-align: center;
    }

    .nav-tabs-modern .nav-link:hover {
        background: rgba(186, 50, 38, 0.05);
        color: var(--secondary);
    }

    .nav-tabs-modern .nav-link.active {
        background: white;
        color: var(--secondary);
        border-bottom: 3px solid var(--secondary);
    }

    .nav-tabs-modern .nav-link i {
        margin-right: 0.5rem;
    }

    .form-label-modern {
        font-weight: 700;
        color: var(--primary-dark);
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    .form-control-modern {
        border: 2px solid var(--border-light);
        border-radius: 8px;
        padding: 0.7rem 1rem;
        transition: all 0.3s ease;
        font-size: 0.95rem;
    }

    .form-control-modern:focus {
        border-color: var(--secondary);
        box-shadow: 0 0 0 3px rgba(186, 50, 38, 0.1);
        outline: none;
    }

    .form-footer {
        background: #f8f9fa;
        border-top: 1px solid var(--border-light);
        padding: 1.5rem 2rem;
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
    }

    .btn-cancel-modern {
        background: white;
        color: var(--text-dark);
        border: 2px solid var(--border-light);
        padding: 0.7rem 1.5rem;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .btn-cancel-modern:hover {
        background: var(--border-light);
        border-color: var(--text-dark);
    }

    .btn-save-modern {
        background: var(--secondary);
        color: white;
        border: none;
        padding: 0.7rem 1.5rem;
        border-radius: 8px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(186, 50, 38, 0.3);
        cursor: pointer;
    }

    .btn-save-modern:hover {
        background: #a32a20;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(186, 50, 38, 0.4);
    }

    .info-group {
        margin-bottom: 1.5rem;
    }

    .info-label {
        font-weight: 700;
        color: var(--primary-dark);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.5rem;
    }

    .info-value {
        color: var(--text-dark);
        font-size: 1rem;
        padding: 0.75rem;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid var(--secondary);
    }

    @media (max-width: 768px) {
        .card-header-modern {
            flex-direction: column;
            gap: 1rem;
            align-items: flex-start;
        }

        .table-modern thead th,
        .table-modern tbody td {
            padding: 1rem;
            font-size: 0.9rem;
        }

        .form-footer {
            flex-direction: column-reverse;
        }

        .btn-save-modern,
        .btn-cancel-modern {
            width: 100%;
            justify-content: center;
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .card-modern {
        animation: fadeInUp 0.6s ease;
    }
</style>

<div class="main-container">
    <div class="card-modern">
        <div class="card-header-modern" id="cardHeader">
            <h5 class="card-title-modern" id="cardTitle">
                <i class="fas fa-globe-americas"></i>
                Visa Management
            </h5>
            <button type="button" class="btn-add-modern" id="btnAddCountry">
                <i class="fas fa-plus-circle"></i>
                Add Country
            </button>
        </div>

        <!-- Table View -->
        <div class="table-container" id="tableContainer">
            <table class="table-modern">
                <thead>
                    <tr>
                        <th style="width: 8%" class="text-center">ID</th>
                        <th style="width: 10%" class="text-center">Flag</th>
                        <th style="width: 22%">Country Name</th>
                        <th style="width: 40%">Services</th>
                        <th style="width: 20%" class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody id="countryTableBody">
                    <% if (data && data.hero && data.hero.summaryList) { %>
                        <% data.hero.summaryList.forEach(function(country) { %>
                            <tr>
                                <td class="text-center">
                                    <span class="id-badge">#<%= String(country.id).padStart(3, "0" ) %></span>
                                </td>
                                <td class="text-center">
                                    <div class="icon-container">
                                        <img src="<%= country.icon %>" alt="<%= country.name %>">
                                    </div>
                                </td>
                                <td><span class="country-name">
                                        <%= country.name %>
                                    </span></td>
                                <td>
                                    <div class="d-flex flex-wrap gap-1">
                                        <% country.services.forEach(function(service) { %>
                                            <span class="service-tag">
                                                <%= service %>
                                            </span>
                                            <% }); %>
                                    </div>
                                </td>
                                <td>
                                    <div class="action-btn-group">
                                        <button class="action-btn btn-view-modern" data-id="<%= country.id %>"
                                            title="View">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn btn-edit-modern" data-id="<%= country.id %>"
                                            title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn btn-delete-modern" data-id="<%= country.id %>"
                                            title="Delete">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <% }); %>
                                <% } %>
                </tbody>
            </table>
        </div>

        <!-- Form View -->
        <div id="formContainer" style="display: none">
            <ul class="nav nav-tabs nav-tabs-modern" id="countryTab" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-summary">
                        <i class="fas fa-map-marker-alt"></i>Country Summary
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-detail">
                        <i class="fas fa-file-alt"></i>Detailed View
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-contact">
                        <i class="fas fa-phone-alt"></i>Contact Info
                    </button>
                </li>
            </ul>

            <form id="formCountry" style="background: white">
                <input type="hidden" name="country_id" id="country_id" />
                <div class="tab-content p-4">
                    <!-- Tab 1 -->
                    <div class="tab-pane fade show active" id="tab-summary" role="tabpanel">
                        <!-- <div class="col-md-12 mt-4">
                            <label class="form-label-modern fw-bold text-dark mb-3">
                                Page Meta Configuration (SEO)
                            </label>

                            <div class="row g-3 p-3 border rounded shadow-sm bg-white border-start">
                                <div class="col-md-4">
                                    <label class="small text-muted">Charset</label>
                                    <input type="text" name="meta_charset" class="form-control-modern w-100"
                                        value="UTF-8" placeholder="e.g. UTF-8">
                                </div>

                                <div class="col-md-4">
                                    <label class="small text-muted">Author</label>
                                    <input type="text" name="meta_author" class="form-control-modern w-100"
                                        placeholder="e.g. Gramentheme">
                                </div>

                                <div class="col-md-4">
                                    <label class="small text-muted">Viewport</label>
                                    <input type="text" name="meta_viewport" class="form-control-modern w-100"
                                        value="width=device-width, initial-scale=1"
                                        placeholder="e.g. width=device-width, initial-scale=1">
                                </div>

                                <div class="col-md-12">
                                    <label class="small text-muted">Meta Description (SEO)</label>
                                    <textarea name="meta_description" class="form-control-modern w-100" rows="3"
                                        placeholder="Visaway – Immigration & Visa Consulting HTML Template"></textarea>
                                    <div class="form-text mt-1" style="font-size: 0.75rem;">
                                        It's best to keep your text under 160 characters for optimal display on Google.
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label-modern">Country Name</label>
                                <input type="text" name="name" class="form-control-modern w-100"
                                    placeholder="e.g. France" required />
                            </div>
                            <div class="col-md-12">
                                <label class="form-label-modern fw-bold">Img Flag (Country Icon)</label>
                                <div class="input-group">
                                    <input type="text" class="form-control-modern flex-grow-1" name="icon"
                                        id="img_flag_path" placeholder="/img/home-2/visa/03.png">

                                    <button type="button" class="btn btn-outline-secondary"
                                        onclick="document.getElementById('fileFlagInput').click()">
                                        <i class="fas fa-upload me-1"></i>Upload
                                    </button>
                                </div>

                                <!-- <div id="container_preview_flag" class="mt-2 border rounded p-2 bg-light d-inline-block" style="display: none;">
    </div> -->

                                <input type="file" id="fileFlagInput" style="display:none" accept="image/*"
                                    onchange="handleFileSelect(this, 'img_flag_path', 'preview_flag', 'container_preview_flag')">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label-modern fw-bold">Visa Services (5 services)</label>
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="services[]" class="form-control-modern w-100"
                                    placeholder="Service 1" />
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="services[]" class="form-control-modern w-100"
                                    placeholder="Service 2" />
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="services[]" class="form-control-modern w-100"
                                    placeholder="Service 3" />
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="services[]" class="form-control-modern w-100"
                                    placeholder="Service 4" />
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="services[]" class="form-control-modern w-100"
                                    placeholder="Service 5" />
                            </div>
                        </div>
                    </div>

                    <!-- Tab 2 -->
                    <div class="tab-pane fade" id="tab-detail" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label-modern">Banner Title</label>
                                <input type="text" name="detail_title" class="form-control-modern w-100"
                                    placeholder="COUNTRY USA" />
                            </div>
                            <div class="col-md-12">
                                <label class="form-label-modern">Main Image</label>
                                <input type="text" name="mainImage" class="form-control-modern w-100"
                                    placeholder="/img/.../details-1.jpg" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-modern">Main Description</label>
                                <textarea name="description" class="form-control-modern w-100" rows="5"></textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-modern">Additional Info</label>
                                <textarea name="additionalInfo" class="form-control-modern w-100" rows="5"></textarea>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label-modern">Tagline</label>
                                <input type="text" name="tagline" class="form-control-modern w-100" />
                            </div>
                            <div class="col-md-12">
                                <label class="form-label-modern">Visa Types</label>

                                <div class="row g-4">

                                    <div class="col-md-6">
                                        <div class="visa-item-group p-3 border rounded shadow-sm">
                                            <label class="small text-muted mb-1">Type 1</label>
                                            <input type="text" name="visa_title[]"
                                                class="form-control-modern w-100 mb-2"
                                                placeholder="Visa Title (e.g. Tourist Visa)" />
                                            <textarea name="visa_description[]" class="form-control-modern w-100"
                                                rows="4" placeholder="Visa Description"></textarea>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="visa-item-group p-3 border rounded shadow-sm">
                                            <label class="small text-muted mb-1">Type 2</label>
                                            <input type="text" name="visa_title[]"
                                                class="form-control-modern w-100 mb-2"
                                                placeholder="Visa Title (e.g. Work Permit)" />
                                            <textarea name="visa_description[]" class="form-control-modern w-100"
                                                rows="4" placeholder="Visa Description"></textarea>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="row g-3 mb-4 p-3 border rounded shadow-sm bg-white">
                                <div class="col-md-12">
                                    <label class="form-label-modern fw-bold">Process Main Title</label>
                                    <input type="text" name="process_main_title" class="form-control-modern w-100"
                                        placeholder="e.g. USA Visa Process" />
                                </div>
                                <div class="row g-3">
                                    <% for(let i=1; i<=5; i++) { %>
                                        <div class="col-md-12">
                                            <div class="p-3 border rounded shadow-sm bg-light">
                                                <div class="d-flex align-items-center mb-2">
                                                    <span class="badge bg-secondary me-2">
                                                        <%= i.toString().padStart(2, '0' ) %>
                                                    </span>
                                                    <input type="text" name="step_title[]"
                                                        class="form-control-modern flex-grow-1"
                                                        placeholder="Step <%= i %> Title" />
                                                </div>
                                                <textarea name="step_description[]" class="form-control-modern w-100"
                                                    rows="2" placeholder="Step <%= i %> Description"></textarea>
                                            </div>
                                        </div>
                                        <% } %>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label-modern small">Process Image 1</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control-modern flex-grow-1"
                                            name="process_image_1" id="process_image_1"
                                            placeholder="/img/process-1.jpg">
                                        <button type="button" class="btn btn-outline-secondary"
                                            onclick="document.getElementById('fileInput1').click()">
                                            <i class="fas fa-upload me-1"></i>Upload
                                        </button>
                                    </div>
                                    <div class="mt-2">
                                        <img id="preview_process_1" src=""
                                            style="max-width: 100px; display: none; border-radius: 4px; border: 1px solid #ddd;">
                                    </div>
                                    <input type="file" id="fileInput1" style="display:none"
                                        onchange="handleFileSelect(this, 'process_image_1', 'preview_process_1')">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label-modern small">Process Image 2</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control-modern flex-grow-1"
                                            name="process_image_2" id="process_image_2"
                                            placeholder="/img/process-2.jpg">
                                        <button type="button" class="btn btn-outline-secondary"
                                            onclick="document.getElementById('fileInput2').click()">
                                            <i class="fas fa-upload me-1"></i>Upload
                                        </button>
                                    </div>
                                    <div class="mt-2">
                                        <img id="preview_process_2" src=""
                                            style="max-width: 100px; display: none; border-radius: 4px; border: 1px solid #ddd;">
                                    </div>
                                    <input type="file" id="fileInput2" style="display:none"
                                        onchange="handleFileSelect(this, 'process_image_2', 'preview_process_2')">
                                </div>
                            </div>
                            <div class="col-md-12 mt-4">
                                <label class="form-label-modern fw-bold mb-3">
                                    Visa Categories (Grouped)
                                </label>

                                <div class="row mb-3 p-3 border rounded shadow-sm bg-white">
                                    <div class="col-md-12">
                                        <label class="small text-muted">Categories Main Title</label>
                                        <input type="text" name="visa_categories_title"
                                            class="form-control-modern w-100" placeholder="e.g. Types of USA Visas" />
                                    </div>
                                </div>

                                <div class="row g-4">
                                    <div class="col-md-6">
                                        <div class="p-3 border rounded bg-light shadow-sm">
                                            <label class="small fw-bold mb-2 d-block">Group 1 (3 Items)</label>
                                            <div class="d-flex flex-column gap-2">
                                                <input type="text" name="category_group1[]" class="form-control-modern"
                                                    placeholder="e.g. Student Visa (F1, M1, J1)">
                                                <input type="text" name="category_group1[]" class="form-control-modern"
                                                    placeholder="e.g. Work Visa (H1B, L1)">
                                                <input type="text" name="category_group1[]" class="form-control-modern"
                                                    placeholder="e.g. Tourist Visa (B1/B2)">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="p-3 border rounded bg-light shadow-sm">
                                            <label class="small fw-bold mb-2 d-block">Group 2 (2 Items)</label>
                                            <div class="d-flex flex-column gap-2">
                                                <input type="text" name="category_group2[]" class="form-control-modern"
                                                    placeholder="e.g. Family/Spouse Visa (K1)">
                                                <input type="text" name="category_group2[]" class="form-control-modern"
                                                    placeholder="e.g. Green Card">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mt-4">
                                <label class="form-label-modern fw-bold mb-3">
                                    Visa Service Options (5 Steps)
                                </label>

                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <div class="p-3 border rounded shadow-sm bg-white">
                                            <label class="small text-muted">Service Main Title</label>
                                            <input type="text" name="service_main_title"
                                                class="form-control-modern w-100"
                                                placeholder="e.g. Our USA Visa Service Options" />
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-3">
                                    <% for(let i=1; i<=5; i++) { %>
                                        <div class="col-md-12">
                                            <div class="p-3 border rounded shadow-sm bg-white border-start ">
                                                <div class="d-flex align-items-center mb-2">
                                                    <span class="badge bg-secondary me-2">
                                                        <%= i.toString().padStart(2, '0' ) %>
                                                    </span>
                                                    <input type="text" name="service_step_title[]"
                                                        class="form-control-modern flex-grow-1 fw-bold"
                                                        placeholder="Service Step <%= i %> Title" />
                                                </div>
                                                <textarea name="service_step_description[]"
                                                    class="form-control-modern w-100" rows="2"
                                                    placeholder="Service Step <%= i %> Description"></textarea>
                                            </div>
                                        </div>
                                        <% } %>
                                </div>
                            </div>
                            <div class="col-md-12 mt-4">
                                <label class="form-label-modern fw-bold mb-3">
                                    Related Countries (7 Items)
                                </label>

                                <div class="row g-3">
                                    <% for(let i=1; i<=7; i++) { %>
                                        <div class="col-md-6">
                                            <div class="p-3 border rounded shadow-sm bg-white border-start ">
                                                <div class="row g-2 align-items-center">
                                                    <input type="hidden" name="related_id[]" value="<%= i %>">

                                                    <div class="col-md-5">
                                                        <label class="small text-muted">Country Name</label>
                                                        <input type="text" name="related_name[]"
                                                            class="form-control-modern w-100" placeholder="e.g. Canada">
                                                    </div>

                                                    <div class="col-md-7">
                                                        <label class="small text-muted">Icon Path</label>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control-modern flex-grow-1"
                                                                name="related_icon[]" id="related_icon_<%= i %>"
                                                                placeholder="/img/.../0<%= i %>.png">
                                                            <button type="button"
                                                                class="btn btn-outline-secondary btn-sm"
                                                                onclick="document.getElementById('fileRelated_<%= i %>').click()">
                                                                <i class="fas fa-upload"></i>
                                                            </button>
                                                        </div>

                                                        <div class="mt-2">
                                                            <img id="preview_related_<%= i %>" src="" alt="Preview"
                                                                style="max-width: 60px; height: 60px; object-fit: cover; display: none; border: 1px solid #ddd; padding: 2px; border-radius: 4px;">
                                                        </div>

                                                        <input type="file" id="fileRelated_<%= i %>"
                                                            style="display:none"
                                                            onchange="handleFileSelect(this, 'related_icon_<%= i %>', 'preview_related_<%= i %>')">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <% } %>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tab 3 -->
                    <div class="tab-pane fade" id="tab-contact" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-12 mt-4">
                                <label class="form-label-modern fw-bold mb-3">
                                    Contact Information Section
                                </label>

                                <div class="row g-3 p-3 border rounded shadow-sm bg-white border-start">
                                    <div class="col-md-12">
                                        <label class="small text-muted">Background Image (Contact Section)</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control-modern flex-grow-1"
                                                name="contact_bg_img" id="contact_bg_img" placeholder="/img/.../bg.jpg">
                                            <button type="button" class="btn btn-outline-secondary btn-sm"
                                                onclick="document.getElementById('fileContactBg').click()">
                                                <i class="fas fa-upload"></i>
                                            </button>
                                        </div>
                                        <img id="preview_contact_bg" src=""
                                            style="max-width: 150px; display: none; margin-top: 5px; border-radius: 4px;">
                                        <input type="file" id="fileContactBg" style="display:none"
                                            onchange="handleFileSelect(this, 'contact_bg_img', 'preview_contact_bg')">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="small text-muted">Section Title</label>
                                        <input type="text" name="contact_sectionTitle" class="form-control-modern w-100"
                                            placeholder="e.g. Visa & Immigration">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="small text-muted">Help Text</label>
                                        <input type="text" name="contact_helpText" class="form-control-modern w-100"
                                            placeholder="e.g. Need Help? Book Lab Visit">
                                    </div>

                                    <hr>

                                    <div class="col-md-4">
                                        <label class="small fw-bold">Phone</label>
                                        <input type="text" name="contact_phone_label"
                                            class="form-control-modern w-100 mb-2" placeholder="Label (e.g. Call Us)">
                                        <input type="text" name="contact_phone_value" class="form-control-modern w-100"
                                            placeholder="Value (e.g. +009 438...)">
                                    </div>

                                    <div class="col-md-4">
                                        <label class="small fw-bold">Email</label>
                                        <input type="text" name="contact_email_label"
                                            class="form-control-modern w-100 mb-2" placeholder="Label (e.g. Mail Us)">
                                        <input type="email" name="contact_email_value" class="form-control-modern w-100"
                                            placeholder="Value (e.g. info@...)">
                                    </div>

                                    <div class="col-md-4">
                                        <label class="small fw-bold">Location</label>
                                        <input type="text" name="contact_location_label"
                                            class="form-control-modern w-100 mb-2" placeholder="Label (e.g. Location)">
                                        <input type="text" name="contact_location_address"
                                            class="form-control-modern w-100" placeholder="Address">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <div class="form-footer">
                <button type="button" class="btn-cancel-modern" id="btnBackToList">
                    <i class="fas fa-arrow-left"></i> Back to List
                </button>
                <button type="submit" form="formCountry" class="btn-save-modern">
                    <i class="fas fa-save"></i> Save
                </button>
            </div>
        </div>

        <!-- View Info -->
        <div id="viewContainer" style="display: none; padding: 2rem">
            <div class="row g-4">
                <div class="col-md-6">
                    <div class="info-group">
                        <div class="info-label">Country Name</div>
                        <div class="info-value" id="view-name">-</div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="info-group">
                        <div class="info-label">Services</div>
                        <div class="info-value" id="view-services">-</div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="info-group">
                        <div class="info-label">Description</div>
                        <div class="info-value" id="view-description">-</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="info-group">
                        <div class="info-label">Phone</div>
                        <div class="info-value" id="view-phone">-</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="info-group">
                        <div class="info-label">Email</div>
                        <div class="info-value" id="view-email">-</div>
                    </div>
                </div>
            </div>
            <div class="form-footer">
                <button type="button" class="btn-cancel-modern" id="btnBackFromView">
                    <i class="fas fa-arrow-left"></i> Back to List
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    const apiData = {
        hero: {
            title: "Visa Service",
            summaryList: [
                {
                    id: 1,
                    slug: "france",
                    icon: "/img/home-2/visa/03.png",
                    services: [
                        "Student Visa & Admission",
                        "Work Visa – H1B",
                        "Work permit for Canada",
                        "Student Visa for Canada",
                    ],
                    detailedView: {
                        activeCountry: {
                            title: "COUNTRY FRANCE",
                            mainImage: "/img/inner-page/country-details/details-1.jpg",
                            description:
                                "France offers world-class education and cultural experiences...",
                            additionalInfo:
                                "Our consultancy provides complete guidance for study visas...",
                            tagline: "Experience the best of European education",
                            contactInfo: {
                                sectionTitle: "Visa & Immigration",
                                phone: { value: "+33 1 234 5678" },
                                email: { value: "info@france-visa.com" },
                                location: { address: "Paris, France" },
                            },
                        },
                    },
                },
                {
                    id: 2,
                    name: "UK",
                    slug: "uk",
                    icon: "/img/home-2/visa/11.png",
                    services: [
                        "Student Visa & Admission",
                        "Work Visa – H1B",
                        "Work permit for Canada",
                    ],
                    detailedView: null,
                },
                {
                    id: 3,
                    name: "Canada",
                    slug: "canada",
                    icon: "/img/home-2/visa/02.png",
                    services: ["Student Visa & Admission", "Work Visa – H1B"],
                    detailedView: null,
                },
            ],
        },
    };

    let countriesData = {};

    function attachEventListeners() {
        document.querySelectorAll(".btn-view-modern").forEach((btn) => {
            btn.addEventListener("click", function () {
                viewCountry(parseInt(this.getAttribute("data-id")));
            });
        });

        document.querySelectorAll(".btn-edit-modern").forEach((btn) => {
            btn.addEventListener("click", function () {
                editCountry(parseInt(this.getAttribute("data-id")));
            });
        });

        document.querySelectorAll(".btn-delete-modern").forEach((btn) => {
            btn.addEventListener("click", function () {
                deleteCountry(parseInt(this.getAttribute("data-id")));
            });
        });
    }

    function showListView() {
        document.getElementById("tableContainer").style.display = "block";
        document.getElementById("formContainer").style.display = "none";
        document.getElementById("viewContainer").style.display = "none";
        document.getElementById("cardHeader").style.display = "flex";
    }

    function showFormView() {
        document.getElementById("tableContainer").style.display = "none";
        document.getElementById("formContainer").style.display = "block";
        document.getElementById("viewContainer").style.display = "none";
        document.getElementById("cardHeader").style.display = "none";
    }

    function showViewView() {
        document.getElementById("tableContainer").style.display = "none";
        document.getElementById("formContainer").style.display = "none";
        document.getElementById("viewContainer").style.display = "block";
        document.getElementById("cardHeader").style.display = "none";
    }

    function viewCountry(countryId) {
        const country = countriesData[countryId];
        if (country) {
            document.getElementById("view-name").textContent = country.name || "-";
            document.getElementById("view-services").textContent =
                country.services.join(", ") || "-";

            if (country.detailedView && country.detailedView.activeCountry) {
                const details = country.detailedView.activeCountry;
                document.getElementById("view-description").textContent =
                    details.description || "-";
                document.getElementById("view-phone").textContent =
                    details.contactInfo?.phone?.value || "-";
                document.getElementById("view-email").textContent =
                    details.contactInfo?.email?.value || "-";
            }

            showViewView();
        }
    }

    function editCountry(countryId) {
        const country = countriesData[countryId];
        if (country) {
            document.getElementById("country_id").value = country.id;
            document.querySelector('input[name="name"]').value = country.name || "";
            //   document.querySelector('input[name="slug"]').value = country.slug || "";
            document.querySelector('input[name="icon"]').value = country.icon || "";

            const serviceInputs = document.querySelectorAll(
                'input[name="services[]"]',
            );
            serviceInputs.forEach((input) => (input.value = ""));
            country.services.forEach((service, index) => {
                if (serviceInputs[index]) serviceInputs[index].value = service;
            });

            if (country.detailedView && country.detailedView.activeCountry) {
                const details = country.detailedView.activeCountry;
                document.querySelector('input[name="detail_title"]').value =
                    details.title || "";
                document.querySelector('textarea[name="description"]').value =
                    details.description || "";
                document.querySelector('input[name="contact_phone"]').value =
                    details.contactInfo?.phone?.value || "";
                document.querySelector('input[name="contact_email"]').value =
                    details.contactInfo?.email?.value || "";
            }

            const firstTab = document.querySelector(".nav-tabs-modern .nav-link");
            bootstrap.Tab.getOrCreateInstance(firstTab).show();

            showFormView();
        }
    }

    function deleteCountry(countryId) {
        const country = countriesData[countryId];
        if (confirm(`Delete "${country.name}"?`)) {
            const index = apiData.hero.summaryList.findIndex(
                (c) => c.id === countryId,
            );
            if (index !== -1) {
                apiData.hero.summaryList.splice(index, 1);
                delete countriesData[countryId];
                loadTableData();
                alert("Deleted!");
            }
        }
    }

    document
        .getElementById("btnAddCountry")
        .addEventListener("click", function () {
            document.getElementById("formCountry").reset();
            document.getElementById("country_id").value = "";
            const firstTab = document.querySelector(".nav-tabs-modern .nav-link");
            bootstrap.Tab.getOrCreateInstance(firstTab).show();
            showFormView();
        });

    document
        .getElementById("btnBackToList")
        .addEventListener("click", showListView);
    document
        .getElementById("btnBackFromView")
        .addEventListener("click", showListView);

    document
        .getElementById("formCountry")
        .addEventListener("submit", function (e) {
            e.preventDefault();
            const formData = new FormData(this);
            const countryId = formData.get("country_id");
            const services = Array.from(
                document.querySelectorAll('input[name="services[]"]'),
            )
                .map((input) => input.value)
                .filter((val) => val.trim());

            const countryData = {
                id: countryId ? parseInt(countryId) : Date.now(),
                name: formData.get("name"),
                icon: formData.get("icon"),
                services: services,
                detailedView: {
                    activeCountry: {
                        title: formData.get("detail_title"),
                        mainImage: formData.get("mainImage"),
                        description: formData.get("description"),
                        additionalInfo: formData.get("additionalInfo"),
                        tagline: formData.get("tagline"),
                        contactInfo: {
                            sectionTitle: formData.get("contact_sectionTitle"),
                            phone: { value: formData.get("contact_phone") },
                            email: { value: formData.get("contact_email") },
                            location: { address: formData.get("contact_location") },
                        },
                    },
                },
            };

            if (countryId) {
                const index = apiData.hero.summaryList.findIndex(
                    (c) => c.id === parseInt(countryId),
                );
                if (index !== -1) {
                    apiData.hero.summaryList[index] = countryData;
                    alert("Updated!");
                }
            } else {
                apiData.hero.summaryList.push(countryData);
                alert("Added!");
            }

            loadTableData();
            showListView();
        });

    document.addEventListener("DOMContentLoaded", loadTableData);
</script>