@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Receipt</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;
    }
</style>
<style>
    .input {
        color: #697a8d;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .question {
        border: 1px solid #ccc;
        padding: 20px;
        margin-top: 20px;
    }

    .icon-btn {
        margin-right: 5px;
    }

    #loader {
        text-align: center;
        /* Align the loader to the center */
        margin-left: 15px;
        /* Adjust this value to manage space between loader and button */
        width: auto;
        display: inline-block;
    }

    #loader img {
        width: 30px;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-text-fill-color: #697a8d !important;
    }
</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%;
    }

    .cardBox img.card-img-top {
        height: 240px;
        width: 100%;
        object-fit: cover;
    }

    table#services thead {
        display: none;
    }

    table.dataTable tbody tr {
        border-color: transparent;
    }

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

    table.dataTable thead .sorting {
        background-image: none !important;
    }
</style>
<link rel="stylesheet" href="{{ asset('assets/css/card_inside_data_table.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" />
@include('datepicker')
@section('main-content')
    <!-- Content wrapper -->


    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Add New Receipt</h4>
            <!-- Basic Layout -->
            <!-- Receipt Info Fields (no form tag) -->
            <div class="row">
                <div class="col-xl">
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Edit Receipt Info</h5>
                        </div>
                        <div class="card-body">

                            <!-- Hidden Receipt ID -->
                            <input type="hidden" id="receipt_id" value="{{ $receiptInfo->id }}">

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="school_title">School TagLine</label>
                                    <input type="text" id="school_title" class="form-control"
                                        value="{{ $receiptInfo->school_title }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="school_name">School Name</label>
                                    <input type="text" id="school_name" class="form-control"
                                        value="{{ $receiptInfo->school_name }}">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="school_address">School Address</label>
                                    <input type="text" id="school_address" class="form-control"
                                        value="{{ $receiptInfo->school_address }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="school_email">School Email</label>
                                    <input type="email" id="school_email" class="form-control"
                                        value="{{ $receiptInfo->school_email }}">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="mobile_number1">Mobile Number 1</label>
                                    <input type="text" id="mobile_number1" class="form-control" maxlength="10"
                                        value="{{ $receiptInfo->mobile_number1 }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="mobile_number2">Mobile Number 2</label>
                                    <input type="text" id="mobile_number2" class="form-control" maxlength="10"
                                        value="{{ $receiptInfo->mobile_number2 }}">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="receipt_number">Receipt Number</label>
                                    <input type="text" id="receipt_number" class="form-control"
                                        value="{{ $receiptInfo->receipt_number }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="logo1">Upload Logo 1</label>
                                    <input type="file" id="logo1" accept="image/*" class="form-control">
                                    @if ($receiptInfo->logo1)
                                        <div class="mt-2">
                                            <a href="javascript:void(0);"
                                                onclick="showImage('{{ $cdn . $receiptInfo->logo1 }}')">View Logo1</a>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="logo2">Upload Logo 2</label>
                                    <input type="file" id="logo2" accept="image/*" class="form-control">
                                    @if ($receiptInfo->logo2)
                                        <div class="mt-2">
                                            <a href="javascript:void(0);"
                                                onclick="showImage('{{ $cdn . $receiptInfo->logo2 }}')">View Logo2</a>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group mt-3">
                                <!-- Update Button with Loading Spinner -->
                                <button type="button" id="submitBtn" class="btn btn-success">Update</button>
                                <div id="loader" style="display: none;">
                                    <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." style="height: 30px;">
                                </div>
                                <div id="responseMessage"></div>
                            </div>

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



        </div>
        <!-- / Content -->
        <div class="content-backdrop fade"></div>
    </div>

    <!-- Image Popup -->
    <div id="imageModal"
        style="display: none; position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:9999; align-items:center; justify-content:center;">
        <span onclick="closeImage()"
            style="position:absolute; top:20px; right:30px; color:white; font-size:40px; cursor:pointer;">&times;</span>
        <img id="popupImage" src="" style="max-width:90%; max-height:90%; margin:auto;">
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function showImage(src) {
            document.getElementById("popupImage").src = src;
            document.getElementById("imageModal").style.display = "flex";
        }

        function closeImage() {
            document.getElementById("imageModal").style.display = "none";
        }
    </script>
    <script>
        $('#submitBtn').click(function(e) {
            e.preventDefault(); // Prevent page reload

            // Clear old error messages
            $('.text-danger').remove();

            let formData = new FormData();
            formData.append('school_title', $('#school_title').val());
            formData.append('school_name', $('#school_name').val());
            formData.append('school_address', $('#school_address').val());
            formData.append('school_email', $('#school_email').val());
            formData.append('mobile_number1', $('#mobile_number1').val());
            formData.append('mobile_number2', $('#mobile_number2').val());
            formData.append('receipt_number', $('#receipt_number').val());

            let logo1 = $('#logo1')[0].files[0];
            let logo2 = $('#logo2')[0].files[0];
            if (logo1) formData.append('logo1', logo1);
            if (logo2) formData.append('logo2', logo2);

            formData.append('_token', '{{ csrf_token() }}');

            $('#loader').show();
            $('#responseMessage').html('');

            // Send AJAX request to the update endpoint
            $.ajax({
                url: "/update-ReceiptInfo/{{ $receiptInfo->id }}", // Use dynamic ID here
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    const status = data["status"];

                    if (status == 400) {
                        const error_code = data["error_code"];

                        if (error_code === 1) {
                            $.each(data["errors"], function(field_name, error) {
                                // Check if the error message for the field already exists
                                if ((field_name == "image" && (!$(`#image`).closest('div')
                                        .next().hasClass('text-danger'))) ||
                                    (field_name == "description" && (!$(`#description`).closest(
                                        'div').next().hasClass('text-danger')))) {
                                    $(`#${field_name}`).closest('div').after(
                                        '<div class="text-strong text-danger">' + error +
                                        '</div>');
                                } else if (!$(`#${field_name}`).closest('div').next().hasClass(
                                        'text-danger')) {
                                    $(`#${field_name}`).addClass('is-invalid');
                                    $(`#${field_name}`).closest('div').append(
                                        '<span class="text-strong text-danger">' + error +
                                        '</span>');
                                }
                            });

                            const firstErrorElement = $('.is-invalid').first();
                            if (firstErrorElement.length) {
                                $('html, body').animate({
                                    scrollTop: firstErrorElement.offset().top -
                                        20 // Adjust the offset as needed
                                }, 500);
                            }
                        } else {
                            if (!$(`#save_btn`).closest('div').next().hasClass('text-danger')) {
                                $(`#save_btn`).closest('div').after(
                                    '<span class="text-strong text-danger">' + data["message"] +
                                    '</span>');
                            }
                        }

                    } else {
                        toastr.success("Receipt updated successfully.");

                        setTimeout(() => {
                            window.location.href = data.success;
                        }, 1500);
                    }
                    $('#save_btn').prop("disabled", false);
                },
                error: function() {
                    // Hide loader in case of an error
                    $('#loader').hide();
                    $('#save_btn').prop("disabled", false);

                    // Handle error
                },
                complete: function() {
                    // Hide loader when the request is completed (success, error, or failure)
                    $('#loader').hide();
                    $('#save_btn').prop("disabled", false);
                }
            });
        });
    </script>
@endsection