@extends('backend.layout.app')

@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">

                <div class="card">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <form method="GET" class="d-flex align-items-end gap-3">
                            <div class="d-flex flex-column gap-1">
                                <span class="mb-0 text-nowrap">Filter By Type</span>
                                <select name="type" class="form-select form-select-sm" style="min-width: 150px"
                                    onchange="this.form.submit()">
                                    <option value="">All</option>
                                    <option value="global" {{ request()->type == 'global' ? 'selected' : '' }}>Global</option>
                                    <option value="course_enroll"
                                        {{ request()->type == 'course_enroll' ? 'selected' : '' }}>Course Enroll</option>
                                    <option value="user" {{ request()->type == 'user' ? 'selected' : '' }}>User</option>

                                </select>
                            </div>
                            <a href="#" class="btn btn-primary btn-sm">Reset</a>
                        </form>

                        <div>
                            <a href="{{ route('admin.notification.create') }}" class="btn btn-success btn-sm">
                                <i class="bi bi-plus-circle me-1"></i> Add New Notification
                            </a>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped my-table2 dataTable no-footer" id="datatable_internal">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Title</th>
                                        <th style="width: 350px">Message</th>
                                        <th>Type</th>
                                        <th style="width: 300px">Target</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($notifications as $key => $notification)
                                        <tr id="partenTr_{{ $notification->id }}">
                                            <td>{{ $key + 1 }}</td>
                                            <td>{{ $notification->title }}</td>
                                            <td class="text-wrap">{!! $notification->message !!}</td>
                                            <td>
                                                @if ($notification->type == 'course_enroll')
                                                    <span class="badge btn-danger-light ">Course Enroll</span>
                                                @elseif($notification->type == 'user')
                                                    <span class="badge bg-success">User</span>
                                                @elseif($notification->type == 'admin')
                                                    <span class="badge bg-secondary">Admin</span>
                                                @else
                                                    <span class="badge bg-info">Global</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if ($notification->type == 'course_enroll' && $notification->course)
                                                    Course: {{ $notification->course->title }}
                                                @elseif($notification->type == 'user' && $notification->user)
                                                    User: {{ $notification->user->name }}
                                                @else
                                                    All Users
                                                @endif
                                            </td>
                                            <td>
                                                <a href="{{ route('admin.notification.edit', $notification->id) }}"
                                                    class="col">
                                                    <button type="button" class="btn btn-primary btn-sm">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                            height="16" fill="currentColor" class="bi bi-pencil-square"
                                                            viewBox="0 0 16 16">
                                                            <path
                                                                d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z">
                                                            </path>
                                                            <path fill-rule="evenodd"
                                                                d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z">
                                                            </path>
                                                        </svg>
                                                    </button>
                                                </a>
                                                <a href="javascript:void(0)" class="btn btn-danger btn-sm deleteButton"
                                                    data-parentid="partenTr_{{ $notification->id }}"
                                                    data-url={{ route('admin.notification.delete', $notification->id) }}>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
                                                        <path
                                                            d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5">
                                                        </path>
                                                    </svg>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection