@extends('layouts.app')

@section('title', 'Add Employee')

@section('content')
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-1">
            <li class="breadcrumb-item"><a href="{{ route('employees.index') }}">Employees</a></li>
            <li class="breadcrumb-item active">Add Employee</li>
        </ol>
    </nav>
    <h2 class="h4 mb-0">Add New Employee</h2>
</div>

<form action="{{ route('employees.store') }}" method="POST">
    @csrf
    <div class="row">
        <div class="col-lg-8">
            <div class="card stat-card border-0 mb-4 shadow-sm">
                <div class="card-body p-4">
                    <h6 class="fw-bold mb-4 text-primary"><i class="fas fa-user me-2"></i> Personal Information</h6>
                    <div class="row mb-3">
                        <div class="col-md-6 mb-3">
                            <label class="form-label small text-muted fw-bold text-uppercase">Full Name *</label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label small text-muted fw-bold text-uppercase">Email Address *</label>
                            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" required>
                            @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6 mb-3">
                            <label class="form-label small text-muted fw-bold text-uppercase">Phone Number</label>
                            <input type="text" name="phone" class="form-control" value="{{ old('phone') }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label small text-muted fw-bold text-uppercase">Joining Date *</label>
                            <input type="date" name="joining_date" class="form-control @error('joining_date') is-invalid @enderror" value="{{ old('joining_date', date('Y-m-d')) }}" required>
                        </div>
                    </div>

                    <h6 class="fw-bold mt-4 mb-4 text-primary"><i class="fas fa-briefcase me-2"></i> Employment Details</h6>
                    <div class="row mb-3">
                        <div class="col-md-6 mb-3">
                            <label class="form-label small text-muted fw-bold text-uppercase">Department *</label>
                            <input type="text" name="department" class="form-control @error('department') is-invalid @enderror" value="{{ old('department') }}" required placeholder="e.g. Sales, Engineering">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label small text-muted fw-bold text-uppercase">Designation *</label>
                            <input type="text" name="designation" class="form-control @error('designation') is-invalid @enderror" value="{{ old('designation') }}" required placeholder="e.g. Manager, Developer">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card stat-card border-0 mb-4 shadow-sm bg-light-primary text-dark">
                <div class="card-body p-4">
                    <h6 class="fw-bold mb-4"><i class="fas fa-money-bill-wave me-2"></i> Salary Structure</h6>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">Basic Salary *</label>
                        <div class="input-group">
                            <span class="input-group-text">{{ getCurrencySymbol() }}</span>
                            <input type="number" name="basic_salary" id="basic_salary" class="form-control fw-bold" value="{{ old('basic_salary', 0) }}" required oninput="calculateNet()">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">HRA</label>
                        <div class="input-group">
                            <span class="input-group-text">{{ getCurrencySymbol() }}</span>
                            <input type="number" name="hra" id="hra" class="form-control" value="{{ old('hra', 0) }}" oninput="calculateNet()">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">Allowances</label>
                        <div class="input-group">
                            <span class="input-group-text">{{ getCurrencySymbol() }}</span>
                            <input type="number" name="allowances" id="allowances" class="form-control" value="{{ old('allowances', 0) }}" oninput="calculateNet()">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">Deductions</label>
                        <div class="input-group">
                            <span class="input-group-text">{{ getCurrencySymbol() }}</span>
                            <input type="number" name="deductions" id="deductions" class="form-control text-danger" value="{{ old('deductions', 0) }}" oninput="calculateNet()">
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="fw-bold h6 mb-0">Net Salary:</span>
                        <span class="fw-bold h5 mb-0 text-primary" id="net_salary_display">{{ formatCurrency(0) }}</span>
                    </div>
                </div>
            </div>

            <div class="d-grid">
                <button type="submit" class="btn btn-primary py-3 fw-bold shadow-sm">
                    <i class="fas fa-save me-2"></i> Save Employee
                </button>
                <a href="{{ route('employees.index') }}" class="btn btn-link text-muted mt-2">Cancel</a>
            </div>
        </div>
    </div>
</form>

<script>
    const currencySymbol = "{{ getCurrencySymbol() }} ";
    function calculateNet() {
        const basic = parseFloat(document.getElementById('basic_salary').value) || 0;
        const hra = parseFloat(document.getElementById('hra').value) || 0;
        const allowances = parseFloat(document.getElementById('allowances').value) || 0;
        const deductions = parseFloat(document.getElementById('deductions').value) || 0;
        
        const net = (basic + hra + allowances) - deductions;
        document.getElementById('net_salary_display').innerText = currencySymbol + net.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
    }
    // Initialize
    calculateNet();
</script>
@endsection