@extends('layouts.admin')

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

@include('datepicker')

@section('main-content')
<link rel="stylesheet" href="{{asset('assets/css/pop_up_with_image.css')}}"/>


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

    #student_select {
        display: inline-block !important;
        width: auto !important;
        margin-left: 5px;
        border-color: #697a8d;
    }
    .addFullWidth{
        width: 100%;
    }
</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')=="Parent deleted successfully."?"alert-danger":"alert-success"}}" role="alert">
                {{Session::get('success')}}
            </div>
        @endif
    </div>
</div>
<div class="">
    <!-- Content -->
    <div class="container-xxl container-p-y row">
        <div class="col-6">
            <h4 class="fw-bold py-3 mb-4">Fee Account Details</h4>
        </div>
        <div class="card ms-3 pb-3 mb-2">
            <div class="mb-3 mt-3">
                <label class="form-label">QR Code</label>
                <input class="form-control" type="file" accept="image/jpg, image/jpeg, image/png" id="qr_code"/>
            </div>
            <div class="mb-3">
                <label class="form-label">UPI ID</label>
                <input type="text" class="form-control" id="upi_id"/>
            </div>
            <div class="d-flex">
                <button class="btn btn-success" onclick="save()" id="save_btn">Save</button>
            </div>
        </div>
    </div>

    <div class="container-xxl row">
        <div class="card ms-3 mb-2 pb-2  pt-2">
            @if (isset($offlinePaymentsData))
                <div class="d-flex gap-3">
                    <div>
                        <p class="fw-bold">QR Code</p>
                        <img src="{{asset('assets/qr_code_image/'.$offlinePaymentsData->qr_code)}}" alt="qr-code-img" width="300px"/>
                    </div>
                    <div>
                        <p class="fw-bold">UPI ID</p>
                        <p>{{isset($offlinePaymentsData)?$offlinePaymentsData->upi_id:"UPI ID not included yet."}}</p>
                    </div>
                </div>
            @else
                <p>Payment details not found.</p>
            @endif
        </div>
    </div>

    <div id="myModal" class="modal p-3">
        <!-- Modal content -->
        <div class="modal-content" style="width: 40%;">
            <div><span class="close text-end">&times;</span></div>
            <h4 class="text-center" id="text_in_modal"></h4>
            <div class="text-center mb-5">
                <img src="{{URL::asset('assets/images/users/avatar.jpg')}}" id="card_pic" height="470" width="100%"/>
            </div>
        </div>
    </div>
</div>

<script>

    var modal = document.getElementById("myModal");
    var span = document.getElementsByClassName("close")[0];
    let review_id = 0;
    var imgElement;

    span.onclick = function() {
      modal.style.display = "none";
      review_id = 0;
    }

    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }

    function openModalForPreviouslyUploaded(re_id, text_to_include,stu_name, class_name, payment_type, transaction_date, image_url, amount_paid){
      modal.style.display = "block";
      review_id = re_id;
      const html_to_insert = `<table class='table'>
                                <tbody>
                                    <tr class="text-center fw-bold">
                                        <td colspan='2'>${text_to_include}</td>
                                    </tr>
                                    <tr>
                                        <td>Student Name</td>
                                        <td>${stu_name}</td>
                                    </tr>
                                    <tr>
                                        <td>Student Class</td>
                                        <td>${class_name}</td>
                                    </tr>
                                    <tr>
                                        <td>Payment Type</td>
                                        <td>${payment_type}</td>
                                    </tr>
                                    <tr>
                                        <td>Amount Paid</td>
                                        <td>₹ ${amount_paid}</td>
                                    </tr>
                                    <tr>
                                        <td>Transaction Date</td>
                                        <td>${transaction_date}</td>
                                    </tr>
                                </tbody>
                            </table>`;
        
        $("#success_msg").addClass("d-none");
        $("#error_msg").addClass("d-none");

      $("#text_in_modal").html(html_to_insert);

      imgElement = document.getElementById('card_pic');
      imgElement.src = image_url;
    }

    function save(data){
        const qr_code = $("#qr_code").prop('files')[0];
        const upi_id = ($("#upi_id").val()).trim();
        $('.text-danger').remove();
        $('input').removeClass('is-invalid');
        $("#save_btn").prop('disabled',true);

        let formData = new FormData();
        formData.append('qr_code', qr_code?qr_code:"");
        formData.append('upi_id', upi_id);

        $.ajax({
            type: "post",
            url: "{{'/addOfflinePaymentDetails'}}",
            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){
                if(data.error){
                    $.each(data.error, function(field_name, error) {
                        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[0] + '</span>');
                        }
                    });

                    const firstErrorElement = $('.is-invalid').first();
                    if (firstErrorElement.length) {
                        $('html, body').animate({
                            scrollTop: firstErrorElement.offset().top - 20 // Adjust the offset as needed
                        }, 500);
                    }
                    $("#save_btn").prop('disabled',false);
                }else{
                    $("#save_btn").closest('div').after(`<span class='text-success'>Successfully saved your information.</span>`);
                    setTimeout(() => {
                        window.location.reload();
                        $("#save_btn").prop('disabled',false);
                    }, 1200);
                }
            },
            error:function(){
                $("#save_btn").prop('disabled',false);
            }
        });
    }
    
</script>
@endsection