@extends('layouts.app')
@section('title', 'Payroll Voucher')
@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">Payroll Sheet</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="bi bi-table me-2 text-primary"></i>Payroll Voucher</h1>
        <p class="page-subtitle">Generate a payroll voucher and printable salary sheet.</p>
    </div>
</div>

@if(session('success'))
<div class="alert alert-success alert-dismissible d-flex gap-2 mb-3">
    <i class="bi bi-check-circle flex-shrink-0"></i><div>{{ session('success') }}</div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif
@if($errors->any())
<div class="alert alert-danger alert-dismissible mb-3">
    @foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="card mb-4">
    <div class="card-header fw-semibold">Filters</div>
    <div class="card-body">
        <form method="GET" action="{{ route('payroll.payroll-sheet.index') }}" id="payrollGeneratorForm">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Voucher Type</label>
                    <select name="voucher_type" class="form-select generator-filter">
                        @foreach($voucherTypes as $value => $label)
                        <option value="{{ $value }}" {{ $generator['voucher_type'] === $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Payroll Year</label>
                    <select name="payroll_year" class="form-select generator-filter">
                        @foreach($years as $value => $label)
                        <option value="{{ $value }}" {{ (int) $generator['payroll_year'] === (int) $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Payroll Month</label>
                    <select name="payroll_month" class="form-select generator-filter">
                        @foreach($months as $value => $label)
                        <option value="{{ $value }}" {{ (int) $generator['payroll_month'] === (int) $value ? '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 generator-filter">
                        <option value="">All</option>
                        @foreach($departments as $name => $label)
                        <option value="{{ $name }}" {{ $generator['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 generator-filter">
                        <option value="">All</option>
                        @foreach($designations as $name => $label)
                        <option value="{{ $name }}" {{ $generator['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 generator-filter">
                        <option value="">All</option>
                        @foreach($projects as $name => $label)
                        <option value="{{ $name }}" {{ $generator['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 generator-filter">
                        <option value="">All</option>
                        @foreach($branches as $name => $label)
                        <option value="{{ $name }}" {{ $generator['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 generator-filter">
                        <option value="">All</option>
                        @foreach($religions as $name => $label)
                        <option value="{{ $name }}" {{ $generator['religion'] === $name ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="d-flex flex-wrap align-items-center gap-2 mt-4">
                <a href="{{ route('payroll.payroll-sheet.print', $generator) }}"
                   target="_blank"
                   class="btn btn-primary">
                    <i class="bi bi-printer me-1"></i>Print Voucher
                </a>
                @if(auth()->user()->hasPermission('payroll', 'edit'))
                <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#submitVoucherModal">
                    Submit for Approval
                </button>
                @endif
                <span class="text-muted ms-sm-2" style="font-size:13.5px">
                    <strong>{{ $matchCount }}</strong> employees match
                </span>
            </div>
        </form>
    </div>
</div>

@if(auth()->user()->hasPermission('payroll', 'edit'))
<div class="modal fade" id="submitVoucherModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ route('payroll.payroll-sheet.submit') }}">
                @csrf
                @foreach($generator as $key => $value)
                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                @endforeach
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-semibold">Submit for Approval</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">Submit this payroll voucher for approval? You can continue printing draft versions until it is approved.</p>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

<div class="card">
    <div class="card-header fw-semibold">Payroll Vouchers</div>
    <div class="card-body border-bottom py-2 px-3">
        <form method="GET" action="{{ route('payroll.payroll-sheet.index') }}">
            @foreach($generator as $key => $value)
            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
            @endforeach
            <div class="row g-2 align-items-center">
                <div class="col-6 col-md-3">
                    <select name="list_period" class="form-select form-select-sm">
                        <option value="">All periods</option>
                        @foreach($periodOptions as $value => $label)
                        <option value="{{ $value }}" {{ request('list_period') === $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-md-3">
                    <select name="list_voucher_type" class="form-select form-select-sm">
                        <option value="">All voucher types</option>
                        @foreach($voucherTypes as $value => $label)
                        <option value="{{ $value }}" {{ request('list_voucher_type') === $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-4">
                    <input type="text" name="list_search" class="form-control form-control-sm"
                           placeholder="Search voucher no, department, status…" value="{{ request('list_search') }}">
                </div>
                <div class="col-3 col-md-1">
                    <button type="submit" class="btn btn-primary btn-sm w-100"><i class="bi bi-search"></i></button>
                </div>
                <div class="col-3 col-md-1">
                    <a href="{{ route('payroll.payroll-sheet.index', $generator) }}" class="btn btn-outline-secondary btn-sm w-100"><i class="bi bi-x-lg"></i></a>
                </div>
            </div>
        </form>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" style="min-width:1000px">
                <thead class="table-light">
                    <tr>
                        <th class="ps-4">Voucher No</th>
                        <th>Period</th>
                        <th>Voucher Type</th>
                        <th>Department</th>
                        <th class="text-end">Employees</th>
                        <th class="text-end">Earnings</th>
                        <th class="text-end">Deductions</th>
                        <th class="text-end">Net</th>
                        <th>Status</th>
                        <th class="text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($vouchers as $voucher)
                    <tr>
                        <td class="ps-4 fw-semibold" style="font-size:13.5px">{{ $voucher->voucher_no }}</td>
                        <td style="font-size:13px">{{ $voucher->periodLabel() }}</td>
                        <td style="font-size:13px">{{ $voucher->typeLabel() }}</td>
                        <td style="font-size:13px">{{ $voucher->departmentLabel() }}</td>
                        <td class="text-end" style="font-size:13px">{{ number_format($voucher->employee_count) }}</td>
                        <td class="text-end" style="font-size:13px">{{ number_format($voucher->total_earnings, 2) }}</td>
                        <td class="text-end" style="font-size:13px">{{ number_format($voucher->total_deductions, 2) }}</td>
                        <td class="text-end fw-semibold" style="font-size:13px">{{ number_format($voucher->total_net, 2) }}</td>
                        <td>
                            @php
                                $statusStyle = match($voucher->status) {
                                    'approved' => ['#212529', '#f8f9fa'],
                                    'pending_approval' => ['#664d03', '#fff3cd'],
                                    default => ['#495057', '#e9ecef'],
                                };
                            @endphp
                            <span class="badge" style="font-size:11px;background:{{ $statusStyle[1] }};color:{{ $statusStyle[0] }}">
                                {{ $voucher->statusLabel() }}
                            </span>
                        </td>
                        <td class="text-end pe-3">
                            <div class="d-flex justify-content-end gap-1">
                                <a href="{{ route('payroll.payroll-sheet.voucher.print', $voucher) }}"
                                   target="_blank"
                                   class="btn btn-outline-secondary btn-sm" title="Print">
                                    <i class="bi bi-printer"></i>
                                </a>
                                <a href="{{ route('payroll.payroll-sheet.voucher.print', $voucher) }}?download=1"
                                   target="_blank"
                                   class="btn btn-outline-secondary btn-sm" title="Download">
                                    <i class="bi bi-download"></i>
                                </a>
                                @if(auth()->user()->hasPermission('payroll','edit') && $voucher->status === 'pending_approval')
                                <form method="POST" action="{{ route('payroll.payroll-sheet.approve', $voucher) }}">
                                    @csrf
                                    <button type="submit" class="btn btn-outline-success btn-sm" title="Approve">
                                        <i class="bi bi-check-lg"></i>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="text-center py-5 text-muted">
                            <i class="bi bi-table display-5 d-block mb-2"></i>
                            No payroll vouchers found.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($vouchers->hasPages())
        <div class="px-4 py-3 border-top">{{ $vouchers->links() }}</div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.generator-filter').forEach(function (el) {
    el.addEventListener('change', function () {
        document.getElementById('payrollGeneratorForm').submit();
    });
});
</script>
@endpush