@extends('tenant.settings.general.all-general-settings')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.general_settings') => route('tenant.settings.general.show-page', ['type' => 'company-information']),
            __('breadcrumb.user_movements') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'settings.general.actions-log'])
@endsection

@section('style')
<link rel="stylesheet" href="{{ asset('css/layouts/tabs.css')}}">
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.0/dist/css/tom-select.min.css" rel="stylesheet">

    <style>
        select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: white;
            padding: 0.25rem 1rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
            font-size: 16px;
        }

        .resource-link-layout a {
            text-decoration: none;
            color: black;
            border: 1px solid #848e95;
            border-radius: 5px;
            padding: 0px 15px;
        }

        .displayed {
            pointer-events: none;
            background-color: rgb(235, 232, 232);
            opacity: 0.6;
        }

        .displayed span {
            text-decoration: none;
            color: black;
            border: 1px solid #848e95;
            border-radius: 5px;
            padding: 0px 15px;
        }
    </style>
@endsection

@section('settings-content')
    <div class="inner-content-layout">
        <x-filter-form :title="__('breadcrumb.user_movements')" :link="route('tenant.settings.general.actions-log.index')">
            <div class="row align-items-center">
                <div class="col-3">
                    <div class="mx-1">
                        <label for="employee_ids">@lang('settings/general/actions-log.employee')</label>
                        @php $selected_emoloyees_ids = request('employees_ids')?? []; @endphp

                        <select name="employees_ids[]" id="employee_ids" multiple>
                            <option value="">@lang('settings/general/actions-log.all')</option>
                            @foreach ($employees as $employee)
                                <option value="{{ $employee->id }}"
                                    {{ in_array($employee->id, $selected_emoloyees_ids) ? 'selected' : '' }}>
                                    {{ $employee->full_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-3">
                    <div class="mx-1">
                        <label for="modules">@lang('settings/general/actions-log.unit')</label>
                        @php $selected_modules = request('modules', []); @endphp
                        <select id="modules" name="modules[]" multiple>
                            <option value="">@lang('settings/general/actions-log.all')</option>
                            @foreach ($modules as $module)
                                <option value="{{ $module->id }}"
                                    {{ in_array($module->id, $selected_modules) ? 'selected' : '' }}>
                                    {{ $module->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-3">
                    <div class="mx-1">
                        <label for="sections">@lang('settings/general/actions-log.sections')</label>
                        @php $selected_sections = request('sections', []); @endphp

                        <select id="sections" name="sections[]" multiple>
                            <option value="">@lang('settings/general/actions-log.all')</option>
                            @foreach ($sections as $section)
                                <option value="{{ $section->id }}"
                                    {{ in_array($section->id, $selected_sections) ? 'selected' : '' }}>
                                    {{ $section->module->name . ' - ' . $section->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-3">
                    <div class="mx-1">
                        <label for="functions">@lang('settings/general/actions-log.transaction')</label>
                        @php $selected_functions = request('functions', []); @endphp

                        <select id="functions" name="functions[]" multiple>
                            <option value="">@lang('settings/general/actions-log.all')</option>
                            @foreach ($functions as $function)
                                <option value="{{ $function->id }}"
                                    {{ in_array($function->id, $selected_functions) ? 'selected' : '' }}>
                                    {{ $function->section->module->name . ' - ' . $function->section->name . ' - ' . $function->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-3">
                    <div class="mx-1">
                        <label for="bond_number">@lang('settings/general/actions-log.bond_number')</label>
                        <input type="text" class="form-control" name="bond_number" id="bond_number" value="{{ request('bond_number', '') }}">
                    </div>
                </div>

                <div class="col d-flex">
                    <div class="mx-1">
                        <label for="from_date_filter">@lang('settings/general/actions-log.from')</label>
                        <x-input-date identifier="from_date_filter" :value="request('from_date', '')" name="from_date">
                        </x-input-date>
                    </div>

                    <div class="mx-1">
                        <label for="to_date_filter">@lang('settings/general/actions-log.to')</label>
                        <x-input-date identifier="to_date_filter" :value="request('to_date', '')" name="to_date">
                        </x-input-date>
                    </div>
                </div>

            </div>
        </x-filter-form>

        <h4>@lang('settings/general/actions-log.employees_actions')</h4>
        <div>
            @php
                $table_options = [
                    'lang' => ['noAvailableData' => __('noAvailableData.no_data')],
                ];
            @endphp
            <v-table :options="{{ json_encode($table_options) }}">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th class="xs-td">#</th>
                            <th class="md-td">@lang('settings/general/actions-log.employee')</th>
                            <th class="md-td">@lang('settings/general/actions-log.transaction_')</th>
                            <th class="md-td">@lang('settings/general/actions-log.unit_')</th>
                            <th class="md-td">@lang('settings/general/actions-log.sections_')</th>
                            <th class="md-td">@lang('settings/general/actions-log.reference')</th>
                            <th class="md-td">@lang('settings/general/actions-log.date')</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse ($actions as $action)
                            <tr>
                                <td class="xs-td">{{ $loop->iteration }}</td>
                                <td class="md-td">{{ $action->employee->user_name }}</td>
                                <td class="md-td">{{ $action->function->name }}</td>
                                <td class="md-td">{{ $action->section->name }}</td>
                                <td class="md-td">{{ $action->module->name }}</td>
                                @if ($action->function_code === 'delete')
                                    <td class="md-td resource-link-layout displayed">
                                        <span>{!! __('settings/general/actions-log.number') . $action->resource_id ?? '---' !!}</span>
                                    </td>
                                @else
                                    <td class="md-td resource-link-layout">{!! $action->link ?? '---' !!}</td>
                                @endif
                                <td class="md-td text-center px-2" dir="ltr" style="white-space: nowrap;">
                                    <span style="color: #558b00;">{{ $action->created_at->format('Y-m-d') }} </span>
                                    <span style="color: #303030;">{{ $action->created_at->format('h:i A') }}</span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center">
                                    @lang('settings/general/actions-log.there_are_no_transactions_yet')
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </v-table>

            <div>
                {!! $actions->links() !!}
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(() => {
            const modules = @json($modules);

            $("#modules").on("change", function() {
                const selected_modules_ids = $(this).val();
                populateSectionsSelect(selected_modules_ids);
                populateFunctionsSelect([]);
            });

            $("#sections").on("change", function() {
                const selected_sections_ids = $(this).val();
                populateFunctionsSelect(selected_sections_ids);
            });

            // Function to  sections select based on selected module
            function populateSectionsSelect(selected_modules_ids) {
                let sections_select = $("#sections");
                let selectizeInstance = sections_select[0].selectize;

                // Destroy the selectize instance to remove the previous configuration
                if (selectizeInstance) {
                    selectizeInstance.clearOptions(); // Clear previous options
                    selectizeInstance.destroy();
                }

                sections_select.empty();
                sections_select.append($("<option>", {
                    value: "",
                    text: @lang('settings/general/actions-log.all')
                }));

                if (selected_modules_ids.length == 0) {
                    // If "All" is selected in the module select, get all sections
                    modules.forEach(function(module_data) {
                        module_data.sections.append($("<option>", {
                            value: section.id,
                            text: module_data.name + ' - ' + section.name
                        }));
                    });
                } else {
                    const selected_modules = modules.filter((m) => selected_modules_ids.includes(m.id + ''));
                    selected_modules.forEach(function(module_data) {
                        $.each(module_data.available_sections, function(index, section) {
                            sections_select.append($("<option>", {
                                value: section.id,
                                text: module_data.name + ' - ' + section.name
                            }));
                        });
                    });
                }
                // Reinitialize the selectize instance after appending options
                sections_select.selectize({});

                // Trigger the change event for sections select to update functions select
                sections_select.trigger("change");
            }

            function getSectionName(section_id) {
                let foundSection;
                modules.forEach(function(module) {
                    var foundInSection = module.available_sections.find(function(section) {
                        return section.id == section_id;
                    });

                    if (foundInSection) {
                        foundSection = foundInSection;
                        return false; // Break the loop if the section is found
                    }
                });

                return foundSection.name;
            }

            function populateFunctionsSelect(selected_sections_ids) {
                var functionsSelect = $("#functions");
                var selectizeInstance = functionsSelect[0].selectize;

                // Destroy the selectize instance to remove the previous configuration
                if (selectizeInstance) {
                    selectizeInstance.clearOptions(); // Clear previous options
                    selectizeInstance.destroy();
                }

                functionsSelect.empty();
                functionsSelect.append($("<option>", {
                    value: "",
                    text: $lang('settings.general.actions-log.all')
                }));

                if (selected_sections_ids.length == 0) {
                    // If "All" is selected in the section select, get all functions
                    let allFunctions = [];
                    modules.forEach(function(module_data) {
                        module_data.available_sections.forEach(function(section) {
                            allFunctions = allFunctions.concat(section.functions);
                        });
                    });

                    $.each(allFunctions, function(index, func) {
                        let section_name = getSectionName(func.section_id);
                        // Add a prefix to the function name using the section name
                        functionsSelect.append($('<option>', {
                            value: func.id,
                            text: func.name + ' - ' + section_name
                        }));
                    });
                } else {
                    // Loop through the sectionIds array
                    selected_sections_ids.forEach(function(sectionId) {
                        let selectedModule = modules.find(function(module) {
                            return module.available_sections.some((section) => section.id ==
                                sectionId);
                        });

                        if (selectedModule) {
                            let selectedSection = selectedModule.available_sections.find((section) =>
                                section.id == sectionId);

                            if (selectedSection) {
                                $.each(selectedSection.functions, function(index, func) {
                                    functionsSelect.append($("<option>", {
                                        value: func.id,
                                        text: selectedModule.name + ' - ' +
                                            selectedSection.name + ' - ' + func.name
                                    }));
                                });
                            }
                        }
                    });
                }

                // Reinitialize the selectize instance after appending options
                functionsSelect.selectize({});

                // Trigger the change event for functions select (optional)
                functionsSelect.trigger("change");
            }
        });
    </script>
    {{-- add the tom-select library to delete the multiple select options --}}
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.0/dist/js/tom-select.complete.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const selects = [
                { id: 'employee_ids', placeholder: 'الكل' },
                { id: 'modules', placeholder: 'الكل' },
                { id: 'functions', placeholder: 'الكل' }
            ];
        
            selects.forEach(({ id, placeholder }) => {
                const selectElement = document.getElementById(id);
                if (!selectElement) return;
                const tomSelect = new TomSelect(`#${id}`, {
                    persist: false,
                    create: false,
                    plugins: ['remove_button'],
                    render: {
                        item: (data, escape) => `<div>${escape(data.text)}</div>`
                    },
                    placeholder: ''
                });
        
                const inputElement = tomSelect.control_input;
                const updatePlaceholder = () => {
                    inputElement.placeholder = tomSelect.items.length ? '' : placeholder;
                };
        
                inputElement.addEventListener('focus', () => (inputElement.placeholder = ''));
                inputElement.addEventListener('blur', updatePlaceholder);
                updatePlaceholder();
            });
        });
    </script>
@endpush