@extends('layouts_old.main')

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


@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">
    <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('updatenotification', $notification->id) }}
                <h2>Update Notification {{$notification->id}}</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.update',['notification' => $notification->hash_id]) }}" 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 @if($notificationCategory->name == $notification->category) selected @endif
                            value="{{$notificationCategory->name}}">{{$notificationCategory->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 @if($tag->name == $notification->tag) selected @endif
                                value= "{{$tag->name}}">{{$tag->view_name}}</option>
                        @endforeach
                    </select>
                </div>
{{--                               Initially set to display: none, if category selected that needs to display roles then show it--}}
                <div class="form-group" id="roles-section" style="display: none">
                    @foreach($roles as $role)
                        <input class="" type="checkbox" name="{{ $role->name }}" id="{{ $role->name }}" @if(in_array($role->id, $notification->recipients_roles)) checked @endif>
                        <label for="{{ $role->name }}">{{ $role->name }}</label>
                    @endforeach
                </div>
                <div class="form-group">
                    <label for="expires_at">Expires At</label>
                    <input type="datetime-local" value="{{$notification->expires_at}}" class="form-control name" id="expires_at" name="expires_at" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="title">Notification Title</label>
                    <input  class="form-control name" type="text" id="title" name="title" value="{{$notification->title}}" required>
                </div>
                <div class="form-group">
                    <label for="body">Notification Body</label>
                    <input class="form-control name" type="text" id="body" name="body" value="{{$notification->body}}" required>
                </div>

                <div class="btn-container">
                    <button type="submit" class="btn">Update Notification</button>
                </div>
            </form>
        </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