@extends('layouts.master')

@section('title', 'Personal Information')

@section('style')
    <style>
        .process-wrapper {
            position: relative;
        }

        .process-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            text-align: center;
            position: relative;
            z-index: 1;
            cursor: pointer;
        }

        .process-step .icon {
            transition: all 0.3s ease;
        }

        .process-step.active .icon {
            background-color: #A07CC5 !important;
            color: #fff !important;
            transform: scale(1.1);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .process-step.completed .icon {
            background-color: #198754 !important;
            color: #fff !important;
        }

        .tab-pane {
            animation: fadeIn 0.3s ease-in-out;
        }

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

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

        /* ให้ column เป็นตัวอ้างอิงตำแหน่ง */
        .process-wrapper .col-md-6,
        .process-wrapper .col-lg-2 {
            position: relative;
        }

        /* เส้นเชื่อมระหว่าง step */
        .process-wrapper .col-md-6:not(:last-child)::after,
        .process-wrapper .col-lg-2:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 38px;
            /* ปรับตามขนาดวงกลม */
            right: -50%;
            width: 100%;
            height: 2px;
            background-color: #ddd;
            z-index: 0;
        }

        /* ให้วงกลมอยู่เหนือเส้น */
        .process-step .icon {
            position: relative;
            z-index: 1;
        }
    </style>
@endsection

@section('script')
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            document.querySelectorAll('.process-step').forEach(step => {
                step.addEventListener('click', function() {
                    document.querySelectorAll('.process-step')
                        .forEach(s => s.classList.remove('active'));

                    this.classList.add('active');
                });
            });

        });
    </script>
@endsection

