@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | showkiddie</title>

@include('datepicker')

<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;
    }

    .tbl_type_th {
        min-width: 80px;
    }

    .tble_actions_th {
        min-width: 200px
    }

    .tbl_link_th {
        min-width: 100px;
    }

    .tbl_crt_th {
        min-width: 150px;
    }
</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;
    }

    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        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') == 'Link 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_topic fw-bold"></h4> <!-- Topic Name -->


            <div class="media-preview mt-2 mb-2"></div> <!-- Media container -->

            <!-- Open YouTube Button -->
            <a href="javascript:void(0);" class="youtube-btn btn btn-danger mt-2 mb-2 fw-bold" target="_blank"
                style="display: none;">
                Open YouTube
            </a>

            <!-- Open PDF Button -->
            <a href="javascript:void(0);" class="pdf-btn btn btn-primary mt-2 mb-2 fw-bold" target="_blank"
                style="display: none;">
                Open PDF
            </a>
            <p class="announcement_content_popup mt-2 mb-2"></p> <!-- Description -->

            <p class="announcement_head_date fw-bold"></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>Study Material</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="addkiddie" class="btn btn-primary text-white">Add New Link</a>
                    </div>
                </div>
            @endif
            <!-- Basic Bootstrap Table -->
            <div class="card pb-3 ms-3">
                <h5 class="mt-3">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 tbl_link_th">Link</th> --}}
                                <th class="ps-1">Topic Name</th>
                                <th class="ps-1 tbl_type_th">class</th>
                                <th class="ps-1">Description</th>
                                <th class="ps-1 tbl_crt_th">Created On</th>
                                <th class="text-center tble_actions_th">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @if (isset($links) && count($links) != 0)
                                @foreach ($links as $key => $link)
                                    <tr id="row_{{ $link->id }}">
                                        <td class="ps-1">{{ $key + 1 }}</td>
                                        {{-- <td class="ps-1">
                                            <a href="{{ $link->video_type == 1 ? $link->link : $cdn . $link->link }}"
                                                target="_blank">
                                                @if ($link->video_type == 1)
                                                    YouTube Link
                                                @elseif ($link->video_type == 2)
                                                    Video Link
                                                @elseif ($link->video_type == 3)
                                                    Image Link
                                                @elseif ($link->video_type == 4)
                                                    PDF Link
                                                @else
                                                    {{ $cdn }}{{ ucfirst(substr($link->link, 0, 20)) }}{{ strlen($link->link) > 20 ? '...' : '' }}
                                                @endif
                                            </a>
                                        </td> --}}

                                        <td class="ps-1">
                                            {!! ucfirst(substr($link->topic_name, 0, 50)) !!}
                                            @if (strlen($link->topic_name) > 50)
                                                ...
                                                {{-- <span class="view-more" onclick="toggleText('{{ $link->topic_name }}')"
                                                    style="color: #696cff;cursor: pointer;">View more</span> --}}
                                            @endif
                                        </td>
                                        {{-- <td class="ps-1">
                                                                                        {{ $linktype }}
                                        </td> --}}
                                        <td class="ps-3">
                                            {{ \App\Models\ClassPackageInformation::where('login_id', $link->teacher_id)->value('class_name') ?? 'N/A' }}
                                        </td>
                                        <td class="ps-1">
                                            {{ ucfirst(substr($link->description, 0, 50)) }}{{ strlen($link->description) > 50 ? '...' : '' }}
                                        </td>
                                        <td class="ps-1">{{ dateformatter($link->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">
                                                    <a href="javascript:void(0);" class="dropdown-item view_class"
                                                        data-video_type="{{ $link->video_type }}"
                                                        data-topic="{{ $link->topic_name }}"
                                                        data-content="{{ $link->description }}"
                                                        data-link="{{ $link->link }}" data-cdn="{{ $cdn }}"
                                                        data-date="{{ dateformatter($link->created_at) }}">
                                                        <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="{{ $link->id }}"><i class="bx bx-trash me-1"></i>
                                                            Delete
                                                        </a>
                                                    @endif
                                                    {{-- </form> --}}
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="3"><span>No Link found</span></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="myModal" class="modal" style="padding-top: 50px;">

                <!-- Modal content -->
                <div class="modal-content" style="width: 40%;">
                    <span class="close" onclick="closePopup1()">&times;</span>
                    <span id="textToToggle"></span>
                </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";
        }

        function closePopup1() {
            document.getElementById("myModal").style.display = "none";
        }

        $(".view_class").on("click", function(e) {
            e.preventDefault();
            openPopup();

            let videoType = $(this).data("video_type"); // Get video type
            let link = $(this).data("link");
            let cdn = $(this).data("cdn"); // Fetch CDN URL
            let topic = $(this).data("topic"); // Get topic name
            let content = $(this).data("content"); // Get description

            $(".yt_video_link, .media-preview, .pdf-btn, .youtube-btn")
                .hide(); // Hide all elements initially

            if (videoType == 3) { // Image
                $(".media-preview").html(`<img src="${cdn}${link}" class="img-fluid" alt="Image Preview">`).show();
            } else if (videoType == 2) { // Video (add CDN)
                $(".media-preview").html(`
            <video width="100%" controls>
                <source src="${cdn}${link}" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        `).show();
            } else if (videoType == 4) { // PDF (Show button to open in new tab)
                $(".pdf-btn").attr("href", cdn + link).show();
            } else if (videoType == 1) { // YouTube (Show button to open in new tab)
                $(".youtube-btn").attr("href", link).show();
            } else {
                $(".announcement_content_popup").text(content).show(); // Default text content
            }

            $(".announcement_topic").text(topic); // Show topic name
            $(".announcement_content_popup").text(content); // Show description
            $(".announcement_head_date").text("Created On: " + $(this).data("date"));
        });




        function toggleText(text) {
            document.getElementById("myModal").style.display = "block";
            var textToToggle = document.getElementById("textToToggle");
            textToToggle.style.display = "block";
            $('#textToToggle').text(text);

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


            let formData = new FormData();

            const id = $(this).data("id");
            const url = `/deletelink/${id}`;

            $.ajax({
                url: url,
                type: "delete",
                contentType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    const status = data['status'];
                    if (status == 200) {
                        toastr.success("Kiddie Link Deleted Successfully!", "Success");
                        setTimeout(() => {
                            window.location.href = data.success;
                        }, 2000); // Redirect after 2 seconds to let the notification be visible
                    } else {
                        // Handle errors
                        $.each(data.error, function(field_name, error) {
                            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