@extends('layouts.admin')
<title>
    {{ config('app.name', 'Laravel') }} | Co-ordinator | Home Work</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%;
    }

    div#homework-text {
        word-wrap: break-word;
        margin-top: 30px;
    }

    .closebtn_div {
        position: relative;
        display: block;
    }

    .close_icon {
        cursor: pointer;
        font-size: 25px;
        position: absolute;
        right: 12px;
        transform: translate(-60%, 50%);
        color: black;
    }
</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;
    }

    #homework-text img {
        width: 100%;
    }
</style>
<style>
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
    }

    #disapproveModal .modal-content {
        background: white;
        padding: 20px;
        width: 650px;
        border-radius: 10px;
        position: relative;
        text-align: center;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    #disapproveModal .close {
        position: absolute;
        top: 35px;
        right: 35px;
        cursor: pointer;
        font-size: 20px;
        color: #666;
    }

    #disapproveReason {
        width: 100%;
        height: 80px;
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        resize: none;
    }

    .disap_btn {
        width: 160px;
        margin-top: 10px;
        padding: 10px;
        border: none;
        border-radius: 5px;
        background: red;
        color: white;
        font-size: 16px;
        cursor: pointer;
        margin-left: auto;
        margin-right: auto;
    }

    .disap_btn:hover {
        background: darkred;
    }

    .hwl_table .hwl_th {
        min-width: 100px;
    }

    .twoLine_p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .homework-title {
        font-weight: bold;
        text-align: center;
        display: block;
        margin: 20px 0;
        /* Adds space above and below */
    }
