@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);
            }
        }
    </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">

                                    <div class="col-md-6 col-lg-3 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-3 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-3 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-3 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>

                                <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('/usergetedit', $user_meta->user_userid) }}">
                                                    <i class="uil uil-pen"></i> Edit
                                                </a>
                                            </div>
                                            <br>
                                        @endhasanyrole
                                        <div class="row justify-content-center">

                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <div class="fw-bold">Staff ID</div>
                                                    <div>{{ $user_meta->user_staff_id ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Name-Surname(EN)</div>
                                                    <div>
                                                        {{ $user_meta->user_firstname_en ?? '-' }}
                                                        {{ $user_meta->user_lastname_en ?? '-' }}
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Date of Birth</div>
                                                    <div>{{ $user_meta->user_date_of_birth ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Citizen No./Passport No.</div>
                                                    <div>{{ $user_meta->user_citizen_no ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Start working Date</div>
                                                    <div>{{ $user_meta->user_start_work_date ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Retirement date</div>
                                                    <div>{{ $retirement_date ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Employment Category</div>
                                                    <div>{{ $user_meta->employment_category_name_en ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Executive Position</div>
                                                    <div>{{ $user_meta->executive_position_name_en ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Position (EN)</div>
                                                    <div>{{ $user_meta->position_name_en ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">School/Division (EN)</div>
                                                    <div>{{ $user_meta->school_division_name_en ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Contract Type</div>
                                                    <div>{{ $user_meta->contract_type_name_en ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Book Bank</div>
                                                    <div>{{ $user_meta->user_bookbank ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Email Address (SIIT)</div>
                                                    <div>{{ $user_meta->user_email_siit ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Residence Address</div>
                                                    <div>{{ $user_meta->user_residence_address ?? '-' }}</div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <div class="fw-bold">Barcode</div>
                                                    <div>{{ $user_meta->user_barcode ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Name-Surname(TH)</div>
                                                    <div>{{ $user_meta->user_firstname . ' ' . $user_meta->user_lastname }}
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Age</div>
                                                    <div>{{ $age ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Marital Status</div>
                                                    <div>{{ $user_meta->user_marital_status ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Work Experience</div>
                                                    <div>{{ $work_exp ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Nationality</div>
                                                    <div>{{ $user_meta->nationality_name ?? '-' }}</div>
                                                </div>
                                                {{-- Academic Staff --}}
                                                @if ($user_meta->employment_category_id == 1)
                                                    <div class="mb-3">
                                                        <div class="fw-bold">Academic Staff</div>
                                                        <div>{{ $user_meta->academic_staff_name_en ?? '-' }}</div>
                                                    </div>
                                                @endif

                                                {{-- Supporting Staff --}}
                                                @if ($user_meta->employment_category_id == 2)
                                                    <div class="mb-3">
                                                        <div class="fw-bold">Supporting Academic</div>
                                                        <div>{{ $user_meta->supporting_academic_name_en ?? '-' }}</div>
                                                    </div>
                                                @endif
                                                <div class="mb-3">
                                                    <div class="fw-bold">Status</div>
                                                    <div>{{ $user_meta->user_status ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Position (TH)</div>
                                                    <div>{{ $user_meta->position_name_th ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">School/Division (TH)</div>
                                                    <div>{{ $user_meta->school_division_name_th ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Permanent Staff</div>
                                                    <div>{{ $user_meta->permanent_staff_name_en ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Mobile Phone No.</div>
                                                    <div>{{ $user_meta->user_mobile_phone ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Email Address (TU)</div>
                                                    <div>{{ $user_meta->user_email_tu ?? '-' }}</div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="fw-bold">Mailing Address</div>
                                                    <div>{{ $user_meta->user_mailing_address ?? '-' }}</div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

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

                                        @hasanyrole('Admin|AdminConsult')
                                            <div align="right">
                                                <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>
                                            <br>
                                        @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">Degree</div>
                                                                <div>{{ $education->degree_name_en ?? '-' }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold">GPA</div>
                                                                <div>{{ $education->user_education_gpa ?? '-' }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Year of Enrollment</div>
                                                                <div>{{ $education->user_education_year_enr ?? '-' }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Country</div>
                                                                <div>{{ $education->country_name ?? '-' }}</div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6">
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Major/Field of Study</div>
                                                                <div>{{ $education->user_education_major ?? '-' }}</div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Institution</div>
                                                                <div>{{ $education->user_education_institution ?? '-' }}
                                                                </div>
                                                            </div>
                                                            <div class="mb-3">
                                                                <div class="fw-bold">Year of Graduation</div>
                                                                <div>{{ $education->user_education_year_grad ?? '-' }}
                                                                </div>
                                                            </div>
                                                            @hasanyrole('Admin|AdminConsult')
                                                                <div class="text-end">
                                                                    <a href="{{ url('/educationgetedit', [$user_meta->user_userid, $education->user_education_id]) }}"
                                                                        class="btn btn-circle btn-warning btn-sm"
                                                                        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"
                                                                        title="Delete"
                                                                        onclick="return confirm('Are you sure you want to delete this education record?');">
                                                                        <i class="uil uil-trash-alt"></i>
                                                                    </a>
                                                                </div>
                                                            @endhasanyrole
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @empty
                                            <p>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_fullname ?? '-' }}</div>
                                                            </div>

                                                            <div class="mb-3">
                                                                <div class="fw-bold">Citizen No.</div>
                                                                <div>{{ $family->user_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_date_of_birth ? \Carbon\Carbon::parse($family->user_date_of_birth)->format('d/m/Y') : '-' }}
                                                                </div>
                                                            </div>

                                                            <div class="mb-3">
                                                                <div class="fw-bold">Age</div>
                                                                <div>{{ $family->user_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-warning 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>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('layouts.footer')

@endsection