@extends('companyuser::layouts.master')
@section('title', __('settings::other_fees.other_fees'))

@section('extra_styles')
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        #ofb-bulk-toolbar {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            padding: 10px 14px;
            margin-bottom: 14px;
            background: #fbfdfd;
            border: 1px solid #e7eef0;
            border-radius: 12px;
            box-shadow: 0 1px 2px rgba(22, 145, 138, .04);
        }

        #ofb-bulk-toolbar .ofb-bulk-actions {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-inline-start: auto;
        }

        .ofb-toast-stack {
            position: fixed;
            inset-inline-end: 20px;
            bottom: 24px;
            z-index: 100050;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: min(400px, calc(100vw - 40px));
            pointer-events: none;
        }

        .ofb-toast-stack .ofb-toast {
            pointer-events: auto;
        }

        .ofb-toast {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 14px 16px;
            border-radius: 12px;
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05);
            background: #fff;
            animation: ofb-toast-in 0.28s ease-out;
        }

        @keyframes ofb-toast-in {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ofb-toast--success {
            border-inline-start: 4px solid #16918a;
        }

        .ofb-toast--error {
            border-inline-start: 4px solid #d04a4a;
        }

        .ofb-toast-icon {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
        }

        .ofb-toast--success .ofb-toast-icon {
            background: #eaf9f8;
            color: #16918a;
        }

        .ofb-toast--error .ofb-toast-icon {
            background: #fff5f5;
            color: #d04a4a;
        }

        .ofb-toast-body {
            flex: 1;
            font-size: 0.9rem;
            line-height: 1.45;
            color: #2f3b52;
            padding-top: 2px;
        }

        .ofb-toast-close {
            flex-shrink: 0;
            border: none;
            background: transparent;
            color: #94a3b8;
            font-size: 1.25rem;
            line-height: 1;
            padding: 0 0 0 4px;
            cursor: pointer;
            border-radius: 4px;
        }

        .ofb-toast-close:hover {
            color: #64748b;
        }

        .ofb-toast--out {
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .ofb-toast-icon .fa {
            line-height: 1;
        }

        .ofb-table-loader {
            position: absolute;
            inset: 0;
            z-index: 30;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(1px);
        }

        .ofb-table-loader-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border: 1px solid #e5e9f2;
            border-radius: 999px;
            background: #fff;
            box-shadow: 0 8px 20px rgba(15, 35, 58, 0.1);
            color: #2f3b52;
            font-size: 13px;
            font-weight: 600;
        }

        .ofb-table-loader-spinner {
            width: 16px;
            height: 16px;
            border-left-color: #16918a;
        }

        #ofb-bulk-toolbar .ofb-chip,
        .ofb-value-chip {
            background: #eaf9f8;
            color: #16918a;
            border: 1px solid #c9f0ec;
            border-radius: 100px;
            font-size: 12px;
            padding: 4px 12px;
            font-weight: 600;
            display: inline-block;
            white-space: nowrap;
        }

        .ofb-bulk-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 999px;
            border: 1px solid transparent;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.2;
            transition: transform .08s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out;
            cursor: pointer;
        }

        .ofb-bulk-btn i {
            font-size: 13px;
        }

        .ofb-bulk-btn:disabled,
        .ofb-bulk-btn[disabled] {
            opacity: .55;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }

        .ofb-bulk-btn--assign {
            background: #16918a;
            border-color: #16918a;
            color: #fff;
        }

        .ofb-bulk-btn--assign:not([disabled]):hover {
            background: #117e78;
            border-color: #117e78;
            box-shadow: 0 4px 10px rgba(22, 145, 138, .25);
            transform: translateY(-1px);
            color: #fff;
        }

        .ofb-bulk-btn--unassign {
            background: #fff;
            border-color: #f1c4c4;
            color: #d04a4a;
        }

        .ofb-bulk-btn--unassign:not([disabled]):hover {
            background: #fff5f5;
            border-color: #d04a4a;
            color: #b13c3c;
            box-shadow: 0 4px 10px rgba(208, 74, 74, .15);
            transform: translateY(-1px);
        }

        .ofb-assignment-list {
            margin: 0;
            padding-inline-start: 20px;
        }

        .ofb-assignment-list li {
            margin: 6px 0;
        }

        .ofb-assigned-tags {
            display: inline-flex;
            gap: 4px;
            flex-wrap: wrap;
        }

        .ofb-assigned-tag {
            border-radius: 6px;
            border: 1px solid #e5e9f2;
            padding: 2px 8px;
            font-size: 12px;
            color: #2f3b52;
            background: #fff;
            white-space: nowrap;
        }

        .ofb-assigned-tag.muted {
            color: #708099;
            background: #fbfcfe;
        }

        .ofb-show-assignments {
            background: transparent;
            border: 1px solid #e5e9f2;
            border-radius: 6px;
            font-size: 12px;
            padding: 2px 8px;
            cursor: pointer;
            color: #16918a;
        }

        .ofb-tax-percent {
            cursor: help;
            border-bottom: 1px dotted #b8c5d0;
        }

        #createOtherFeeModal,
        #bulkAssignOtherFeesModal,
        #assignmentDetailsModal {
            z-index: 99999;
        }

        #createOtherFeeModal.modal,
        #bulkAssignOtherFeesModal.modal,
        #assignmentDetailsModal.modal {
            top: 0;
        }

        .swal2-container {
            z-index: 99999 !important;
        }

        .closeOtherFeeModalBtn {
            opacity: 1;
        }

        #createOtherFeeModal .ofb-create-fee-hint {
            cursor: help;
            color: #16918a;
        }

        #createOtherFeeModal .ofb-create-fee-hint:focus {
            outline: 2px solid rgba(22, 145, 138, 0.35);
            outline-offset: 2px;
            border-radius: 50%;
        }

        #createOtherFeeModal .dropdown-wrapper .dropdown-panel {
            z-index: 100050;
        }

        td[name="data-actions"] .btn {
            margin: 0 2px;
        }

        /* Other fees list: never show DataTables sort arrows on the bulk-select header (checkbox column). */
        #ofb-fees-table thead th.ofb-th-select-all.sorting,
        #ofb-fees-table thead th.ofb-th-select-all.sorting_asc,
        #ofb-fees-table thead th.ofb-th-select-all.sorting_desc,
        #ofb-fees-table thead th.ofb-th-select-all.sorting_asc_disabled,
        #ofb-fees-table thead th.ofb-th-select-all.sorting_desc_disabled {
            background-image: none !important;
            cursor: default !important;
        }
    </style>
