@extends('layouts.app')

@section('title', 'Schema Configuration')

@push('styles')
<style>
    /* --- Dashboard Row Styling --- */
    .setting-group {
        transition: background-color 0.2s ease;
        /* cursor: pointer; */
    }
    .setting-group:hover {
        background-color: rgba(37, 99, 235, 0.03); /* Very subtle blue hover */
    }
    
    /* --- Left Side Icons --- */
    .icon-box {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background-color: rgba(37, 99, 235, 0.08);
        color: var(--brand-primary, #2563EB);
        font-size: 1.3rem;
    }
    
    /* --- Checkbox Styling --- */
    .form-check-input {
        width: 1.5em;
        height: 1.5em;
        cursor: pointer;
        border: 2px solid #D1D5DB;
        border-radius: 4px;
        margin-top: 0; /* Fix alignment */
        vertical-align: middle;
        transition: all 0.2s ease;
    }
    .form-check-input:checked {
        background-color: var(--brand-primary, #2563EB);
        border-color: var(--brand-primary, #2563EB);
    }
    
    /* --- Status Text Styling (PERFECT ALIGNMENT FIX) --- */
    .status-label {
        font-size: 0.75rem; /* 12px */
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 65px; /* Keeps text form jumping */
        margin-left: 12px; /* Space between checkbox and text */
        
        /* Centering Logic */
        display: inline-block;
        line-height: 1.3em; 
    }
    
    .status-enabled { color: #059669; /* Green */ }
    .status-disabled { color: #9CA3AF; /* Gray */ }

    

    /* --- Toast Notifications (Compact Horizontal) --- */
    #toast-container-bottom {
        position: fixed;
        bottom: 1rem;      /* closer to bottom */
        right: 1rem;       /* closer to right */
        z-index: 1050;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .toast-message {
        min-width: 240px;        /* reduced width */
        max-width: 320px;
        background: #ffffff;
        color: #1F2937;
        padding: 0.6rem 0.9rem;  /* less vertical space */
        border-radius: 6px;      /* tighter corners */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
        border-left: 3px solid #059669;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.85rem;
        animation: slideInRight 0.25s ease-out;
    }

    /* Icons */
    .toast-message i {
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    /* Animations */
    @keyframes slideInRight {
        from { transform: translateX(40px); opacity: 0; }
        to   { transform: translateX(0); opacity: 1; }
    }

    @keyframes fadeOutRight {
        from { transform: translateX(0); opacity: 1; }
        to   { transform: translateX(40px); opacity: 0; }
    }

</style>
@endpush

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-9">
            
            <div class="d-flex justify-content-between align-items-center mb-2">
                <div>
                    <h4 class="fw-bold mb-1 d-flex align-items-center gap-2">
                        <i class="bi bi-box text-secondary "></i>
                        Schema Settings
                    </h4>
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-body p-0">
                    
                    <form id="schemaForm" action="{{ route('schema.save', ['handle' => $shop->handle]) }}" method="POST">
                        @csrf

                        <div class="p-3 bg-light border-bottom">
                            <div class="d-flex align-items-start gap-3">
                                <i class="bi bi-info-circle-fill text-primary mt-1"></i>
                                <div>
                                    <h6 class="fw-bold text-muted mb-1">Theme Integration Required</h6>
                                    <p class="text-muted small mb-0">
                                        For these settings to take effect, the <strong>App Embed</strong> must be enabled in your theme editor.
                                        <a href="https://{{ $shop->handle }}.myshopline.com/admin/theme/editor/editing/Home" 
                                            target="_blank" 
                                            class="text-primary d-inline-flex align-items-center" >
                                            Open Theme Editor <i class="bi bi-box-arrow-up-right ms-1"></i>
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="list-group list-group-flush">
                            <div class="list-group-item p-4 setting-group py-3" >
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex gap-3 align-items-center">
                                        <div class="icon-box"><i class="bi bi-journal-richtext"></i></div>
                                        <div>
                                            <h6 class="fw-bold mb-1">Blog Schema</h6>
                                            <p class="text-muted small mb-0">Enhance blog page SEO</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <input class="form-check-input schema-toggle" type="checkbox" id="article_schema" name="article_schema" onclick="event.stopPropagation()" {{ ($settings['article_enabled'] ?? false) ? 'checked' : '' }}>
                                        <span id="article_schema_status" class="status-label status-disabled">Disabled</span>
                                    </div>
                                </div>
                            </div>

                            <div class="list-group-item p-4 setting-group py-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex gap-3 align-items-center">
                                        <div class="icon-box"><i class="bi bi-signpost-split"></i></div>
                                        <div>
                                            <h6 class="fw-bold mb-1">Breadcrumbs Schema</h6>
                                            <p class="text-muted small mb-0">Enhance breadcrumbs page SEO</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <input class="form-check-input schema-toggle" type="checkbox" id="breadcrumb_schema" name="breadcrumb_schema" onclick="event.stopPropagation()" {{ ($settings['breadcrumb_enabled'] ?? false) ? 'checked' : '' }}>
                                        <span id="breadcrumb_schema_status" class="status-label status-disabled">Disabled</span>
                                    </div>
                                </div>
                            </div>

                            <div class="list-group-item p-4 setting-group py-3" >
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex gap-3 align-items-center">
                                        <div class="icon-box"><i class="bi bi-collection"></i></div>
                                        <div>
                                            <h6 class="fw-bold mb-1">Collection Schema</h6>
                                            <p class="text-muted small mb-0">Enhance collection page SEO</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <input class="form-check-input schema-toggle" type="checkbox" id="collection_schema" name="collection_schema" onclick="event.stopPropagation()" {{ ($settings['collection_enabled'] ?? false) ? 'checked' : '' }}>
                                        <span id="collection_schema_status" class="status-label status-disabled">Disabled</span>
                                    </div>
                                </div>
                            </div>

                            <div class="list-group-item p-4 setting-group py-3" >
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex gap-3 align-items-center">
                                        <div class="icon-box"><i class="bi bi-globe"></i></div>
                                        <div>
                                            <h6 class="fw-bold mb-1">Homepage Schema</h6>
                                            <p class="text-muted small mb-0">Enhance homepage page SEO</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <input class="form-check-input schema-toggle" type="checkbox" id="website_schema" name="website_schema" onclick="event.stopPropagation()" {{ ($settings['website_enabled'] ?? false) ? 'checked' : '' }}>
                                        <span id="website_schema_status" class="status-label status-disabled">Disabled</span>
                                    </div>
                                </div>
                            </div>


                            <div class="list-group-item p-4 setting-group py-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex gap-3 align-items-center">
                                        <div class="icon-box"><i class="bi bi-file-earmark-text"></i></div>
                                        <div>
                                            <h6 class="fw-bold mb-1">Page Schema</h6>
                                            <p class="text-muted small mb-0">Enhance page page SEO</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <input class="form-check-input schema-toggle" type="checkbox" id="page_schema" name="page_schema" onclick="event.stopPropagation()" {{ ($settings['page_enabled'] ?? false) ? 'checked' : '' }}>
                                        <span id="page_schema_status" class="status-label status-disabled">Disabled</span>
                                    </div>
                                </div>
                            </div>


                            <div class="list-group-item p-4 setting-group py-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex gap-3 align-items-center">
                                        <div class="icon-box"><i class="bi bi-cart"></i></div>
                                        <div>
                                            <h6 class="fw-bold mb-1">Product Schema</h6>
                                            <p class="text-muted small mb-0">Enhance product page SEO</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <input class="form-check-input schema-toggle" type="checkbox" id="product_schema" name="product_schema" onclick="event.stopPropagation()" {{ ($settings['product_enabled'] ?? false) ? 'checked' : '' }}>
                                        <span id="product_schema_status" class="status-label status-disabled">Disabled</span>
                                    </div>
                                </div>
                            </div>                         

                        </div>

                        <div class="card-footer bg-white p-4 d-flex justify-content-end border-top">
                            <button type="submit" id="saveBtn" class="btn btn-primary px-5 py-2">
                                <i class="bi bi-check2-circle me-2"></i>Save Settings
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="toast-container-bottom"></div>

@endsection

@push('scripts')
<script>
function toggleCheckbox(id) {
    document.getElementById(id).click();
}

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('schemaForm');
    const saveBtn = document.getElementById('saveBtn');
    
    // --- Dynamic Label Logic ---
    const toggles = document.querySelectorAll('.schema-toggle');

    function updateLabel(checkbox) {
        const label = document.getElementById(checkbox.id + '_status');
        if (!label) return;

        if (checkbox.checked) {
            label.textContent = 'Enabled';
            label.classList.remove('status-disabled');
            label.classList.add('status-enabled');
        } else {
            label.textContent = 'Disabled';
            label.classList.remove('status-enabled');
            label.classList.add('status-disabled');
        }
    }

    // Init & Listen
    toggles.forEach(toggle => {
        updateLabel(toggle);
        toggle.addEventListener('change', () => updateLabel(toggle));
    });

    // --- Toast Logic ---
    function showBottomToast(message, type = 'success') {
        const container = document.getElementById('toast-container-bottom');
        const toast = document.createElement('div');
        const color = type === 'success' ? '#059669' : '#DC2626';
        const icon = type === 'success' ? 'bi-check-circle-fill' : 'bi-exclamation-triangle-fill';

        toast.className = 'toast-message';
        toast.style.borderLeftColor = color;

        toast.innerHTML = `
            <i class="bi ${icon}" style="color:${color};"></i>
            <span style="white-space:nowrap;">${message}</span>
        `;

        container.appendChild(toast);
        setTimeout(() => {
            toast.style.animation = 'fadeOutRight 0.4s forwards';
            toast.addEventListener('animationend', () => toast.remove());
        }, 4000);
    }

    // --- Submit Logic ---
    if (form) {
        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            const originalText = saveBtn.innerHTML;
            saveBtn.disabled = true;
            saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving...';

            try {
                const response = await fetch(form.action, {
                    method: 'POST',
                    body: new FormData(form),
                    headers: {'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json'}
                });
                const data = await response.json();
                
                if (response.ok && (data.status === 'success' || data.success)) {
                    showBottomToast(data.message || 'Settings saved successfully!', 'success');
                } else {
                    throw new Error(data.message || 'An unknown error occurred.');
                }
            } catch (error) {
                showBottomToast(error.message, 'error');
            } finally {
                saveBtn.disabled = false;
                saveBtn.innerHTML = originalText;
            }
        });
    }
});
</script>
@endpush