@extends('layouts.app')

@section('title', 'نظام العمل')

@push('styles')
<style>
    /* ═══ Labor Law page — ll- prefix ═══ */
    .ll-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        flex-wrap: wrap;
        gap: 12px;
    }
    .ll-header h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1B2A4A;
        margin: 0;
    }
    .ll-total-badge {
        background: rgba(27,42,74,0.08);
        color: #1B2A4A;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    /* Country selector */
    .ll-countries {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
        margin-bottom: 24px;
    }
    .ll-country-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
        background: #fff;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        color: #374151;
        font-size: 0.88rem;
        font-weight: 500;
    }
    .ll-country-btn:hover {
        border-color: #1B2A4A;
        background: rgba(27,42,74,0.03);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .ll-country-btn.active {
        border-color: #1B2A4A;
        background: #1B2A4A;
        color: #fff;
        box-shadow: 0 2px 8px rgba(27,42,74,0.25);
    }
    .ll-country-flag {
        font-size: 1.3rem;
        line-height: 1;
    }
    .ll-country-count {
        margin-right: auto;
        font-size: 0.75rem;
        opacity: 0.7;
        background: rgba(0,0,0,0.06);
        padding: 2px 8px;
        border-radius: 10px;
    }
    .ll-country-btn.active .ll-country-count {
        background: rgba(255,255,255,0.2);
    }

    /* Search & filters card */
    .ll-card {
        background: #fff;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        margin-bottom: 24px;
    }
    .ll-search-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }
    .ll-search-wrapper {
        position: relative;
        flex: 1;
        min-width: 250px;
    }
    .ll-search-wrapper input {
        width: 100%;
        padding: 12px 44px 12px 16px;
        border: 1px solid #d1d5db;
        border-radius: 10px;
        font-size: 0.95rem;
        direction: rtl;
        box-sizing: border-box;
    }
    .ll-search-wrapper input:focus {
        outline: none;
        border-color: #E8502F;
        box-shadow: 0 0 0 3px rgba(232,80,47,0.1);
    }
    .ll-search-wrapper .ll-search-icon {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
    }
    .ll-btn-primary {
        background: #E8502F;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 0.9rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background 0.2s;
    }
    .ll-btn-primary:hover {
        background: #d4462a;
    }

    /* Category tabs */
    .ll-category-tabs {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .ll-category-tab {
        padding: 8px 18px;
        border-radius: 20px;
        font-size: 0.85rem;
        border: 1px solid #d1d5db;
        background: #fff;
        color: #374151;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
    }
    .ll-category-tab:hover,
    .ll-category-tab.active {
        background: #1B2A4A;
        color: #fff;
        border-color: #1B2A4A;
    }

    /* Article cards */
    .ll-category-group {
        margin-bottom: 28px;
    }
    .ll-category-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1B2A4A;
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 2px solid #E8502F;
        display: inline-block;
    }
    .ll-article {
        background: #fff;
        border: 1px solid #f3f4f6;
        border-radius: 12px;
        margin-bottom: 10px;
        overflow: hidden;
        transition: box-shadow 0.2s;
    }
    .ll-article:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .ll-article-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 20px;
        cursor: pointer;
        gap: 12px;
    }
    .ll-article-header:hover {
        background: #f9fafb;
    }
    .ll-article-title-section {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
    }
    .ll-article-number {
        background: #1B2A4A;
        color: #fff;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
    }
    .ll-article-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: #1B2A4A;
    }
    .ll-article-cat-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        background: rgba(27,42,74,0.08);
        color: #1B2A4A;
        white-space: nowrap;
    }
    .ll-article-toggle {
        font-size: 1.1rem;
        color: #9ca3af;
        transition: transform 0.3s;
    }
    .ll-article.expanded .ll-article-toggle {
        transform: rotate(180deg);
    }
    .ll-article-content {
        display: none;
        padding: 0 20px 20px;
        font-size: 0.9rem;
        line-height: 1.8;
        color: #374151;
        border-top: 1px solid #f3f4f6;
        padding-top: 16px;
    }
    .ll-article.expanded .ll-article-content {
        display: block;
    }

    /* Empty state */
    .ll-empty {
        text-align: center;
        padding: 48px 20px;
        color: #9ca3af;
    }
    .ll-empty i {
        font-size: 3rem;
        margin-bottom: 12px;
        display: block;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .ll-countries {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 8px;
        }
        .ll-country-btn {
            padding: 10px 10px;
            font-size: 0.82rem;
        }
        .ll-search-wrapper {
            min-width: 100%;
        }
    }