@endsection

@section('breadcrumb')
    <link href="{{ asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
    <div class="row breadcrumbs-top">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('company.general-settings.index', $subdomain) }}">@lang('settings::other_fees.Settings')</a>
                </li>
                <li class="breadcrumb-item active">
                    <a href="#">@lang('settings::other_fees.other_fees')</a>
                </li>
            </ol>
        </div>
    </div>
@endsection

@section('content')
    <section data-subdomain="{{ $subdomain }}">
        <div class="container-fluid">
            <div class="col-md-6 headTitle">
                <h3 class="py-half">@lang('settings::other_fees.other_fees')</h3>
            </div>
            <div class="headBtns fixed-btns">
                @can('settings.other-fees.create')
                    <a href="javascript:void(0);" class="pull-right create-new-fee" title="@lang('Create')">
                        <span class="icon-Add action-icon"></span>
                    </a>
                @endcan
            </div>

            <section id="configuration" class="mt-2">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="card">
                            <div class="card-body collapse in">
                                @include('companyuser::errors.lists')

                                @canany(['settings.other-fees.create', 'settings.other-fees.edit'])
                                    <div id="ofb-bulk-toolbar">
                                        <span class="ofb-chip" id="ofb-selection-chip">@lang('settings::other_fees.selected_count', ['count' => 0])</span>
                                        <div class="ofb-bulk-actions">
                                            <button type="button" class="ofb-bulk-btn ofb-bulk-btn--assign" id="ofb-bulk-assign-btn" disabled>
                                                <i class="fa fa-tasks"></i>
                                                <span>@lang('settings::other_fees.assign_selected')</span>
                                            </button>
                                            <button type="button" class="ofb-bulk-btn ofb-bulk-btn--unassign" id="ofb-bulk-unassign-btn" disabled>
                                                <i class="fa fa-unlink"></i>
                                                <span>@lang('settings::other_fees.unassign_selected')</span>
                                            </button>
                                        </div>
                                    </div>
                                @endcanany

                                <table class="table table-striped table-column ofb-datatable" style="width:100%;display: inline-table;" id="ofb-fees-table" data-locale="{{ app()->getLocale() }}">
                                    <thead>
                                        <tr>
                                            @canany(['settings.other-fees.create', 'settings.other-fees.edit'])
                                                <th class="no-sort ofb-th-select-all" style="width:42px;">
                                                    <input type="checkbox" id="ofb-select-all" aria-label="@lang('settings::other_fees.assign_selected')" />
                                                </th>
                                            @endcanany
                                            <th>@lang('settings::other_fees.reference_id')</th>
                                            <th>@lang('settings::other_fees.service_name')</th>
                                            <th>@lang('settings::other_fees.account_name')</th>
                                            <th>@lang('settings::other_fees.tax')</th>
                                            <th>@lang('settings::other_fees.value')</th>
                                            <th>@lang('settings::other_fees.assigned_transactions')</th>
                                            <th class="no-sort">@lang('Actions')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($otherFees as $fee)
                                            <tr data-fee-id="{{ $fee['id'] }}" data-fee='@json($fee)'>
                                                @canany(['settings.other-fees.create', 'settings.other-fees.edit'])
                                                    <td>
                                                        <input type="checkbox" class="ofb-row-check" data-fee-id="{{ $fee['id'] }}" aria-label="select fee {{ $fee['reference'] }}" />
                                                    </td>
                                                @endcanany
                                                <td>{{ $fee['reference'] }}</td>
                                                <td>{{ $fee['name'] }}</td>
                                                <td>{{ $fee['account_name'] }}</td>
                                                <td>
                                                    @if($fee['tax_percent'] !== null)
                                                        @php
                                                            $taxName = app()->getLocale() === 'ar'
                                                                ? ($fee['tax_name_ar'] ?? $fee['tax_name_en'] ?? '')
                                                                : ($fee['tax_name_en'] ?? $fee['tax_name_ar'] ?? '');
                                                        @endphp
                                                        <span class="ofb-tax-percent" data-toggle="tooltip" data-placement="top" title="{{ $taxName }}">
                                                            {{ $fee['tax_percent'] }}%
                                                        </span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <span class="ofb-value-chip">
                                                        {{ number_format((float) $fee['value'], 2) }} {!! __('settings::currencies.'.$currencyCode) !!}
                                                    </span>
                                                </td>
                                                <td>
                                                    @php
                                                        $assignments = $fee['assigned_transactions'] ?? [];
                                                        $previewLimit = 2;
                                                        $previewItems = array_slice($assignments, 0, $previewLimit);
                                                        $moreCount = max(0, count($assignments) - $previewLimit);
                                                    @endphp
                                                    <div class="ofb-assigned-tags">
                                                        @forelse($previewItems as $screen)
                                                            <span class="ofb-assigned-tag">{{ __('settings::other_fees.'.$screen) }}</span>
                                                        @empty
                                                            <span class="ofb-assigned-tag muted">@lang('settings::other_fees.no_assignments')</span>
                                                        @endforelse
                                                        @if($moreCount > 0)
                                                            <button type="button" class="ofb-show-assignments" data-fee-id="{{ $fee['id'] }}">
                                                                @lang('settings::other_fees.view_more_assignments', ['count' => $moreCount])
                                                            </button>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td name="data-actions">
                                                    @can('settings.other-fees.edit')
                                                        <a href="javascript:void(0);" class="btn btni rounded-circle font-small-2 btn-sm btn-info text-white ofb-edit-fee" data-fee-id="{{ $fee['id'] }}">
                                                            <i class="fa fa-pencil" data-toggle="tooltip" data-placement="bottom" title="@lang('Edit')"></i>
                                                        </a>
                                                        <a href="javascript:void(0);" class="btn btni rounded-circle font-small-2 btn-sm btn-info text-white ofb-single-assign" data-fee-id="{{ $fee['id'] }}">
                                                            <i class="fa fa-tasks" data-toggle="tooltip" data-placement="bottom" title="@lang('settings::other_fees.assign')"></i>
                                                        </a>
                                                    @endcan
                                                    @can('settings.other-fees.delete')
                                                        <a href="javascript:void(0);" class="btn btni rounded-circle font-small-2 btn-sm btn-danger text-white ofb-delete-fee" data-fee-id="{{ $fee['id'] }}">
                                                            <i class="fa fa-trash" data-toggle="tooltip" data-placement="bottom" title="@lang('Delete')"></i>
                                                        </a>
                                                    @endcan
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            @include('settings::other_fees.create-modal')
            @include('settings::other_fees.bulk-assign-modal')
            @include('settings::other_fees.assignment-details-modal')

            <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close closeOtherFeeDeleteModalBtn" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="deleteModalLabel">@lang('Delete')</h4>
                        </div>
                        <div class="modal-body">
                            <p id="deleteOtherFeeModalMessage">@lang('settings::other_fees.delete_confirm_other_fee')</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary mx-1 closeOtherFeeDeleteModalBtn" data-dismiss="modal">@lang('No')</button>
                            <span class="pull-right">
                                <form id="delete-form" action="" method="POST" class="form">
                                    @csrf
                                    @method('delete')
                                    <button type="submit" class="btn btn-default">@lang('Yes')</button>
                                </form>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="ofb-toast-stack" class="ofb-toast-stack" aria-live="polite" aria-relevant="additions"></div>
    </section>