</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>

    <div class="content-wrapper">
        <!-- Disapprove Modal -->
        <div id="disapproveModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeDisapproveModal()">&times;</span>
                <h3>Reason for Disapproval</h3>
                <input type="hidden" id="disapproveId">
                <textarea id="disapproveReason" placeholder="Enter reason..."></textarea>
                <button class="disap_btn" onclick="submitDisapprove()" class="btn btn-danger">Disapprove</button>
            </div>
        </div>
        <!-- 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> Home Work</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('class-home-work.create') }}" class="btn btn-primary text-white">Add New Home
                            Work</a>
                    </div>
                </div>
            @endif
            <!-- Basic Bootstrap Table -->
            <div class="card ms-3 pb-4">
                <h5 class="mt-3">Home Work List</h5>
                <div class="table dataTable text-nowrap dtbl_dropdown">
                    <table class="table hwl_table" id="services">
                        <thead>
                            <tr>
                                <th class="ps-1">S.No</th>
                                <th class="ps-1 hwl_th">Class</th>
                                <th class="ps-1">Title</th>
                                <th class="ps-1 ">Work</th>
                                <th class="ps-1 hwl_th">Date</th>
                                <th class="ps-1 hwl_th">Status</th>
                                {{-- <th class="ps-1">File</th> --}}
                                @if ($currentDate->between($startDate, $endDate))
                                    <th class="text-center">Actions</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @if (isset($homework) && count($homework) != 0)
                                @foreach ($homework as $key => $value)
                                    <tr id="row_{{ $value->id }}">
                                        <td>{{ $key + 1 }}</td>
                                        <td>
                                            @if (isset($value->classPackageInformation))
                                                {{ $value->classPackageInformation->class_name }}
                                            @endif
                                        </td>
                                        <td>
                                            <p class="twoLine_p">{{ $value->title }}</p>
                                        </td>
                                        <td><i class='bx bxs-file' style="cursor: pointer"
                                                onclick="ShowModal('{{ e($value->html) }}', '{{ json_encode($value->images) }}')"></i>
                                        </td>
                                        <td>{{ dateformatter($value->created_at) }}</td>
                                        <td> {{ $value->is_approved === 1 ? 'Approved' : ($value->is_approved === 0 ? 'Disapproved' : 'Pending') }}
                                        </td>
                                        <td>
                                            @if ($currentDate->between($startDate, $endDate))
                                                <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 class="dropdown-item"
                                                            href="class-home-work/{{ $value->id }}/edit "><i
                                                                class='bx bx-edit-alt'></i> Edit</a>
                                                        @if (is_null($value->is_approved))
                                                            <!-- If status is Pending, show both Approve & Disapprove -->
                                                            <a class="dropdown-item"
                                                                href="change-status/{{ $value->id }}/1/reason">
                                                                <i class='bx bx-check-circle'></i> Approve
                                                            </a>
                                                            <a class="dropdown-item" href="#"
                                                                onclick="openDisapproveModal({{ $value->id }})">
                                                                <i class='bx bx-x-circle'></i> Disapprove
                                                            </a>
                                                        @elseif ($value->is_approved == 1)
                                                            <!-- If already Approved, show only Disapprove (opens modal) -->
                                                            <a class="dropdown-item" href="#"
                                                                onclick="openDisapproveModal({{ $value->id }})">
                                                                <i class='bx bx-x-circle'></i> Disapprove
                                                            </a>
                                                        @elseif ($value->is_approved == 0)
                                                            <!-- If already Disapproved, show only Approve -->
                                                            <a class="dropdown-item"
                                                                href="change-status/{{ $value->id }}/1/reason">
                                                                <i class='bx bx-check-circle'></i> Approve
                                                            </a>
                                                        @endif

                                                        <form method="POST"
                                                            action="{{ route('class-home-work.destroy', $value->id) }}">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="dropdown-item delete"
                                                                onclick="return confirm('Are you sure, you want to remove Home Work?');">
                                                                <i class="bx bx-trash me-1"></i> Delete
                                                            </button>
                                                        </form>
                                                    </div>
                                                </div>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td><span>{{ 'No record found' }}</span></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="myModal" class="modal p-3"
                style="display: none; text-align: center; justify-content: center; align-items: center; height: 100vh;">
                <!-- Modal content -->
                <div class="modal-content p-3"
                    style="width: 40%; height: 60vh; overflow-y: auto; display: block; text-align: start; background: white;">
                    <div class="closebtn_div">
                        <span onclick="closeModal()" class="close text-end close_icon"
                            style="cursor: pointer;">&times;</span>
                    </div>
                    <div class="homework-title">Home Work</div>
                    <div id="homework-images"></div>
                    <div id="homework-text"></div>
                </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>
    <!-- JavaScript for Modal -->
    <script>
        function openDisapproveModal(id) {
            document.getElementById("disapproveId").value = id;
            document.getElementById("disapproveModal").style.display = "flex";
        }

        function closeDisapproveModal() {
            document.getElementById("disapproveModal").style.display = "none";
        }

        function submitDisapprove() {
            let id = document.getElementById("disapproveId").value;
            let reason = document.getElementById("disapproveReason").value.trim();

            // If the reason is blank, send "null"
            let encodedReason = reason ? encodeURIComponent(reason) : "NULL";

            let url = `change-status/${id}/0/${encodedReason}`; // Passing all parameters in URL

            // Redirect to the new URL
            window.location.href = url;
        }
    </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'));
        });

        function closeModal() {
            var modal = document.getElementById("myModal");
            modal.style.display = "none";
            $('#homework-text').html(' ');
        }

        function ShowModal(html, imagesJson) {
            var modal = document.getElementById("myModal");
            modal.style.display = "flex";
            var images = JSON.parse(imagesJson);
            var modalContent = modal.querySelector("#homework-images");
            modalContent.innerHTML = '';
            images.forEach(function(imageSrc) {
                var imgElement = document.createElement("img");
                imgElement.src = imageSrc;
                imgElement.style.width = "200px";
                imgElement.style.height = "200px";
                imgElement.style.objectFit = "contain";
                imgElement.style.marginBottom = "15px";
                modalContent.appendChild(imgElement);
            });
            var decodedHtml = $('<div>').html(html).text();
            $('#homework-text').html(decodedHtml);
        }
    </script>
@endsection