@extends('layouts_old.main')

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


@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">
    <div class="main-wrapper">
        <div class="container">

            <div class="row justify-content-between Header mb-5">
                <div
                    class="col-md-8 d-flex flex-column justify-content-center justify-content-md-start Header-breadcrumbs">
                    {{ Breadcrumbs::render('createnotification') }}
                    <h2 class="page-title">Create Notification</h2>
                </div>
                <div class="col-md-4 d-flex justify-content-center justify-content-md-end Header-buttons">

                </div>
            </div>
            <div class="form-inner-container">
                <form action="{{ route('notifications.store') }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label for="category_name">Notification Category:</label>
                        <select class="form-select name" name="category_name" id="category_name">
                            @foreach($notificationCategories as $notificationCategory)
                                <option
                                    value="{{$notificationCategory->name}}">{{$notificationCategory->view_name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="tag_name">Choose a Tag</label>
                        <select class="form-select name" name="tag_name" id="tag_name">
                            @foreach($tags as $tag)
                                <option value="{{$tag->name}}">{{$tag->view_name}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group" id="roles-section" style="display: none">
                        @foreach($roles as $role)
                            <input class="" type="checkbox" name="{{ $role->name }}" id="{{ $role->name }}">
                            <label for="{{ $role->name }}">{{ $role->name }}</label>
                        @endforeach
                    </div>
                    <div class="form-group">
                        <label for="expires_at">Expires At</label>
                        <input type="datetime-local" class="form-control name" id="expires_at" name="expires_at"
                               class="form-control" required style="width: 33%">
                    </div>
                    <div class="form-group">
                        <label for="title">Notification Title</label>
                        <input class="form-control name" type="text" id="title" name="title" required>
                    </div>
                    <div class="form-group">
                        <label for="body">Notification Body</label>
                        <textarea class="form-control name" id="body" name="body" required></textarea>
                    </div>

                    <div class="btn-container">
                        <button type="submit" class="btn">Create Notification</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('javascripts')

    <script>
        $s = jQuery.noConflict()
        $s(document).ready(function () {
            const checkboxes = $s('#roles-section')
            $s('#category_name').val() === 'push_to_users' ? checkboxes.show() : checkboxes.hide()
            $s('#category_name').change(function () {
                $s(this).val() === 'push_to_users' ? checkboxes.show() : checkboxes.hide()
            })
        });
    </script>
@endsection