@extends('layouts.admin')

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

@include('datepicker')

@section('main-content')

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

<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% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 50%;
        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;
    }
</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

        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach 
            </ul>
        </div>
        @endif
    </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> Payments</h4>
        </div>
        <div class="col-6">
            <div class="text-end upgrade-btn">
                <a href="/addFeeOffline" class="btn btn-primary">Add Offline Fee</a>
            </div>
        </div>
        <!-- Basic Bootstrap Table -->
        <div class="card ms-3 p-3 mb-4 filters_div">
            <h5>Filters</h5>
            <div class="d-flex justify-content-around">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="showAll" onchange="handleChange()">
                    <label class="form-check-label" for="flexRadioDefault1">
                        Show All Completed Transactions
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="showLastOne" onchange="handleChange()" checked>
                    <label class="form-check-label" for="flexRadioDefault2">
                        Show Single Recent Transaction
                    </label>
                </div>
            </div>
        
            <div class="row">
                <div class="col-12 col-md-4 mb-3">
                    <label class="form-label">Payment Type</label>
                    <select class="form-select form-control" id="select_payment_type">
                        <option selected disabled hidden>Select Payment Type</option>
                        <option value="">All</option>
                        <option value="0">Monthly</option>
                        <option value="1">Quaterly</option>
                        <option value="2">Semi-Annual</option>
                        <option value="3">Annual</option>
                    </select>
                    <div class="text-end">
                        <button onclick="resetfilters('select_payment_type')" class="btn btn-info mt-2 d-none reset_select_payment_type">
                            Reset Payment Type
                            <span class="ps-1" style="color: red;"> x</span>
                        </button>
                    </div>
                </div>
                <div class="col-12 col-md-4 mb-3">
                    <label class="form-label">Start Date</label>
                    <input class="form-input form-control bg-white" placeholder="Start Date" id="start_date" autocomplete="off" readonly />
                    <div class="text-end">
                        <button onclick="resetfilters('start_date')" class="btn btn-info mt-2 d-none reset_start_date">
                            Reset Start Date
                            <span class="ps-1" style="color: red;"> x</span>
                        </button>
                    </div>
                </div>
                <div class="col-12 col-md-4 mb-3">
                    <label class="form-label">End Date</label>
                    <input class="form-control form-input bg-white" placeholder="End Date" id="end_date" autocomplete="off" readonly />
                    <div class="text-end">
                        <button onclick="resetfilters('end_date')" class="btn btn-info mt-2 d-none reset_end_date">
                            Reset End Date
                            <span class="ps-1" style="color: red;"> x</span>
                        </button>
                    </div>
                </div>
            </div>

        </div>
        <div class="mb-2 text-end text-muted fw-bold show_last_transaction_msg">
            *Table depicts last transaction status*
        </div>
        <div class="card ms-3 pb-3 mb-2">
            <h5 style="padding: 1.5rem 0.5rem;">Payment List</h5>
            <div class="table dataTable text-nowrap dtbl_dropdown">
                <table class="table" id="services">
                    <thead>
                        <tr>
                            {{-- <th>#</th> --}}
                            <th>Student<br/>Name</th>
                            <th>Class<br/>Name</th>
                            <th>Payment<br/>Type</th>
                            <th>Transaction<br/>Date</th>
                            <th>Payment<br/>Mode</th>
                            <th>Payment<br/>Status</th>
                            <th>Pending<br/>Amount</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="table-border-bottom-0">
                        @if(count($data) != 0)
                            @foreach($data as $key => $detail)
                                <tr id="row_{{ $detail->id }}">
                                    {{-- <td>{{ $key+1 }}</td> --}}
                                    <td class="name{{ $detail->id }}">{{ ucwords($detail->student->first_name)." ".ucwords($detail->student->last_name) }}</td>
                                    <td class="name{{ $detail->id }}">{{ ucwords($detail->class_name)}}</td>
                                    <td class="name{{ $detail->id }}">
                                        @if ($detail->payment_type == null )
                                            N.A.
                                        @elseif ($detail->payment_type == 0)
                                            Monthly
                                        @elseif ($detail->payment_type == 1)
                                            Quarterly 
                                        @elseif ($detail->payment_type == 2)
                                            Semi-Annual
                                        @elseif ($detail->payment_type == 3)
                                            Annual
                                        @endif
                                    </td>
                                    <td>{{$detail->payment_date?dateformatter($detail->payment_date):'N.A.'}}</td>
                                    <td class="name{{ $detail->id }}">
                                        @if ($detail->payment_mode == 0)
                                            N.A.
                                        @elseif ($detail->payment_mode == 1)
                                            <span class="text-primary">
                                                Online 
                                            </span>
                                        @elseif ($detail->payment_mode == 2)
                                            <span class="text-info">
                                                Offline
                                            </span>
                                        @endif
                                    </td>
                                    <td class="name{{ $detail->id }}">
                                        @if ($detail->payment_status == "Completed")
                                            <span class="text-success">
                                                Completed
                                            </span>
                                        @else
                                            <span class="text-danger">
                                                Pending
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        ₹ {{$detail->remaining_fee}}
                                    </td>

                                    <td class="text-center">
                                        <a class="btn btn-outline-primary ms-2 me-2 mb-2" href="/view-feedetail/{{$detail->uuid}}">View</a>
                                        @if ($detail->payment_status == "Completed")
                                            <a class="btn btn-outline-info view_note mb-2" href="javaScript:void(0);" 
                                                data-fee_id = "{{$detail->id}}"
                                                data-student_name="{{ucwords($detail->student->first_name)." ".ucwords($detail->student->last_name)}}" 
                                                data-class_name ="{{ucwords($detail->class_name)}}" 
                                                data-payment_type="{{$detail->payment_type}}" 
                                                data-payment_date="{{dateformatter($detail->payment_date)}}" 
                                                data-payment_status="{{$detail->payment_status}}" 
                                                data-payment_mode="{{$detail->payment_mode}}" 
                                                data-remaining_fee="{{$detail->remaining_fee}}"
                                                data-note="{{$detail->note}}"
                                                >Notes</a>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        @else
                        <tr>
                            <td colspan="3"><span>No records found</span></td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- / Content -->
</div>

<div id="popup" class="popup">
    <!-- Popup content -->
    <div class="popup-content">
        <span class="close" onclick="closePopup()">&times;</span>
        <input type="text" value="" class="fee_id" hidden/>
        <h4 class="announcement_head_popup">Class Name: Play Group</h4>
        <h6 class="announcement_head_class">Class Name: Play Group</h6>
        <h6 class="announcement_head_payment_type">Payment Type: </h6>
        <p class="announcement_content_popup1">Transaction Date: </p>
        <p class="announcement_content_popup2">Payment Mode: </p>
        <p class="announcement_content_popup3">Payment Status: </p>
        <p class="announcement_content_popup4">Payment Pending: </p>
        <div class="div_announcement_notes">
            <label>Notes: </label>
            <textarea class="form-control announcement_textarea" rows="5" minlength="10" maxlength="500" style="max-height: 175px;"></textarea>
        </div>
        <div class="text-center">
            <button class="btn btn-success mt-2 mb-2" type="button" id="saveNote" onclick="saveNotes()">Save Note</button>
        </div>
    </div>
</div>

<script>
    
    jQuery(function($) {
        let maxi = new Date(),mini=new Date();
        mini.setFullYear(2000);

        $("#start_date").datepicker({
            dateFormat: "dd-mm-yy", 
            defaultDate: new Date(), 
            minDate:mini, 
            maxDate: maxi,
            changeMonth: true, 
            changeYear: true,
        }).on('click',function(){
            $(this).datepicker('show');
        });

        $("#end_date").datepicker({
            dateFormat: "dd-mm-yy", 
            defaultDate: new Date(), 
            minDate:mini, 
            maxDate: maxi,
            changeMonth: true, 
            changeYear: true,
        }).on('click',function(){
            $(this).datepicker('show');
        });
       
    });

    const start_date = document.getElementById('start_date');
    const end_date = document.getElementById('end_date');
    const show_last_transaction_msg = document.getElementsByClassName('show_last_transaction_msg');
    let show_option = 2;

    $("#specific_date").on('change',function(){
        $("#clearDateBtn").removeClass('d-none');
        const date=$("#specific_date").val();
        
        $.ajax({
            url:'/filterOnFees',
            headers:{
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
            },
            method:'GET',
            data:{"send_date":date},
            success:function(resp){
                $("#services").hide();
                if(resp["status"]=="success"){
                    $("#services").hide();

                    let table = $('#services');
                    
                    try {
                        if ($.fn.DataTable.isDataTable('#services')) {
                            $('#services').DataTable().destroy();
                        }

                        $('#services').DataTable({
                            pageLength: 50,
                            data: resp["fee_data"],
                            columns: [
                                // Define columns based on the properties in your data
                                { title: 'Student Name', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {
                                        return `${data["student"]["first_name"]} ${data["student"]["last_name"]}`;
                                }},
                                { title: 'Course Name', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {
                                        return `${data["course"]["coursename"]}`;
                                }},
                                { title: 'Payment Type', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {
                                        return (data["payment_type"]==0)?`Monthly`:`One Time`;
                                }},
                                { title: 'Payment Mode', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {
                                        return (data["payment_mode"]==0)?`Offline`:`Online`;
                                }},
                                { title: 'Status', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {
                                        return `${data["payment_status"]}`;
                                }},
                                { title: 'Action', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {
                                        return `<div class="dropdown">
                                                    <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 view" href='/view-feedetail/${data["student"]["id"]}''><i class="bx bx-view"></i> View</a>
                                                    </div>
                                                </div>`;
                                }},
                                
                            ],
                        });
                        $('#services').css('width', '100%');

                    } catch (error) {
                        console.error('DataTable initialization error:', error);
                    }
                    $("#services").show(); 
                }
            },
            error:function(resp){

            }
        });
    });


    $("#clearDateBtn").on("click",function(){
        $(this).prop("disabled",true);
        $("#specific_date").val("");
        $(this).addClass('d-none');
        $(this).prop("disabled",false);
        window.location.reload();
    });

    function filterOnPaymentType(payment_type, start_date, end_date){
        $('.filters_div .text-danger').remove();
        $('input').removeClass('is-invalid');
        $('select').removeClass('is-invalid');
        $.ajax({
            url:"{{url('/filterOnPaymentType')}}",
            headers:{
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
            },
            method:'GET',
            data:{"show_option":show_option,"payment_type":payment_type,"start_date":start_date, "end_date":end_date},
            success:function(resp){

                if(resp["status"]==200){
                    $("#services").hide();

                    let table = $('#services');
                    
                    try {

                        if ($.fn.DataTable.isDataTable('#services')) {
                            $('#services').DataTable().destroy();
                        }

                        // const pendingAmountClass = (show_option === 1) ? 'd-none' : 'w-auto text-left';

                        $('#services').DataTable({
                            pageLength: 50,
                            data: resp["data"]["fee_details"],
                            columns: [
                                // Define columns based on the properties in your data
                                { title: 'Student<br/>Name', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {
                                        return resp["data"]["student_details"][data["student_id"]];
                                }},
                                { title: 'Class<br/>Name', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {
                                        return `${data["class_name"]}`;
                                }},
                                { title: 'Payment<br/>Type', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {
                                        if(!data["payment_type"]) return `N.A.`;
                                        if(data["payment_type"]==0) return `Monthly`;
                                        if(data["payment_type"]==1) return `Quarterly`;
                                        if(data["payment_type"]==2) return `Semi-Annual`;
                                        if(data["payment_type"]==3) return `Yearly`;
                                }},
                                { title: 'Transaction<br/>Date', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {
                                        if(!data["fee_paid_on"]) return `N.A.`;
                                        return data["fee_paid_on"];
                                }},
                                { title: 'Payment<br/>Mode', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {
                                        if(!data["payment_mode"]) return `N.A.`;
                                        if(data["payment_mode"]==1){
                                            return `<span class="text-primary">
                                                        Online 
                                                    </span>`;
                                        }else{
                                            return `<span class="text-info">
                                                        Offline 
                                                    </span>`;
                                        }
                                        
                                }},
                                { title: 'Payment<br/>Status', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {
                                        if(!data["payment_mode"]) return `<span class='text-danger'>Pending</span>`;
                                        return `<span class='text-success'>Completed</span>`;
                                }},
                                {title: 'Pending<br/>Amount', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {
                                        return `₹ ${data["remaining_fee"]}`;
                                }},
                                { title: 'Actions', data: null, className: 'w-auto text-left',
                                    render: function(data, type, row) {

                                        let payment_type1 = "",payment_mode="", payment_status="";
                                        if(data["payment_type"]==0) payment_type1=`Monthly`;
                                        else if(data["payment_type"]==1) payment_type1=`Quarterly`;
                                        else if(data["payment_type"]==2) payment_type1=`Semi-Annual`;
                                        else if(data["payment_type"]==3) payment_type1=`Yearly`;

                                        if(!data["payment_mode"]) payment_mode=`N.A.`;
                                        else if(data["payment_mode"]==1) payment_mode="Online";
                                        else payment_mode="Offline";

                                        if(!data["payment_mode"]) payment_status="Pending";
                                        else payment_status="Completed";
                                        
                                        let addHtml = `<div class="text-center">
                                                    <a class="btn btn-outline-primary ms-2 me-2 mb-2" href='/view-feedetail/${data["fee_uuid"]}''>View</a>`;
                                        if(data["payment_mode"]){
                                            addHtml+=`<a class="btn btn-outline-info view_note mb-2" href="javaScript:void(0);"
                                                            data-fee_id = "${data["id"]}"
                                                            data-student_name="${resp["data"]["student_details"][data["student_id"]]}" 
                                                            data-class_name ="${data["class_name"]}" 
                                                            data-payment_type="${payment_type1}" 
                                                            data-payment_date="${data["fee_paid_on"]}" 
                                                            data-payment_status="${payment_status}" 
                                                            data-payment_mode="${payment_mode}" 
                                                            data-remaining_fee="${data["remaining_fee"]}"
                                                            data-note="${data["note"]}"
                                                            >
                                                            Notes</a>`;
                                        }

                                        addHtml+=`</div>`;

                                        return addHtml;
                                }},
                                
                            ],
                            language: {
                                emptyTable: "No record found"  // Customize the "No data available" message
                            }
                        });
                        $('#services').css('width', '100%');

                    } catch (error) {
                        console.error('DataTable initialization error:', error);
                    }
                    $("#services").show(); 
                }else{

                    $.each(resp.errors, function(field_name, error) {
                        
                        if (!$(`#${field_name}`).closest('div').next().hasClass('text-danger')) {
                            $(`#${field_name}`).addClass('is-invalid');
                            $(`#${field_name}`).siblings('div').before('<span class="text-strong text-danger">' + error[0] + '</span>');
                        }
                    });
                }
            },
            error:function(resp){

            }
        });
    }

    $("#select_payment_type, #start_date, #end_date").on("change",function(){
        const get_id = $(this)[0].id;
        $(".reset_"+get_id).removeClass('d-none');
        const payment_type = $("#select_payment_type").val();
        const start_date1 = start_date.value;
        const end_date1 = end_date.value;
        filterOnPaymentType(payment_type, start_date1, end_date1);
    });

    function resetfilters(filter){
        let payment_type = $("#select_payment_type").val();
        let start_date1 = start_date.value;
        let end_date1 = end_date.value;
        if(filter=='select_payment_type'){
            $("#select_payment_type").val("");
            payment_type = "";
        } 
        else if(filter=='start_date') start_date1 = start_date.value = '';
        else if(filter=='end_date') end_date1 = end_date.value = '';
        $(".reset_"+filter).addClass('d-none');
        filterOnPaymentType(payment_type, start_date1, end_date1);
    }

    function handleChange(){
        const selectedOption = document.querySelector('input[name="flexRadioDefault"]:checked').id;
        show_option = (selectedOption == "showAll")?1:2;
        if(show_option==1){
            show_last_transaction_msg[0].textContent = "*Table depicts all transaction completed transaction*";
        }else{
            show_last_transaction_msg[0].textContent = "*Table depicts last transaction status*";
        }
        const get_id = $(this)[0].id;
        const payment_type = $("#select_payment_type").val();
        const start_date1 = start_date.value;
        const end_date1 = end_date.value;
        filterOnPaymentType(payment_type, start_date1, end_date1);
    }

    function openPopup() {
        document.getElementById("popup").style.display = "block";
    }

    // Function to close the popup
    function closePopup() {
        document.getElementById("popup").style.display = "none";
    }

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

        const fee_id = $(this).data('fee_id');

        let payment_type = Number($(this).data('payment_type'));
        
        if(payment_type==0)payment_type="Monthly";
        else if(payment_type==1)payment_type="Quaterly";
        else if(payment_type==2)payment_type="Semi-Annual";
        else if(payment_type==3)payment_type="Annual";

        let payment_mode = Number($(this).data('payment_mode'));

        if(payment_mode==0)payment_mode="N.A.";
        else if(payment_mode==1)payment_mode="Online";
        else if(payment_mode==2)payment_mode="Offline";

        $('.fee_id').val(fee_id);
        $('.announcement_head_popup').text("Student Name: "+$(this).data('student_name'));
        $('.announcement_head_class').text("Class Name: "+$(this).data('class_name'));
        $('.announcement_head_payment_type').text("Payment Type: "+payment_type);
        $('.announcement_content_popup1').text("Transaction Date: "+$(this).data('payment_date'));
        $('.announcement_content_popup2').text("Payment Mode: "+payment_mode);
        $('.announcement_content_popup3').text("Payment Status: "+$(this).data('payment_status'));
        $('.announcement_content_popup4').text("Remaining Fee: ₹ "+$(this).data('remaining_fee'));
        $('.announcement_textarea').val($(this).data('note'));
    });

    function saveNotes(){
        $('.popup-content .text-danger').remove();
        $('.popup-content .text-success').remove();
        $('.popup-content textarea').removeClass('is-invalid');
        $('#saveNote').prop('disabled',true);

        let formData = new FormData();

        const selectedOption = document.querySelector('input[name="flexRadioDefault"]:checked').id;
        show_option = (selectedOption == "showAll")?1:2;
        const announcement_textarea =  $('.announcement_textarea').val();
        const fee_id = $('.fee_id').val();

        formData.append('fee_id',fee_id?fee_id:"");
        formData.append('announcement_textarea',announcement_textarea?announcement_textarea:"");
        formData.append('show_option',show_option);

        $.ajax({
            type: "post",
            url: "{{ url('/addNoteInFee') }}",
            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){
                const status = data["status"];
                if(status==400){
                    $.each(data.errors, 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>');
                        }
                    });
                }else{
                    $(`#saveNote`).closest('div').append('<div class="text-strong text-success">' + data["message"] + '</div>');
                    setTimeout(() => {
                        $('.popup-content .text-success').remove();
                    }, 2000);
                }
                $('#saveNote').prop('disabled',false);
            },
            error:function(data){
                $('#saveNote').prop('disabled',false);
            }
        });
    }

</script>
@endsection