</style>
@endpush

@section('content')
<div class="ll-header">
    <h1><i class="fas fa-balance-scale" style="margin-left:8px;color:#E8502F"></i> أنظمة العمل</h1>
    <span class="ll-total-badge">{{ $articles->total() }} مادة</span>
</div>

{{-- Country Selector --}}
<div class="ll-countries">
    @foreach($countries as $code => $info)
    <a href="/labor-law?country={{ $code }}" class="ll-country-btn {{ (isset($selectedCountry) && $selectedCountry === $code) || (!isset($selectedCountry) && $code === 'SA') ? 'active' : '' }}">
        <span class="ll-country-flag">{{ $info['flag'] }}</span>
        {{ $info['name'] }}
        @if(isset($countryCounts[$code]))
        <span class="ll-country-count">{{ $countryCounts[$code] }}</span>
        @endif
    </a>
    @endforeach
</div>

{{-- Search & Category Filters --}}
<div class="ll-card">
    <form method="GET" action="/labor-law" class="ll-search-bar">
        <input type="hidden" name="country" value="{{ $selectedCountry ?? 'SA' }}">
        <div class="ll-search-wrapper">
            <i class="fas fa-search ll-search-icon"></i>
            <input type="text" name="search" value="{{ request('search') }}" placeholder="ابحث في مواد نظام العمل...">
        </div>
        <button type="submit" class="ll-btn-primary">
            <i class="fas fa-search"></i> بحث
        </button>
    </form>

    <div class="ll-category-tabs">
        <a href="/labor-law?country={{ $selectedCountry ?? 'SA' }}&search={{ request('search') }}" class="ll-category-tab {{ !request('category') ? 'active' : '' }}">الكل</a>
        @foreach($categories as $catKey => $catLabel)
        <a href="/labor-law?country={{ $selectedCountry ?? 'SA' }}&category={{ $catKey }}&search={{ request('search') }}" class="ll-category-tab {{ request('category') === $catKey ? 'active' : '' }}">{{ $catLabel }}</a>
        @endforeach
    </div>
</div>

{{-- Articles grouped by category --}}
@php
    $categoryNames = $categories;
    $grouped = $articles->getCollection()->groupBy('category');
@endphp

@forelse($grouped as $category => $categoryArticles)
<div class="ll-category-group">
    <div class="ll-category-title">{{ $categoryNames[$category] ?? $category }}</div>
    @foreach($categoryArticles as $article)
    <div class="ll-article" id="article-{{ $article->id }}">
        <div class="ll-article-header" onclick="llToggle(this)">
            <div class="ll-article-title-section">
                <span class="ll-article-number">مادة {{ $article->article_number }}</span>
                <span class="ll-article-title">{{ $article->title }}</span>
            </div>
            <span class="ll-article-cat-badge">{{ $categoryNames[$article->category] ?? $article->category }}</span>
            <i class="fas fa-chevron-down ll-article-toggle"></i>
        </div>
        <div class="ll-article-content">
            {!! nl2br(e($article->content)) !!}
        </div>
    </div>
    @endforeach
</div>
@empty
<div class="ll-card">
    <div class="ll-empty">
        <i class="fas fa-book"></i>
        <p>لا توجد مواد مطابقة للبحث</p>
    </div>
</div>
@endforelse

{{ $articles->links() }}
@endsection

@push('scripts')
<script>
function llToggle(header) {
    var card = header.closest('.ll-article');
    card.classList.toggle('expanded');
}
</script>
@endpush