@extends('layouts.portal')

@section('title', __('Quick setup from accounts'))

@push('styles')
    @include('accounting.journal._styles')
    <style>
        .bulk-concepts tr.is-off input[type="text"] { opacity: .45; }
        .bulk-concepts td input[type="text"] { min-width: 180px; }
    </style>
@endpush

@section('content')
<div class="portal-page">
    @include('partials.portal-header')

    <main class="module-main">
        <div class="container-fluid py-4">
            <header class="mb-3">
                <h1 class="h3 mb-0">{{ __('Quick setup from accounts') }}</h1>
                <p class="text-muted mb-0">{{ __($catalog['bulk_intro']) }}</p>
            </header>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route($catalog['module'].'.concepts.bulk.store') }}" class="card shadow-sm" id="bulk-form">
                @csrf
                <div class="card-header d-flex flex-wrap align-items-end gap-2">
                    <div>
                        <label for="bulk-filter" class="form-label small mb-1">{{ __('Search') }}</label>
                        <input type="search" id="bulk-filter" class="form-control form-control-sm" placeholder="{{ __('Code or name') }}">
                    </div>
                    <div>
                        <label for="bulk-group" class="form-label small mb-1">{{ __('Group for selected') }}</label>
                        <div class="input-group input-group-sm">
                            <input type="text" id="bulk-group" class="form-control" maxlength="60" list="concept-groups" placeholder="{{ __($catalog['group_placeholder']) }}">
                            <button type="button" class="btn btn-outline-secondary" id="apply-group">{{ __('Apply') }}</button>
                        </div>
                        <datalist id="concept-groups">
                            @foreach($groups as $group)
                                <option value="{{ $group }}">
                            @endforeach
                        </datalist>
                    </div>
                    <div class="ms-auto d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="select-all">{{ __('Select all') }}</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="select-none">{{ __('Select none') }}</button>
                    </div>
                </div>

                <div class="je-grid-wrap">
                    <table class="je-table bulk-concepts">
                        <thead>
                            <tr>
                                <th style="width: 40px;"></th>
                                <th>{{ __('Account') }}</th>
                                <th>{{ __('Concept name') }}</th>
                                <th>{{ __('Group') }}</th>
                                <th>{{ __('Existing concepts') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($accounts as $account)
                                @php($row = old('accounts.'.$account->id, []))
                                @php($checked = filter_var($row['selected'] ?? false, FILTER_VALIDATE_BOOLEAN))
                                <tr data-search="{{ mb_strtolower($account->code.' '.$account->name) }}" class="{{ $checked ? '' : 'is-off' }}">
                                    <td>
                                        <input type="checkbox" class="form-check-input bulk-check" name="accounts[{{ $account->id }}][selected]" value="1" aria-label="{{ $account->code }}" @checked($checked)>
                                    </td>
                                    <td class="nowrap">{{ $account->code }} — {{ $account->name }}</td>
                                    <td><input type="text" class="form-control form-control-sm" name="accounts[{{ $account->id }}][name]" value="{{ $row['name'] ?? $account->name }}" maxlength="120" @disabled(! $checked)></td>
                                    <td><input type="text" class="form-control form-control-sm bulk-group-input" name="accounts[{{ $account->id }}][group_name]" value="{{ $row['group_name'] ?? '' }}" maxlength="60" list="concept-groups" @disabled(! $checked)></td>
                                    <td>
                                        @if(($conceptsByAccount[$account->id] ?? 0) > 0)
                                            <span class="badge text-bg-light border">{{ trans_choice(':count concept|:count concepts', $conceptsByAccount[$account->id], ['count' => $conceptsByAccount[$account->id]]) }}</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="text-center text-muted py-4">{{ __('No eligible accounts.') }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="card-footer d-flex align-items-center gap-2">
                    <button type="submit" class="btn btn-primary">{{ __('Create selected concepts') }}</button>
                    <a href="{{ route($catalog['module'].'.concepts.index') }}" class="btn btn-outline-secondary">{{ __('Cancel') }}</a>
                    <span class="ms-auto text-muted small"><span id="selected-count">0</span> {{ __('selected') }}</span>
                </div>
            </form>
        </div>
    </main>
</div>

<script>
    (function () {
        const rows = () => Array.from(document.querySelectorAll('.bulk-concepts tbody tr[data-search]'));
        const visibleRows = () => rows().filter((row) => !row.hidden);
        const counter = document.getElementById('selected-count');

        const sync = (row) => {
            const checked = row.querySelector('.bulk-check').checked;
            row.classList.toggle('is-off', !checked);
            row.querySelectorAll('input[type="text"]').forEach((input) => { input.disabled = !checked; });
        };
        const count = () => { counter.textContent = rows().filter((row) => row.querySelector('.bulk-check').checked).length; };
        const setAll = (value) => {
            visibleRows().forEach((row) => { row.querySelector('.bulk-check').checked = value; sync(row); });
            count();
        };

        document.querySelector('.bulk-concepts').addEventListener('change', (event) => {
            if (event.target.classList.contains('bulk-check')) {
                sync(event.target.closest('tr'));
                count();
            }
        });
        document.getElementById('select-all').addEventListener('click', () => setAll(true));
        document.getElementById('select-none').addEventListener('click', () => setAll(false));
        document.getElementById('apply-group').addEventListener('click', () => {
            const value = document.getElementById('bulk-group').value;
            rows().filter((row) => row.querySelector('.bulk-check').checked)
                .forEach((row) => { row.querySelector('.bulk-group-input').value = value; });
        });
        document.getElementById('bulk-filter').addEventListener('input', (event) => {
            const term = event.target.value.trim().toLowerCase();
            rows().forEach((row) => { row.hidden = term !== '' && !row.dataset.search.includes(term); });
        });

        count();
    })();
</script>
@endsection