@extends('layouts.master')

@section('title', __('accounting.manage_expense'))

@section('content_title', __('accounting.manage_expense'))

@section('content_summary', __('accounting.manage_expense_summary'))

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

@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
@endpush

@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">
                        @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-header card-header-tab-animation">
            <ul class="nav nav-justified">
                <li class="nav-item">
                    <a data-bs-toggle="tab" href="#tab-eg115-0"
                        class="nav-link active">{{ __('accounting.parent_category') }}</a>
                </li>
                <li class="nav-item">
                    <a data-bs-toggle="tab" href="#tab-eg115-1" class="nav-link">{{ __('accounting.category') }}</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane active" id="tab-eg115-0" role="tabpanel">
                    <div class="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">{{ __('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-danger btn-danger">
                                        {{ __('core.trash') }}
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab-eg10-0" role="tabpanel">
                                    @include('accounting::expense_categories.partials.home_parent')
                                </div>
                                <div class="tab-pane" id="tab-eg10-1" role="tabpanel">
                                    @include('accounting::expense_categories.partials.trash_parent')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab-eg115-1" role="tabpanel">
                    <div class="mb-3 card">
                        <div class="card-body">
                            <ul class="nav nav-tabs">
                                <li class="nav-item">
                                    <a data-bs-toggle="tab" href="#tab-eg10-2"
                                        class="mb-2 me-2 btn btn-shadow-primary btn-primary">{{ __('core.home') }}</a>
                                </li>
                                <li class="nav-item">
                                    <a data-bs-toggle="tab" href="#tab-eg10-3"
                                        class="mb-2 me-2 btn btn-shadow-danger btn-danger">
                                        {{ __('core.trash') }}
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab-eg10-2" role="tabpanel">

                                    @include('accounting::expense_categories.partials.home')
                                </div>
                                <div class="tab-pane" id="tab-eg10-3" role="tabpanel">
                                    @include('accounting::expense_categories.partials.trash')
                                </div>
                            </div>
                        </div>
                    </div>
                </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 type="text/javascript">
        $(document).ready(function() {
            $('#home').DataTable({
                responsive: true
            });

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

            $('#home-parent').DataTable({
                responsive: true
            });

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

            $(document).on('click', '.account_type_check', function(e) {
                if (e.target.checked) {
                    $('.parent_section').removeClass('d-none');
                } else {
                    $('.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

                        parentExpenseCategory();
                    },
                    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) {
                            console.log(response);
                        }
                    });
                });
            }


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

                        $(document).on('change', '#business_id', function() {
                            loadParentExpenseCategory($(this).val());
                        });
                    },
                    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: 'PUT',
                        url: $(this).attr('action'),
                        data: $(this).serialize(),
                        success: function(response) {
                            if (response.success) {
                                $('#editModal').modal('hide');
                                loadData();
                                toastr.success(response.msg);
                            } else {}
                        },
                        error: function(response) {
                            console.log(response);
                        }
                    });
                });
            }

            // update
            var updateUrl = '';
            $(document).on('click', '.update', function(e) {
                e.preventDefault();
                updateUrl = $(this).attr('href');
                $('#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
                $.ajax({
                    method: 'PUT',
                    url: updateUrl,
                    success: function(response) {
                        $('#updateModal').modal('hide');
                        toastr.success(response.msg);
                        loadData();
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            });

            // 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');
                        toastr.success(response.msg);
                        loadData();
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            });

            // 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');
                        toastr.success(response.msg);
                        loadData();
                    },
                    error: function(response) {
                        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');
                        toastr.success(response.msg);
                        loadData();
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            });


            // Load data
            function loadData() {
                $.ajax({
                    method: 'GET',
                    url: "{{ route('accounting.expense_categories.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();
                        }
                        if ($.fn.DataTable.isDataTable('#home-parent')) {
                            $('#home-parent').DataTable().destroy();
                        }
                        if ($.fn.DataTable.isDataTable('#trash-parent')) {
                            $('#trash-parent').DataTable().destroy();
                        }

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

                        // Reinitialize the DataTable
                        $('#home').DataTable({
                            processing: true,
                            dom: 'Bfrtip', // Enables buttons above the table
                            buttons: [{
                                    extend: 'colvis',
                                    text: 'Column Visibility', // Text for the column visibility button
                                    columns: ':gt(0)', // Enable visibility toggle for columns except the first one
                                    action: function(e, dt, button, config) {
                                        // Perform the default colvis action
                                        $.fn.dataTable.ext.buttons.collection.action
                                            .call(this, e, dt, button, config);

                                        // Find and style the dt-button-background div
                                        $('div.dt-button-background').css({
                                            'background': 'rgba(0, 0, 0, 0)', // Light red with transparency
                                            'z-index': '2000' // Higher z-index
                                        });
                                    }
                                }, {
                                    extend: 'print',
                                    text: 'Print Table', // Text for the print button
                                    exportOptions: {
                                        columns: ':visible:not(:last-child)',
                                        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).css('font-size',
                                            '10pt'
                                        ); // Custom font size for the print view
                                        $(win.document.body).find('table')
                                            .addClass('compact')
                                            .css('font-size', 'inherit');
                                    }
                                },
                                {
                                    extend: 'csv',
                                    text: 'Export',
                                    exportOptions: {
                                        columns: ':visible:not(:last-child)', // Excludes the last column (typically Action)
                                        format: {
                                            body: function(data, row, column, node) {
                                                const exportText = $(node).find(
                                                    '.export-status').text().trim();
                                                return exportText || $(node).text()
                                                    .trim();
                                            }
                                        }
                                    }
                                }
                            ]
                        });
                        $('#trash').DataTable({
                            responsive: true
                        });

                        $('#home-parent').DataTable({
                            responsive: true
                        });

                        $('#trash-parent').DataTable({
                            responsive: true
                        });
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            }

            // Initial load
            loadData();

            // load parent category
            function parentExpenseCategory() {
                var businessId = $('#business_id').val();

                if (businessId) {
                    loadParentExpenseCategory(businessId);
                } else {
                    $(document).on('change', '#business_id', function() {
                        loadParentExpenseCategory($(this).val());
                    });
                }
            }

            function loadParentExpenseCategory(businessId) {
                $.ajax({
                    method: 'GET',
                    url: "{{ route('accounting.expense_categories.load_parent_expense_category') }}",
                    data: {
                        business_id: businessId
                    },
                    success: function(response) {
                        $('#parent_id').html(response.data);
                    },
                    error: function(error) {}
                });

            }
        });
    </script>

    {{-- filter form start --}}
    <script>
        $(document).ready(function() {
            $(".filter-dropdown").on("change", function() {
                loadFilteredData();
            });

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

                // Send AJAX request with the filters
                $.ajax({
                    method: "GET",
                    url: "{{ route('accounting.expense_categories.index') }}",
                    data: filters,
                    success: function(response) {

                        if ($.fn.DataTable.isDataTable('#home')) {
                            $('#home').DataTable().destroy();
                        }
                        if ($.fn.DataTable.isDataTable('#trash')) {
                            $('#trash').DataTable().destroy();
                        }
                        if ($.fn.DataTable.isDataTable('#home-parent')) {
                            $('#home-parent').DataTable().destroy();
                        }
                        if ($.fn.DataTable.isDataTable('#trash-parent')) {
                            $('#trash-parent').DataTable().destroy();
                        }

                        // Update the content with the filtered data
                        $('#home-data').html(response.homeData);
                        $('#trash-data').html(response.trashData);
                        $('#home-parent-data').html(response.homeParentData);
                        $('#trash-parent-data').html(response.trashParentData);

                        // Reinitialize the DataTables
                        $('#home').DataTable({
                            processing: true,
                            responsive: true,
                            dom: 'Bfrtip',
                            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',
                                    text: 'Print Table',
                                    exportOptions: {
                                        columns: ':visible:not(:last-child)',
                                        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).css('font-size', '10pt');
                                        $(win.document.body).find('table')
                                            .addClass('compact')
                                            .css('font-size', 'inherit');
                                    }
                                },
                                {
                                    extend: 'csv',
                                    text: 'Export',
                                    exportOptions: {
                                        columns: ':visible:not(:last-child)',
                                        format: {
                                            body: function(data, row, column, node) {
                                                const exportText = $(node).find(
                                                    '.export-status').text().trim();
                                                return exportText || $(node).text()
                                                    .trim();
                                            }
                                        }
                                    }
                                }
                            ]
                        });

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

                        $('#home-parent').DataTable({
                            responsive: true
                        });

                        $('#trash-parent').DataTable({
                            responsive: true
                        });
                    },
                    error: function(error) {
                        console.error(error);
                    }
                });
            }
        });
    </script>
    {{-- filter form end --}}
@endpush