@extends('layouts/eims_layout')
@section('title', '| ' . $pageTitle)
@section('content')
    <style>
        .tab-content > .active {
            display: block;
            visibility: visible;
            justify-content: center;
        }

        .mb-15 {
            margin-bottom: 15px;
        }

        .mt-5 {
            margin-top: 5%;
        }

        .mb-5 {
            margin-top: 5%;
        }

        .text-left {
            text-align: left !important;
        }
        .text-dark{
            color: #000000;
        }
    </style>

    <div class="row" style="margin-bottom: 90px;">
        <div class="col-md-12">
            <div class="viewTitle">
                <div class="panel-options">
                    <a href="{{route('eims_student_fees_collection')}}" class="btn btn-info pull-right addViewBtn">
                        <i class="glyphicon glyphicon-th-list addIcon"></i>{{$pageTitle}} List
                    </a>
                </div>
            </div>
            <div class="panel panel-default panel-border">
                <div class="panel-body">
                    <div class="row mb-15">
                        <div class="col-sm-2">
                            <img id="student_photo_preview" class="img-responsive"
                                 src="{{ $student?->photo ? asset('images/eims/student/'.$student?->photo) :  asset('images/default-man.jpg') }}"
                                 alt="Student Photo"
                                 width="150" height="150"/>
                        </div>
                        <div class="col-sm-10">
                            {{-- just show student information using table--}}
                            <table class="table table-striped table-bordered table-condensed text-dark">
                                <tbody>
                                <tr>
                                    <th class="text-left">Id</th>
                                    <td class="text-left">{{$student->student_id_no}}</td>

                                    <th class="text-left">{{$companyType == 'UNV' ? 'Program' : 'Medium/Version'}}</th>
                                    <td class="text-left">{{$student->eims_program?->name}}</td>

                                </tr>
                                <tr>
                                    <th class="text-left">Roll No</th>
                                    <td class="text-left">{{$student->roll_no ?? null}}</td>
                                    <th class="text-left">Session</th>
                                    <td class="text-left">{{$student->eims_session->name ?? null}}</td>
                                </tr>
                                <tr>
                                    <th class="text-left">Name</th>
                                    <td class="text-left">{{$student->name ?? null}} - {{$student->phone_number?? null}}</td>
                                    <th class="text-left">{{$companyType == 'UNV' ? 'Semester' : 'Class'}}</th>
                                    <td class="text-left">{{$student->eims_semester_class?->name ?? null}}</td>
                                </tr>

                                <tr>
                                    <th class="text-left">Guardian</th>
                                    <td class="text-left">{{$student->eims_student_information->guardian_name ?? null}} - {{$student->eims_student_information->guardian_phone_number ?? null}}</td>
                                    <th class="text-left">Section</th>
                                    <td class="text-left">{{$student->eims_section->name ?? null}}</td>

                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- buttons: Print Secleted, Collect Selected --}}
                    {{--<div class="row mb-15">
                        <div class="col-md-12">
                            <button class="btn btn-info" disabled><i class="fas fa-print"> Print Selected</i></button>
                            <button class="btn btn-info" id="collectSelected"><i class="fas fa-dollar"> Collect
                                    Selected</i></button>
                        </div>
                    </div>--}}


                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default panel-border">
                                <div class="panel-body panelBodyView">
                                    {{-- fees Collection--}}
                                    <table
                                        class="table table-small-font table-responsive table-bordered first-col-dark"
                                        id="datatable"
                                        style="width: 100%">
                                        <thead>
                                        <tr>
                                            <th class="text-center text-nowrap" style="min-width: 10px">SL</th>
                                            <th class="text-center text-nowrap">Fees Type</th>
                                            {{--                                                <th class="text-center text-nowrap">Fees Code</th>--}}
                                            {{--                                                <th class="text-center text-nowrap">Due Date</th>--}}
                                            <th class="text-center text-nowrap">Status</th>
                                            <th class="text-center text-nowrap"> Fees</th>
                                            <th class="text-center text-nowrap"> Fine</th>
                                            <th class="text-center text-nowrap">Transaction ID</th>
                                            <th class="text-center text-nowrap">Payment Method</th>
                                            <th class="text-center text-nowrap">Collection Date</th>
                                            {{--                                                <th class="text-center text-nowrap">Discount</th>--}}
                                            {{--                                                <th class="text-center text-nowrap">Fine</th>--}}
                                            <th class="text-center text-nowrap">Paid</th>
                                            <th class="text-center text-nowrap">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tableBodySection"></tbody>
                                        {{--<tfoot>
                                        <tr>
                                            <th colspan="2" class="text-right">
                                                Total:
                                            </th>
                                            <th class="text-center"
                                                id="grandTotalAmount"></th>
                                            <th class="text-center" colspan="3"></th>
                                            <th class="text-center"
                                                id="grandTotalDiscount"></th>
                                            <th class="text-center"
                                                id="totalCollectedFine"></th>
                                            <th class="text-center"
                                                id="grandTotalPaid"></th>
                                            <th class="text-center"
                                                id="grandTotalBalance"></th>
                                        </tr>
                                        </tfoot>--}}
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> {{-- div panel-body --}}
            </div> {{-- Div panel panel-default panel-border --}}
            <div class="footerTitle"></div>
        </div> {{-- col-md-10 --}}
    </div>

    <script>
        "use strict";
        const student_id = '{{base64_encode($student->id)}}';
        $('#datatable').DataTable({
            sDom: "ltipr", // For removeing default Search bar //
            processing: true,
            serverSide: true,
            ordering: false,
            ajax: {
                "url": "{{ Request::url() }}",
                "type": "POST",
                "beforeSend": function () {
                    $('#loadingModal').show();
                },
                "data": {
                    _token: $('input[name=_token]').val(),
                    student_id: student_id,
                }
            },
            drawCallback: () => $('#loadingModal').hide(),
            columns: [
                {
                    data: "sl",
                    className: "text-align-left"
                },
                {
                    data: "fees_type_name",
                    className: "text-align-left",
                    render: function (data, type, row) {
                        return row.sl ? data : `<span style="padding-left: 30px">${data}</span>`;
                    }
                },
                {
                    data: "status",
                    className: "text-align-center"
                },
                {
                    data: "td_amount",
                    className: "text-align-center"
                },
                {
                    data: "td_fine",
                    className: "text-align-center"
                },
                {
                    data: "fees_bill_no",
                    className: "text-align-center"
                },
                {
                    data: "payment_method",
                    className: "text-align-center"
                },
                {
                    data: "payment_date",
                    className: "text-align-center"
                },
                // {
                //     data: "discount",
                //     className: "text-align-center"
                // },
                {
                    data: "td_paid",
                    className: "text-align-center"
                },
                {
                    data: "action",
                    className: "text-align-center",
                },
            ],
            /*  footerCallback: function (data, rows) {
                  // Helper function to parse float values from the data


                  // Initialize totals
                  let totalAmount = 0;
                  let totalDiscount = 0;
                  let totalFine = 0;
                  let totalCollectedFine = 0;
                  let totalPaid = 0;
                  let totalBalance = 0;

                  // Iterate over the data array to calculate totals
                  rows.forEach(row => {
                      totalAmount += money(row['amount']);
                      totalDiscount += money(row['discount']);
                      totalFine += money(row['fine']);
                      totalCollectedFine += money(row['fine']);
                      totalPaid += money(row['paid']);
                      totalBalance += money(row['balance']);
                  });

                  let totalFineField = '';
                  if (totalFine > 0) {
                      totalFineField = `<span class="text-danger" title="Fine">+ ${totalFine}</span>`;
                  }
                  totalPaid = totalPaid === 0 ? null : totalPaid;
                  // Update footer with calculated totals
                  $('#grandTotalAmount').html(`${totalAmount} ${totalFineField}`);
                  $('#grandTotalDiscount').html(totalDiscount === 0 ? null : totalDiscount);
                  $('#totalCollectedFine').html(totalCollectedFine === 0 ? null : totalCollectedFine);
                  $('#grandTotalPaid').html(totalPaid);
                  $('#grandTotalBalance').html(totalBalance);
              }*/
        });
    </script>


    @php($feesCollectionUrl = route('eims_student_fees_collection_store'))
    @include('eims.modal.collectFeesModal')


    {{-- modal to collect selected fee--}}
    {{--<div id="collectSelectedFeeModal" class="modal fade mt-5 mb-5">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Collect Selected Fees</h5>
                </div>
                {{ Form::open([ 'method' => 'post', 'id' => 'form2', 'role' => 'form', 'class' => 'form-horizontal', 'style' => "color:black; "]) }}

                {{ Form::hidden('student_id', $student->id, ['id' => 'student_id']) }}

                <div class="modal-body">


                    --}}{{-- date --}}{{--
                    <div class="form-group row">
                        {!! Form::label('date', 'Date: <sup class="text-danger">*</sup>', ['class' => 'col-sm-4 control-label'], false) !!}
                        <div class="col-sm-8">
                            {!! Form::text('date', $branch_campus_active_date ?? date('d-m-Y') , ['class' => 'form-control','id' => 'date2','readonly','autocomplete'=>'off']) !!}
                            <p id='date_error' style="max-height:3px;"></p>
                        </div>
                    </div>

                    --}}{{-- payment_method --}}{{--
                    <div class=" form-group">
                        {!! Form::label('payment_method', 'Payment Method: <sup class="text-danger">*</sup>', ['class' => 'col-sm-4 control-label'],false) !!}
                        <div class="col-sm-8">
                            <div class="radio">
                                @foreach($paymentMethods as $id => $paymentMethod)
                                    <label for="payment_method{{$id}}">
                                        <input type="radio" name="payment_method"
                                               id="payment_method{{$id}}"
                                               value="{{$id}}" @checked($id == 1)>

                                        {{$paymentMethod}}
                                    </label>
                                @endforeach
                            </div>

                            <p id='payment_method_error' style="max-height:3px;"></p>
                        </div>
                    </div>

                    --}}{{-- note --}}{{--
                    <div class="form-group row">
                        {!! Form::label('note', 'Note:', ['class' => 'col-sm-4 control-label']) !!}
                        <div class="col-sm-8">
                            {!! Form::textarea('note', null, ['class' => 'form-control', 'id' => 'note', 'rows' => 3]) !!}
                            <p id='description_error' style="max-height:3px;"></p>
                        </div>
                    </div>
                    <hr>
                    <div id="selectedFeesDetailsContainer">

                    </div>
                    <div class="row">
                        <div class="col-sm-6 text-right">
                            Total Pay
                        </div>
                        <input type="hidden" class="form-control" id="total_pay" name="total_pay"
                               readonly>
                        <div class="col-sm-6 text-right" id="totalPayContainer">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    {!! Form::button(' Submit', ['type' => 'submit', 'class' => 'btn btn-success ', 'id' => 'footer_action_button_submit_selected']) !!}
                    {!! Form::button(' Close', ['class' => 'btn btn-warning', 'data-dismiss' => 'modal', 'id' => 'footer_action_button_close_selected']) !!}
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
    <script>
        "use strict";

        const collectSelectedFeeModal = $('#collectSelectedFeeModal');
        const selectedFeesDetailsContainer = $('#selectedFeesDetailsContainer');
        const totalPayField = $('#total_pay');
        const totalPayContainer = $('#totalPayContainer');

        // on #collectSelected click show collectSelectedFeeModal modal
        $('#collectSelected').click(function () {


            // get all the checked checkboxes
            const checkedCheckboxes = $('.checkSingle:checked');

            // if no checkbox is checked show error message
            if (checkedCheckboxes.length === 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Please select at least one fee to collect',
                });

                return;
            }


            selectedFeesDetailsContainer.empty();
            let totalPay = 0;
            // loop through all the checked checkboxes and get the data
            checkedCheckboxes.each(function (index, element) {
                element = $(element);
                const feesConfigDetailsId = element.data('fees-config-details-id');
                const amount = money(element.data('amount'));
                const fine = money(element.data('fine'));
                const paid = money(element.data('paid'));
                totalPay += (amount + fine) - paid;

                let fineInfo = '';
                if (fine > 0) {
                    fineInfo = `
                         <div class="row text-danger">
                            <div class="col-sm-6">
                                <!-- Group Name (Fees Type Name) -->
                                <b>Fine</b>
                            </div>
                            <div class="col-sm-6 text-right">
                                <!-- Fees Amount -->
                                ${fine} Tk
                            </div>
                        </div>
                    `;
                }

                let paidInfo = '';
                if (paid > 0) {
                    paidInfo = `
                         <div class="row text-success">
                            <div class="col-sm-6">
                                <!-- Group Name (Fees Type Name) -->
                            </div>
                            <div class="col-sm-6 text-right">
                                <!-- Fees Amount -->
                                <b>Paid</b>   ${paid} Tk
                            </div>
                        </div>
                    `;
                }
                // create a row for each fee
                const row = `
                    <div class="form-group row">
                        <input type="hidden" name="fees_config_details_id[]" value="${feesConfigDetailsId}">
                        <input type="hidden" name="amount[]" value="${amount}">
                        <input type="hidden" name="fine[]" value="${fine}">
                        <input type="hidden" name="paid[]" value="${paid}">
                        <input type="hidden" name="pay[]" value="${(amount + fine) - paid}">
                        <div class="col-sm-12">
                            <div class="row text-blue">
                                <div class="col-sm-6">
                                    <!-- Group Name (Fees Type Name) -->
                                    ${element.data('fees-group-name')} (${element.data('fees-type-name')})
                                </div>
                                <div class="col-sm-6 text-right">
                                    <!-- Fees Amount -->
                                    ${amount} Tk
                                </div>
                            </div>
                            <span class="text-info">${element.data('fees-type-code')}</span>
                            ${fineInfo}
                            ${paidInfo}
                        </div>
                    </div>
                     <hr>
                `;
                selectedFeesDetailsContainer.append(row);
            });

            totalPayField.val(totalPay);
            totalPayContainer.html(`${totalPay} Tk`);
            collectSelectedFeeModal.modal('show');

            // datepicker
            $("#date2").datepicker({
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                //maxDate: "0",
                yearRange: "-100:+0",
            });
        });

        // on form2 submit collect selected fees
        $('#form2').submit(function (element) {
            element.preventDefault();

            // form data
            const formData = $(this).serialize();

            // ajax
            $.post("{{route('eims_student_fees_collection_store_selected')}}", formData, function (response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: response.message,
                });

                $('#collectSelectedFeeModal').modal('hide');
                $('#datatable').DataTable().ajax.reload();
            }).fail(function (response) {
                const responseJSON = response.responseJSON;

                const error = responseJSON.error;
                if (error) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: error,
                    });
                }

                const errors = responseJSON.errors;
                if (errors) {
                    for (const key in errors) {
                        if (errors.hasOwnProperty(key)) {
                            let error = '';
                            // check if the errors[key] is an array
                            if (Array.isArray(errors[key])) {
                                error = errors[key].join('<br>');
                            } else {
                                error = errors[key];
                            }

                            $(`#${key}_error`).empty().show().append(`<small style="color:red;">${error}</small>`);
                        }
                    }
                }

                Swal.fire({
                    icon: `${responseJSON.responseStatus}`,
                    title: `${responseJSON.responseTitle}`,
                    text: `${responseJSON.responseText}`,
                });
            });

        });

    </script>--}}

@endsection