@extends('layouts.master')

@section('title', __('accounting.payment_fee_schedules'))
@section('content_title', __('accounting.add_payment_fee_schedules'))

@section('content_taskbar')
    <li class="nav-item">
        <a href="" class="nav-link" id="add">
            <i class="nav-link-icon pe-7s-plus"></i>
            <span></span>
        </a>
    </li>
@endsection

@section('main_content')

    @session('success')
        <p class="alert alert-success">{{ session('success') }}</p>
    @endsession
    @session('error')
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endsession
    <div class="main-card mb-3 card p-3">
        <div class="card-body">
            <form class="row g-3" action="{{ route('accounting.payment_fee_schedules.store') }}" method="POST">
                @csrf
                {{-- @if (auth()->user()->hasRole('Super Admin'))
                    <div class="mb-3 col-lg-3">
                        <label for="business_id" class="form-label">{{ __('core.business_name') }} : * </label>
                        <select name="business_id" id="business_id" class="form-control" required>
                            <option value="">{{ __('core.please_select') }}</option>
                            @foreach ($data['businesses'] as $business)
                                <option value="{{ $business->id }}">{{ $business->business_name }}</option>
                            @endforeach
                        </select>
                    </div>
                @else
                    <input type="hidden" id="business_id" name="business_id" value="{{ auth()->user()->business_id }}">
                @endif --}}

                {{-- <div class="mb-3 col-lg-3">
                    <label for="business" class="form-label">{{ __('academic.academic_year') }} : * </label>
                    <select name="academic_year_id" class="form-select form-control" required>
                        <option value="">{{ __('core.please_select') }}</option>
                        @foreach ($academic_years as $item)
                            <option value="{{ $item->id }}"
                                {{ old('academic_year_id') == $item['id'] ? 'selected' : '' }}>
                                {{ $item->academic_year }}
                            </option>
                        @endforeach
                    </select>
                </div> --}}

                <x-academicFilter class="row">
                    <x-slot:show_business >
                        <x-slot:show_business_child required></x-slot:show_business_child>
                    </x-slot:show_business>
                    <x-slot:show_academic_year></x-slot:show_academic_year>

                    <div class=" mb-3 col-lg-3">
                        <label for="payment_account_id" class="form-label">{{ __('accounting.payment_account') }} : *
                        </label>
                        <select name="payment_account_id" class="form-select form-control" id="payment_account_id" required>
                            <option value="">{{ __('core.please_select') }}</option>
                        </select>
                    </div>

                    <div class=" mb-3  col-lg-3">
                        <label for="fee_parent_category_id" class="form-label">{{ __('accounting.fee_category') }} </label>
                        <select id="fee_parent_category_id" name="pcategory" class="form-select form-control">
                            <option value="">{{ __('core.please_select') }}</option>
                            {{-- @foreach ($fee_categories as $item)
                            <option value="{{ $item->id }}" {{ old('pcategory') == $item->id ? 'selected' : '' }}>
                                {{ $item->fee_category }}</option>
                        @endforeach --}}
                        </select>
                    </div>

                    <div class=" mb-3  col-lg-3">
                        <label for="feeSubCategory" class="form-label">{{ __('accounting.fee_sub_category') }} : * </label>
                        <select id="feeSubCategory" name="fee_category_id" class="form-select form-control" required>
                            <option value="">{{ __('core.please_select') }}</option>
                        </select>
                    </div>

                    <div class=" mb-3  col-lg-3">
                        <label for="applicable_for" class="form-label">{{ __('accounting.applicable_for') }} : * </label>
                        <select id="applicable_for" name="applicable_for" class="form-select form-control" required>
                            <option value="">{{ __('core.please_select') }}</option>
                            @foreach ($applicationFors as $key => $value)
                                <option value="{{ $key }}" {{ old('applicable_for') == $key ? 'selected' : '' }}>
                                    {{ $value }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class=" mb-3  col-lg-3">
                        <label for="discount" class="form-label">{{ __('accounting.discount') }}</label>
                        <select id="discount" name="discount_id" class="form-select form-control">
                            <option value="">{{ __('core.please_select') }}</option>
                            @foreach ($discounts as $item)
                                <option value="{{ $item['id'] }}"
                                    {{ old('discount_id') == $item['id'] ? 'selected' : '' }}>
                                    {{ $item->discount_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class=" mb-3  col-lg-3">
                        <label for="fines" class="form-label">{{ __('accounting.fines') }}</label>
                        <select id="discount" name="late_fine_id" class="form-select form-control">
                            <option value="">{{ __('core.please_select') }}</option>
                            @foreach ($fines as $item)
                                <option value="{{ $item['id'] }}"
                                    {{ old('late_fine_id') == $item['id'] ? 'selected' : '' }}>{{ $item->fine_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- <div class=" mb-3  col-lg-3">
                    <label for="payment_type" class="form-label">{{ __('accounting.payment_type') }}</label>
                    <select id="payment_type" name="payment_type" class="form-select form-control">
                        <option value="">{{ __('core.please_select') }}</option>
                        @foreach ($payment_types as $key => $value)
                            <option value="{{ $key }}" {{ old('payment_type') == $key ? 'selected' : '' }}>
                                {{ $value }}</option>
                        @endforeach
                    </select>
                </div> --}}

                    <div class=" mb-3  col-lg-3">
                        <label for="feeType" class="form-label">{{ __('accounting.fee_type') }} : * </label>
                        <select id="feeType" name="fee_type" class="form-select form-control" required>
                            <option value="">{{ __('core.please_select') }}</option>
                            <option value="1" {{ old('fee_type') == 1 ? 'selected' : '' }}>
                                {{ __('accounting.annual') }}
                            </option>
                            <option value="2" {{ old('fee_type') == 2 ? 'selected' : '' }}>
                                {{ __('accounting.monthly') }}
                            </option>
                            {{-- <option value="3" {{ old('fee_type') == 3 ? 'selected' : '' }}>One Time</option>
                        <option value="4" {{ old('fee_type') == 4 ? 'selected' : '' }}>Custom</option> --}}

                        </select>
                    </div>

                </x-academicFilter>


                <div class="my-3 card p-2">
                    <div class="card-body">
                        <table id="dataTable" class="table table-hover  table-bordered">
                            <thead>
                                <tr>
                                    <th>{{ __('core.start_date') }} : *
                                        <input class="form-check-input ms-2" type="checkbox"
                                            id="invoice_start_date_checkbox">
                                    </th>
                                    <th>{{ __('core.end_date') }} : *
                                        <input class="form-check-input ms-2" type="checkbox" id="invoice_end_date_checkbox">
                                    </th>
                                    <th>{{ __('accounting.invoice_generate_date') }} : *
                                        <input class="form-check-input ms-2" type="checkbox"
                                            id="invoice_generate_date_checkbox">
                                    </th>
                                    <th>{{ __('accounting.invoice_due_date') }} : *
                                        <input class="form-check-input ms-2" type="checkbox" id="invoice_due_date_checkbox">
                                    </th>
                                    {{-- <th id="removeHeaidng"><i class="fa fa-lg fa-times text-danger"></i></th> --}}
                                </tr>
                            </thead>
                            <tbody id="tableBody">
                                <!-- Dynamic rows will be added here -->
                            </tbody>
                        </table>
                        <span id="addRowButton" style="display:none;" class="btn btn-primary"><i
                                class="icon ion-android-add-circle"></i></span>
                    </div>
                </div>
                <div class="mb-3 col-12">
                    <label for="note" class="form-label">{{ __('core.note') }}</label>
                    <textarea class="form-control" id="note" name="note" rows="3">{{ old('note') }}</textarea>
                </div>


                <div class="col-6">
                    <button class="mt-1 btn btn-primary" style="float: right;">{{ __('core.submit') }}</button>
                </div>

            </form>
        </div>
    </div>
@endsection

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

            // load payment account
            $(document).on('change', '#business_id', function() {
                loadPaymentAccount($(this).val());
                loadFeeParentCategory($(this).val());
            });

            var businessId = $('#business_id').val();
            if (businessId) {
                loadPaymentAccount(businessId);
                loadFeeParentCategory(businessId);
            }

            function loadPaymentAccount(businessId) {
                $.ajax({
                    method: 'GET',
                    url: "{{ route('accounting.payment_fee_schedules.load_payment_account') }}",
                    data: {
                        business_id: businessId
                    },
                    success: function(response) {
                        $('#payment_account_id').html(response.data);
                    },
                    error: function(error) {}
                });
            }

            // load fee category
            function loadFeeParentCategory(businessId) {
                $.ajax({
                    method: 'GET',
                    url: "{{ route('accounting.payment_fee_schedules.load_fee_parent_category') }}",
                    data: {
                        business_id: businessId
                    },
                    success: function(response) {
                        $('#fee_parent_category_id').html(response.data);
                    }
                })
            }


            //fetch subfeecategories on change using feecategory id
            $(document).on('change', '#fee_parent_category_id', 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>');
                }
            });


            let feePeriodTable = $("#fee_period").hide();

            // Handle fee type change
            $(document).on('change', '#feeType', function() {
                let selectedValue = $(this).val();
                var tableBody = $('#tableBody');
                var addRowButton = $('#addRowButton');
                var removeRowButton = $('.removeRowButton');
                var removeColumn = $(".removeColumn");
                var removeHeading = $("#removeHeaidng");
                tableBody.empty();
                addRowButton.hide();
                removeRowButton.hide();
                removeColumn.hide();
                removeHeading.hide();

                if (selectedValue == "1") {
                    addRow(tableBody, 1, selectedValue);
                    feePeriodTable.show();
                    removeRowButton.hide();
                    removeColumn.hide();
                } else if (selectedValue == "2") {
                    addRow(tableBody, 12, selectedValue);
                    feePeriodTable.show();
                    removeRowButton.hide();
                    removeColumn.hide();
                } else if (selectedValue == "3") {
                    // No rows for one-time
                    feePeriodTable.hide();
                } else if (selectedValue == "4") {
                    addRow(tableBody, 1, selectedValue);
                    feePeriodTable.show();
                    addRowButton.show();
                    removeRowButton.show();
                    removeHeading.show();
                    removeColumn.show();
                } else {
                    feePeriodTable.hide();
                }
            });


            $('#addRowButton').click(function() {
                addRow($('#tableBody'), 1, 4);
            });

            // Function to add rows to the table
            function addRow(tableBody, rows, selectedValue) {
                for (let i = 0; i < rows; i++) {
                    let newRows = `
            <tr>
                <td>
                    <div class="form-group">
                        <input type="text" data-toggle="datepicker" name="start_date[]" class="invoice_start_date form-control" placeholder="Start Date">
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        <input type="text" data-toggle="datepicker" name="end_date[]" class="invoice_end_date form-control" placeholder="End Date">
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        <input type="text" data-toggle="datepicker" name="invoice_generate_date[]" class="invoice_generate_date form-control date" placeholder="Invoice Generate Date">
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        <input type="text" data-toggle="datepicker" name="invoice_due_date[]" class="invoice_due_date form-control" placeholder="Invoice Due Date">
                    </div>
                </td>
                ${selectedValue==4? `<td class="removeColumn" >
                                                                                                                                                                                        <span class="btn btn-danger removeRowButton" ><i class="icon ion-android-close"></i></span>
                                                                                                                                                                                    </td>`:''}
            </tr>
            `;
                    tableBody.append(newRows);
                }
                $('[data-toggle="datepicker"]').datepicker({
                    // Add your options here
                    format: 'mm/dd/yyyy',
                    autoclose: true,
                    todayHighlight: true
                });
            }


            $('#tableBody').on('click', '.removeRowButton', function() {
                $(this).closest('tr').remove();
            });
        });
    </script>

    {{-- invoice dates (start, end, generate, due) checkbox functionality --}}
    <script>
        // start date
        $(document).on('click', '#invoice_start_date_checkbox', function() {
            let firstDateValue = $('.invoice_start_date').first().val();

            if (firstDateValue) {
                let firstDate = new Date(firstDateValue);

                $('.invoice_start_date').each(function(index) {
                    if (index > 0) {
                        let newDate = new Date(firstDate);
                        newDate.setMonth(newDate.getMonth() + index);

                        let formattedDate = ('0' + (newDate.getMonth() + 1)).slice(-2) + '/' +
                            ('0' + newDate.getDate()).slice(-2) + '/' +
                            newDate.getFullYear();

                        $(this).val(formattedDate);
                    }
                });
            }
        });

        // end date
        $(document).on('click', '#invoice_end_date_checkbox', function() {
            let firstDateValue = $('.invoice_end_date').first().val();

            if (firstDateValue) {
                let firstDate = new Date(firstDateValue);

                $('.invoice_end_date').each(function(index) {
                    if (index > 0) {
                        let newDate = new Date(firstDate);
                        newDate.setMonth(newDate.getMonth() + index);

                        let formattedDate = ('0' + (newDate.getMonth() + 1)).slice(-2) + '/' +
                            ('0' + newDate.getDate()).slice(-2) + '/' +
                            newDate.getFullYear();

                        $(this).val(formattedDate);
                    }
                });
            }
        });

        // generate date
        $(document).on('click', '#invoice_generate_date_checkbox', function() {
            let firstDateValue = $('.invoice_generate_date').first().val();

            if (firstDateValue) {
                let firstDate = new Date(firstDateValue);

                $('.invoice_generate_date').each(function(index) {
                    if (index > 0) {
                        let newDate = new Date(firstDate);
                        newDate.setMonth(newDate.getMonth() + index);

                        let formattedDate = ('0' + (newDate.getMonth() + 1)).slice(-2) + '/' +
                            ('0' + newDate.getDate()).slice(-2) + '/' +
                            newDate.getFullYear();

                        $(this).val(formattedDate);
                    }
                });
            }
        });

        // due date
        $(document).on('click', '#invoice_due_date_checkbox', function() {
            let firstDateValue = $('.invoice_due_date').first().val();

            if (firstDateValue) {
                let firstDate = new Date(firstDateValue);

                $('.invoice_due_date').each(function(index) {
                    if (index > 0) {
                        let newDate = new Date(firstDate);
                        newDate.setMonth(newDate.getMonth() + index);

                        let formattedDate = ('0' + (newDate.getMonth() + 1)).slice(-2) + '/' +
                            ('0' + newDate.getDate()).slice(-2) + '/' +
                            newDate.getFullYear();

                        $(this).val(formattedDate);
                    }
                });
            }
        });
    </script>
@endpush