@extends('layouts.app')

@section('title', 'Generate Salary')
@section('page-title', 'Generate Salary')

@section('content')
<div class="page-header">
    <div>
        <h1>Generate Salary</h1>
        <p class="breadcrumb mb-0"><a href="{{ route('salary.index') }}">Salary</a> / Generate Monthly</p>
    </div>
    <a href="{{ route('salary.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-list-ul me-1"></i> Salary List
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-xl-6 col-lg-7">
        <div class="form-card text-center">
            <div class="mb-3">
                <div style="width:64px;height:64px;background:rgba(79,70,229,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;">
                    <i class="bi bi-cash-stack fs-3 text-primary"></i>
                </div>
                <h4 class="fw-700">Monthly Salary Generation</h4>
                <p class="text-muted">Select the month and year to generate salaries for all active employees.</p>
            </div>

            @if($errors->any())
                <div class="alert alert-danger text-start">
                    @foreach($errors->all() as $error)<div>• {{ $error }}</div>@endforeach
                </div>
            @endif

            <form action="{{ route('salary.generate') }}" method="POST" id="generateForm">
                @csrf
                <div class="row g-3 text-start mb-4">
                    <div class="col-md-6">
                        <label class="form-label">Month <span class="text-danger">*</span></label>
                        <select name="month" class="form-select" required>
                            @foreach(range(1,12) as $m)
                                <option value="{{ $m }}" {{ (old('month', now()->month) == $m) ? 'selected' : '' }}>
                                    {{ \Carbon\Carbon::create(null, $m)->format('F') }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Year <span class="text-danger">*</span></label>
                        <select name="year" class="form-select" required>
                            @foreach(range(now()->year - 2, now()->year + 1) as $y)
                                <option value="{{ $y }}" {{ (old('year', now()->year) == $y) ? 'selected' : '' }}>{{ $y }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="alert alert-info text-start mb-4">
                    <i class="bi bi-info-circle me-2"></i>
                    <strong>Note:</strong> Salary will be generated for all <strong>active</strong> employees.
                    Existing records for the selected period will be skipped.
                </div>

                <button type="submit" class="btn btn-primary btn-lg px-5" id="generateBtn">
                    <i class="bi bi-lightning-charge me-2"></i>Generate Salary
                </button>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('generateForm').addEventListener('submit', function() {
    const btn = document.getElementById('generateBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Generating…';
});
</script>
@endpush