@extends('layouts.app')

@section('title', 'Generate Payroll')

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-plus-circle me-2"></i>Generate Payroll</h5>
            </div>

            <form action="{{ route('payroll.store') }}" method="POST">
                @csrf

                <div class="card-body">
                    {{-- Period Selection --}}
                    <h6 class="border-bottom pb-2 mb-3"><i class="bi bi-calendar-range me-2"></i>Payroll Period</h6>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label for="period_year" class="form-label">Year <span class="text-danger">*</span></label>
                            <select class="form-select @error('period_year') is-invalid @enderror"
                                    id="period_year" name="period_year" required>
                                @foreach($years as $year)
                                    <option value="{{ $year }}" {{ old('period_year', $currentYear) == $year ? 'selected' : '' }}>
                                        {{ $year }}
                                    </option>
                                @endforeach
                            </select>
                            @error('period_year')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label for="period_month" class="form-label">Month <span class="text-danger">*</span></label>
                            <select class="form-select @error('period_month') is-invalid @enderror"
                                    id="period_month" name="period_month" required>
                                @foreach(range(1, 12) as $m)
                                    <option value="{{ $m }}" {{ old('period_month', $currentMonth) == $m ? 'selected' : '' }}>
                                        {{ \Carbon\Carbon::create()->month($m)->format('F') }}
                                    </option>
                                @endforeach
                            </select>
                            @error('period_month')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- Employee Selection --}}
                    <h6 class="border-bottom pb-2 mb-3"><i class="bi bi-people me-2"></i>Select Employees</h6>

                    <div class="mb-4">
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" name="generate_for"
                                   id="generate_all" value="all" checked>
                            <label class="form-check-label" for="generate_all">
                                <strong>Generate for All Active Employees</strong>
                                <small class="text-muted d-block">
                                    Generate payroll for all {{ $employees->count() }} active employees
                                </small>
                            </label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="generate_for"
                                   id="generate_selected" value="selected">
                            <label class="form-check-label" for="generate_selected">
                                <strong>Generate for Selected Employees Only</strong>
                            </label>
                        </div>
                    </div>

                    <div id="employee-selection" style="display: none;">
                        <label class="form-label">Select Employees</label>
                        <div class="border rounded p-3" style="max-height: 300px; overflow-y: auto;">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="select_all_employees">
                                <label class="form-check-label fw-bold" for="select_all_employees">
                                    Select All
                                </label>
                            </div>
                            <hr>

                            @foreach($employees as $employee)
                                <div class="form-check mb-2">
                                    <input class="form-check-input employee-checkbox" type="checkbox"
                                           name="employee_ids[]" value="{{ $employee->id }}"
                                           id="employee_{{ $employee->id }}">
                                    <label class="form-check-label" for="employee_{{ $employee->id }}">
                                        {{ $employee->full_name }}
                                        <small class="text-muted">({{ $employee->employee_number }})</small>
                                    </label>
                                </div>
                            @endforeach
                        </div>
                        @error('employee_ids')
                            <div class="text-danger mt-2">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="card-footer text-end">
                    <a href="{{ route('payroll.index') }}" class="btn btn-secondary">
                        <i class="bi bi-x-lg me-1"></i> Cancel
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i> Generate Payroll
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card bg-light">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>Information</h6>
            </div>
            <div class="card-body">
                <h6 class="fw-bold mb-2">About Payroll Generation</h6>
                <p class="small mb-3">
                    This process will automatically calculate payroll for the selected employees based on:
                </p>

                <ul class="small mb-3">
                    <li>Basic salary from employee contract</li>
                    <li>Allowances/benefits</li>
                    <li>Overtime pay (if any)</li>
                    <li>Attendance deductions (late & absent)</li>
                    <li>Leave deductions</li>
                    <li>BPJS contributions</li>
                    <li>PPh21 tax calculation</li>
                </ul>

                <div class="alert alert-warning small mb-3">
                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                    <strong>Important:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Payroll will be created in <strong>Draft</strong> status</li>
                        <li>Review and approve before marking as paid</li>
                        <li>Cannot generate duplicate payroll for same period</li>
                    </ul>
                </div>

                <div class="alert alert-info small mb-0">
                    <i class="bi bi-lightbulb-fill me-1"></i>
                    <strong>Tip:</strong> Ensure all attendance records, leave requests, and overtime are properly recorded before generating payroll.
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Toggle employee selection visibility
    document.querySelectorAll('input[name="generate_for"]').forEach((radio) => {
        radio.addEventListener('change', function() {
            const employeeSelection = document.getElementById('employee-selection');
            if (this.value === 'selected') {
                employeeSelection.style.display = 'block';
            } else {
                employeeSelection.style.display = 'none';
            }
        });
    });

    // Select/Deselect all employees
    document.getElementById('select_all_employees').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.employee-checkbox');
        checkboxes.forEach((checkbox) => {
            checkbox.checked = this.checked;
        });
    });
</script>
@endpush
@endsection