@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Announcements</title>
<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%;
    }
</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: 50%;
        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;
        margin-top: -30px;
        margin-right: -18px;
    }

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

@section('main-content')
<div class="{{Session::has('success')?'':'d-none'}} hide_msg_class" style="position: absolute; top:15%; 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>
        <h6 class="announcement_head_class"></h6>
        <h6 class="announcement_head_date"></h6>
        <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-4"><span class="text-muted fw-light">Records /</span> Notifications</h4>
        </div>
        <div class="col-6">
            <div class="text-end upgrade-btn">
                <a href="{{ route('teacherannouncements.create') }}" class="btn btn-primary text-white">Add New Notifcation</a>
            </div>
        </div>

        <!-- Basic Bootstrap Table -->
        <div class="card ms-3 pb-4">
            <h5 class="mt-3">Notification List</h5>
            <div class="table dataTable text-nowrap dtbl_dropdown">
                <table class="table" id="services">
                    <thead>
                        <tr>
                            <th class="ps-1">#</th>
                            <th class="ps-1">Class</th>
                            <th class="ps-1">Title</th>
                            <th class="ps-1">Content</th>
                            <th class="ps-1">Created On</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">{{$announcement->class_name}}</td>
                                    <td class="ps-1">{{ $announcement->title }}</td>
                                    <td class="ps-1">{{substr($announcement->content,0,50)}}{{strlen($announcement->content)>50?"...":""}}</td>
                                    <td class="ps-1">{{ dateformatter($announcement->created_at) }}</td>
                                    <td class="text-center">
                                        <div>
                                            <a href="javaScript:void(0);" class="btn btn-outline-primary view_class" data-class_name="{{$announcement->class_name}}" data-title="{{ucwords($announcement->title)}}" data-content="{{$announcement->content}}" data-created_on="{{dateformatter($announcement->created_at)}}">View</a>
                                            {{-- <a href="javaScript:void(0);" class="btn btn-outline-danger" id="delete_id">Delete</a> --}}
                                            {{-- <form method="POST" action="{{ route('teacherannouncements.destroy', $announcement->created_at) }}" 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>Notifications not 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_head_class').text("( "+$(this).data('class_name')+" )");
        $('.announcement_head_date').text("( "+$(this).data('created_on')+" )");
        $('.announcement_content_popup').text($(this).data('content'));
    });
</script>
@endsection