@extends('layouts.master')

@section('title', __('accounting.late_fines'))
@section('content_title', __('accounting.all_fines'))
@section('content_summary', __('accounting.fine_summary'))
@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
@endpush

@section('content_taskbar')
    <li class="nav-item">
        <a href="{{ route('accounting.fines.create') }}" class="nav-link" id="add" data-bs-toggle="modal"
            data-bs-target="#addModal">
            <i class="nav-link-icon lnr-inbox"></i>
            <span>{{ __('core.add') }}</span>
        </a>
    </li>
@endsection

@section('main_content')

@if (auth()->user()->hasRole('Super Admin'))
<div class="main-card mb-3">
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">{{ __('core.filter') }}</h5>
                {{-- Filter form start --}}
                <form id="user-search-form" action="{{ route('accounting.fines.search') }}" method="POST">
                    @csrf
                    <div class="row">
                            <div class="col col-md-3 mb-3">
                                <label for="business_id" class="form-label">{{ __('core.business_name') }}: *</label>
                                <select class="form-select form-select-sm filter-dropdown" name="business_id"
                                    id="business_id" required>
                                    <option value="">{{ __('core.please_select') }}</option>
                                    @foreach ($data['businesses'] as $key => $value)
                                        <option value="{{ $value->id }}">{{ $value->business_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                    </div>
                    <br>
                </form>
                {{-- Filter form end --}}
            </div>
        </div>
    </div>
    @else
        <input type="hidden" name="business_id" value="{{ auth()->user()->business_id }}">
    @endif

    <div class="main-card mb-3 card">
        <div class="card-body">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a data-bs-toggle="tab" href="#tab-eg10-0"
                        class="mb-2 me-2 btn btn-shadow-primary btn-primary active">{{ __('core.home') }}</a>
                </li>
                <li class="nav-item">
                    <a data-bs-toggle="tab" href="#tab-eg10-1" class="mb-2 me-2 btn btn-shadow-primary btn-danger">
                        {{ __('core.trash') }}
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-eg10-0" role="tabpanel">
                    @include('accounting::late_fines.partials.home')
                </div>
                <div class="tab-pane" id="tab-eg10-1" role="tabpanel">
                    @include('accounting::late_fines.partials.trash')
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.colVis.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

    <script>
        $(document).ready(function() {
            // Initialize DataTable
            $('#home').DataTable({
                responsive: true
            });

            $('#trash').DataTable({
                responsive: true
            });

            $(document).on('click', '.account_type_check', function(e) {
                if (e.target.checked) {
                    $('.account_type_parent_section').removeClass('d-none');
                } else {
                    $('.account_type_parent_section').addClass('d-none');
                }
            })
            // Open add form
            $(document).on('click', '#add', function(e) {
                e.preventDefault();
                $.ajax({
                    method: 'GET',
                    url: $(this).attr('href'),
                    success: function(response) {
                        $("#addModal .modal-body").html(response);
                        addSubmit(); // Reinitialize addSubmit for new content
                    },
                    error: function(response) {
                        $("#addModal .modal-body").html(
                            'Something Wrong, Please Try Again Later.');
                    }
                });
            });

            // Submit add form
            function addSubmit() {
                $('#addSubmit').on('submit', function(e) {
                    e.preventDefault();
                    $.ajax({
                        method: 'POST',
                        url: $(this).attr('action'),
                        data: $(this).serialize(),
                        success: function(response) {
                            console.log(response);
                            $('#addModal').modal('hide');
                            toastr.success(response.msg);
                            loadData();
                        },
                        error: function(response) {
                            toastr.success(response.msg);
                        }
                    });
                });
            }

            // Open edit form
            $(document).on('click', '.edit', function(e) {
                e.preventDefault();
                $.ajax({
                    method: 'GET',
                    url: $(this).attr('href'),
                    success: function(response) {
                        $("#editModal .modal-body").html(response);
                        editSubmit(); // Reinitialize editSubmit for new content
                    },
                    error: function(response) {
                        $("#editModal .modal-body").html(
                            'Something Wrong, Please Try Again Later.');
                    }
                });
            });

            // Submit edit form
            function editSubmit() {
                $('#editSubmit').on('submit', function(e) {
                    e.preventDefault();
                    $.ajax({
                        method: 'POST',
                        url: $(this).attr('action'),
                        data: $(this).serialize(),
                        success: function(response) {
                            if (response.success) {
                                $('#editModal').modal('hide');
                                toastr.success(response.msg);
                                loadData();
                            } else {}
                        },
                        error: function(response) {
                            toastr.success(response.msg);
                        }
                    });
                });
            }

            // update
            var updateUrl = '';
            $(document).on('click', '.update', function(e) {
                e.preventDefault();
                updateUrl = $(this).attr('href');
                //  alert(updateUrl);
                $('#confirm-update').data('update-url', updateUrl); // Store update URL
            });

            // Confirm update modal
            $(document).on('click', '#confirm-update', function() {
                updateUrl = $(this).data('update-url'); // Retrieve update URL
                // console.log(updateUrl);
                $.ajax({
                    method: 'PUT',
                    url: updateUrl,
                    success: function(response) {
                        $('#updateModal').modal('hide');
                        loadData();
                        toastr.success(response.msg);
                    },
                    error: function(response) {
                        toastr.success(response.msg);

                    }
                });
            });

            // Destroy
            var destroyUrl = '';
            $(document).on('click', '.destroy', function(e) {
                e.preventDefault();
                destroyUrl = $(this).attr('href');
                $('#confirm-destroy').data('destroy-url', destroyUrl); // Store destroy URL
            });

            // Confirm destroy modal
            $(document).on('click', '#confirm-destroy', function() {
                destroyUrl = $(this).data('destroy-url'); // Retrieve destroy URL
                $.ajax({
                    method: 'DELETE',
                    url: destroyUrl,
                    success: function(response) {
                        $('#destroyModal').modal('hide');
                        loadData();
                        toastr.success(response.msg);

                    },
                    error: function(response) {
                        console.log(response);
                        toastr.success(response.msg);

                    }
                });
            });

            // Restore
            var restoreUrl = '';
            $(document).on('click', '.restore', function(e) {
                e.preventDefault();
                restoreUrl = $(this).attr('href');
                $('#confirm-restore').data('restore-url', restoreUrl); // Store restore URL
            });

            // Confirm restore modal
            $(document).on('click', '#confirm-restore', function() {
                restoreUrl = $(this).data('restore-url'); // Retrieve restore URL
                $.ajax({
                    method: 'POST',
                    url: restoreUrl,
                    success: function(response) {
                        $('#restoreModal').modal('hide');
                        loadData();
                        toastr.success(response.msg);

                    },
                    error: function(response) {
                        toastr.success(response.msg);
                        console.log(response);
                    }
                });
            });

            // Delete
            var deleteUrl = '';
            $(document).on('click', '.delete', function(e) {
                e.preventDefault();
                deleteUrl = $(this).attr('href');
                $('#confirm-delete').data('delete-url', deleteUrl); // Store delete URL
            });

            // Confirm delete modal
            $(document).on('click', '#confirm-delete', function() {
                deleteUrl = $(this).data('delete-url'); // Retrieve delete URL
                $.ajax({
                    method: 'DELETE',
                    url: deleteUrl,
                    success: function(response) {
                        $('#deleteModal').modal('hide');
                        loadData();
                        toastr.success(response.msg);

                    },
                    error: function(response) {
                        console.log(response);
                        toastr.success(response.msg);

                    }
                });
            });

            // Load data
            function loadData() {
                $.ajax({
                    method: 'GET',
                    url: "{{ route('accounting.fines.index') }}",
                    success: function(response) {
                        // Destroy the existing DataTable instance
                        if ($.fn.DataTable.isDataTable('#home')) {
                            $('#home').DataTable().destroy();
                        }
                        if ($.fn.DataTable.isDataTable('#trash')) {
                            $('#trash').DataTable().destroy();
                        }

                        // Replace the table body with the new data
                        $('#home-data').html(response.homeData);
                        $('#trash-data').html(response.trashData);

                        // Reinitialize the DataTable
                        $('#home').DataTable({
                            processing: true,
                            dom: "<'row mb-2'<'col-md-6'l><'col-md-6'f>>" +
                                 "<'row mb-2'<'col-md-12 text-end'B>>" +
                                 "<'row'<'col-sm-12'tr>>" +
                                 "<'row mt-2'<'col-md-5'i><'col-md-7'p>>",
                            buttons: [
                                {
                                    extend: 'colvis',
                                    text: 'Column Visibility',
                                    columns: ':gt(0)',
                                    action: function(e, dt, button, config) {
                                        $.fn.dataTable.ext.buttons.collection.action
                                            .call(this, e, dt, button, config);
                                        $('div.dt-button-background').css({
                                            'background': 'rgba(0, 0, 0, 0)',
                                            'z-index': '2000'
                                        });
                                    }
                                },
                                {
                                    extend: 'print',
                                    title: '',
                                    text: 'Print',
                                    exportOptions: {
                                        columns: ':visible:not(:first-child):not(:last-child)',
                                        rows: function(idx, data, node) {
                                                return $(node).find('.row-checkbox').is(':checked');
                                            },
                                        format: {
                                            body: function (data, row, column, node) {
                                                const exportText = $(node).find('.export-status').text().trim();
                                                return exportText || $(node).text().trim();
                                            }
                                        }
                                    },
                                    customize: function (win) {
                                        $(win.document.body).find('h1').remove();
                                        $(win.document.body).css('font-size', '10pt')
                                            .prepend(
                                                `<div style="text-align:center; font-size:18pt; font-weight:bold; margin-bottom:20px;">
                                                    Academic Fines | EduSelf
                                                </div>`
                                            );

                                        $(win.document.body).find('table')
                                            .addClass('compact')
                                            .css({
                                                'font-size': 'inherit',
                                                'margin': 'auto',
                                                'width': '90%'
                                            });

                                        // Optional: add some page padding
                                        $(win.document.body).css({
                                            'padding': '30px'
                                        });
                                    }
                                },
                                {
                                    extend: 'csv',
                                    text: 'Export',
                                    exportOptions: {
                                        columns: ':visible:not(:first-child):not(:last-child)',
                                        rows: function(idx, data, node) {
                                                return $(node).find('.row-checkbox').is(':checked');
                                            },
                                        format: {
                                            body: function (data, row, column, node) {
                                                const exportText = $(node).find('.export-status').text().trim();
                                                return exportText || $(node).text().trim();
                                            }
                                        }
                                    }
                                }
                            ]
                        });
                        $('#trash').DataTable({
                            responsive: true
                        });
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            }

            // Initial load
            loadData();
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.getElementById("select-all").addEventListener("change", function () {
                const checkboxes = document.querySelectorAll(".row-checkbox");
                checkboxes.forEach(checkbox => checkbox.checked = this.checked);
            });
        });
    </script>

    {{-- filter form start --}}
    <script>
        $(document).ready(function() {

            $(".filter-dropdown").on("change", function() {
                loadFilteredData();
            });

            function loadFilteredData() {
                let filters = {
                    business_id: $("#business_id").val(),
                    _token: $('meta[name="csrf-token"]').attr('content'),
                };

                $.ajax({
                    method: "POST",
                    url: "{{ route('accounting.fines.search') }}",
                    data: filters,
                    success: function(response) {
                        if ($.fn.DataTable.isDataTable('#home')) {
                            $('#home').DataTable().destroy();
                        }
                        if ($.fn.DataTable.isDataTable('#trash')) {
                            $('#trash').DataTable().destroy();
                        }

                        $('#home-data').html(response.homeData);
                        $('#trash-data').html(response.trashData);

                        $('#home').DataTable({
                        processing: true,
                        responsive: true,
                        dom: "<'row mb-2'<'col-md-6'l><'col-md-6'f>>" +
                             "<'row mb-2'<'col-md-12 text-end'B>>" +
                             "<'row'<'col-sm-12'tr>>" +
                             "<'row mt-2'<'col-md-5'i><'col-md-7'p>>",
                        buttons: [
                            {
                                extend: 'colvis',
                                text: 'Column Visibility',
                                columns: ':gt(0)',
                                action: function(e, dt, button, config) {
                                    $.fn.dataTable.ext.buttons.collection.action
                                        .call(this, e, dt, button, config);
                                    $('div.dt-button-background').css({
                                        'background': 'rgba(0, 0, 0, 0)',
                                        'z-index': '2000'
                                    });
                                }
                            },
                            {
                                extend: 'print',
                                title: '',
                                text: 'Print',
                                exportOptions: {
                                    columns: ':visible:not(:first-child):not(:last-child)',
                                    rows: function(idx, data, node) {
                                            return $(node).find('.row-checkbox').is(':checked');
                                        },
                                    format: {
                                        body: function (data, row, column, node) {
                                            const exportText = $(node).find('.export-status').text().trim();
                                            return exportText || $(node).text().trim();
                                        }
                                    }
                                },
                                customize: function (win) {
                                    $(win.document.body).find('h1').remove();
                                    $(win.document.body).css('font-size', '10pt')
                                        .prepend(
                                            `<div style="text-align:center; font-size:18pt; font-weight:bold; margin-bottom:20px;">
                                                Academic Fines | EduSelf
                                            </div>`
                                        );

                                    $(win.document.body).find('table')
                                        .addClass('compact')
                                        .css({
                                            'font-size': 'inherit',
                                            'margin': 'auto',
                                            'width': '90%'
                                        });

                                    // Optional: add some page padding
                                    $(win.document.body).css({
                                        'padding': '30px'
                                    });
                                }
                            },
                            {
                                extend: 'csv',
                                text: 'Export',
                                exportOptions: {
                                    columns: ':visible:not(:first-child):not(:last-child)',
                                    rows: function(idx, data, node) {
                                            return $(node).find('.row-checkbox').is(':checked');
                                        },
                                    format: {
                                        body: function (data, row, column, node) {
                                            const exportText = $(node).find('.export-status').text().trim();
                                            return exportText || $(node).text().trim();
                                        }
                                    }
                                }
                            }
                        ]
                    });
                        $('#trash').DataTable({
                            responsive: true,
                            processing: true
                        });
                    },
                    error: function(error) {
                        console.log(error);
                        toastr.error('Something went wrong while loading fines.');
                    }
                });
            }

        });
</script>

    {{-- filter form end --}}

@endpush