@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | 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%;
    }
</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%;
    }

    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>

@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">

        <!-- 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>
            <div class="col-6">
                <div class="text-end upgrade-btn">
                    <a href="{{ route('home-work.create') }}" class="btn btn-primary text-white">Add New Home
                        Work</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">S.No</th>
                                <th class="ps-1">Title</th>
                                <th class="ps-1">Work</th>
                                <th class="ps-1">Date</th>
                                <th class="ps-1">File</th>
                                {{-- <th class="ps-1">Status</th> --}}
                                <th class="text-center">Actions</th>
                            </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>{{ ucwords($value->title) }}</td>
                                        <td><i class='bx bxs-file' style="cursor: pointer"
                                                onclick="ShowModal('{!! e($value->html) !!}', '{{ json_encode($value->images) }}')"></i>
                                        </td>
                                        <td class="text-nowrap">{{ dateformatter($value->created_at) }}</td>
                                        <td class="text-nowrap"> {{ $value->is_approved === 1 ? 'Approve' : ($value->is_approved === 0 ? 'Disapprove' : 'Pending') }}
                                            {{-- <td>
                                            @if ($value->image)
                                                <a target="_blank" href="{{ $value->image }}"><i class='bx bxs-file'
                                                        style="cursor: pointer"></i></a>
                                            @else
                                                Contain No File
                                            @endif
                                        </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 class="dropdown-item" href="home-work/{{ $value->id }}/edit "><i
                                                            class='bx bx-book-open'></i> Edit</a>

                                                    <form method="POST"
                                                        action="{{ route('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 {{ ucwords($value->title) }} Home Work?');">
                                                            <i class="bx bx-trash me-1"></i> Delete
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </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;">
                <!-- Modal content -->
                <div class="modal-content p-3" style="width: 40%;overflow: auto;display: block;text-align: start;">
                    <div><span onclick="closeModal()" class="close text-end"
                            style="cursor: pointer;font-size: 25px;position: fixed;left: 66%;transform: translate(-60%, 50%);color: black;">&times;</span>
                    </div>
                    <div id="homework-text"></div>
                    <div id="homework-images"></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>
    <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);
            });
            $('#homework-text').html(html);
        }
    </script>
@endsection