@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Meal plan</title>
<style>
    /*
    .container {
        margin: 20px;
    }

    #imageContainer img {
        max-width: 200px;
        margin: 10px;
    }

    .popup {
        display: none;
        position: fixed;
        z-index: 2000 !important;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
    }

    .popup-content {
        background-color: #fff;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 80%;
        text-align: center;
    }

    .close-button {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close-button:hover,
    .close-button:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    } */

    .container {
        margin: 20px;
    }

    #imageContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .image-wrapper {
        position: relative;
        margin: 10px;
    }

    .image-wrapper img {
        max-width: 500px;
        max-height: 500px;
        display: block;
    }

    .remove-button {
        position: absolute;
        top: -8px;
        right: -8px;
        background: rgba(255, 0, 0, 0.8);
        color: white;
        border: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .popup {
        display: none;
        position: fixed;
        z-index: 2000 !important;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .popup-content {
        background-color: #fff;
        margin: 2% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        /* max-width: 500px; */
        text-align: center;
        position: relative;
    }

    .close-button {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .close-button:hover,
    .close-button:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .add-image-container {
        text-align: center;
        margin-top: 10px;
    }

    .add-button {
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        font-size: 24px;
        cursor: pointer;
        display: none;
        /* Initially hidden */
    }

    .layout-container {
        z-index: 0;
    }

    .multiSelect_inputGroup {
        text-align: left;
    }

    .multiSelect_inputGroup .select2-container--default {
        width: 100% !important;
    }

    .add-image-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .showUploadingProcess {
        /* display: none; */
        position: fixed;
        z-index: 3000 !important;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }


    /* new changes */

    .image-wrapper img {
        width: 150px;
        height: 150px;
        display: block;
        object-fit: cover;
    }

    .twoLine_p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>



<style>
    .popup {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
    }

    .popup-content {
        position: relative;
        margin: 5% auto;
        padding: 20px;
        background: #fff;
        width: 90%;
        max-width: 600px;
        border-radius: 10px;
        text-align: center;
    }

    .popup-close {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 24px;
        cursor: pointer;
        color: #000;
    }

    #popupImage {
        max-width: 90%;
        height: auto;
        border-radius: 5px;
    }
</style>

{{-- <link rel="stylesheet" href="{{ asset('assets/css/card_inside_data_table.css') }}"> --}}
<link rel="stylesheet" href="{{ URL::asset('assets/multi_select/multiselect_style.css') }}">

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

@section('main-content')
    <!-- Content wrapper -->
    <div class="content-wrapper">
        <!-- Content -->
        <!-- Image Popup -->
        <div id="imagePopup" class="popup">
            <div class="popup-content">
                <span class="popup-close" onclick="closeImagePopup()">&times;</span>
                <img id="popupImage" src="" alt="Logo" />
            </div>
        </div>

        <div class="container-xxl flex-grow-1 container-p-y">
            <div class="row">

                <div class="col-6">
                    <h4 class="fw-bold py-3 mb-4">New Receipt </h4>
                </div>
                @if (count($receiptInfo) <= 0)
                    <div class="col-6">
                        <div class="text-end upgrade-btn">
                            <a href="/create-receipt" class="btn btn-primary text-white">Add Receipt</a>
                        </div>
                    </div>
                @endif

                <div class="">
                    {{-- <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Meal Receipt</span></h4> --}}
                    <div class="row">
                        <div class="card pb-3 ms-2">
                            <h5 class="mt-3">Receipt</h5>
                            <div class="table dataTable text-nowrap dtbl_dropdown">
                                <table class="table" id="services">
                                    <thead>
                                        <tr>
                                            <th>S.No</th>
                                            <th>Receipt Number</th>
                                            <th>School Name</th>
                                            <th>School Address</th>
                                            <th>School Title</th>
                                            <th>School Email</th>
                                            <th>Mobile Number1</th>
                                            <th>Mobile Number2</th>
                                            <th>logo1</th>
                                            <th>logo2</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="table-border-bottom-0">

                                        @if (count($receiptInfo) > 0)
                                            @foreach ($receiptInfo as $key => $receipt)
                                                <tr id="row_{{ $key }}">
                                                    <td class="ps-3">{{ $key + 1 }}</td>

                                                    <td class="ps-3">
                                                        <p class="twoLine_p">{{ $receipt->receipt_number }}</p>
                                                    </td>

                                                    <td class="ps-3">
                                                        {{ $receipt->school_name }}
                                                    </td>
                                                    <td class="ps-3">
                                                        {{ $receipt->school_address }}
                                                    </td>
                                                    <td class="ps-3">
                                                        {{ $receipt->school_title }}
                                                    </td>
                                                    <td class="ps-3">
                                                        {{ $receipt->school_email }}
                                                    </td>

                                                    <td class="ps-3">
                                                        {{ $receipt->mobile_number1 }}
                                                    </td>

                                                    <td class="ps-3">
                                                        {{ $receipt->mobile_number2 }}
                                                    </td>

                                                    <td class="ps-3 text-nowrap">
                                                        <a href="javascript:void(0);"
                                                            onclick="showImage('{{ $cdn . $receipt->logo1 }}')">Logo1</a>
                                                    </td>
                                                    <td class="ps-3 text-nowrap">
                                                        <a href="javascript:void(0);"
                                                            onclick="showImage('{{ $cdn . $receipt->logo2 }}')">Logo2</a>
                                                    </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="/edit-ReceiptInfo/{{ $receipt->id }}">
                                                                    <i class="bx bx-edit-alt me-1"></i> Edit
                                                                </a>

                                                                <a href="javascript:void(0);"
                                                                    class="dropdown-item delete-receipt"
                                                                    data-id="{{ $receipt->id }}">
                                                                    <i class="bx bx-trash me-1"></i> Delete
                                                                </a>

                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="9"><span>No record found</span></td>
                                            </tr>
                                        @endif

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="{{ URL::asset('assets/multi_select/multi_select_myWork1.js') }}"></script>
    <!-- Include Toastr CSS and JS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <script>
        function showImage(src) {
            document.getElementById('popupImage').src = src;
            document.getElementById('imagePopup').style.display = 'block';
        }

        function closeImagePopup() {
            document.getElementById('imagePopup').style.display = 'none';
        }
    </script>

    <script>
        $(document).ready(function() {
            $('.delete-receipt').click(function(e) {
                e.preventDefault();

                if (!confirm('Are you sure you want to delete this receipt?')) {
                    return;
                }

                const receiptId = $(this).data('id');

                $.ajax({
                    url: '/delete-ReceiptInfo/' + receiptId,
                    type: 'Delete', // Or POST if your route expects it
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        if (data.status === 200) {
                            alert(data.message);
                            // Optionally reload the page or remove the row from the table
                            location.href = data.success;
                        } else {
                            alert(data.message || 'Something went wrong.');
                        }
                    },
                    error: function(xhr) {
                        alert('Server error. Please try again.');
                    }
                });
            });
        });
    </script>


@endsection