@extends('layouts.app')
@section('title', 'Bank Transfer Letter')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="#">Payroll</a></li>
    <li class="breadcrumb-item active">Bank Transfer Letter</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <p class="text-uppercase text-muted mb-1" style="font-size:11px; letter-spacing:0.06em;">Employee</p>
        <h1 class="page-title"><i class="bi bi-envelope-paper me-2 text-primary"></i>Bank Transfer Letter</h1>
        <p class="page-subtitle">Generate bank transfer letters for salary disbursement.</p>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header fw-semibold">Filters</div>
    <div class="card-body">
        <form method="GET" action="{{ route('payroll.bank-transfer-letter.index') }}" id="transferLetterFilterForm">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Salary Month</label>
                    <select name="salary_month" class="form-select btl-auto-filter">
                        <option value="">All months</option>
                        @foreach($salaryMonths as $value => $label)
                        <option value="{{ $value }}" {{ $filters['salary_month'] === $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Voucher Type</label>
                    <select name="voucher_type" class="form-select btl-auto-filter">
                        <option value="">All types</option>
                        @foreach($voucherTypes as $value => $label)
                        <option value="{{ $value }}" {{ $filters['voucher_type'] === $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Voucher Number</label>
                    <select name="voucher_id" class="form-select btl-auto-filter">
                        <option value="">All vouchers</option>
                        @foreach($voucherNumbers as $id => $label)
                        <option value="{{ $id }}" {{ (int) $filters['voucher_id'] === (int) $id ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Department</label>
                    <select name="department" class="form-select btl-auto-filter">
                        <option value="">All departments</option>
                        @foreach($departments as $name => $label)
                        <option value="{{ $name }}" {{ $filters['department'] === $name ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Designation</label>
                    <select name="designation" class="form-select btl-auto-filter">
                        <option value="">All designations</option>
                        @foreach($designations as $name => $label)
                        <option value="{{ $name }}" {{ $filters['designation'] === $name ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Project</label>
                    <select name="project" class="form-select btl-auto-filter">
                        <option value="">All projects</option>
                        @foreach($projects as $name => $label)
                        <option value="{{ $name }}" {{ $filters['project'] === $name ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Branch</label>
                    <select name="branch" class="form-select btl-auto-filter">
                        <option value="">All branches</option>
                        @foreach($branches as $name => $label)
                        <option value="{{ $name }}" {{ $filters['branch'] === $name ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Religion</label>
                    <select name="religion" class="form-select btl-auto-filter">
                        <option value="">All religions</option>
                        @foreach($religions as $name => $label)
                        <option value="{{ $name }}" {{ $filters['religion'] === $name ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Salary Payment Method</label>
                    <select name="salary_payment_method" class="form-select btl-auto-filter">
                        <option value="">All payment methods</option>
                        @foreach($salaryPaymentMethods as $method)
                        <option value="{{ $method }}" {{ $filters['salary_payment_method'] === $method ? 'selected' : '' }}>{{ $method }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12">
                    <label class="form-label fw-semibold">Employee</label>
                    <select name="employee_id" class="form-select btl-auto-filter">
                        <option value="">All employees</option>
                        @foreach($employees as $id => $label)
                        <option value="{{ $id }}" {{ (int) $filters['employee_id'] === (int) $id ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header fw-semibold d-flex flex-wrap align-items-center gap-2">
        <span>Employees ({{ $rows->count() }})</span>
        <span class="text-muted ms-auto" style="font-size:13px" id="selectionSummary"><strong id="selectedCount">0</strong> selected</span>
    </div>
    <div class="card-body p-0">
        <div class="d-flex flex-wrap align-items-center gap-2 px-3 py-2 border-bottom bg-light">
            <button type="button" class="btn btn-outline-secondary btn-sm" id="selectAllBtn" {{ !$hasActiveFilters ? 'disabled' : '' }}>Select All</button>
            <button type="button" class="btn btn-outline-secondary btn-sm" id="deselectAllBtn" {{ !$hasActiveFilters ? 'disabled' : '' }}>Deselect All</button>
            <button type="button" class="btn btn-primary btn-sm" id="createLetterBtn" disabled>
                <i class="bi bi-file-earmark-text me-1"></i>Create Transfer Letter
            </button>
        </div>

        <div class="table-responsive">
            <table class="table table-hover mb-0" style="min-width:980px">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3" style="width:36px">
                            <input type="checkbox" class="form-check-input" id="checkAllRows" aria-label="Select all" {{ !$hasActiveFilters ? 'disabled' : '' }}>
                        </th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Department</th>
                        <th>Designation</th>
                        <th>Bank</th>
                        <th>Branch</th>
                        <th>Account No</th>
                        <th class="text-end pe-3">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @if(!$hasActiveFilters)
                    <tr>
                        <td colspan="9" class="text-center py-5 text-muted">Select at least one filter to view employees.</td>
                    </tr>
                    @else
                    @forelse($rows as $row)
                    @php $emp = $row['employee']; @endphp
                    <tr>
                        <td class="ps-3">
                            <input type="checkbox" class="form-check-input row-check" value="{{ $emp->id }}" aria-label="Select {{ $emp->display_name ?: $emp->name }}">
                        </td>
                        <td style="font-size:13px">{{ $emp->code ?? '—' }}</td>
                        <td class="fw-semibold" style="font-size:13.5px">{{ $emp->display_name ?: $emp->name }}</td>
                        <td style="font-size:13px">{{ $emp->department ?? '—' }}</td>
                        <td style="font-size:13px">{{ $emp->designation ?? '—' }}</td>
                        <td style="font-size:13px">{{ $emp->bank_name ?? '—' }}</td>
                        <td style="font-size:13px">{{ $emp->branch_name ?? '—' }}</td>
                        <td style="font-size:13px">{{ $emp->bank_account ?? '—' }}</td>
                        <td class="text-end pe-3" style="font-size:13px">{{ \App\Helpers\NumberHelper::formatAmount((float) $row['amount'], auth()->user()->company_id) }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-5 text-muted">No employees match the selected filters.</td>
                    </tr>
                    @endforelse
                    @endif
                </tbody>
            </table>
        </div>
    </div>
</div>

<form method="GET" action="{{ route('payroll.bank-transfer-letter.print') }}" target="_blank" id="printForm" class="d-none">
    @foreach($filters as $key => $value)
        @if($value !== '' && $value !== 0)
        <input type="hidden" name="{{ $key }}" value="{{ $value }}">
        @endif
    @endforeach
</form>
@endsection

@push('scripts')
<script>
(function () {
    const form = document.getElementById('transferLetterFilterForm');
    form?.querySelectorAll('.btl-auto-filter').forEach(function (el) {
        el.addEventListener('change', function () { form.submit(); });
    });

    const checks = () => Array.from(document.querySelectorAll('.row-check'));
    const selected = () => checks().filter(function (c) { return c.checked; });

    function updateSelectionUi() {
        const count = selected().length;
        document.getElementById('selectedCount').textContent = count;
        document.getElementById('createLetterBtn').disabled = count === 0;
        const all = checks();
        const checkAll = document.getElementById('checkAllRows');
        if (checkAll) {
            checkAll.checked = all.length > 0 && count === all.length;
            checkAll.indeterminate = count > 0 && count < all.length;
        }
    }

    document.getElementById('checkAllRows')?.addEventListener('change', function () {
        checks().forEach(function (c) { c.checked = this.checked; }.bind(this));
        updateSelectionUi();
    });

    checks().forEach(function (c) {
        c.addEventListener('change', updateSelectionUi);
    });

    document.getElementById('selectAllBtn')?.addEventListener('click', function () {
        checks().forEach(function (c) { c.checked = true; });
        updateSelectionUi();
    });

    document.getElementById('deselectAllBtn')?.addEventListener('click', function () {
        checks().forEach(function (c) { c.checked = false; });
        updateSelectionUi();
    });

    document.getElementById('createLetterBtn')?.addEventListener('click', function () {
        const printForm = document.getElementById('printForm');
        if (!printForm || selected().length === 0) return;
        printForm.querySelectorAll('input[name="employees[]"]').forEach(function (el) { el.remove(); });
        selected().forEach(function (c) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'employees[]';
            input.value = c.value;
            printForm.appendChild(input);
        });
        printForm.submit();
    });

    updateSelectionUi();
})();
</script>
@endpush