@section('content')

    @include('layouts.header')
    @include('layouts.header-sub')

    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="row gx-lg-8 gx-xl-12">

                <div class="col-md-12">
                    <h5 class="display-1 mb-3" style="font-size: 30px">@yield('title')</h5>
                    <p class="lead fs-lg pe-lg-15 pe-xxl-12"></p>
                </div>

                <div class="col-lg-12">
                    <div class="blog single">
                        <div class="card">
                            <div class="card-body">

                                <div align="center">
                                    <div class="item">
                                        <img src="{{ asset('user_images/' . $user_meta->user_img) }}" alt="Profile Image"
                                            class="rounded-circle mb-3" width="120" height="120"
                                            style="object-fit: cover;">
                                        <h4 class="mb-1">
                                            {{ $user_meta->title_en_name ?? '-' }} {{ $user_meta->user_firstname ?? '-' }}
                                            {{ $user_meta->user_lastname ?? '-' }}
                                        </h4>
                                        <p class="mb-2">{{ $user_meta->email }}</p>
                                    </div>
                                </div>

                                <div class="row g-0 gy-6 process-wrapper nav nav-tabs border-0 text-center"
                                    style="margin-left: 160px">

                                    <div class="col-md-6 col-lg-2 text-center">
                                        <button class="process-step nav-link active border-0 bg-transparent"
                                            data-bs-toggle="tab" data-bs-target="#tab1-1" type="button">
                                            <span class="icon btn btn-circle btn-lg btn-soft-primary mb-3">
                                                <span class="number">01</span>
                                            </span>
                                            <h6>Personal Details</h6>
                                        </button>
                                    </div>

                                    <div class="col-md-6 col-lg-2 text-center">
                                        <button class="process-step nav-link border-0 bg-transparent" data-bs-toggle="tab"
                                            data-bs-target="#tab1-2" type="button">
                                            <span class="icon btn btn-circle btn-lg btn-soft-primary mb-3">
                                                <span class="number">02</span>
                                            </span>
                                            <h6>Education</h6>
                                        </button>
                                    </div>

                                    <div class="col-md-6 col-lg-2 text-center">
                                        <button class="process-step nav-link border-0 bg-transparent" data-bs-toggle="tab"
                                            data-bs-target="#tab1-3" type="button">
                                            <span class="icon btn btn-circle btn-lg btn-soft-primary mb-3">
                                                <span class="number">03</span>
                                            </span>
                                            <h6>Family</h6>
                                        </button>
                                    </div>

                                    <div class="col-md-6 col-lg-2 text-center">
                                        <button class="process-step nav-link border-0 bg-transparent" data-bs-toggle="tab"
                                            data-bs-target="#tab1-4" type="button">
                                            <span class="icon btn btn-circle btn-lg btn-soft-primary mb-3">
                                                <span class="number">04</span>
                                            </span>
                                            <h6>Emergency</h6>
                                        </button>
                                    </div>

                                    <div class="col-md-6 col-lg-2 text-center">
                                        <button class="process-step nav-link border-0 bg-transparent" data-bs-toggle="tab"
                                            data-bs-target="#tab1-5" type="button">
                                            <span class="icon btn btn-circle btn-lg btn-soft-primary mb-3">
                                                <span class="number">05</span>
                                            </span>
                                            <h6>Employment</h6>
                                        </button>
                                    </div>

                                </div>

                                <hr class="my-5">

                                <div class="tab-content mt-4">

                                    <div class="tab-pane fade show active" id="tab1-1">

                                        @hasanyrole('Admin|AdminConsult')
                                            <div align="right">
                                                <a class="btn btn-sm btn-violet rounded-pill"
                                                    href="{{ url('/membergetedit', $user_meta->user_userid) }}">
                                                    <i class="uil uil-pen"></i> Edit
                                                </a>
                                            </div>
                                            <br>
                                        @endhasanyrole

                                        <div class="container-fluid">
                                            <h4 class="mb-4 fw-bold position-relative d-inline-block">
                                                Personal Details/ข้อมูลส่วนตัว
                                                <span
                                                    style="
                                                    display:block;
                                                    height:3px;
                                                    width:50%;
                                                    background:#6f42c1;
                                                    margin-top:5px;
                                                "></span>
                                            </h4>
                                            <div class="row mb-5">
                                                <div class="col-md-12 mb-3">
                                                    <div class="fw-bold">Citizen No./Passport No.</div>
                                                    <div>{{ $user_meta->user_citizen_no ?? '-' }}</div>
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <div class="fw-bold">Name-Surname</div>
                                                    <div>{{ $user_meta->user_firstname_en ?? '-' }}
                                                        {{ $user_meta->user_lastname_en ?? '-' }}</div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <div class="fw-bold">ชื่อ-นามสกุล</div>
                                                    <div>
                                                        @if ($user_meta->user_firstname || $user_meta->user_lastname)
                                                            {{ $user_meta->user_firstname }}
                                                            {{ $user_meta->user_lastname }}
                                                        @else
                                                            -
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <div class="fw-bold">Date of Birth</div>
                                                    <div>
                                                        {{ \Carbon\Carbon::parse($user_meta->user_date_of_birth)->format('d-m-Y') ?? '-' }}
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <div class="fw-bold">วัน/เดือน/ปี เกิด</div>
                                                    <div>
                                                        {{ !empty($user_meta->user_date_of_birth) ? \Carbon\Carbon::parse($user_meta->user_date_of_birth)->addYears(543)->format('d-m-Y') : '-' }}
                                                    </div>
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <div class="fw-bold">Age</div>
                                                    <div>{{ $age ?? '-' }}</div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <div class="fw-bold">อายุ</div>
                                                    <div>{{ $age_th ?? '-' }}</div>
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <div class="fw-bold">Marital Status</div>
                                                    <div>{{ $user_meta->user_marital_status ?? '-' }}</div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <div class="fw-bold">สถานภาพการสมรส</div>
                                                    <div>
                                                        @if ($user_meta->user_marital_status == 'single')
                                                            โสด
                                                        @elseif ($user_meta->user_marital_status == 'married')
                                                            สมรส
                                                        @else
                                                            {{ $user_meta->user_marital_status ?? '-' }}
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            <hr>

                                            <h4 class="mb-4 fw-bold position-relative d-inline-block">
                                                Contact/ช่องทางการติดต่อ<span
                                                    style="
                                                    display:block;
                                                    height:3px;
                                                    width:50%;
                                                    background:#6f42c1;
                                                    margin-top:5px;
                                                "></span>
                                            </h4>
                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <div class="fw-bold">Book Bank</div>
                                                    <div>{{ $user_meta->user_bookbank ?? '-' }}</div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <div class="fw-bold">Mobile Phone No.</div>
                                                    <div>{{ $user_meta->user_mobile_phone ?? '-' }}</div>
                                                </div>

                                                <div class="col-md-6 mb-3">
                                                    <div class="fw-bold">E-mail Address (SIIT)</div>
                                                    <div>{{ $user_meta->user_email_siit ?? '-' }}</div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <div class="fw-bold">E-mail Address (TU)</div>
                                                    <div>{{ $user_meta->user_email_tu ?? '-' }}</div>
                                                </div>

                                                <div class="col-md-6 mb-4">
                                                    <div class="fw-bold">Residence Address</div>
                                                    <div style="white-space: pre-line;">
                                                        {{ $user_meta->user_residence_address ?? '-' }}</div>
                                                </div>
                                                <div class="col-md-6 mb-4">
                                                    <div class="fw-bold">ที่อยู่ปัจจุบัน</div>
                                                    <div style="white-space: pre-line;">
                                                        {{ $user_meta->user_residence_address_th ?? '-' }}</div>
                                                </div>

                                                <div class="col-md-6 mb-4">
                                                    <div class="fw-bold">Mailing Address</div>
                                                    <div style="white-space: pre-line;">
                                                        {{ $user_meta->user_mailing_address ?? '-' }}</div>
                                                </div>
                                                <div class="col-md-6 mb-4">
                                                    <div class="fw-bold">ที่อยู่ตามทะเบียนบ้าน</div>
                                                    <div style="white-space: pre-line;">
                                                        {{ $user_meta->user_mailing_address_th ?? '-' }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="tab1-2">

                                        @hasanyrole('Admin|AdminConsult')
                                            <div class="text-end mb-3">
                                                <a class="btn btn-sm btn-violet rounded-pill"
                                                    href="{{ url('/educationgetedit', [$user_meta->user_userid, 0]) }}">
                                                    <i class="uil uil-pen"></i> Add Education
                                                </a>
                                            </div>
                                        @endhasanyrole

                                        @forelse($educations as $education)
                                            <div class="card mb-4">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="mb-3">
                                                                <div class="fw-bold text-dark">Degree</div>
                                                                <div class="text-muted">
                                                                    {{ $education->degree_name_en ?? '-' }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold text-dark">Major/Field of Study</div>
                                                                <div class="text-muted">
                                                                    {{ $education->user_education_major ?? '-' }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold text-dark">Institution</div>
                                                                <div class="text-muted">
                                                                    {{ $education->user_education_institution ?? '-' }}
                                                                </div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold text-dark">Country</div>
                                                                <div class="text-muted">
                                                                    {{ $education->country_name ?? '-' }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold text-dark">Year of Enrollment</div>
                                                                <div class="text-muted">
                                                                    {{ $education->user_education_year_enr ?? '-' }}
                                                                </div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold text-dark">GPA</div>
                                                                <div class="text-muted">
                                                                    {{ $education->user_education_gpa ?? '-' }}</div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6">
                                                            <div class="mb-3">
                                                                <div class="fw-bold text-dark">ระดับการศึกษา</div>
                                                                <div class="text-muted">
                                                                    {{ $education->degree_name_th ?? '-' }}
                                                                </div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold text-dark">สาขาวิชา</div>
                                                                <div class="text-muted">
                                                                    {{ $education->user_education_major_th ?? '-' }}
                                                                </div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold text-dark">สถาบัน</div>
                                                                <div class="text-muted">
                                                                    {{ $education->user_education_institution_th ?? '-' }}
                                                                </div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold text-dark">ประเทศ</div>
                                                                <div class="text-muted">
                                                                    {{ $education->country_name_th ?? '-' }}
                                                                </div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold text-dark">Year of Graduation</div>
                                                                <div class="text-muted">
                                                                    {{ $education->user_education_year_grad ?? '-' }}</div>
                                                            </div>

                                                            @hasanyrole('Admin|AdminConsult')
                                                                <div class="text-end mt-4">
                                                                    <a href="{{ url('/educationgetedit', [$user_meta->user_userid, $education->user_education_id]) }}"
                                                                        class="btn btn-circle btn-info btn-sm text-white"
                                                                        style="width: 35px; height: 35px; border-radius: 50%;"
                                                                        title="Edit">
                                                                        <i class="uil uil-pen"></i>
                                                                    </a>
                                                                    <a href="{{ url('/educationdelete', $education->user_education_id) }}"
                                                                        class="btn btn-circle btn-danger btn-sm"
                                                                        style="width: 35px; height: 35px; border-radius: 50%;"
                                                                        title="Delete"
                                                                        onclick="return confirm('Are you sure?');">
                                                                        <i class="uil uil-trash-alt"></i>
                                                                    </a>
                                                                </div>
                                                            @endhasanyrole
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @empty
                                            <p class="text-center text-muted">No education records found.</p>
                                        @endforelse

                                    </div>

                                    <div class="tab-pane fade" id="tab1-3">

                                        @hasanyrole('Admin|AdminConsult')
                                            <div align="right">
                                                <a class="btn btn-sm btn-violet rounded-pill "
                                                    href="{{ url('/familygetedit', [$user_meta->user_userid, 0]) }}">
                                                    <i class="uil uil-pen"></i> Add Family
                                                </a>
                                            </div>
                                            <br>
                                        @endhasanyrole

                                        @forelse($familys as $family)
                                            <div class="card mb-4">
                                                <div class="card-body">
                                                    <div class="row">

                                                        <div class="col-md-6">
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Relation Type</div>
                                                                <div>{{ ucfirst($family->user_relation_type ?? '-' ) }}</div>
                                                            </div>

                                                            <div class="mb-3">
                                                                <div class="fw-bold">Full Name</div>
                                                                <div>{{ $family->user_family_fullname ?? '-' }}</div>
                                                            </div>

                                                            <div class="mb-3">
                                                                <div class="fw-bold">Citizen No.</div>
                                                                <div>{{ $family->user_family_citizen_no ?? '-' }}</div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6">
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Date of Birth</div>
                                                                <div>
                                                                    {{ $family->user_family_date_of_birth ? \Carbon\Carbon::parse($family->user_family_date_of_birth)->format('d/m/Y') : '-' }}
                                                                </div>
                                                            </div>

                                                            <div class="mb-3">
                                                                <div class="fw-bold">Age</div>
                                                                <div>{{ $family->user_family_age ?? '-' }}</div>
                                                            </div>
                                                        </div>

                                                    </div>

                                                    @hasanyrole('Admin|AdminConsult')
                                                        <div class="text-end">
                                                            <a href="{{ url('/familygetedit', [$user_meta->user_userid, $family->user_family_id]) }}"
                                                                class="btn btn-circle btn-info btn-sm" title="Edit">
                                                                <i class="uil uil-pen"></i>
                                                            </a>
                                                            <a href="{{ url('/familydelete', $family->user_family_id) }}"
                                                                class="btn btn-circle btn-danger btn-sm" title="Delete"
                                                                onclick="return confirm('Are you sure you want to delete this family record?');">
                                                                <i class="uil uil-trash-alt"></i>
                                                            </a>
                                                        </div>
                                                    @endhasanyrole

                                                </div>
                                            </div>

                                        @empty
                                            <p>No family records found.</p>
                                        @endforelse

                                    </div>

                                    <div class="tab-pane fade" id="tab1-4">
                                        @hasanyrole('Admin|AdminConsult')
                                            <div align="right">
                                                <a class="btn btn-sm btn-violet rounded-pill "
                                                    href="{{ url('/emergencygetedit', [$user_meta->user_userid, $user_meta->user_emergency_id ?? 0]) }}">
                                                    <i class="uil uil-pen"></i> Add/Edit Emergency
                                                </a>
                                            </div>
                                            <br>
                                        @endhasanyrole
                                        @forelse($emergencies as $emergency)
                                            <div class="card mb-4">
                                                <div class="card-body">
                                                    <div class="row justify-content-center">

                                                        <div class="col-md-6">
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Name</div>
                                                                <div>{{ $emergency->user_emergency_name ?? '-' }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Relationship</div>
                                                                <div>{{ $emergency->user_emergency_relationship ?? '-' }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Residence Address</div>
                                                                <div>{{ $emergency->user_emergency_res_add ?? '-'  }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Mobile Phone No.</div>
                                                                <div>{{ $emergency->user_emergency_mobile_phone ?? '-'  }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold">E-mail Address(1)</div>
                                                                <div>{{ $emergency->user_emergency_email_add1 ?? '-'  }}</div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Surname</div>
                                                                <div>{{ $emergency->user_emergency_surname ?? '-'  }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Citizen No./Passport No.</div>
                                                                <div>{{ $emergency->user_emergency_citizen_no ?? '-'  }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Mailing Address</div>
                                                                <div>{{ $emergency->user_emergency_mail_add ?? '-'  }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Home Phone No.</div>
                                                                <div>{{ $emergency->user_emergency_home_phone ?? '-'  }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold">E-mail Address(2)</div>
                                                                <div>{{ $emergency->user_emergency_email_add2 ?? '-'  }}</div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        @empty
                                            <p>No emergency contact records found.</p>
                                        @endforelse

                                    </div>

                                    <div class="tab-pane fade" id="tab1-5">
                                        @hasanyrole('Admin|AdminConsult')
                                            <div align="right">
                                                <a class="btn btn-sm btn-violet rounded-pill"
                                                    href="{{ url('/employmentgetedit', [$user_meta->user_userid, $employments->user_employment_id ?? 0]) }}">
                                                    <i class="uil uil-pen"></i> Edit
                                                </a>
                                            </div>
                                            <br>
                                        @endhasanyrole

                                        <div class="container-fluid">
                                            <h4 class="mb-4 fw-bold position-relative d-inline-block">
                                                Employment/ข้อมูลการทำงาน<span
                                                    style="
                                                    display:block;
                                                    height:3px;
                                                    width:50%;
                                                    background:#6f42c1;
                                                    margin-top:5px;
                                                "></span>
                                            </h4>
                                            <div class="row mb-5">
                                                <!-- Column Left (English) -->
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Staff ID</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->user_staff_id ? $employments->user_staff_id : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Start working Date</div>
                                                        <div class="text-muted">
                                                            @if ($employments && $employments->user_start_work_date)
                                                                {{ \Carbon\Carbon::parse($employments->user_start_work_date)->format('d-m-Y') }}
                                                            @else
                                                                -
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Work Experience</div>
                                                        <div class="text-muted">
                                                            @if ($employments && $employments->user_start_work_date)
                                                                {{ \Carbon\Carbon::parse($employments->user_start_work_date)->diffInYears(\Carbon\Carbon::now()) }}
                                                                years
                                                            @else
                                                                -
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Retirement Date</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->user_retirement_date ? \Carbon\Carbon::parse($employments->user_retirement_date)->format('d-m-Y') : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Nationality</div>
                                                        <div class="text-muted">{{ $user_meta->nationality_name ?? '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Employment Category</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->employment_category_name_en ? $employments->employment_category_name_en : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Supporting Academic</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->supporting_academic_name_en ? $employments->supporting_academic_name_en : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Executive Position</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->executive_position_name_en ? $employments->executive_position_name_en : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Academic Position</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->academic_position_name_en ? $employments->academic_position_name_en : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Status</div>
                                                        <div class="text-muted text-success">
                                                            @if ($employments && $employments->user_employment_status == 'active')
                                                                Active
                                                            @elseif($employments && $employments->user_employment_status == 'inactive')
                                                                Inactive
                                                            @else
                                                                {{ $employments && $employments->user_employment_status ? $employments->user_employment_status : '-' }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Position (EN)</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->position_name_en ? $employments->position_name_en : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">School/Division (EN)</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->school_division_name_en ? $employments->school_division_name_en : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Contract Type</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->contract_type_name_en ? $employments->contract_type_name_en : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Permanent Staff</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->permanent_staff_name_en ? $employments->permanent_staff_name_en : '-' }}
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Column Right (Thai) -->
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">Barcode</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->user_barcode ? $employments->user_barcode : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">วันที่เริ่มงาน</div>
                                                        <div class="text-muted">
                                                            @if ($employments && $employments->user_start_work_date)
                                                                {{ \Carbon\Carbon::parse($employments->user_start_work_date)->format('d-m-Y') }}
                                                            @else
                                                                -
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">อายุการทำงาน</div>
                                                        <div class="text-muted">
                                                            @if ($employments && $employments->user_start_work_date)
                                                                {{ \Carbon\Carbon::parse($employments->user_start_work_date)->diffInYears(\Carbon\Carbon::now()) }}
                                                                ปี
                                                            @else
                                                                -
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">วันเกษียณอายุการทำงาน</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->user_retirement_date ? $employments->user_retirement_date : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">สัญชาติ</div>
                                                        <div class="text-muted">{{ $user_meta->nationality_name ?? '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">ประเภทสายงาน</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->employment_category_name_th ? $employments->employment_category_name_th : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">สายสนับสนุนวิชาการ</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->supporting_academic_name_th ? $employments->supporting_academic_name_th : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">ตำแหน่งบริหาร</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->executive_position_name_th ? $employments->executive_position_name_th : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">ตำแหน่งวิชาการ</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->academic_position_name_th ? $employments->academic_position_name_th : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">สถานะผู้ใช้งาน</div>
                                                        <div class="text-muted">
                                                            @if ($employments && $employments->user_employment_status == 'active')
                                                                ใช้งาน
                                                            @elseif($employments && $employments->user_employment_status == 'inactive')
                                                                ไม่ใช้งาน
                                                            @else
                                                                {{ $employments && $employments->user_employment_status ? $employments->user_employment_status : '-' }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">ตำแหน่ง</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->position_name_th ? $employments->position_name_th : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">คณะ/ฝ่าย</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->school_division_name_th ? $employments->school_division_name_th : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">ประเภทสัญญาจ้าง</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->contract_type_name_th ? $employments->contract_type_name_th : '-' }}
                                                        </div>
                                                    </div>
                                                    <div class="mb-3">
                                                        <div class="fw-bold text-dark">พนักงานประจำ</div>
                                                        <div class="text-muted">
                                                            {{ $employments && $employments->permanent_staff_name_th ? $employments->permanent_staff_name_th : '-' }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('layouts.footer')

@endsection