@extends('layouts.admin')

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

<link rel="stylesheet" href="assets/css/toggle.css">
@section('main-content')
    <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>
    <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%;
        }

        table.dataTable thead .sorting_asc {
            background-image: none !important;
        }

        table.dataTable thead .sorting {
            background-image: none !important;
        }

        /* #services_wrapper .row:nth-child(2) {
            overflow-x: scroll;
        } */

        .table_heads_class {
            min-width: 100px;
        }

        /* table {
            min-height: 220px;
        } */

        table tr td {
            vertical-align: top;
        }

        .form_dltBtn {
            margin: 0;
        }
        .custom_table_outerBox .row:nth-child(2) .col-sm-12{
            min-height: 220px;
        }
    </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') == 'Fee plans removed 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_content fw-bold"></h4> <!-- Topic Name -->
            <h4 class="announcement_link fw-bold"></h4> <!-- Topic Name -->
            
            <div class="media-preview mt-2 mb-2"></div> <!-- Media container -->
            <h4 class="announcement_topic fw-bold"></h4> <!-- Topic Name -->


            <p class="announcement_content_popup mt-2 mb-2"></p> <!-- Description -->

            <p class="announcement_head_date fw-bold"></p>
        </div>
    </div>


    <div class="d-none" id="messageContainer" style="position: absolute; top:15%; margin-left:1%;">

    </div>

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-auto container-p-y row">
            <div class="row mb-2">
                <div class="col-md-6 col-12 mb-3">
                    <h4 class="fw-bold py-3 mb-1"><span class="text-muted fw-light">Records / </span>QR Image</h4>
                </div>

                <div class="col-md-6 col-12 d-flex flex-row-reverse">
                    <div class="upgrade-btn m-1 text-end">
                        <a href="/create-qrimage" class="btn btn-primary text-white">Add New QR Image</a>
                    </div>
                </div>
            </div>

            <!-- Basic Bootstrap Table -->
            <div class="card pb-5 ms-2">
                <h5 class="mt-4">QR Image</h5>
                <div class="table dataTable text-nowrap dtbl_dropdown">
                    <div class="custom_table_outerBox">
                        <table class="table" id="services">
                            <thead class="text-nowrap">
                                <tr>
                                    <th>S.No</th>
                                    <th class="table_heads_class">Title</th>
                                    <th class="table_heads_class">Associated Fees</th>
                                    <th class="text-center table_heads_class" style="width: 210px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="table-border-bottom-0">
                                @if (isset($qrimage) && count($qrimage) != 0)
                                    @foreach ($qrimage as $key => $value)
                                        <tr id="row_{{ $value->id }}">
                                            <td>{{ $key + 1 }}</td>
                                            <td>{{ $value->title }}</td>
                                        <td>
                                                                                        @foreach($value->fee_name as $fee)
                                                {{ $feeOptions[$fee] ?? $fee }}<br> 
                                                                                            @endforeach
                                        </td>
                                            <td class="">
                                                <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-content="{{ $value->title }}"
                                                            data-image="{{ $value->qr_image }}"
                                                            data-topic="{{ $string_arr }}"
                                                            data-link="{{ $value->upi }}"
                                                            data-cdn="{{ $cdn }}"
                                                            data-date="{{ dateformatter($value->created_at) }}">
                                                            <i class="bx bx-show-alt me-1"></i> View
                                                        </a>
                                                        <a class="dropdown-item" href="/edit-qrimage/{{ $value->id }}">
                                                            <i class="bx bx-edit-alt me-1"></i> Edit
                                                        </a>


                                                        <button type="button" class="dropdown-item"
                                                            onclick="deleteQR('{{ $value->id }}', '{{ ucwords($value->title) }}')">
                                                            <i class="bx bx-trash me-1"></i> Delete
                                                        </button>

                                                    </div>
                                                </div>

                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td><span>{{ 'No record found' }}</span></td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </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>
@endsection
<script>
    function deleteQR(id, title) {
        if (!confirm(`Warning: Some data may be linked with ${title}. Still want to remove QR?`)) {
            return;
        }

        $.ajax({
            url: `/delete-qrimage/${id}`, // Laravel route
            type: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}' // Laravel CSRF token
            },
            success: function(response) {
                alert(response.message); // Show success message

                if (response.status === 200 && response.success) {
                    window.location.href = response.success; // Redirect to the given URL
                } else {
                    location.reload(); // Reload the page if no redirect URL is provided
                }
            },
            error: function(xhr) {
                alert(xhr.responseJSON.message || "Failed to delete QR image.");
            }
        });
    }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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";
    }

    $(document).ready(function() {
        $(document).on("click", ".view_class", function(e) {
            e.preventDefault();
            openPopup(); // Open the popup

            // Get data attributes
            let topic = $(this).data("topic");
            let content = $(this).data("content");
            let image = $(this).data("image");
            let link = $(this).data("link");
            let date = $(this).data("date");
            let cdn = $(this).data("cdn");

            // Hide unnecessary elements
            $(".media-preview").hide();

            // Display data in the popup
            $(".announcement_topic").text(topic);
            $(".announcement_content").text(content);
            $(".announcement_link").text(link);
            $(".announcement_head_date").text("Created On: " + date);
            // Show image if available
            if(link){
                $(".announcement_link").text(link);
            }else{
                $(".announcement_link").text("No UPI ID available").show();
            }
            if (image) {
                $(".media-preview").html(`<img src="${cdn}${image}" class="img-fluid" alt="Image Preview" style="max-width: 300px; max-height: 300px;">`)
                    .show();
            } else {
                $(".announcement_content_popup").text("No QR Image available").show();
            }
        });
    });


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

    }
</script>
{{-- <script>
    function usersstatus(id) {

        var mainParent = $('#' + id);

        if ($(mainParent).find('input.cb-value').is(':checked')) {
            $(mainParent).addClass('active');
            var status = "active";
        } else {
            $(mainParent).removeClass('active');
            var status = "in-active";
        }
        var formData = new FormData();

        formData.append('uuid', id);
        formData.append('status', status);
        $.ajax({
            type: "post",
            url: "{{ url('/active-teacher') }}",
            contentType: 'application/json',
            cache: false,
            contentType: false,
            processData: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: formData,
            success: function(data) {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
                if ($.isEmptyObject(data.error)) {
                    const msg = data["msg"];
                    const messageContainer = $('#messageContainer');
                    messageContainer.empty();
                    $('#messageContainer').removeClass('d-none');
                    if (msg == "activated" || msg == "deactivated") {
                        // Add the success message to the #messageContainer
                        if (msg == "activated") messageContainer.html(
                            `<div class="alert alert-success">${data["response"]}</div>`);
                        else messageContainer.html(
                            `<div class="alert alert-danger">${data["response"]}</div>`);
                    } else {
                        // Add the error message to the #messageContainer
                        messageContainer.html(
                            '<div class="alert alert-danger">Error: Something went wrong</div>');
                    }
                    setTimeout(function() {
                        messageContainer.empty();
                        $('#messageContainer').addClass('d-none');
                    }, 3000);
                } else {
                    // printErrorMsg(data.error);
                    $.each(data.error, function(field_name, error) {
                        // $(document).find('[name='+field_name+']').after('<span class="text-strong text-danger">' +error+ '</span>')
                        $(document).find('#' + field_name + '').closest('div').after(
                            '<span class="text-strong text-danger">' + error + '</span>')
                    })
                }
            }
        });
    }
</script> --}}