@endsection

@section('extra_scripts')
    <link href="{{ asset('assets/css/custom/save-actions-loading.css') }}" rel="stylesheet">
    <script src="{{ asset('assets/js/otherfees.js') }}"></script>
    <script>
        gtag('event', 'web_settings_other_fees_list');

        window.OtherFees = window.OtherFees || {};
        window.OtherFees.config = {
            currencyCode: @json($currencyCode ?? 'SAR'),
            currencySymbolHtml: @json($currencySymbolHtml ?? 'SAR'),
            screenLabels: @json(array_merge($salesModules ?? [], $purchaseModules ?? [])),
            transactionOptions: @json(collect($salesModules ?? [])->map(
                fn ($label, $key) => ['id' => $key, 'name' => $label]
            )->values()),
            urls: {
                create: '{{ route('company.other-fees.create', $subdomain) }}',
                store: '{{ route('company.other-fees.store', $subdomain) }}',
                update: '{{ route('company.other-fees.update', ['subdomain' => $subdomain, 'otherFee' => ':id']) }}',
                destroy: '{{ route('company.other-fees.destroy', ['subdomain' => $subdomain, 'otherFee' => ':id']) }}',
                bulkAssign: '{{ route('company.other-fees.bulk-assign', $subdomain) }}',
                bulkUnassign: '{{ route('company.other-fees.bulk-unassign', $subdomain) }}',
                taxCreate: '{{ route('company.taxes.create', $subdomain) }}',
            },
            translations: {
                selectedCount: {{ \Illuminate\Support\Js::from(__('settings::other_fees.selected_count', ['count' => '__count__'])) }},
                viewMore: {{ \Illuminate\Support\Js::from(__('settings::other_fees.view_more_assignments', ['count' => '__count__'])) }},
                viewAll: @json(__('settings::other_fees.view_all_assignments')),
                noAssignments: @json(__('settings::other_fees.no_assignments')),
                bulkAssignTitle: @json(__('settings::other_fees.bulk_assign_title')),
                bulkUnassignTitle: @json(__('settings::other_fees.bulk_unassign_title')),
                assigningCountMessage: {{ \Illuminate\Support\Js::from(__('settings::other_fees.assigning_count_message', ['count' => '__count__'])) }},
                unassigningCountMessage: {{ \Illuminate\Support\Js::from(__('settings::other_fees.unassigning_count_message', ['count' => '__count__'])) }},
                selectAtLeastOne: @json(__('settings::other_fees.select_at_least_one')),
                selectAtLeastOneScreen: @json(__('settings::other_fees.select_at_least_one_screen')),
                deleteConfirm: @json(__('settings::other_fees.delete_confirm_other_fee')),
                yes: @json(__('Yes')),
                no: @json(__('No')),
                savedSuccessfully: @json(__('settings::other_fees.saved_successfully')),
                deletedSuccessfully: @json(__('settings::other_fees.deleted_successfully')),
                errorDeleteFee: @json(__('settings::other_fees.error_delete_fee')),
                toastCreateSuccess: @json(__('settings::other_fees.toast_create_success')),
                toastUpdateSuccess: @json(__('settings::other_fees.toast_update_success')),
                toastAssignSuccess: @json(__('settings::other_fees.toast_assign_success')),
                toastUnassignSuccess: @json(__('settings::other_fees.toast_unassign_success')),
                toastOperationFailed: @json(__('settings::other_fees.toast_operation_failed')),
                toastSaveValidation: @json(__('settings::other_fees.toast_save_validation')),
                loading: @json(__('settings::other_fees.component.loading')),
                dismiss: @json(__('Close')),
            },
        };
    </script>
    @yield('create_other_fee_scripts')
@endsection