@extends('layouts.app')

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

@section('content')
<div class="mb-4">
    <a href="{{ route('employees.index') }}" class="text-secondary text-decoration-none small">
        &larr; Back to Directory
    </a>
    <h4 class="fw-bold mt-1">Register New Employee</h4>
    <p class="text-secondary small">Onboard a corporate staff member into PeopleFlow HRIS</p>
</div>

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

    <div class="row g-4">
        <!-- 1. Personal Details -->
        <div class="col-12 col-lg-8">
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-white">
                    <h6 class="mb-0 fw-bold"><i class="bi bi-person me-2 text-primary"></i> Personal Details</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">First Name *</label>
                            <input type="text" name="first_name" class="form-control form-control-sm" value="{{ old('first_name') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Last Name *</label>
                            <input type="text" name="last_name" class="form-control form-control-sm" value="{{ old('last_name') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Work Email Address *</label>
                            <input type="email" name="work_email" class="form-control form-control-sm" value="{{ old('work_email') }}" required placeholder="staff@company.com">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Phone Number *</label>
                            <input type="text" name="phone" class="form-control form-control-sm" value="{{ old('phone') }}" required placeholder="+880 1711 000000">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold">Gender *</label>
                            <select name="gender" class="form-select form-select-sm" required>
                                <option value="male" {{ old('gender') === 'male' ? 'selected' : '' }}>Male</option>
                                <option value="female" {{ old('gender') === 'female' ? 'selected' : '' }}>Female</option>
                                <option value="other" {{ old('gender') === 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold">Date of Birth *</label>
                            <input type="date" name="date_of_birth" class="form-control form-control-sm" value="{{ old('date_of_birth', '1995-01-01') }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold">City</label>
                            <input type="text" name="city" class="form-control form-control-sm" value="{{ old('city', 'Dhaka') }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-semibold">Present Address</label>
                            <input type="text" name="address" class="form-control form-control-sm" value="{{ old('address') }}" placeholder="Street, Sector/Thana, Dhaka">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 2. Compensation & Salary (BDT) -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-white">
                    <h6 class="mb-0 fw-bold"><i class="bi bi-cash-stack me-2 text-success"></i> Compensation Breakdown (BDT ৳)</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Basic Salary (Monthly) *</label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">৳</span>
                                <input type="number" step="0.01" name="basic_salary" id="basic_salary" class="form-control" value="{{ old('basic_salary', '35000') }}" required oninput="calcGross()">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">House Rent Allowance</label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">৳</span>
                                <input type="number" step="0.01" name="house_rent_allowance" id="house_rent_allowance" class="form-control" value="{{ old('house_rent_allowance', '15000') }}" oninput="calcGross()">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Medical Allowance</label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">৳</span>
                                <input type="number" step="0.01" name="medical_allowance" id="medical_allowance" class="form-control" value="{{ old('medical_allowance', '5000') }}" oninput="calcGross()">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Conveyance Allowance</label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">৳</span>
                                <input type="number" step="0.01" name="conveyance_allowance" id="conveyance_allowance" class="form-control" value="{{ old('conveyance_allowance', '3000') }}" oninput="calcGross()">
                            </div>
                        </div>
                        <div class="col-12 mt-3 pt-2 border-top d-flex justify-content-between align-items-center">
                            <span class="fw-bold small text-secondary">Total Monthly Gross Salary:</span>
                            <span class="fs-5 fw-bold text-primary" id="gross_display">৳ 58,000.00</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3. Emergency Contact -->
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h6 class="mb-0 fw-bold"><i class="bi bi-shield-plus me-2 text-danger"></i> Emergency Contact</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Emergency Contact Person</label>
                            <input type="text" name="emergency_contact_name" class="form-control form-control-sm" value="{{ old('emergency_contact_name') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Contact Phone Number</label>
                            <input type="text" name="emergency_contact_phone" class="form-control form-control-sm" value="{{ old('emergency_contact_phone') }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Side: Employment & Hierarchy -->
        <div class="col-12 col-lg-4">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-white">
                    <h6 class="mb-0 fw-bold"><i class="bi bi-briefcase me-2 text-primary"></i> Employment Hierarchy</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Department *</label>
                        <select name="department_id" class="form-select form-select-sm" required>
                            <option value="">Select Department</option>
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>
                                    {{ $dept->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Designation *</label>
                        <select name="designation_id" class="form-select form-select-sm" required>
                            <option value="">Select Designation</option>
                            @foreach($designations as $desig)
                                <option value="{{ $desig->id }}" {{ old('designation_id') == $desig->id ? 'selected' : '' }}>
                                    {{ $desig->title }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Reporting Manager</label>
                        <select name="reporting_manager_id" class="form-select form-select-sm">
                            <option value="">No Direct Manager (Top Level)</option>
                            @foreach($managers as $m)
                                <option value="{{ $m->id }}" {{ old('reporting_manager_id') == $m->id ? 'selected' : '' }}>
                                    {{ $m->full_name }} ({{ $m->employee_code }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Work Schedule / Shift</label>
                        <select name="work_schedule_id" class="form-select form-select-sm">
                            @foreach($schedules as $sched)
                                <option value="{{ $sched->id }}" {{ old('work_schedule_id') == $sched->id ? 'selected' : '' }}>
                                    {{ $sched->name }} ({{ substr($sched->start_time, 0, 5) }} - {{ substr($sched->end_time, 0, 5) }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Employment Type *</label>
                        <select name="employment_type" class="form-select form-select-sm" required>
                            <option value="full_time" {{ old('employment_type') === 'full_time' ? 'selected' : '' }}>Full-Time Regular</option>
                            <option value="part_time" {{ old('employment_type') === 'part_time' ? 'selected' : '' }}>Part-Time</option>
                            <option value="contract" {{ old('employment_type') === 'contract' ? 'selected' : '' }}>Contractual</option>
                            <option value="intern" {{ old('employment_type') === 'intern' ? 'selected' : '' }}>Internship</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Status *</label>
                        <select name="employment_status" class="form-select form-select-sm" required>
                            <option value="active" {{ old('employment_status') === 'active' ? 'selected' : '' }}>Active</option>
                            <option value="probation" {{ old('employment_status') === 'probation' ? 'selected' : '' }}>Probationary</option>
                            <option value="contract" {{ old('employment_status') === 'contract' ? 'selected' : '' }}>Contract</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Joining Date *</label>
                        <input type="date" name="joining_date" class="form-control form-control-sm" value="{{ old('joining_date', date('Y-m-d')) }}" required>
                    </div>

                    <div class="d-grid mt-4">
                        <button type="submit" class="btn btn-primary py-2 fw-semibold">
                            <i class="bi bi-check-circle me-1"></i> Register & Create Account
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
function calcGross() {
    const basic = parseFloat(document.getElementById('basic_salary').value) || 0;
    const rent = parseFloat(document.getElementById('house_rent_allowance').value) || 0;
    const med = parseFloat(document.getElementById('medical_allowance').value) || 0;
    const conv = parseFloat(document.getElementById('conveyance_allowance').value) || 0;
    const total = basic + rent + med + conv;
    document.getElementById('gross_display').innerText = '৳ ' + total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
</script>
@endsection