@extends('layouts.master')

@section('title', __('accounting.edit_payment_fee_schedules'))
@section('content_title', __('accounting.edit_payment_fee_schedules'))

@section('content_taskbar')
    <li class="nav-item">
        <a href="" class="nav-link">
            <i class="nav-link-icon lnr-inbox"></i>
            <span></span>
        </a>
    </li>
@endsection

@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 id="editSubmit" class="row g-3"
                action="{{ route('accounting.payment_fee_schedules.update', $paymentFeeSchedule['id']) }}" method="POST">
                @csrf
                @method('PUT')
                @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 id="business_id" name="business_id" class="form-control">
                            <option value="">{{ __('core.please_select') }}</option>
                            @foreach ($data['businesses'] as $business)
                                <option value="{{ $business->id }}"
                                    {{ old('business_id', $paymentFeeSchedule->business_id) == $business->id ? 'selected' : '' }}>
                                    {{ $business->business_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                @else
                    <input type="hidden" name="business_id" value="{{ $paymentFeeSchedule['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', $paymentFeeSchedule['academic_year_id']) == $item->id ? 'selected' : '' }}>
                                {{ $item->academic_year }}</option>
                        @endforeach
                    </select>
                </div>
                <input type="text" name="payment_fee_schedule_id" value="{{ $paymentFeeSchedule['id'] }}" hidden
                    class="form-control">
                <div class=" mb-3  col-lg-3">
                    <label for="business" class="form-label">{{ __('accounting.payment_account') }} : *</label>
                    <select name="payment_account_id" class="form-select form-control" required>
                        <option value="">{{ __('core.please_select') }}</option>
                        @foreach ($payment_accounts as $item)
                            <option value="{{ $item->id }}"
                                {{ old('payment_account_id', $paymentFeeSchedule['payment_account_id']) == $item->id ? 'selected' : '' }}>
                                {{ $item->account_name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class=" mb-3  col-lg-3">
                    <label for="feeCategory" class="form-label">{{ __('accounting.fee_category') }}</label>
                    <select id="feeCategory" class="form-select form-control">
                        <option value="">{{ __('core.please_select') }}</option>
                        @foreach ($fee_categories as $item)
                            <option value="{{ $item->id }}">{{ $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>
                        @foreach ($fee_sub_categories as $sub_category)
                            <option value="{{ $sub_category->id }}"
                                {{ old('fee_category_id', $paymentFeeSchedule['fee_category_id']) == $sub_category->id ? 'selected' : '' }}>
                                {{ $sub_category->fee_category }}</option>
                        @endforeach

                    </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', $paymentFeeSchedule['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'] }}"
                                {{ $item['id'] === $paymentFeeSchedule['discount_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', $paymentFeeSchedule['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.select_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', $paymentFeeSchedule['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', $paymentFeeSchedule['fee_type']) == 1 ? 'selected' : '' }}>
                            {{ __('accounting.annual') }}</option>
                        <option value="2"
                            {{ old('fee_type', $paymentFeeSchedule['fee_type']) == 2 ? 'selected' : '' }}>
                            {{ __('accounting.monthly') }}</option>
                        {{-- <option value="3"
                            {{ old('fee_type', $paymentFeeSchedule['fee_type']) == 3 ? 'selected' : '' }}>
                            One Time</option>
                        <option value="4"
                            {{ old('fee_type', $paymentFeeSchedule['fee_type']) == 4 ? 'selected' : '' }}>
                            Custom</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>{{ __('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">Remove Row</th> --}}
                                </tr>
                            </thead>
                            <tbody id="tableBody">
                                <!-- Dynamic rows will be added here -->
                                @foreach ($paymentFeeSchedule['paymentFeePeriods'] as $item)
                                    <tr>
                                        <td>
                                            <div class="form-group">
                                                <input type="text" data-toggle="datepicker" name="start_date[]"
                                                    value="{{ $item->start_date }}" class="form-control"
                                                    placeholder="Start Date">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input type="text" data-toggle="datepicker" name="end_date[]"
                                                    value="{{ $item->end_date }}" class="form-control"
                                                    placeholder="End Date">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input type="text" data-toggle="datepicker"
                                                    name="invoice_generate_date[]"
                                                    value="{{ $item->invoice_generate_date }}" class="form-control date"
                                                    placeholder="Invoice Generate Date">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input type="text" data-toggle="datepicker" name="invoice_due_date[]"
                                                    value="{{ $item->invoice_due_date }}" class="form-control"
                                                    placeholder="Invoice Due Date">
                                            </div>
                                        </td>

                                    </tr>
                                @endforeach

                            </tbody>
                        </table>
                        <span id="addRowButton" style="display:none;" class="btn btn-primary">Add Row</span>
                    </div>
                </div>

                <div class=" mb-3  col-lg-12">
                    <label for="note" class="form-label">{{ __('accounting.note') }}</label>
                    <textarea class="form-control" id="note" name="note" rows="3">{{ old('note', $paymentFeeSchedule['note']) }}</textarea>
                </div>

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

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

            $(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>');
                }
            });

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

                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" >Remove</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