@extends('frontend.app')
@section('cssFiles')
    <style>
        .announcements-search{
            background: #ececeb;
            border-radius: 20px;
            padding: 15px 20px 15px;
            margin-top: 20px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .search{
            position: relative;
            flex: 1;
        }

        .search input {
            width: 100%;
            height: 50px;
            padding: 0 20px 0 60px;
            border-radius: 15px;
            background: #fff;
            border: none;
            transition: box-shadow ease-in-out .25s;
        }

        .search input:focus{
            box-shadow:0 6px 16px rgba(2, 49, 79, 0.33);
        }

        .search i{
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
        }

        .search::after{
            content: '';
            position: absolute;
            left: 50px;
            top: 12px;
            bottom: 12px;
            width: 1px;
        }

        .sort {
            height: 48px;
            padding: 0 18px;
            border-radius: 12px;
            border: none;
            background: #fff;
            font-weight: 700;
            cursor: pointer;
            font-size: 15px;
            transition: 0.2s;
        }

        .sort.on {
            background: #02314f;
            color: #fff;
        }

        .announcements{
            background: #ececeb;
            border-radius: 20px;
            padding: 28px 20px 32px;
            margin-bottom: 20px;
        }

        .announcement-bubble{
            background: #fff;
            border-radius: 15px;
            padding: 15px;
        }
        /* ----- Footer ----- */
        .footer-section .footer-widgets-wrapper.style2 {
            padding: 80px 0 82px 0;
        }


    </style>
@endsection
@section('content')
    <div class="breadcumb">
        <div class="container">
            <div class="breadcumb-wrapper">
                <div class="page-heading">
                    <h1 class="wow fadeInUp" data-wow-delay=".3s">Duyurular</h1>
                    <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
                        <li><a href="{{url('/')}}">Anasayfa</a></li>
                        <li><i class="fas fa-chevron-right"></i></li>
                        <li>Duyurular</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="announcements-search">
            <div class="search">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input type="text" id="q" placeholder="Duyuru ara">
            </div>
            <button class="sort on" id="sortNew">Yeni → Eski</button>
            <button class="sort" id="sortOld">Eski → Yeni</button>
        </div>

        <div id="announceList" class="announcements">
            @if($ads)
                @foreach($ads as $item)
                    @if($item->body)
                        <div class="list-group-item list-group-item-action py-3 ann-item" data-text="{{$item->title}}" data-date="{{$item->date}}" style="background: #fff;border-radius: 15px;padding: 15px; margin-bottom: 15px;">
                            <div class="d-flex w-100 justify-content-between">
                                <h5 class="mb-1" style="font-size: 15px;">{{$item->title}}</h5>
                                <small class="text-muted ml-3"><i class="far fa-calendar-alt mr-1"></i> {{date('d.m.Y',strtotime($item->date))}}</small>
                            </div>
                            <p class="mb-1 text-muted" style="font-size: 14px;">{!! $item->body !!}</p>
                        </div>
                    @endif
                @endforeach
            @endif
        </div>
    </div>
@endsection
@section('js')
    <script>
        (function(){
            var q = document.getElementById('q');
            var items = [].slice.call(document.querySelectorAll('.ann-item'));
            var noResults = document.getElementById('noResults');
            var sortNew = document.getElementById('sortNew');
            var sortOld = document.getElementById('sortOld');

            function filter(){
                var val = (q.value || '').toLowerCase();
                var visible = 0;
                items.forEach(function(it){
                    var hay = (it.getAttribute('data-text') || '').toLowerCase();
                    var show = !val || hay.indexOf(val) > -1;
                    it.style.display = show ? '' : 'none';
                    if(show) visible++;
                });
                noResults.classList.toggle('d-none', visible > 0);
            }

            function sort(by){
                var list = document.getElementById('announceList');
                items.sort(function(a,b){
                    var da = new Date(a.getAttribute('data-date'));
                    var db = new Date(b.getAttribute('data-date'));
                    return by === 'new' ? (db - da) : (da - db);
                });
                items.forEach(function(it){ list.appendChild(it); });
                sortNew.classList.toggle('active', by==='new');
                sortOld.classList.toggle('active', by!=='new');
            }

            q.addEventListener('input', filter);
            sortNew.addEventListener('click', function(){ sort('new'); });
            sortOld.addEventListener('click', function(){ sort('old'); });

            sort('new');
            filter();
        })();
    </script>
@endsection