@extends('master')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <div class="page-title">
                    <h4>{{ __('sitelabel.EmployeeProfile') }}</h4>
                    <h6>{{ __('sitelabel.ViewYourProfileDetails') }}</h6>
                </div>
            </div>

            @if (session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs" id="profileTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="personal-tab" onclick="loadDiv(1)"
                                href="javascript:void(0);">{{ __('sitelabel.PersonalInfo') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="employment-tab" onclick="loadDiv(2)"
                                href="javascript:void(0);">{{ __('sitelabel.EmploymentInfo') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="references-tab" onclick="loadDiv(3)"
                                href="javascript:void(0);">{{ __('sitelabel.References') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="experience-tab" onclick="loadDiv(4)"
                                href="javascript:void(0);">{{ __('sitelabel.Experience') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="leave-tab" onclick="loadDiv(5)"
                                href="javascript:void(0);">{{ __('sitelabel.LeaveInfo') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="relatives-tab" onclick="loadDiv(6)"
                                href="javascript:void(0);">{{ __('sitelabel.Relatives') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="documents-tab" onclick="loadDiv(7)"
                                href="javascript:void(0);">{{ __('sitelabel.Documents') }}</a>
                        </li>
                    </ul>
                </div>

                <div class="card-body">
                    <!-- Personal Information -->
                    <div id="divEmployeeInfo">
                        <h5 class="mb-3">{{ __('sitelabel.PersonalInfo') }}</h5>
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.FullName') }}</label>
                                <input type="text" class="form-control" id="txtFullName" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.FirstName') }}</label>
                                <input type="text" class="form-control" id="txtFirstName" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.FatherName') }}</label>
                                <input type="text" class="form-control" id="txtFatherName" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.SecondName') }}</label>
                                <input type="text" class="form-control" id="txtSecondName" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.DateOfBirth') }}</label>
                                <input type="text" class="form-control" id="txtDateOfBirth" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Gender') }}</label>
                                <input type="text" class="form-control" id="txtGender" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Nationality') }}</label>
                                <input type="text" class="form-control" id="txtNationality" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Religion') }}</label>
                                <input type="text" class="form-control" id="txtReligion" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.MaritalStatus') }}</label>
                                <input type="text" class="form-control" id="txtMartialStatus" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.BloodGroup') }}</label>
                                <input type="text" class="form-control" id="txtBloodGroup" disabled>
                            </div>
                        </div>
                    </div>

                    <!-- Employment Information -->
                    <div id="divEmploymentInfo" style="display: none;">
                        <h5 class="mb-3">{{ __('sitelabel.EmploymentInfo') }}</h5>
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.ControlNumber') }}</label>
                                <input type="text" class="form-control" id="controlNumber" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.PFNumber') }}</label>
                                <input type="text" class="form-control" id="pfNumber" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.DateOfJoining') }}</label>
                                <input type="text" class="form-control" id="dateOfJoining" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.JobStatus') }}</label>
                                <input type="text" class="form-control" id="jobStatus" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.JobStatusDate') }}</label>
                                <input type="text" class="form-control" id="JobStatusDate" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Designation') }}</label>
                                <input type="text" class="form-control" id="Designation" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Grade') }}</label>
                                <input type="text" class="form-control" id="Grade" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Factory') }}</label>
                                <input type="text" class="form-control" id="Factory" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Group') }}</label>
                                <input type="text" class="form-control" id="Group" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Department') }}</label>
                                <input type="text" class="form-control" id="Department" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.EmployeeCategory') }}</label>
                                <input type="text" class="form-control" id="EmployeeCategory" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.SalaryPayMethod') }}</label>
                                <input type="text" class="form-control" id="SalaryPayMethod" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.AttendanceMachineNo') }}</label>
                                <input type="text" class="form-control" id="AttendanceMachineNo" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.WorkingHours') }}</label>
                                <input type="text" class="form-control" id="WorkingHrs" disabled>
                            </div>
                        </div>
                    </div>

                    <!-- References -->
                    <div id="divEmployeeReference" style="display: none;">
                        <h5 class="mb-3">{{ __('sitelabel.References') }}</h5>
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.ReferenceName') }}</label>
                                <input type="text" class="form-control" id="referenceName" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Address') }}</label>
                                <input type="text" class="form-control" id="referenceAddress" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.MobileNumber') }}</label>
                                <input type="text" class="form-control" id="referenceMobileNumber" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.PhoneNumber') }}</label>
                                <input type="text" class="form-control" id="referencePhoneNumber" disabled>
                            </div>
                        </div>
                    </div>

                    <!-- Experience -->
                    <div id="divExperience" style="display: none;">
                        <h5 class="mb-3">{{ __('sitelabel.Experience') }}</h5>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>{{ __('sitelabel.LastEmployer') }}</th>
                                    <th>{{ __('sitelabel.ReasonForLeaving') }}</th>
                                    <th>{{ __('sitelabel.LastDesignation') }}</th>
                                    <th>{{ __('sitelabel.StartDate') }}</th>
                                    <th>{{ __('sitelabel.EndDate') }}</th>
                                </tr>
                            </thead>
                            <tbody id="experienceTableBody"></tbody>
                        </table>
                    </div>

                    <!-- Leave Information -->
                    <div id="divLeaveInfo" style="display: none;">
                        <h5 class="mb-3">{{ __('sitelabel.LeaveInfo') }}</h5>
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.LeaveType') }}</label>
                                <input type="text" class="form-control" id="leaveTypeName" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Entitlement') }}</label>
                                <input type="text" class="form-control" id="entitlement" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Availed') }}</label>
                                <input type="text" class="form-control" id="availed" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Balanced') }}</label>
                                <input type="text" class="form-control" id="balanced" disabled>
                            </div>
                        </div>
                    </div>

                    <!-- Relatives -->
                    <div id="divRelatives" style="display: none;">
                        <h5 class="mb-3">{{ __('sitelabel.Relatives') }}</h5>
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Name') }}</label>
                                <input type="text" class="form-control" id="relativeName" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Relationship') }}</label>
                                <input type="text" class="form-control" id="relationship" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Address') }}</label>
                                <input type="text" class="form-control" id="Address" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Profession') }}</label>
                                <input type="text" class="form-control" id="Profession" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.DOY') }}</label>
                                <input type="text" class="form-control" id="YearOfBirth" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Capital') }}</label>
                                <input type="text" class="form-control" id="Capital" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.SupportHim') }}</label>
                                <input type="text" class="form-control" id="SupportHim" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.Living') }}</label>
                                <input type="text" class="form-control" id="Living" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.KinName') }}</label>
                                <input type="text" class="form-control" id="KinName" disabled>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>{{ __('sitelabel.NextofKin') }}</label>
                                <input type="text" class="form-control" id="NextOfKin" disabled>
                            </div>
                            <div class="col-md-12 form-group">
                                <label>{{ __('sitelabel.FamilyName') }}</label>
                                <input type="text" class="form-control" id="FamilyName" disabled>
                            </div>
                        </div>
                    </div>

                    <!-- Documents -->
                    <div id="divDocuments" style="display: none;">
                        <h5 class="mb-3">{{ __('sitelabel.Documents') }}</h5>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>{{ __('sitelabel.DocumentTitle') }}</th>
                                    <th>{{ __('sitelabel.DocumentUrl') }}</th>
                                    <th>{{ __('sitelabel.UploadDate') }}</th>
                                </tr>
                            </thead>
                            <tbody id="documentsTableBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .nav-tabs .nav-link {
            color: #333;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-tabs .nav-link:hover {
            color: #007bff;
            /* Blue color on hover */
            background-color: #f8f9fa;
            /* Light gray background on hover */
        }

        .nav-tabs .nav-link.active {
            color: #007bff;
            border-bottom: 2px solid #007bff;
        }
    </style>
@endsection

@section('script')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function loadDiv(id) {
            const sections = [
                'divEmployeeInfo', 'divEmploymentInfo', 'divEmployeeReference',
                'divExperience', 'divLeaveInfo', 'divRelatives', 'divDocuments'
            ];
            sections.forEach(section => document.getElementById(section).style.display = 'none');
            document.getElementById(sections[id - 1]).style.display = 'block';

            // Update active tab
            $('#profileTabs .nav-link').removeClass('active');
            $(`#profileTabs .nav-item:nth-child(${id}) .nav-link`).addClass('active');
        }

        function loadEmployeeInfo() {
            $.ajax({
                url: '{{ route('employeeprofile.info') }}',
                type: 'GET',
                success: function(data) {
                    if (data) {
                        // Personal Info
                        if (data.PersonalInfo) {
                            $('#txtFullName').val(data.PersonalInfo.FullName || '');
                            $('#txtFirstName').val(data.PersonalInfo.FirstName || '');
                            $('#txtSecondName').val(data.PersonalInfo.SecondName || '');
                            $('#txtFatherName').val(data.PersonalInfo.FatherName || '');
                            $('#txtDateOfBirth').val(data.PersonalInfo.DateOfBirth || '');
                            $('#txtGender').val(data.PersonalInfo.Gender || '');
                            $('#txtNationality').val(data.PersonalInfo.NationalityName || '');
                            $('#txtReligion').val(data.PersonalInfo.ReligionName || '');
                            $('#txtMartialStatus').val(data.PersonalInfo.MartialStatus || '');
                            $('#txtBloodGroup').val(data.PersonalInfo.BloodGroup || '');
                        }

                        // Employment Info
                        if (data.JobInfo) {
                            $('#controlNumber').val(data.PersonalInfo.ControlNumber || '');
                            $('#pfNumber').val(data.PersonalInfo.PFNumber || '');
                            $('#dateOfJoining').val(data.PersonalInfo.DateOfJoining || '');
                            $('#jobStatus').val(data.PersonalInfo.JobStatus || '');
                            $('#AttendanceMachineNo').val(data.PersonalInfo.AttendanceMachineNo || '');
                            $('#JobStatusDate').val(data.JobInfo.JobStatusDate || '');
                            $('#Designation').val(data.JobInfo.DesignationName || '');
                            $('#Grade').val(data.JobInfo.GradeName || '');
                            $('#Factory').val(data.JobInfo.FactoryName || '');
                            $('#Group').val(data.JobInfo.GroupName || '');
                            $('#Department').val(data.JobInfo.DepartmentName || '');
                            $('#EmployeeCategory').val(data.JobInfo.EmployeeCategoryName || '');
                            $('#SalaryPayMethod').val(data.JobInfo.SalaryPayMethodName || '');
                            $('#WorkingHrs').val(data.JobInfo.WorkingHrs || '');
                        }

                        // References
                        if (data.RefInfo) {
                            $('#referenceName').val(data.RefInfo.ReferenceName || '');
                            $('#referenceAddress').val(data.RefInfo.Address || '');
                            $('#referenceMobileNumber').val(data.RefInfo.MobileNumber || '');
                            $('#referencePhoneNumber').val(data.RefInfo.PhoneNumber || '');
                        }

                        // Experience
                        if (data.ExpInfo) {
                            const tbody = $('#experienceTableBody');
                            tbody.empty();
                            const row = `
                            <tr>
                                <td>${data.ExpInfo.LastEmployer || 'N/A'}</td>
                                <td>${data.ExpInfo.ReasonOfQuitting || 'N/A'}</td>
                                <td>${data.ExpInfo.LastJobDesignation || 'N/A'}</td>
                                <td>${data.ExpInfo.StartDate || 'N/A'}</td>
                                <td>${data.ExpInfo.EndDate || 'N/A'}</td>
                            </tr>
                        `;
                            tbody.append(row);
                        }

                        // Leave Info
                        if (data.LevInfo) {
                            $('#leaveTypeName').val(data.LevInfo.LeaveTypeName || '');
                            $('#entitlement').val(data.LevInfo.Entitlement || '');
                            $('#availed').val(data.LevInfo.Availed || '');
                            $('#balanced').val(data.LevInfo.Balanced || '');
                        }

                        // Relatives
                        if (data.RelInfo) {
                            $('#relativeName').val(data.RelInfo.Name || '');
                            $('#relationship').val(data.RelInfo.Relation || '');
                            $('#Address').val(data.RelInfo.Address || '');
                            $('#Profession').val(data.RelInfo.Profession || '');
                            $('#YearOfBirth').val(data.RelInfo.YearOfBirth || '');
                            $('#Capital').val(data.RelInfo.Capital || '');
                            $('#SupportHim').val(data.RelInfo.SupportHim || '');
                            $('#Living').val(data.RelInfo.Living || '');
                            $('#KinName').val(data.RelInfo.KinName || '');
                            $('#NextOfKin').val(data.RelInfo.NextOfKin || '');
                            $('#FamilyName').val(data.RelInfo.FamilyName || '');
                        }

                        // Documents
                        if (data.DocInfo) {
                            const tbody = $('#documentsTableBody');
                            tbody.empty();
                            data.DocInfo.forEach(doc => {
                                const row = `
                                <tr>
                                    <td>${doc.DocumentTitle || 'N/A'}</td>
                                    <td>
                                        ${doc.DocumentUrl ? 
                                            `<a href="${doc.DocumentUrl}" target="_blank" class="btn btn-sm btn-primary">Download</a>` : 
                                            'No document'}
                                    </td>
                                    <td>${doc.UploadDate || 'N/A'}</td>
                                </tr>
                            `;
                                tbody.append(row);
                            });
                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    alert('Failed to load employee information.');
                }
            });
        }

        $(document).ready(function() {
            loadDiv(1); // Show Personal Info by default
            loadEmployeeInfo();
        });
    </script>
@endsection