@extends('layouts.main')

@section('stylesheets')
    <link rel="stylesheet" href="{{asset('css/general-inner.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/index.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/edit.css')}}"/>

    <link rel="stylesheet" href="{{asset('css/general-modal.css')}}" />

@endsection


@section('content')
    <div class="main-wrapper">
        <div id="notifications">
            <div class="row justify-content-between Header mb-5">
                <div class="col-md-8  d-flex  justify-content-center justify-content-md-start Header-breadcrumbs">
                    <p class="Header-breadcrumbs--title">{{ Breadcrumbs::render('notifications') }}
                    </p>
                </div>
                 <div class="col-md-4 d-flex  justify-content-center justify-content-md-end Header-buttons">
                    <a class="Header-buttons--button me-3" href="{{ route('notifications.create') }}">
                        <p class="Header-buttons--button--text">Create Notification
                        </p>
                        <img src="{{asset('images/plus.svg')}}"class="homeHeader-buttons--button--img">
                    </a>
                </div>
            </div>
            <div class="row form-inner-container">
                <form action="{{ route('notifications.list') }}" method="get" class="form-group row"  id="notification-form">
                    @csrf
                    {{--                @method('POST')--}}
                    <div class="form-field col-12 pb-5">
                        <input type="text" name="keyword" class="form-control name" placeholder="Start typing" id="keyword">
                    </div>
                    <div class="form-field col-sm-12 col-md-4 pb-5">
                        <label for="type">Category</label>
                        <select class="form-select name" name="type" id="type">
                            <option value="{{null}}" selected>All</option>
                            @foreach($categories as $category)
                                <option value="{{urlencode($category->name)}}"
                                        title="{{ $category->description }}">{{$category->view_name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-field col-sm-12 col-md-4 pb-5">
                        <label for="sent">Status</label>
                        <select class="form-select name" name="sent" id="sent">
                            <option value="{{null}}" selected>All</option>
                            <option value="{{0}}">Unpublished</option>
                            <option value="{{1}}">Published</option>
                        </select>
                    </div>
                </form>
                <div id="listDataContainer" >
                    @include('superadmin.notifications.partials.list-data',['notifications' => $notifications])
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts-stack')

    <script src="{{asset('js/setAjaxFilters.js')}}"></script>
    <script defered>
        $s = jQuery.noConflict()
        $s(document).ready(function () {
            setAjaxFilters('{{route('notifications.list')}}','notification-form');
        });

    </script>
@endpush