@extends('layouts.master')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/hr-forms.css') }}">
@endpush

@section('content')
    <div class="hr-page-container">
        <div class="hr-breadcrumb">
            <a href="{{ url('admin') }}"><i class="fa-solid fa-house"></i> Home</a>
            <i class="fa-solid fa-chevron-right" style="font-size: 10px;"></i>
            <a href="{{ url('employee') }}">Employees</a>
            <i class="fa-solid fa-chevron-right" style="font-size: 10px;"></i>
            <span class="current">Edit Employee</span>
        </div>

        <div class="hr-page-header">
            <div class="hr-header-left">
                <h2><i class="fa-solid fa-user-pen"></i> Edit Employee Profile</h2>
                <p>Update personal info, designation, employment status and basic wage</p>
            </div>
            <div class="hr-header-actions">
                <a href="{{ url('employee') }}" class="hr-btn-back">
                    <i class="fa-solid fa-arrow-left"></i> Employee List
                </a>
            </div>
        </div>

        <div class="hr-card">
            <div class="hr-card-header">
                <div class="hr-card-title">
                    <i class="fa-solid fa-address-card"></i> {{ $edit->first_name }} {{ $edit->last_name }}
                    <span class="text-muted"
                        style="font-size: 12px; font-weight: 500;">(#{{ $edit->employee_no ?? $edit->id }})</span>
                </div>
                <div>
                    <span
                        class="badge {{ $edit->status === 'active' ? 'badge-success' : ($edit->status === 'terminated' ? 'badge-danger' : 'badge-secondary') }}"
                        style="padding: 6px 12px; font-size: 12px; border-radius: 6px;">
                        {{ ucfirst($edit->status ?? 'Active') }}
                    </span>
                </div>
            </div>
            <div class="hr-card-body">
                @if (isset($errors) && $errors->any())
                    <div class="hr-alert-error">
                        <strong><i class="fa-solid fa-triangle-exclamation"></i> Please fix the following errors:</strong>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form id="myForm" method="POST" action="{{ url('employee/update/' . \Crypt::encrypt($edit->id)) }}">
                    @csrf

                    <!-- Section 1: Personal Details -->
                    <div class="hr-section-divider">
                        <h4 class="hr-section-title"><i class="fa-solid fa-user"></i> Personal Information</h4>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="hr-form-group">
                                <label class="hr-label" for="first_name">
                                    First Name <span class="required">*</span>
                                </label>
                                <div class="hr-input-icon-wrap">
                                    <i class="fa-solid fa-user"></i>
                                    <input type="text" id="first_name" name="first_name" class="hr-input"
                                        value="{{ old('first_name', $edit->first_name) }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="hr-form-group">
                                <label class="hr-label" for="last_name">
                                    Last Name
                                </label>
                                <div class="hr-input-icon-wrap">
                                    <i class="fa-regular fa-user"></i>
                                    <input type="text" id="last_name" name="last_name" class="hr-input"
                                        value="{{ old('last_name', $edit->last_name) }}">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="hr-form-group">
                                <label class="hr-label" for="phone">
                                    Mobile / Phone
                                </label>
                                <div class="hr-input-icon-wrap">
                                    <i class="fa-solid fa-phone"></i>
                                    <input type="text" id="phone" name="phone" class="hr-input"
                                        value="{{ old('phone', $edit->phone) }}" placeholder="0300 1234567">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="hr-form-group">
                                <label class="hr-label" for="email">
                                    Email Address
                                </label>
                                <div class="hr-input-icon-wrap">
                                    <i class="fa-solid fa-envelope"></i>
                                    <input type="email" id="email" name="email" class="hr-input"
                                        value="{{ old('email', $edit->email) }}">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="hr-form-group">
                                <label class="hr-label" for="dob">
                                    Date of Birth
                                </label>
                                <div class="hr-input-icon-wrap">
                                    <i class="fa-regular fa-calendar"></i>
                                    <input type="date" id="dob" name="dob" class="hr-input"
                                        value="{{ old('dob', $edit->dob ? (is_object($edit->dob) && method_exists($edit->dob, 'format') ? $edit->dob->format('Y-m-d') : date('Y-m-d', strtotime($edit->dob))) : '') }}">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="hr-form-group">
                                <label class="hr-label" for="gender">
                                    Gender
                                </label>
                                <select id="gender" name="gender" class="hr-select">
                                    <option value="">Select Gender</option>
                                    <option value="male" {{ old('gender', $edit->gender) === 'male' ? 'selected' : '' }}>Male
                                    </option>
                                    <option value="female" {{ old('gender', $edit->gender) === 'female' ? 'selected' : '' }}>
                                        Female</option>
                                    <option value="other" {{ old('gender', $edit->gender) === 'other' ? 'selected' : '' }}>
                                        Other</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Section 2: Job & Position -->
                    <div class="hr-section-divider">
                        <h4 class="hr-section-title"><i class="fa-solid fa-briefcase"></i> Job &amp; Position</h4>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="hr-form-group">
                                <label class="hr-label" for="designation_id">
                                    Designation &amp; Department
                                </label>
                                <select id="designation_id" name="designation_id" class="hr-select">
                                    <option value="">Select Designation</option>
                                    @foreach ($designations as $designation)
                                        <option value="{{ $designation->id }}" {{ old('designation_id', $edit->designation_id) == $designation->id ? 'selected' : '' }}>
                                            {{ $designation->title }} - ({{ $designation->department?->name ?? 'No Dept' }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="hr-form-group">
                                <label class="hr-label" for="joining_date">
                                    Joining Date
                                </label>
                                <div class="hr-input-icon-wrap">
                                    <i class="fa-solid fa-calendar-check"></i>
                                    <input type="date" id="joining_date" name="joining_date" class="hr-input"
                                        value="{{ old('joining_date', $edit->joining_date ? (is_object($edit->joining_date) && method_exists($edit->joining_date, 'format') ? $edit->joining_date->format('Y-m-d') : date('Y-m-d', strtotime($edit->joining_date))) : '') }}">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="hr-form-group">
                                <label class="hr-label" for="emp_status">
                                    Employment Status
                                </label>
                                <select id="emp_status" name="status" class="hr-select">
                                    <option value="active" {{ old('status', $edit->status) === 'active' ? 'selected' : '' }}>
                                        Active</option>
                                    <option value="inactive" {{ old('status', $edit->status) === 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    <option value="terminated" {{ old('status', $edit->status) === 'terminated' ? 'selected' : '' }}>Terminated</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="hr-form-group">
                                <label class="hr-label" for="basic_salary">
                                    Basic Monthly Salary (PKR)
                                </label>
                                <div class="hr-input-icon-wrap">
                                    <i class="fa-solid fa-money-bill-wave"></i>
                                    <input type="number" id="basic_salary" name="basic_salary" step="0.01" class="hr-input"
                                        value="{{ old('basic_salary', $edit->basic_salary) }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="hr-form-actions">
                        <a href="{{ url('/employee') }}" class="hr-btn-cancel">
                            <i class="fa-solid fa-xmark"></i> Cancel
                        </a>
                        <button type="submit" class="hr-btn-submit">
                            <i class="fa-solid fa-floppy-disk"></i> Update Employee
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('keydown', function (event) {
            if ((event.ctrlKey || event.metaKey) && event.key === 's') {
                event.preventDefault();
                document.getElementById('myForm').submit();
            }
        });
    </script>
@endpush