@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Notification</title>


@section('main-content')
    <style>
        .edit:hover {
            color: #fff !important;
            background-color: blue !important;
            border-color: #696cff !important;
            border-radius: 5px !important;
        }

        .delete:hover {
            color: #fff !important;
            background-color: #E3242B !important;
            border-color: #E3242B !important;
            border-radius: 5px !important;
        }

        .dtbl_dropdown .dataTables_length {
            width: 65px;
        }

        .dtbl_dropdown .dataTables_length label {
            width: 100%;
        }

        .content {
            /* display: flex; */
            flex-wrap: wrap;
        }

        table.dataTable thead .sorting_asc {
            background-image: none !important;
        }

        table.dataTable thead .sorting {
            background-image: none !important;
        }
    </style>

    <style>
        /* Popup container */
        .popup {
            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 1100;
            /* Sit on top */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgba(0, 0, 0, 0.4);
            /* Black w/ opacity */
        }

        /* Popup content */
        .popup-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        /* Close button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        h4.announcement_head_popup {
            word-break: break-word;
        }

        .textWrap_div {
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -webkit-box;
        }
    </style>

    <div class="{{ Session::has('success') ? '' : 'd-none' }} hide_msg_class"
        style="position: absolute; top:12%; margin-left:1%;">
        <div id="alert">
            @if (Session::has('success'))
                <div class="alert {{ Session::get('success') == 'Notification deleted successfully.' ? 'alert-danger' : 'alert-success' }}"
                    role="alert">
                    {{ Session::get('success') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>

    <!-- The popup container -->
    <div id="popup" class="popup">
        <!-- Popup content -->
        <div class="popup-content">
            <span class="close" onclick="closePopup()">&times;</span>
            <h4 class="announcement_head_popup"></h4>
            <p class="announcement_content_popup"></p>
        </div>
    </div>

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl container-p-y row">
            <div class="col-6">
                <h4 class="fw-bold py-3 mb-2"><span class="text-muted fw-light">Records /</span> Notifications </h4>
            </div>
            @php
                $yearRange = session('year_range'); // Example: "2023-2024"
                $currentDate = now();
                [$startYear, $endYear] = explode('-', $yearRange);

                $startDate = \Carbon\Carbon::create($startYear, 4, 1, 0, 0, 0); // April 1st
                $endDate = \Carbon\Carbon::create($endYear, 3, 31, 23, 59, 59); // March 31st
            @endphp
            @if ($currentDate->between($startDate, $endDate))
                <div class="col-6">
                    <div class="text-end upgrade-btn">
                        <a href="{{ route('notifications.create') }}" class="btn btn-primary text-white">Add New
                            Notification</a>
                    </div>
                </div>
            @endif
            <!-- Basic Bootstrap Table -->
            <div class="card ms-3 pb-4">
                <h5 class="mt-3 mb-3">Notification List</h5>
                <div class="table dataTable text-nowrap dtbl_dropdown">
                    <table class="table" id="services">
                        <thead>
                            <tr>
                                <th class="ps-1">S.No</th>
                                <th class="ps-1 serve_cstm_th">Title</th>
                                <th class="ps-1 serve_cstm_th">Content</th>
                                <th class="ps-1">Type</th>
                                <th class="ps-1">Date</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @if (count($announcements) != 0)
                                @foreach ($announcements as $key => $announcement)
                                    <tr id="row_{{ $announcement->id }}">
                                        <td class="ps-1">{{ $key + 1 }}</td>
                                        <td class="ps-1 ">
                                            <div class="textWrap_div">{{ ucwords($announcement->title) }}</div>
                                        </td>
                                        <td class="ps-1">
                                            <div class="textWrap_div">
                                                {{ ucfirst(substr($announcement->content, 0, 50)) }}{{ strlen($announcement->content) > 50 ? '...' : '' }}
                                            </div>
                                        </td>
                                        <td class="ps-1">{{ ucwords($announcement->type) }}</td>
                                        <td class="ps-1">
                                            {{ \Carbon\Carbon::parse($announcement->announcement_time)->format('d-m-y') }}
                                        </td>

                                        <td>
                                            <div class="dropdown text-center">
                                                <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                                                    data-bs-toggle="dropdown">
                                                    <i class="bx bx-dots-vertical-rounded"></i>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a href="javaScript:void(0);" class="dropdown-item view_class"
                                                        data-title="{{ ucwords($announcement->title) }}"
                                                        data-content="{{ $announcement->content }}">View</a>
                                                    {{-- <form method="POST" action="{{ route('notifications.destroy', $announcement->uuid) }}" style="display: inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-outline-danger" onclick="return confirm('Are you sure you want to remove this notification?');">
                                                    Delete
                                                </button>
                                            </form> --}}
                                                </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="3"><span>No notification found</span></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- / Content -->
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        function openPopup() {
            document.getElementById("popup").style.display = "block";
        }

        // Function to close the popup
        function closePopup() {
            document.getElementById("popup").style.display = "none";
        }

        $(".view_class").on("click", function(e) {
            e.preventDefault();
            openPopup();
            $('.announcement_head_popup').text($(this).data('title'));
            $('.announcement_content_popup').text($(this).data('content'));
        });
    </script>
@endsection