<!doctype html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    @php
        $siteSettings = \App\SiteSetting::getAll();
        $siteName = $siteSettings['site_name'] ?? 'كلمات الأغاني';
        $siteLogoText = $siteSettings['site_logo_text'] ?? 'كلمات';
        $favicon = $siteSettings['favicon'] ?? '/favicon.png';
    @endphp
    <meta name="description" content="{{ $siteName }}">
    <link rel="icon" href="{{ $favicon }}" type="image/png">
    <link rel="shortcut icon" href="{{ $favicon }}" type="image/png">
    <link rel="apple-touch-icon" href="{{ $favicon }}">
    <title>@yield('title', $siteName)</title>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <style type="text/css">
    * { font-family: 'Cairo', Verdana, Arial, sans-serif !important; }
    html {
        background: #CCCCDD;
    }
    body {
        direction: rtl; text-align: right;
        background: #CCCCDD; color: #000; margin: 0;
        min-height: 100vh; font-size: 1em;
        overflow-x: hidden;
    }

    /* ===== LAYOUT WRAPPER (full-width like azlyrics) ===== */
    .az-wrap {
        width: 100%;
        min-width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: #CCCCDD;
    }
    @media (max-width: 768px) {
        .az-wrap { min-width: 0; }
    }

    /* ===== TOP BAR (Logo + Letters + Search in ONE bar) ===== */
    .az-topbar {
        background: #7777CC;
        display: flex; align-items: center;
        padding: 8px 20px; gap: 15px;
        border-bottom: 2px solid #CCCCDD;
        flex-wrap: wrap;
    }
    .az-topbar-logo {
        font-size: 2em; font-weight: 900;
        color: #FFFFCC; text-decoration: none !important;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        white-space: nowrap; flex-shrink: 0;
        line-height: 1;
    }
    .az-topbar-logo:hover { color: #fff; text-decoration: none !important; }
    .az-topbar-letters {
        flex: 1; text-align: center;
        line-height: 1.4;
    }
    .az-topbar-row { white-space: normal; display: flex; flex-wrap: wrap; justify-content: center; }
    .az-topbar-row a {
        color: #fff; text-decoration: none;
        padding: 4px 6px; font-weight: 700;
        font-size: 1.2em; display: inline-flex;
        align-items: center; justify-content: center;
        min-height: 32px;
        border-radius: 3px;
        transition: background-color 0.15s, color 0.15s;
        margin: 1px;
    }
    .az-topbar-row a.az-topbar-logoicon {
        margin-left: 4px;
    }
    .az-topbar-row a.az-topbar-logoicon img {
        display: block;
    }
    .az-topbar-row a:hover { background-color: #fff; color: #7777CC; text-decoration: none; }
    .az-topbar-row a.active { background-color: #fff; color: #7777CC; text-decoration: none; }
    .az-topbar-search {
        flex-shrink: 0; white-space: nowrap;
    }
    .az-topbar-search form { display: flex; align-items: center; gap: 4px; }
    .az-topbar-search input[type="search"] {
        background: #fff; color: #000;
        border: 1px inset #EEE; padding: 4px 10px;
        font-size: 0.9em; width: 180px;
        direction: rtl; text-align: right;
    }
    .az-topbar-search button {
        background: #9999CC; color: #fff;
        border: 1px outset #7777CC; padding: 4px 14px;
        font-weight: 700; cursor: pointer; font-size: 0.9em;
    }
    .az-topbar-search button:hover { color: #FFFFCC; }

    /* ===== MENU BAR ===== */
    .az-menu {
        background: #9999CC;
        padding: 0; margin: 0;
        list-style: none; display: flex;
        flex-wrap: wrap; justify-content: center;
        border-top: 2px solid #CCCCDD;
        border-bottom: 2px solid #CCCCDD;
    }
    .az-menu li {
        border-left: 2px solid #CCCCDD;
    }
    .az-menu li:last-child { border-left: none; }
    .az-menu a {
        color: #fff; text-decoration: none;
        padding: 5px 12px; display: block;
        font-weight: 600; font-size: 0.9em;
        white-space: nowrap;
    }
    .az-menu a:hover { color: #FFFFCC; text-decoration: underline; }
    .az-menu .badge { font-size: 0.7em; background: #dc3545; color: #fff; padding: 2px 5px; border-radius: 2px; vertical-align: top; }

    /* ===== CONTENT AREA ===== */
    .az-content {
        background: #CCCCDD;
        padding: 20px 40px;
        flex: 1;
        color: #000;
    }
    .az-content a { color: #0000EE; }
    .az-content a:visited { color: #551A8B; }
    .az-content a:hover { color: #000; text-decoration: underline; }

    /* ===== HEADINGS ===== */
    .az-content h1 { color: #333; font-size: 1.6em; font-weight: 800; }
    .az-content h2 { color: #333; font-size: 1.4em; font-weight: 700; }
    .az-content h3 { color: #333; font-size: 1.2em; font-weight: 700; }
    .az-content h4 { color: #333; font-size: 1.1em; font-weight: 700; }
    .az-content hr { border-color: #9999CC; }

    /* ===== WELCOME BOX ===== */
    .welcome-box { text-align: center; padding: 20px 10px; margin-bottom: 10px; }
    .welcome-box h1 { color: #333; font-weight: 800; font-size: 1.8em; margin-bottom: 5px; }
    .welcome-box p { color: #444; margin: 3px 0; }

    /* ===== HOT SONGS ===== */
    .hot-section { margin-bottom: 15px; }
    .hot-section h3 {
        background: #7777CC; color: #fff;
        padding: 5px 12px; font-size: 1em; font-weight: 700;
        margin-bottom: 8px; display: inline-block;
    }
    .hot-section ul { list-style: none; padding: 0; margin: 0; }
    .hot-section li { padding: 3px 5px; border-bottom: 1px solid #bbbbd0; }
    .hot-section li a { color: #0000EE; font-weight: 600; }
    .hot-section li a:hover { color: #000; }

    /* ===== ARTISTS LIST ===== */
    .artists-columns { column-count: 3; column-gap: 20px; }
    @media (max-width: 768px) { .artists-columns { column-count: 2; } }
    @media (max-width: 480px) { .artists-columns { column-count: 1; } }
    .artist-item {
        break-inside: avoid; padding: 2px 0;
        border-bottom: 1px dotted #9999CC;
    }
    .artist-item a { color: #0000EE; font-size: 0.95em; text-decoration: none; }
    .artist-item a:hover { color: #000; text-decoration: underline; }

    /* ===== FOOTER ===== */
    .az-footer {
        background: #9999CC; color: #fff;
        text-align: center; padding: 12px 15px;
        font-size: 0.85em;
        border-top: 2px solid #CCCCDD;
    }
    .az-footer a { color: #fff; text-decoration: none; }
    .az-footer a:hover { color: #FFFFCC; text-decoration: underline; }
    .footer-links { margin-bottom: 5px; }
    .footer-links a { margin: 0 8px; }
    .footer-sep { color: #CCCCDD; }

    /* ===== ALERTS ===== */
    .alert-secondary { background: #bbbbd0; border: 1px solid #9999CC; color: #333; }
    .alert-info { background: #d0d0e8; border: 1px solid #9999CC; color: #333; }
    .alert-success { background: #d0e8d0; border: 1px solid #8c8; color: #262; }
    .alert-danger { background: #e8d0d0; border: 1px solid #c88; color: #a00; }
    .alert-warning { background: #e8e8d0; border: 1px solid #cc8; color: #664; }
    .alert-primary { background: #d0d0e8; border: 1px solid #9999CC; color: #336; }

    /* ===== BUTTONS ===== */
    .btn-primary {
        background: #7777CC; border: 1px outset #9999CC;
        color: #fff; font-weight: 700; padding: 6px 18px;
    }
    .btn-primary:hover { background: #6666BB; color: #FFFFCC; border-color: #7777CC; }
    .btn-primary:focus { box-shadow: none; }
    .btn-danger { background: #cc4444; border: 1px outset #dd6666; color: #fff; font-weight: 700; }
    .btn-danger:hover { background: #bb3333; color: #FFFFCC; }
    .btn-success { background: #44aa44; border: 1px outset #66cc66; color: #fff; font-weight: 700; }
    .btn-outline-primary {
        color: #7777CC; border: 1px solid #7777CC;
        background: transparent; font-weight: 700;
    }
    .btn-outline-primary:hover { background: #7777CC; color: #fff; }
    .btn-outline-secondary { color: #666; border: 1px solid #9999CC; background: #CCCCDD; }
    .btn-outline-secondary:hover { background: #bbbbd0; color: #333; }

    /* ===== CARDS ===== */
    .card { border: 2px solid #9999CC; background: #CCCCDD; box-shadow: none; border-radius: 0; }
    .card-header { background: #7777CC; border-bottom: 2px solid #9999CC; color: #fff; font-weight: 700; border-radius: 0 !important; }
    .card-body { color: #000; background: #CCCCDD; }

    /* ===== FORMS ===== */
    .form-control {
        background: #fff; border: 1px inset #EEE; color: #000;
        text-align: right; direction: rtl; border-radius: 0;
    }
    .form-control:focus {
        border-color: #7777CC; box-shadow: none;
        color: #000; background: #fff;
    }
    label, .form-check-label, .col-form-label { color: #000; font-weight: 600; }
    .form-check-inline { margin-right: 0; margin-left: 1rem; }
    textarea.form-control { text-align: right; direction: rtl; }
    select.form-control { border-radius: 0; }

    /* ===== TABLE ===== */
    .table { color: #000; }
    .table td, .table th { border-color: #9999CC; text-align: right; vertical-align: middle; }
    .table thead th { background: #7777CC; color: #fff; border-bottom: 2px solid #9999CC; font-weight: 700; }
    .table a { color: #0000EE; font-weight: 600; }
    .table a:hover { color: #000; }
    .table-striped tbody tr:nth-of-type(odd) { background: #c0c0d5; }
    .table-striped tbody tr:nth-of-type(even) { background: #CCCCDD; }

    /* ===== LIST GROUP ===== */
    .list-group-item {
        background: #CCCCDD; border-color: #9999CC;
        color: #000; text-align: right; border-radius: 0;
    }
    .list-group-item a { color: #0000EE; font-weight: 600; }
    .list-group-item:hover { background: #c0c0d5; }

    /* ===== PAGINATION ===== */
    .pagination .page-link { background: #CCCCDD; border-color: #9999CC; color: #0000EE; border-radius: 0; }
    .pagination .page-item.active .page-link { background: #7777CC; border-color: #7777CC; color: #fff; }

    /* ===== MISC ===== */
    .content-box { background: #CCCCDD; padding: 15px; }
    .badge-danger { background: #dc3545; font-size: 0.7em; padding: 2px 5px; border-radius: 2px; }
    .badge-warning { background: #cc8800; color: #fff; }
    .badge-success { background: #44aa44; color: #fff; }
    .badge-info { background: #7777CC; color: #fff; }
    .invalid-feedback { text-align: right; color: #cc0000; }
    #flash .alert { border-radius: 0; }
    pre { color: #000; background: #bbbbd0; border: 1px solid #9999CC; padding: 10px; border-radius: 0; }
    .checkbox label { color: #000; }
    hr { border-color: #9999CC; }

    /* ===== AD SPACE ===== */
    .az-ad-space {
        background: #bbbbd0; border: 1px solid #9999CC;
        text-align: center; padding: 8px; margin: 5px 0;
        color: #666; font-size: 0.85em;
    }

    /* ===== SIDEBAR ===== */
    .az-sidebar {
        width: 160px;
        flex-shrink: 0;
        padding: 20px 0;
    }
    @media (max-width: 768px) {
        .az-sidebar { display: none; }
    }

    /* ===== RESPONSIVE ===== */

    /* Tablets */
    @media (max-width: 992px) {
        .az-topbar { padding: 8px 15px; gap: 8px; }
        .az-topbar-logo { font-size: 1.6em; }
        .az-content { padding: 15px 20px; }
        .az-menu a { padding: 5px 8px; font-size: 0.85em; }
    }

    /* Mobile */
    @media (max-width: 768px) {
        .az-topbar {
            flex-direction: column;
            padding: 8px 10px;
            gap: 5px;
            align-items: center;
        }
        .az-topbar-logo { font-size: 1.5em; text-align: center; }
        .az-topbar-letters { width: 100%; text-align: center; }
        .az-topbar-row {
            white-space: normal !important;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2px;
        }
        .az-topbar-row a {
            font-size: 0.85em;
            padding: 2px 4px;
            display: inline-block;
        }
        .az-topbar-search {
            width: 100%;
            text-align: center;
        }
        .az-topbar-search form {
            justify-content: center;
            width: 100%;
        }
        .az-topbar-search input[type="search"] {
            width: 60%;
            max-width: 200px;
            font-size: 0.85em;
        }
        .az-topbar-search button {
            font-size: 0.85em;
            padding: 4px 10px;
        }

        /* Menu */
        .az-menu {
            flex-wrap: wrap;
            justify-content: center;
            gap: 0;
        }
        .az-menu li {
            border-left: 1px solid #CCCCDD;
        }
        .az-menu a {
            padding: 5px 8px;
            font-size: 0.8em;
        }

        /* Content */
        .az-content {
            padding: 10px 12px;
        }
        .az-content h1 { font-size: 1.3em; }
        .az-content h2 { font-size: 1.2em; }
        .az-content h3 { font-size: 1.1em; }
        .az-content h4 { font-size: 1em; }

        /* Welcome box */
        .welcome-box h1 { font-size: 1.4em; }
        .welcome-box p { font-size: 0.9em; }

        /* Hot sections side by side → stacked */
        .hot-section { margin-bottom: 10px; }

        /* Artists columns */
        .artists-columns { column-count: 2; }

        /* Tables */
        .table { font-size: 0.9em; }
        .table td, .table th { padding: 6px 8px; }

        /* Cards */
        .card { margin-bottom: 10px; }

        /* Footer */
        .az-footer { padding: 10px; font-size: 0.8em; }
        .footer-links a { margin: 0 4px; display: inline-block; }

        /* Breadcrumb */
        nav ol { font-size: 0.85em; }

        /* Ad space */
        .az-ad-space { font-size: 0.8em; padding: 5px; }
    }

    /* Small phones */
    @media (max-width: 480px) {
        .az-topbar-logo { font-size: 1.3em; }
        .az-topbar-row a {
            font-size: 0.75em;
            padding: 1px 3px;
        }
        .az-topbar-search input[type="search"] {
            width: 55%;
            font-size: 0.8em;
        }

        .az-menu a {
            padding: 4px 6px;
            font-size: 0.75em;
        }

        .az-content {
            padding: 8px 8px;
        }
        .az-content h1 { font-size: 1.2em; }

        .welcome-box { padding: 10px 5px; }
        .welcome-box h1 { font-size: 1.2em; }

        .artists-columns { column-count: 1; }

        .table { font-size: 0.85em; }
        .table td, .table th { padding: 5px 6px; }

        .footer-links a { margin: 0 3px; font-size: 0.75em; }

        /* Share buttons smaller */
        nav ol { font-size: 0.78em; gap: 3px !important; }
    }
    </style>
</head>
<body>
    <div class="az-wrap">
        @include('layouts.header')
        @include('layouts.ads', ['placement' => 'header_top'])
        <div class="az-layout" style="display: flex; flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; gap: 12px; padding: 0 15px;">
            @unless(request()->is('admin') || request()->is('admin/*'))
            @php $rightAds = \App\Ad::getByPlacement('sidebar_right'); @endphp
            @if($rightAds->count() > 0)
            <aside class="az-sidebar az-sidebar-right" style="width: 160px; flex-shrink: 0; padding: 20px 0;">
                @include('layouts.ads', ['placement' => 'sidebar_right'])
            </aside>
            @endif
            @endunless
            
            <div class="az-content" style="flex: 1; min-width: 0;">
                @include('layouts.ads', ['placement' => 'before_content'])
                @yield('content')
                @include('layouts.ads', ['placement' => 'after_content'])
            </div>
            
            @unless(request()->is('admin') || request()->is('admin/*'))
            @php $leftAds = \App\Ad::getByPlacement('sidebar_left'); @endphp
            @if($leftAds->count() > 0)
            <aside class="az-sidebar az-sidebar-left" style="width: 160px; flex-shrink: 0; padding: 20px 0;">
                @include('layouts.ads', ['placement' => 'sidebar_left'])
            </aside>
            @endif
            @endunless
        </div>
        @include('layouts.ads', ['placement' => 'footer_top'])
        @include('layouts.footer')
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
    @php
        $adsenseEnabled = \App\SiteSetting::get('adsense_enabled', '0');
        $adsensePublisherId = \App\SiteSetting::get('adsense_publisher_id', '');
    @endphp
    @if($adsenseEnabled == '1' && $adsensePublisherId)
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{ $adsensePublisherId }}" crossorigin="anonymous"></script>
    @endif

    @php $recaptchaOn = \App\SiteSetting::get('recaptcha_enabled', '0'); @endphp
    @if($recaptchaOn == '1')
    <script src="https://www.google.com/recaptcha/api.js?hl=ar" async defer></script>
    @endif
    <script>
        $('#flash').not('.alert-important').delay(3000).fadeOut(350);
        $(".delete").on("submit", function(){ return confirm("هل أنت متأكد من هذا الإجراء؟"); });
    </script>
</body>
</html>
