@extends('layouts.master')
@push('style')
    <style>
        .main_active.active {
            background: #dc3545 !important;
            color: white !important;
        }
    </style>
@endpush
@section('title', __('accounting.add_fee_invoice'))
@section('content_title', __('accounting.add_fee_invoice'))
@section('content_summary', __('accounting.create_fee_invoice'))

@section('main_content')

    @if (Session::has('success'))
        <div class="alert alert-success">
            {{ Session::get('success') }}
        </div>
    @endif
    @if (Session::has('error'))
        <div class="alert alert-danger">
            {{ Session::get('error') }}
        </div>
    @endif
    <div class="main-card mb-3 card p-3">
        <div class="card-body">
            <form class="row g-3 mb-5 py-2 px-3" action="{{ route('accounting.fee_invoice.store') }}" method="POST">
                @csrf
                {{-- @if (auth()->user()->hasRole('Super Admin'))
                    <div class="col-lg-3">
                        <label for="business_id" class="control-label mb-1">{{ __('accounting.select_business') }}</label>
                        <select name="business_id" id="business_id" class="form-control form-select">
                            <option value="">{{ __('accounting.select_business') }}</option>
                            @foreach ($data['businesses'] as $item)
                                <option value="{{ $item->id }}" selected>{{ $item->business_name }}</option>
                            @endforeach
                        </select>
                    </div>
                @else
                    <input type="hidden" name="business_id" value="{{ auth()->user()->business_id }}">
                @endif

                <div class="col-lg-3">

                    <label for="user" class="control-label mb-1">{{ __('accounting.select_academic_user') }}</label>
                    <select name="user_id" id="user" class="form-control form-select">
                        <option value="">{{ __('accounting.select_academic_user') }}</option>
                        @foreach ($users as $item)
                            <option value="{{ $item->id }}" {{ old('user_id') == $item->id ? 'selected' : '' }}>
                                {{ $item['user']['username'] }}</option>
                        @endforeach
                    </select>

                </div>

                <div class="col-lg-3">
                    <label for="academicYear" class="form-label">{{ __('accounting.select_academic_year') }}</label>
                    <select name="academic_year_id" id="academicYear" class="form-select form-control">
                        <option value="">{{ __('accounting.select_academic_year') }}</option>
                        @foreach ($academic_years as $item)
                            <option value="{{ $item->id }}"
                                {{ old('academic_year_id') == $item->id ? 'selected' : '' }}>{{ $item->academic_year }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3">
                    <label for="academic_class_id" class="form-label">{{ __('accounting.select_academic_class') }}</label>
                    <select name="academic_class_id" class="form-select form-control">
                        <option value="">{{ __('accounting.select_academic_class') }}</option>
                        @foreach ($academic_classes as $item)
                            <option value="{{ $item->id }}"
                                {{ old('academic_class_id') == $item->id ? 'selected' : '' }}>{{ $item->academic_class }}
                            </option>
                        @endforeach
                    </select>
                </div>


                <div class="col-lg-3">
                    <label for="sectionId" class="form-label">{{ __('accounting.select_section') }}</label>
                    <select name="section_id" id="sectionId" class="form-select form-control">
                        <option value="">{{ __('accounting.select_section') }}</option>
                        @foreach ($academic_sections as $item)
                            <option value="{{ $item->id }}" {{ old('section_id') == $item->id ? 'selected' : '' }}>
                                {{ $item->section_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3">
                    <label for="invoice_status" class="form-label">{{ __('accounting.select_invoice_status') }}</label>
                    <select name="invoice_status" id="invoice_status" class="form-select form-control">
                        <option value="">{{ __('accounting.select_invoice_status') }}</option>
                        <option value="1">Unpaid</option>
                        <option value="2">Partial</option>
                        <option value="3">Paid</option>
                        <option value="4">Cancelled</option>
                    </select>
                </div>
                <div class="col-lg-3">
                    <label for="note" class="form-label">{{ __('accounting.note') }}</label>
                    <textarea name="note" class="form-control" id="note" cols="5">{{ old('note') }}</textarea>
                </div>

                <div class="my-3 card p-2">
                    <div class="card-body">
                        <table id="dataTable" class="table table-hover  table-bordered">
                            <thead>
                                <tr>
                                    <th>{{ __('accounting.fee_category') }}</th>
                                    <th>{{ __('accounting.amount') }}</th>
                                    <th>{{ __('accounting.discount') }}</th>
                                    <th>{{ __('accounting.recieve') }}</th>
                                    <th id="removeHeaidng">{{ __('accounting.remove') }}</th>
                                </tr>
                            </thead>
                            <tbody id="tableBody">
                                <!-- Dynamic rows will be added here -->
                            </tbody>
                            <tfoot id="tableFooter">
                                <tr>
                                    <th>
                                        Total
                                    </th>
                                    <th>
                                        Total Amount
                                        <input type="text" class="form-control" id="totalAmount" name="total_amount"
                                            readonly>
                                    </th>

                                    <th>
                                        Total Discount
                                        <input type="text" class="form-control" id="totalDiscount" name="total_discount"
                                            readonly>
                                    </th>

                                    <th>
                                        Total Recieve
                                        <input type="text" class="form-control" id="totalRecieve" name="total_recieve"
                                            readonly>
                                    </th>
                                </tr>


                            </tfoot>
                        </table>
                        <span id="addRowButton" class="btn btn-primary">Add Row</span>
                    </div>
                </div>

                <div class="col-lg-3">
                    <button class="mt-4  btn btn-primary" type="submit"
                        style="margin-top: 30px !important;">{{ __('Create Fee Invoice') }}</button>
                </div> --}}

                <x-academicFilter>
                    <x-slot:show_academic_year></x-slot:show_academic_year>
                    <x-slot:show_academic_class></x-slot:show_academic_class>
                    <x-slot:show_academic_section></x-slot:show_academic_section>
                    <x-slot:show_academic_section></x-slot:show_academic_section>
                    <x-slot:show_academic_student></x-slot:show_academic_student>
                    <div class="col-6 col-md-3 mb-3">
                        <label for="invoice_date" class="form-label">{{ __('accounting.invoice_date') }}</label>
                        <input type="text" id="invoice_date" data-toggle="datepicker" name="fee_invoice_date"
                            class="form-control" placeholder="Invoice Date">
                    </div>
                    <div class="col-lg-3">
                        <label for="invoice_status" class="form-label">{{ __('accounting.select_invoice_status') }}</label>
                        <select name="invoice_status" id="invoice_status" class="form-select form-control">
                            <option value="">{{ __('accounting.select_invoice_status') }}</option>
                            <option value="1">Unpaid</option>
                            <option value="2">Partial</option>
                            <option value="3">Paid</option>
                            <option value="4">Cancelled</option>
                        </select>
                    </div>
                    <div class="my-3 card p-2">
                        <div class="card-body">
                            <table id="dataTable" class="table table-hover  table-bordered">
                                <thead>
                                    <tr>
                                        <th>{{ __('accounting.fee_category') }}</th>
                                        <th>{{ __('accounting.amount') }}</th>
                                        <th>{{ __('accounting.discount') }}</th>
                                        <th>{{ __('accounting.recieve') }}</th>
                                        <th id="removeHeaidng">{{ __('accounting.remove') }}</th>
                                    </tr>
                                </thead>
                                <tbody id="tableBody">
                                    <!-- Dynamic rows will be added here -->
                                </tbody>
                                <tfoot id="tableFooter">
                                    <tr>
                                        <th>
                                            Total
                                        </th>
                                        <th>
                                            Total Amount
                                            <input type="text" class="form-control" id="totalAmount" name="total_amount"
                                                readonly>
                                        </th>

                                        <th>
                                            Total Discount
                                            <input type="text" class="form-control" id="totalDiscount"
                                                name="total_discount" readonly>
                                        </th>

                                        <th>
                                            Total Recieve
                                            <input type="text" class="form-control" id="totalRecieve"
                                                name="total_recieve" readonly>
                                        </th>
                                    </tr>


                                </tfoot>
                            </table>
                            <span id="addRowButton" class="btn btn-primary">Add Row</span>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <button class="mt-4  btn btn-primary" type="submit"
                            style="margin-top: 30px !important;">{{ __('Create Fee Invoice') }}</button>
                    </div>
                </x-academicFilter>
            </form>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {

            $("#tableFooter").hide();
            $(document).on('click', '#addRowButton', function() {
                console.log("clicked")
                addRow($('#tableBody'), 1);
                $("#tableFooter").show();
                calculateTotalAmount();
                calculateTotalDiscount();
                calculateTotalRecieve();
            });

            function addRow(tableBody, rows) {
                for (let i = 0; i < rows; i++) {
                    let newRows = `
                    <tr>
                        <td>
                            <div class="form-group">
                                <select class="form-control form-select" id="feeSubCategory" name="fee_category_id[]">
                                    <option>select fee category</option>
                                    @foreach ($feeCategories as $item)
                                        <option  value="{{ $item->id }}">{{ $item->fee_category }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <input type="text"  name="amount[]" class="form-control amount" placeholder="amount">
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <input type="text" id="" name="discount[]" class="form-control discount" placeholder="discount amount">
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <input type="text" id="" name="recieve[]" class="form-control recieve" placeholder="recieve amount">
                            </div>
                        </td>
                        <td class="removeColumn" >
                            <span class="btn btn-danger removeRowButton" >Remove</span>
                        </td>

                    </tr>`;
                    tableBody.append(newRows);
                }
            }

            $('#tableBody').on('click', '.removeRowButton', function() {
                $(this).closest('tr').remove();
                calculateTotalAmount();
                calculateTotalDiscount();
                calculateTotalRecieve();
            });

            //cvalculate total amount function
            function calculateTotalAmount() {
                var total_amount = 0;
                $('.amount').each(function() {
                    let amount_value = parseFloat($(this).val());
                    if (!isNaN(amount_value)) {
                        total_amount += amount_value; // Add the valid number to the total
                    }
                })

                $('#totalAmount').val(total_amount.toFixed(2));

            }

            //calculate total discount function
            function calculateTotalDiscount() {
                var total_discount = 0;
                $('.discount').each(function() {
                    let discount_value = parseFloat($(this).val());
                    if (!isNaN(discount_value)) {
                        total_discount += discount_value; // Add the valid number to the total
                    }
                })

                $('#totalDiscount').val(total_discount.toFixed(2));
            }

            //calculate total recieve function
            function calculateTotalRecieve() {
                var total_recieve = 0;
                $('.recieve').each(function() {
                    let recieve_value = parseFloat($(this).val());
                    if (!isNaN(recieve_value)) {
                        total_recieve += recieve_value; // Add the valid number to the total
                    }
                })

                $('#totalRecieve').val(total_recieve.toFixed(2));
            }


            $(document).on("input", ".amount", function() {
                calculateTotalAmount();
            });
            $(document).on("input", ".discount", function() {
                calculateTotalDiscount();
            });
            $(document).on("input", ".recieve", function() {
                calculateTotalRecieve();
            });

            // $(document).on('change', '#feeCategory', function() {
            //     var id=$(this).val();

            //     if(id){
            //         $.ajax({
            //             url: "{{ route('accounting.payment_fee_schedules.getSubFeeCategory') }}",
            //             type:"GET",
            //             dataType:"json",
            //             data:{id:id},
            //             success:function(data){
            //                 $('#feeSubCategory').empty();
            //                 $.each(data, function(key, value) {
            //                     $('#feeSubCategory').append('<option value="'+ value.id +'">'+ value.fee_category +'</option>');
            //                 });
            //             }
            //         })

            //     }else{
            //         $('#feeSubCategory').empty();
            //         $('#feeSubCategory').append('<option value="">Select Subcategory</option>');
            //     }
            // });
        });
    </script>
@endpush