@extends('front.layouts.master-auth')
@section('css')
<style>
    .projectoffers-cont .projectoffer{ margin:0; padding: 10px; }
    .blog-card-image-wrap.mb-3 { margin-bottom: 0 !important; }
    .projectoffers-cont .user-name{font-size: 18px;margin-top: 5px;min-height: 60px;}
    .projectoffers-cont .offer-btn{font-size: 16px;}
    .projectoffers-cont .item{font-size: 13px;}
    .projectoffers-cont .main-info{ margin-top: 0;padding: 5px 10px; border-radius: 5px;}
    .projectoffers-cont .projectoffer-head{ align-items: center; }
    .projectoffers-cont .offer-summary{ -webkit-padding-start: 0; padding-inline-start: 0; margin-top: 0;}

    .blog-page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .blog-page-header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
    }
    .blog-page-header-actions .head-btn {
        white-space: nowrap;
    }
    @media (max-width: 767px) {
        .blog-page-header {
            flex-wrap: wrap;
            gap: 10px;
        }
        .blog-page-header .page-title-cont {
            width: 100%;
        }
        .blog-page-header-actions {
            width: 100%;
            justify-content: space-between;
            margin-bottom: 10px;
        }
    }
</style>
@endsection
@section('canonical')
    @php
        $queryParams = request()->only(['category', 'search']);
        if (request()->integer('page', 1) > 1) {
            $queryParams['page'] = request()->integer('page');
        }
        $customCanonical = url()->current() . (!empty($queryParams) ? '?' . http_build_query($queryParams) : '');
    @endphp
    <link rel="canonical" href="{{ $customCanonical }}" />
@endsection
@section('hreflang')
    <link rel="alternate" hreflang="ar" href="{{ $customCanonical }}" />
@endsection
@section('content')
<!-- Start Page Content -->

<section class="page-content blog-page">
    <div class="container">
        <div class="blog-page-header">
            <div class="page-title-cont">
                @if(isset($breadcrumbs) && is_array($breadcrumbs) && count($breadcrumbs) > 0)
                    <x-breadcrumb :items="$breadcrumbs" />
                @endif
                <h1 class="page-title">مدونة ربحي — مقالات ونصائح في العمل الحر</h1>
            </div>
            <div class="blog-page-header-actions">
                <a href="{{ route('user.project.create') }}?utm_source=blog&utm_medium=cta&utm_campaign=start_project" class="head-btn head-btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" style="vertical-align: middle; margin-left: 5px;">
                        <line x1="12" y1="5" x2="12" y2="19"/>
                        <line x1="5" y1="12" x2="19" y2="12"/>
                    </svg>
                    ابدأ مشروعك
                </a>
                <span class="filters-btn">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
                    width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
                    <g transform="translate(128 128) scale(0.72 0.72)">
                        <g transform="translate(-175.05 -175.05000000000004) scale(3.89 3.89)">
                            <path
                                d="M 52.537 80.466 V 45.192 L 84.53 2.999 C 85.464 1.768 84.586 0 83.041 0 H 6.959 C 5.414 0 4.536 1.768 5.47 2.999 l 31.994 42.192 v 43.441 c 0 1.064 1.163 1.719 2.073 1.167 l 11.758 -7.127 C 52.065 82.205 52.537 81.368 52.537 80.466 z"
                                transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                        </g>
                    </g>
                </svg>
            </span>
            </div>
        </div>
        <div class="search-page-cont">
            <div class="search-filters-cont">
                <div class="search-filters">
                    <h4 class="filter-title">
                        @lang('Search')
                        <span id="filterLoadingSpinner" style="display:none; margin-inline-start:6px; vertical-align:middle; line-height:1;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 50 50" aria-hidden="true">
                                <circle cx="25" cy="25" r="20" fill="none" stroke="#000" stroke-width="4"
                                    stroke-linecap="round" stroke-dasharray="31.4 31.4">
                                    <animateTransform attributeName="transform" type="rotate"
                                        from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"/>
                                </circle>
                            </svg>
                        </span>
                    </h4>
                    <div class="filter-cont">
                        <input type="search" class="search-page-input" name="search" value="{{request()->get('search')}}" placeholder="@lang('Search blogs...')">
                    </div>

                    <h4 class="filter-title" style="padding-bottom: 15px;">
                        @lang('Blog Categories')
                    </h4>
                    <div class="filter-cont">
                        <div class="checkbox">
                            <label>
                                <input type="radio" name="category" value="" class="category-filter" @if(!request()->get('category')) checked @endif>
                                <span class="mark">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="31.345" height="28.516"
                                         viewBox="0 0 31.345 28.516">
                                        <path data-name="Path 16139" d="m0 10.668 6.506 5.872L18.88 0"
                                              transform="rotate(11 -21.661 43.426)" />
                                    </svg>
                                </span>
                                @lang('All Blogs')
                            </label>
                        </div>
                        @foreach($categories as $category)
                            <div class="checkbox"  >
                                <label>
                                    <input type="radio" name="category" value="{{$category->name}}" class="category-filter" @if(request()->get('category') == $category->name ) checked @endif>
                                    <span class="mark">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="31.345" height="28.516"
                                             viewBox="0 0 31.345 28.516">
                                            <path data-name="Path 16139" d="m0 10.668 6.506 5.872L18.88 0"
                                                  transform="rotate(11 -21.661 43.426)" />
                                        </svg>
                                    </span>
                                    {{$category->name}}
                                </label>
                            </div>
                        @endforeach

                    </div>
                    
                    <!-- Reset Filters Button -->
                    <div class="filter-actions" style="margin-top: 20px;">
                        <button type="button" id="resetBlogFilters" class="reset-filters-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="1 4 1 10 7 10"></polyline>
                                <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
                            </svg>
                            إعادة تعيين الفلاتر
                        </button>
                    </div>
                </div>
                <div class="filter-overlay"></div>
            </div>
            <div class="search-results-cont" id="results-container">
                @include('front.blog.list')
            </div>

        </div>
    </div>
</section>
<!-- End Page Content -->

@endsection

@section('js-body')
<script>
/* Blade config — PHP values only. All logic lives in blog-filter.js */
window.BlogFilterConfig = {
    baseUrl: '{{ route("blog.list") }}'
};
</script>
<script src="{{ asset('front/js/blog-filter.js') }}?v={{ filemtime(public_path('front/js/blog-filter.js')) }}"></script>
@endsection