@extends('admin.layouts.master')
@section('title', 'Edit Employee | ' . $employee->first_name)

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

    <style>
        :root {
            --primary: #4f46e5;
            --primary-hover: #4338ca;
            --primary-soft: #e0e7ff;
            --danger: #ef4444;
            --danger-soft: #fef2f2;
            --success: #10b981;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --border-color: #e2e8f0;
            --bg-body: #f8fafc;
            --bg-input: #f8fafc;
            --radius-lg: 16px;
            --radius-md: 10px;
        }

        body {
            background-color: var(--bg-body);
            font-family: 'Inter', sans-serif;
            color: var(--text-main);
        }

        .section-card {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
            margin-bottom: 24px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .section-card:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
            border-color: #cbd5e1;
        }

        .section-header {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid var(--border-color);
            background: #fff;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .section-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
        }

        .icon-blue {
            background: var(--primary-soft);
            color: var(--primary);
        }

        .icon-orange {
            background: #fff7ed;
            color: #ea580c;
        }

        .icon-green {
            background: #dcfce7;
            color: #16a34a;
        }

        .section-title {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-main);
            letter-spacing: -0.2px;
        }

        .section-desc {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin: 2px 0 0 0;
        }

        .section-body {
            padding: 2rem;
        }

        .form-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .asterisk {
            color: var(--danger);
            margin-left: 2px;
        }

        .form-control,
        .form-select {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 0.7rem 1rem;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-main);
            background: var(--bg-input);
            transition: all 0.2s;
            height: auto;
        }

        .form-control::placeholder {
            color: #94a3b8;
            font-weight: 400;
        }

        .form-control:focus,
        .form-select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
            background: #fff;
        }

        /* Custom Image Upload */
        .image-upload-wrapper {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .image-preview {
            width: 64px;
            height: 64px;
            border-radius: 12px;
            object-fit: cover;
            border: 2px dashed var(--border-color);
        }

        .is-invalid {
            border-color: var(--danger) !important;
            background-color: var(--danger-soft) !important;
            color: var(--danger);
        }

        .invalid-feedback {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--danger);
            margin-top: 6px;
            display: none;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .shake {
            animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            20%,
            60% {
                transform: translateX(-5px);
            }

            40%,
            80% {
                transform: translateX(5px);
            }
        }

        .sticky-action-bar {
            position: sticky;
            bottom: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-top: 1px solid var(--border-color);
            padding: 1.25rem 2rem;
            z-index: 100;
            display: flex;
            justify-content: flex-end;
            gap: 16px;
            box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.03);
            border-radius: 16px 16px 0 0;
        }

        .btn-custom {
            padding: 0.75rem 1.75rem;
            font-weight: 600;
            border-radius: 10px;
            transition: 0.2s;
            font-size: 0.95rem;
        }

        .btn-primary-custom {
            background: var(--primary);
            color: #fff;
            border: none;
            box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
        }

        .btn-primary-custom:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 6px 10px -1px rgba(79, 70, 229, 0.3);
        }

        .btn-light-custom {
            background: #fff;
            color: var(--text-main);
            border: 1px solid var(--border-color);
        }

        .btn-light-custom:hover {
            background: #f1f5f9;
            border-color: #cbd5e1;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid py-4 pb-5 px-lg-4">

        {{-- Page Header --}}
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4 gap-3">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-1 small fw-medium">
                        <li class="breadcrumb-item"><a href="#" class="text-muted text-decoration-none">HRM</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.employees') }}"
                                class="text-muted text-decoration-none">Employees</a></li>
                        <li class="breadcrumb-item active text-primary" aria-current="page">Edit</li>
                    </ol>
                </nav>
                <h1 class="h3 fw-bolder text-dark mb-0">Edit Employee: {{ $employee->first_name }}</h1>
            </div>
            <a href="#" onclick="history.back()"
                class="btn btn-light-custom btn-custom text-decoration-none d-flex align-items-center gap-2">
                <i class="ri-arrow-left-line"></i> Back to List
            </a>
        </div>

        {{-- Form Starts Here --}}
        <form id="employeeForm" enctype="multipart/form-data" novalidate>
            @csrf
            <div class="row">
                <div class="col-xl-12 col-lg-10 mx-auto">

                    {{-- 1. PERSONAL DETAILS --}}
                    <div class="section-card">
                        <div class="section-header">
                            <div class="section-icon icon-blue"><i class="ri-user-smile-line"></i></div>
                            <div>
                                <h2 class="section-title">Personal Information</h2>
                                <p class="section-desc">Basic details to identify the employee.</p>
                            </div>
                        </div>
                        <div class="section-body">
                            <div class="row g-4">
                                <div class="col-md-12 mb-2">
                                    <label class="form-label">Profile Image</label>
                                    <div class="image-upload-wrapper">
                                        <img id="imgPreview"
                                            src="{{ $employee->profile_image_url ?? 'https://ui-avatars.com/api/?name=' . $employee->first_name . '&background=e0e7ff&color=4f46e5' }}"
                                            class="image-preview" alt="Preview">
                                        <div>
                                            <input type="file" name="profile_image" id="profileImageInput"
                                                class="form-control form-control-sm w-auto" accept="image/*">
                                            <div class="text-xs text-muted mt-1">Recommended size: 250x250px (JPG/PNG).
                                                Leave empty to keep current.</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">First Name <span class="asterisk">*</span></label>
                                    <input type="text" name="first_name" class="form-control"
                                        value="{{ $employee->first_name }}" required>
                                    <div class="invalid-feedback">First name is required.</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Last Name</label>
                                    <input type="text" name="last_name" class="form-control"
                                        value="{{ $employee->last_name }}">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Email Address <span class="asterisk">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light border-end-0 text-muted"><i
                                                class="ri-mail-line"></i></span>
                                        <input type="email" name="email" class="form-control border-start-0 ps-0"
                                            value="{{ $employee->email }}" required>
                                        <div class="invalid-feedback w-100">Valid email is required.</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Phone Number <span class="asterisk">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light border-end-0 text-muted"><i
                                                class="ri-phone-line"></i></span>
                                        <input type="text" name="phone" class="form-control border-start-0 ps-0"
                                            value="{{ $employee->phone }}" required>
                                        <div class="invalid-feedback w-100">Phone number is required.</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Date of Birth</label>
                                    <input type="date" name="date_of_birth" class="form-control text-muted"
                                        value="{{ $employee->date_of_birth ? $employee->date_of_birth->format('Y-m-d') : '' }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Gender <span class="asterisk">*</span></label>
                                    <select name="gender" class="form-select" required>
                                        <option value="" disabled>Select Gender</option>
                                        <option value="male" {{ $employee->gender == 'male' ? 'selected' : '' }}>Male
                                        </option>
                                        <option value="female" {{ $employee->gender == 'female' ? 'selected' : '' }}>Female
                                        </option>
                                        <option value="other" {{ $employee->gender == 'other' ? 'selected' : '' }}>Other
                                        </option>
                                    </select>
                                    <div class="invalid-feedback">Please select a gender.</div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Marital Status</label>
                                    <select name="marital_status" class="form-select">
                                        <option value="single"
                                            {{ $employee->marital_status == 'single' ? 'selected' : '' }}>Single</option>
                                        <option value="married"
                                            {{ $employee->marital_status == 'married' ? 'selected' : '' }}>Married</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 2. EMPLOYMENT DETAILS --}}
                    <div class="section-card">
                        <div class="section-header">
                            <div class="section-icon icon-orange"><i class="ri-briefcase-4-line"></i></div>
                            <div>
                                <h2 class="section-title">Employment Details</h2>
                                <p class="section-desc">Assign roles, departments, and managers.</p>
                            </div>
                        </div>
                        <div class="section-body">
                            <div class="row g-4">
                                <div class="col-md-4">
                                    <label class="form-label">Employee Code <span class="asterisk">*</span></label>
                                    <input type="text" name="employee_code"
                                        class="form-control font-monospace fw-bold text-primary"
                                        value="{{ $employee->employee_code }}" required>
                                    <div class="invalid-feedback">Employee code is required.</div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Joining Date <span class="asterisk">*</span></label>
                                    <input type="date" name="joining_date" class="form-control"
                                        value="{{ $employee->joining_date ? $employee->joining_date->format('Y-m-d') : '' }}"
                                        required>
                                    <div class="invalid-feedback">Joining date is required.</div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label text-primary">System Status <span
                                            class="asterisk">*</span></label>
                                    <select name="status" class="form-select border-primary" required>
                                        <option value="active" {{ $employee->status == 'active' ? 'selected' : '' }}>
                                            Active</option>
                                        <option value="probation"
                                            {{ $employee->status == 'probation' ? 'selected' : '' }}>Probation</option>
                                        <option value="on_leave" {{ $employee->status == 'on_leave' ? 'selected' : '' }}>
                                            On Leave</option>
                                        <option value="notice_period"
                                            {{ $employee->status == 'notice_period' ? 'selected' : '' }}>Notice Period
                                        </option>
                                        <option value="resigned" {{ $employee->status == 'resigned' ? 'selected' : '' }}>
                                            Resigned</option>
                                        <option value="terminated"
                                            {{ $employee->status == 'terminated' ? 'selected' : '' }}>Terminated</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Department <span class="asterisk">*</span></label>
                                    <input type="text" name="department" class="form-control"
                                        value="{{ $employee->department }}" required>
                                    <div class="invalid-feedback">Department is required.</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Designation <span class="asterisk">*</span></label>
                                    <input type="text" name="designation" class="form-control"
                                        value="{{ $employee->designation }}" required>
                                    <div class="invalid-feedback">Designation is required.</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Employment Type</label>
                                    <select name="employment_type" class="form-select">
                                        <option value="full_time"
                                            {{ $employee->employment_type == 'full_time' ? 'selected' : '' }}>Full Time
                                        </option>
                                        <option value="part_time"
                                            {{ $employee->employment_type == 'part_time' ? 'selected' : '' }}>Part Time
                                        </option>
                                        <option value="contract"
                                            {{ $employee->employment_type == 'contract' ? 'selected' : '' }}>Contract
                                        </option>
                                        <option value="intern"
                                            {{ $employee->employment_type == 'intern' ? 'selected' : '' }}>Intern</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Reports To (Manager)</label>
                                    <select name="reports_to" class="form-select">
                                        <option value="">None (Top Level)</option>
                                        @foreach ($managers ?? [] as $manager)
                                            <option value="{{ $manager->id }}"
                                                {{ $employee->reports_to == $manager->id ? 'selected' : '' }}>
                                                {{ $manager->first_name }} {{ $manager->last_name }}
                                                ({{ $manager->employee_code }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 3. PAYROLL & COMPLIANCE --}}
                    <div class="section-card">
                        <div class="section-header">
                            <div class="section-icon icon-green"><i class="ri-bank-card-line"></i></div>
                            <div>
                                <h2 class="section-title">Payroll & Compliance</h2>
                                <p class="section-desc">Salary and government identification records.</p>
                            </div>
                        </div>
                        <div class="section-body">
                            <div class="row g-4">
                                <div class="col-md-12">
                                    <label class="form-label text-success">Base Salary (₹)</label>
                                    <div class="input-group">
                                        <span
                                            class="input-group-text bg-success-subtle text-success border-success-subtle fw-bold">₹</span>
                                        <input type="number" name="base_salary"
                                            class="form-control border-success-subtle fw-bold fs-6"
                                            value="{{ $employee->base_salary }}" min="0">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Bank Name</label>
                                    <input type="text" name="bank_name" class="form-control"
                                        value="{{ $employee->bank_name }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Account Number</label>
                                    <input type="text" name="bank_account_no" class="form-control font-monospace"
                                        value="{{ $employee->bank_account_no }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">IFSC Code</label>
                                    <input type="text" name="bank_ifsc_code" class="form-control text-uppercase"
                                        value="{{ $employee->bank_ifsc_code }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">PAN Number / Tax ID</label>
                                    <input type="text" name="tax_id" class="form-control text-uppercase"
                                        value="{{ $employee->tax_id }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Aadhar / National ID</label>
                                    <input type="text" name="national_id" class="form-control font-monospace"
                                        value="{{ $employee->national_id }}">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            {{-- STICKY ACTION BAR --}}
            <div class="sticky-action-bar">
                <button type="button" class="btn-custom btn-light-custom" onclick="history.back()">Discard
                    Changes</button>
                <button type="submit" class="btn-custom btn-primary-custom d-flex align-items-center gap-2"
                    id="btnSubmit">
                    <i class="ri-refresh-line fs-5"></i> <span>Update Employee Record</span>
                </button>
            </div>
        </form>

    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {

            // Display Image Preview
            $('#profileImageInput').change(function() {
                const file = this.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(event) {
                        $('#imgPreview').attr('src', event.target.result);
                    }
                    reader.readAsDataURL(file);
                }
            });

            // --- HELPER: Trigger Validation UI ---
            function applyInvalidUI(element, message = null) {
                element.addClass('is-invalid').removeClass('shake');
                void element[0].offsetWidth; // Force reflow
                element.addClass('shake');

                if (message) {
                    let feedbackEl = element.parent('.input-group').length ?
                        element.parent().siblings('.invalid-feedback') :
                        element.siblings('.invalid-feedback');

                    if (feedbackEl.length === 0 && element.parent('.input-group').length) {
                        feedbackEl = element.parent().find('.invalid-feedback');
                    }

                    feedbackEl.text(message).show();
                }
            }

            $('input, select').on('input change', function() {
                $(this).removeClass('is-invalid shake');
                let feedbackEl = $(this).parent('.input-group').length ?
                    $(this).parent().find('.invalid-feedback') :
                    $(this).siblings('.invalid-feedback');
                feedbackEl.hide().text('');
            });

            // --- AJAX Form Submission ---
            $('#employeeForm').on('submit', function(e) {
                e.preventDefault();

                let isValid = true;
                let firstErrorEl = null;

                $(this).find('[required]').each(function() {
                    if (!$(this).val() || $(this).val().trim() === '') {
                        isValid = false;
                        applyInvalidUI($(this), 'This field is required.');
                        if (!firstErrorEl) firstErrorEl = $(this);
                    }
                });

                if (!isValid) {
                    $('html, body').animate({
                        scrollTop: firstErrorEl.offset().top - 150
                    }, 300);
                    return;
                }

                let btn = $('#btnSubmit');
                let originalText = btn.html();
                btn.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-2"></span> Updating...');

                let formData = new FormData(this);

                $.ajax({
                    url: "{{ route('admin.employees.update', $employee->uuid) }}",
                    type: "POST", // using POST to handle file uploads properly
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Updated Successfully!',
                            text: response.message,
                            showConfirmButton: false,
                            timer: 2000
                        }).then(() => {
                            window.location.href = response.redirect_url;
                        });
                    },
                    error: function(xhr) {
                        btn.prop('disabled', false).html(originalText);

                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let firstServerEl = null;

                            $.each(errors, function(key, val) {
                                let el = $(`[name="${key}"]`);
                                if (el.length) {
                                    applyInvalidUI(el, val[0]);
                                    if (!firstServerEl) firstServerEl = el;
                                }
                            });

                            if (firstServerEl) {
                                $('html, body').animate({
                                    scrollTop: firstServerEl.offset().top - 150
                                }, 300);
                            }

                            Swal.fire({
                                toast: true,
                                position: 'top-end',
                                icon: 'error',
                                title: 'Please fix the highlighted errors.',
                                showConfirmButton: false,
                                timer: 3000
                            });
                        } else {
                            Swal.fire('Error', 'A server error occurred. Please try again.',
                                'error');
                        }
                    }
                });
            });
        });
    </script>
@endpush