@extends('layouts.appv2')


@section('content')

<style>
.profile-picture-container {
    position: relative;
    display: inline-block;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: white;
}
</style>

<div class="row-sm-12">
    <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
        <div class="card-header">
        <div class="d-flex justify-content-between align-items-center mb-0">
            <h5>User Profile</h5>
            <div class="btn-toolbar mb-2 mb-md-0">

                <a href="{{ route('employees.editemployee', ['employee_id' => $employees->employee_id]) }}" 
                class="btn btn-sm btn-info mt-1 mb-1" 
                style="width: 120px; text-align: center; border-radius: 50px;">
                    <i class="fa-solid fa-pen-to-square"></i> Edit
                </a>

                <form action="{{ route('employees.deleteemployee', $employee_id) }}" 
                    method="POST" 
                    onsubmit="return confirm('Are you sure you want to delete this employee?');" 
                    style="margin: 0;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" 
                            class="btn btn-sm btn-danger mt-1 mb-1" 
                            style="width: 120px; text-align: center; border-radius: 50px; ">
                        <i class="fas fa-trash"></i> Delete
                    </button>
                </form>

                <a href="{{ route('admins.employees', ['employee_id' => $employees->employee_id]) }}" 
                class="btn btn-sm btn-secondary mt-1 mb-1" 
                style="width:70px; text-align: center; border-radius: 50px;">
                     Back
                </a>
            </div>

            </div> 
        </div>

        <div class="card-body">
            {{-- Flash Messages --}}
            @if ($message = Session::get('success'))
                <div class="alert alert-success" role="alert">
                    {{ $message }}
                </div>
            @endif

            @if ($message = Session::get('error'))
                <div class="alert alert-danger" role="alert">
                    {{ $message }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger" role="alert">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- Profile Content --}}
            <div class="container-fluid">
                <div class="row">
                    {{-- Left Column --}}
                    <div class="col-md-4">
                        <div class="text-center mb-4">

                        @php
                            $profilePicture = $employees->profile_picture ?? null;
                        @endphp
                        <div class="profile-picture-container mb-3 position-relative">

                            @if($profilePicture)
                                <img src="{{ asset('storage/' . $profilePicture) }}" 
                                    alt="Profile Picture" 
                                    class="rounded-circle shadow" 
                                    style="width: 150px; height: 150px; object-fit: cover; border: 3px solid #fff;">
                            @else
                                <svg xmlns="http://www.w3.org/2000/svg" 
                                    viewBox="0 0 24 24" 
                                    fill="none" 
                                    stroke="currentColor" 
                                    stroke-width="1" 
                                    class="rounded-circle shadow bg-light" 
                                    style="width: 150px; height: 150px; padding: 20px; color: #6c757d; border: 3px solid #fff;">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <circle cx="12" cy="7" r="4" />
                                    <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                                </svg>
                            @endif

                                <form action="{{ route('employees.updateProfilePicture', ['employee_id' => $employees->employee_id]) }}" 
                                    method="POST" 
                                    enctype="multipart/form-data" 
                                    class="mt-2">
                                    @csrf
                                    @method('PUT')
                                    <div class="upload-btn-wrapper">
                                        <button class="btn btn-sm btn-outline-secondary" type="button" 
                                                onclick="document.getElementById('profile_picture').click()"
                                                style="border-radius: 50px;">
                                            <i class="fas fa-camera"></i> Change Photo
                                        </button>
                                        <input type="file" 
                                            name="profile_picture" 
                                            id="profile_picture" 
                                            class="d-none"
                                            accept="image/*"
                                            onchange="this.form.submit()">
                                    </div>
                                </form>
                            </div>                            
                            <h3 class="font-weight-bold">{{ $employees->employee_first_name }} {{ $employees->employee_last_name }}</h3>
                            <h5 class="text-muted">{{ $employees->designation->designation_name ?? 'N/A' }}</h5>
                        </div>

                        <div class="card mb-4 shadow-sm">
                            <div class="card-header bg-black text-white">
                                Contact Details
                            </div>
                            <div class="card-body">
                                <h5><strong class="font-weight-bold">No. IC:</strong> {{ $employees->employee_ic_no }}</h5>
                                <h5><strong class="font-weight-bold">Mobile:</strong> {{ $employees->employee_mobile }}</h5>
                                <h5><strong class="font-weight-bold">Work Email:</strong> {{ $employees->employee_email }}</h5>
                                <h5><strong class="font-weight-bold">Personal Email:</strong> {{ $employees->employee_alt_email ?? 'Not provided' }}</h5>
                            </div>
                        </div>
                    </div>

                    {{-- Right Column --}}
                    <div class="col-md-8">
                        <!-- {{-- Personal Details --}}
                        <div class="card mb-4 shadow-sm">
                            <div class="card-header bg-black text-white">
                                Personal Information
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <p><strong>Salutation:</strong> {{ $employees->employee_salutation ?? 'N/A' }}</p>
                                        <p><strong>Birthdate:</strong> {{ $employees->employee_dob }}</p>
                                        <p><strong>IC/Passport:</strong> {{ $employees->employee_ic_no }}</p>
                                    </div>
                                </div>
                            </div>
                        </div> -->

                        {{-- Employment Details --}}
                        <div class="card mb-4 shadow-sm">
                            <div class="card-header bg-black text-white">
                                Employment Details
                            </div>
                            <div class="card-body">
                                <div class="row ">
                                    <div class="col-md-6">
                                        <h5><strong class="font-weight-bold" >Company:</strong> {{ $employees->company->company_name ?? 'N/A' }}</h5>
                                        <h5><strong class="font-weight-bold">Office:</strong> {{ $employees->office->office_name ?? 'N/A' }}</h5>
                                        <h5><strong class="font-weight-bold">Department:</strong> {{ $employees->department->department_name ?? 'N/A' }}</h5>
                                    </div>
                                    <div class="col-md-6">
                                        <h5><strong class="font-weight-bold">Unit:</strong> {{ $employees->unit->unit_name ?? 'N/A' }}</h5>
                                        <h5><strong class="font-weight-bold">Grade:</strong> {{ $employees->grade->grade_name ?? 'N/A' }}</h5>
                                        <h5><strong class="font-weight-bold">Employment Type:</strong> {{ $employees->emptype->emptype_name ?? 'N/A' }}</h5>
                                    </div>
                                    <div class="col-md-6">
                                        <h5 id="employee_joined_at">
                                            <strong class="font-weight-bold">Joined Date:</strong> {{ \Carbon\Carbon::parse($employees->employee_joined_at ?? 'N/A' )->format('d M Y') }}
                                        </h5>                                    
                                    </div>
                                    <div class="col-md-6">
                                        <h5><strong class="font-weight-bold">Resigned Date:</strong> {{ $employees->employee_resigned_at ?? 'N/A' }}</h5>
                                    </div>
                                    <div class="col-md-6">
                                        <h5>
                                            <strong class="font-weight-bold">Length of Services:</strong><span id="length_of_services" placeholder="Years, Months, Days"></span>
                                        </h5>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Leave Details --}}
                        <div class="card shadow-sm">
                            <div class="card-header bg-black text-white">
                                Leave Information
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h5><strong class="font-weight-bold">Annual Leave (AL):</strong> {{ $employees->leaveEntitled->AL ?? 'N/A' }} days</h5>
                                        <h5><strong class="font-weight-bold">Emergency Leave (EL):</strong> {{ $employees->leaveEntitled->EL ?? 'N/A' }} days</h5>
                                    </div>
                                    <div class="col-md-6">
                                        <h5><strong class="font-weight-bold">Medical Leave (ML):</strong> {{ $employees->leaveEntitled->ML ?? 'N/A' }} days</h5>
                                        <h5><strong class="font-weight-bold">Replacement Leave (RL):</strong> {{ $employees->leaveEntitled->RL ?? 'N/A' }} days</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const joinedAtField = document.getElementById('employee_joined_at');
    const lengthOfServiceField = document.getElementById('length_of_services');

    if (joinedAtField && lengthOfServiceField) {
        const joinedAtText = joinedAtField.textContent.trim();

        // Ensure the joinedAtText is a valid date
        if (joinedAtText && joinedAtText !== 'N/A') {
            const joinedAt = new Date(joinedAtText);
            const today = new Date();

            // Calculate the difference
            let years = today.getFullYear() - joinedAt.getFullYear();
            let months = today.getMonth() - joinedAt.getMonth();
            let days = today.getDate() - joinedAt.getDate();

            // Adjust for negative days
            if (days < 0) {
                const previousMonth = new Date(today.getFullYear(), today.getMonth(), 0); // Last day of previous month
                days += previousMonth.getDate();
                months -= 1;
            }

            // Adjust for negative months
            if (months < 0) {
                months += 12;
                years -= 1;
            }

            // Display the length of service in years, months, and days
            lengthOfServiceField.textContent = `${years} Year${years !== 1 ? 's' : ''}, ${months} Month${months !== 1 ? 's' : ''}, ${days} Day${days !== 1 ? 's' : ''}`;
        } else {
            lengthOfServiceField.textContent = 'N/A';
        }
    }
});
</script>

@endsection