@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Events</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: 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>
        <div class="col-6">
            <div class="text-end upgrade-btn">
                <a href="{{ url('/createEvent') }}" class="btn btn-primary text-white">Add New Event</a>
            </div>
        </div>

        <!-- 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>
                        <tr>
                            <th class="ps-1">#</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">{{ ucwords($event->title) }}</td>
                                    <td  class="ps-1">{{ucfirst(substr($event->description,0,50))}}{{strlen($event->description)>50?"...":""}}</td>
                                    <td class="ps-1">{{ $event->time }}</td>
                                    <td class="ps-1">{{ dateformatter($event->date) }}</td>
                                    <td class="ps-1">{{ dateformatter($event->created_at) }}</td>

                                    <td class="text-center">
                                        <div>
                                            @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') --}}

                                            <a href="javaScript:void(0);" class="btn btn-outline-danger dlt_btn" data-id="{{$event->id}}">
                                                Delete
                                            </a>
                                            {{-- </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