@extends('layouts.admin')

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

        .text-nowrap {
            white-space: nowrap !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: 5% 20%;
            padding: 20px;
            border: 1px solid #888;
            width: auto;
            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>

    
    <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') == 'Event 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">
        <div class="popup-content text-center">
            <span class="close" onclick="closePopup()">&times;</span>
            <h4 class="announcement_head_popup"></h4>
            <h5 class="announcement_head_date"></h5>
            <h5 class="announcement_head_time"></h5>
            <div class="announcement_media"></div> <!-- Dynamic Media Content -->
            <p class="announcement_content_popup mt-2 mb-2"></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> Events </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="/createevent" class="btn btn-primary text-white">Add New Event</a>
                    </div>
                </div>
            @endif


            <!-- Basic Bootstrap Table -->
            <div class="card pb-3 ms-3">
                <h5 class="mt-3">Event List</h5>
                <div class="table dataTable text-nowrap dtbl_dropdown">
                    <table class="table" id="services">
                        <thead class="text-nowrap">
                            <tr>
                                <th class="ps-1">S.No</th>
                                <th class="ps-1">Class</th>
                                <th class="ps-1">Title</th>
                                <th class="ps-1">Description</th>
                                <th class="ps-1">Time</th>
                                <th class="ps-1">Event Date</th>
                                <th class="ps-1">Created On</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @if (isset($events) && count($events) != 0)
                                @foreach ($events as $key => $event)
                                    <tr id="row_{{ $event->id }}">
                                        <td class="ps-1">{{ $key + 1 }}</td>
                                        <td class="ps-1">
                                            {{ \App\Models\ClassPackageInformation::where('login_id', $event->teacher_id)->value('class_name') ?? 'N/A' }}
                                        </td>
                                        <td class="ps-1">{{ ucwords($event->title) }}</td>
                                        <td class="ps-1">
                                            {{ ucfirst(substr($event->description, 0, 50)) }}{{ strlen($event->description) > 50 ? '...' : '' }}
                                        </td>
                                        <td class="ps-1 text-nowrap">{{ $event->time }}</td>
                                        <td class="ps-1">{{ dateformatter($event->date) }}</td>
                                        <td class="ps-1">{{ dateformatter($event->created_at) }}</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">
                                                    @php
                                                        $cdn = config('services.aws.cdn');
                                                        $dataMedia = '';

                                                        if (!is_null($event->video_link) && $event->video_link !== '') {
                                                            $dataMedia = $event->video_link;
                                                        } elseif (!is_null($event->video) && $event->video !== '') {
                                                            $dataMedia = $cdn . ltrim($event->video, '/');
                                                        } elseif (!is_null($event->pdf) && $event->pdf !== '') {
                                                            $dataMedia = $cdn . ltrim($event->pdf, '/');
                                                        } elseif (
                                                            !is_null($event->drive_link) &&
                                                            $event->drive_link !== ''
                                                        ) {
                                                            $dataMedia = $event->drive_link;
                                                        } elseif (!is_null($event->image) && $event->image !== '') {
                                                            $dataMedia = $event->image;
                                                        }
                                                    @endphp
                                                    <a href="javascript:void(0);" class="dropdown-item view_class"
                                                        data-title="{{ ucwords($event->title) }}"
                                                        data-content="{{ $event->description }}"
                                                        data-type="{{ $dataMedia }}" data-time="{{ $event->time }}"
                                                        data-date="{{ dateformatter($event->date) }}">
                                                        <i class="bx bx-show-alt me-1"></i> View
                                                    </a>
                                                    {{-- <form method="POST" action="{{ route('deleteevents.destroy', $event->id) }}" style="display: inline;">
                                                @csrf
                                                @method('DELETE') --}}
                                                    @if ($currentDate->between($startDate, $endDate))
                                                        <a href="javaScript:void(0);" class="dropdown-item dlt_btn"
                                                            data-id="{{ $event->id }}"><i class="bx bx-trash me-1"></i>
                                                            Delete
                                                        </a>
                                                    @endif
                                                    {{-- </form> --}}
                                                </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="3"><span>No Event 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'));
            $('.announcement_head_date').text($(this).data('date'));
            $('.announcement_head_time').text($(this).data('time'));

            let mediaType = $(this).data('type');
            let popupMedia = $('.announcement_media');

            // Reset the media container
            popupMedia.html('');

            if (mediaType) {
                if (mediaType.match(/\.(jpeg|jpg|png|gif)$/)) {
                    // Show Image
                    popupMedia.html(`<img src="${mediaType}" width="250px" height="250px" class="img-fluid">`);
                } else if (mediaType.match(/\.(mp4|webm|ogg)$/)) {
                    // Show Video
                    popupMedia.html(`
                <video width="250px" height="250px" controls>
                    <source src="${mediaType}" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            `);
                } else if (mediaType.match(/\.(pdf)$/)) {
                    // Show PDF with "View PDF" button
                    popupMedia.html(`
                <a href="${mediaType}" target="_blank" class="btn btn-success mt-2">View PDF</a>
            `);
                } else if (mediaType.includes("drive.google.com")) {
                    // Show Google Drive Link
                    popupMedia.html(`
                <a href="${mediaType}" target="_blank" class="btn btn-primary">View on Google Drive</a>
            `);
                } else if (mediaType.includes("youtube.com") || mediaType.includes("vimeo.com")) {
                    // Show Video Link (YouTube, Vimeo, etc.)
                    popupMedia.html(`
                <a href="${mediaType}" target="_blank" class="btn btn-danger">Watch Video</a>
            `);
                } else {
                    // Show as a general link if unknown type
                    popupMedia.html(`<a href="${mediaType}" target="_blank" class="btn btn-info">Open Link</a>`);
                }
            }
        });


        $(".dlt_btn").on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            const msg = confirm('Are you sure you want to remove this event?');
            if (!msg) {
                return;
            }
            let formData = new FormData();

            const id = $(this).data("id");
            formData.append('id', id);

            $.ajax({
                url: "deleteevent",
                type: "post",
                contentType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(data) {
                    const status = data['status'];
                    if (status == 200 && data.success) {
                        window.location.href = data.success;
                    } else {
                        // Handle errors
                        $.each(data.error, function(field_name, error) {
                            // Check if the error message for the field already exists
                            if (!$('#' + field_name + '').closest('div').next().hasClass(
                                    'text-danger')) {
                                $('#' + field_name + '').closest('div').after(
                                    '<span class="text-strong text-danger">' + error +
                                    '</span>');
                            }
                        });
                    }

                },
                error: function() {},
                complete: function() {}
            });
        });
    </script>
@endsection