@extends('layout.mainlayout')
@section('content')

    <div class="page-wrapper cardhead">
        <div class="content container-fluid">
            @component('components.breadcrumb')
                @slot('title')
                    Profile Settings
                @endslot
            @endcomponent
            @if (Auth()->user()->employee_type == '1')
                <div class="row">
                    <div class="col-xl-3 col-lg-12 theiaStickySidebar">
                        <!-- Sidebar -->
                        <div class="card">
                            <div class="card-body">
                                <div class="settings-sidebar">
                                    <h4 class="fw-semibold mb-3">General Settings</h4>
                                    <div class="list-group list-group-flush settings-sidebar">
                                        <a href="javascript:void(0);" class="fw-medium nav-tab active"
                                            data-tab="profileTab">Profile</a>
                                        <a href="javascript:void(0);" class="fw-medium nav-tab"
                                            data-tab="securityTab">Security</a>
                                        <a href="javascript:void(0);" class="fw-medium nav-tab"
                                            data-tab="notificationsTab">Notifications</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Sidebar -->
                    </div>

                    <div class="col-xl-9 col-lg-12">

                        @if ($OnboardingTempRequestStatus == 1)
                            <div class="alert alert-danger">
                                <strong>Note:</strong> Your profile is currently under review. Please check back later.
                            </div>
                        @endif

                        <div class="card">
                            <div class="card-body">
                                <!-- Profile Form -->
                                <div class="tab-section" id="profileTab">
                                    @if (session('success'))
                                        <div class="alert alert-success">{{ session('success') }}</div>
                                    @endif
                                    @if (session('error'))
                                        <div class="alert alert-danger">{{ session('error') }}</div>
                                    @endif
                                    @if ($errors->any())
                                        <div class="alert alert-danger">
                                            <ul class="mb-0">
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif

                                    <form action="{{ route('update-profile') }}" method="POST"
                                        enctype="multipart/form-data">
                                        @csrf

                                        <div class="progress mb-4">
                                            <div class="progress-bar" role="progressbar" style="width: 25%;"
                                                id="formProgress">
                                            </div>
                                        </div>

                                        <div class="step step-1">
                                            @include('resource.form-sections.onboard-resource.onboarding-basicinfoform')
                                            <div class="d-flex justify-content-end mt-3">
                                                <button type="button" class="btn btn-primary next-btn">Next</button>
                                            </div>
                                        </div>

                                        <div class="step step-2 d-none">
                                            @include('resource.form-sections.onboard-resource.onboarding-personalinfoform')
                                            <div class="d-flex justify-content-between mt-3">
                                                <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                                                <button type="button" class="btn btn-primary next-btn">Next</button>
                                            </div>
                                        </div>

                                        <div class="step step-3 d-none">
                                            @include('resource.form-sections.onboard-resource.onboarding-employmentinfoform')
                                            <div class="d-flex justify-content-between mt-3">
                                                <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                                                <button type="button" class="btn btn-primary next-btn">Next</button>
                                            </div>
                                        </div>

                                        <div class="step step-4 d-none">
                                            @include('resource.form-sections.onboard-resource.onboarding-attachmentinfoform')
                                            <div class="d-flex justify-content-between mt-3">
                                                <button type="button" class="btn btn-secondary prev-btn">Previous</button>
                                                <button type="submit" class="btn btn-success">Update Profile</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                <!-- Security Form -->
                                <div class="tab-section d-none" id="securityTab">
                                    <form method="POST" action="{{ route('update-password') }}">
                                        @csrf
                                        {{-- <h5 class="fw-semibold mb-3">Change Password</h5> --}}
                                        <h4 class="text-center mb-4 pb-2 border-bottom">Change Password</h4>
                                        <div class="mb-3">
                                            <label class="form-label">Current Password</label>
                                            <input type="password" name="current_password" class="form-control" required
                                                style="width: 50%;">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">New Password</label>
                                            <input type="password" name="new_password" class="form-control" required
                                                style="width: 50%;">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Confirm Password</label>
                                            <input type="password" name="new_password_confirmation" class="form-control"
                                                required style="width: 50%;">
                                        </div>
                                        <button type="submit" class="btn btn-primary">Update Password</button>
                                    </form>
                                </div>

                                <!-- Notifications -->
                                <div class="tab-section d-none" id="notificationsTab">
                                    <h4 class="fw-semibold mb-3">Notifications Settings</h4>

                                    <h4 class="text-center mb-4 pb-2 border-bottom">All Notifications</h4>
                                    <ul class="list-group list-group-flush">
                                        @forelse(auth()->user()->notifications as $notification)
                                            <li
                                                class="list-group-item px-3 py-3 {{ $notification->read_at ? '' : 'fw-bold bg-light' }}">
                                                <form method="POST"
                                                    action="{{ route('notifications.markAsRead', $notification->id) }}"
                                                    class="d-inline">
                                                    @csrf
                                                    <a href="{{ $notification->data['url'] ?? '#' }}"
                                                        class="text-decoration-none text-dark d-block notification-link"
                                                        onclick="event.preventDefault(); this.closest('form').submit();">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <strong>{{ $notification->data['title'] ?? 'Notification' }}</strong>
                                                            @if (!$notification->read_at)
                                                                <span class="badge bg-primary ms-2">New</span>
                                                            @endif
                                                        </div>
                                                        <div class="mt-1">{!! $notification->data['message'] ?? '' !!}</div>
                                                        <span
                                                            class="text-muted small d-block mt-1">{{ $notification->created_at->diffForHumans() }}</span>
                                                    </a>
                                                </form>
                                            </li>
                                        @empty
                                            <li class="list-group-item text-center py-4">No notifications found.</li>
                                        @endforelse
                                    </ul>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="row">
                    <div class="col-xl-3 col-lg-12 theiaStickySidebar">
                        <!-- Sidebar -->
                        <div class="card">
                            <div class="card-body">
                                <div class="settings-sidebar">
                                    <h4 class="fw-semibold mb-3">General Settings</h4>
                                    <div class="list-group list-group-flush settings-sidebar">
                                        <a href="javascript:void(0);" class="fw-medium nav-tab active"
                                            data-tab="profileTab">Profile</a>
                                        <a href="javascript:void(0);" class="fw-medium nav-tab"
                                            data-tab="securityTab">Security</a>
                                        <a href="javascript:void(0);" class="fw-medium nav-tab"
                                            data-tab="notificationsTab">Notifications</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Sidebar -->
                    </div>

                    <div class="col-xl-9 col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <!-- Profile Form -->
                                <div class="tab-section" id="profileTab">
                                    @if (session('success'))
                                        <div class="alert alert-success">{{ session('success') }}</div>
                                    @endif
                                    @if (session('error'))
                                        <div class="alert alert-danger">{{ session('error') }}</div>
                                    @endif
                                    @if ($errors->any())
                                        <div class="alert alert-danger">
                                            <ul class="mb-0">
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif

                                    <form action="{{ route('update-overseas-profile') }}" method="POST"
                                        enctype="multipart/form-data">
                                        @csrf

                                        <div class="progress mb-4">
                                            <div class="progress-bar" role="progressbar" style="width: 25%;"
                                                id="formProgress">
                                            </div>
                                        </div>

                                        <div class="step step-1">
                                            @include('resource.form-sections.manage-overseas.personalInfoForm')
                                            <div class="d-flex justify-content-end mt-3">
                                                <button type="button" class="btn btn-primary next-btn">Next</button>
                                            </div>
                                        </div>

                                        <div class="step step-2 d-none">
                                            @include('resource.form-sections.manage-overseas.professionalInfoForm')
                                            <div class="d-flex justify-content-between mt-3">
                                                <button type="button"
                                                    class="btn btn-secondary prev-btn">Previous</button>
                                                <button type="submit" class="btn btn-success">Update Profile</button>

                                                <!-- Optional: remove this or show disabled -->
                                                {{-- <button type="button" class="btn btn-secondary"
                                                    disabled>Read-Only</button> --}}

                                            </div>
                                        </div>
                                    </form>
                                </div>

                                <!-- Security Form -->
                                <div class="tab-section d-none" id="securityTab">
                                    <form method="POST" action="{{ route('update-password') }}">
                                        @csrf
                                        {{-- <h5 class="fw-semibold mb-3">Change Password</h5> --}}
                                        <h4 class="text-center mb-4 pb-2 border-bottom">Change Password</h4>
                                        <div class="mb-3">
                                            <label class="form-label">Current Password</label>
                                            <input type="password" name="current_password" class="form-control" required
                                                style="width: 50%;">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">New Password</label>
                                            <input type="password" name="new_password" class="form-control" required
                                                style="width: 50%;">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Confirm Password</label>
                                            <input type="password" name="new_password_confirmation" class="form-control"
                                                required style="width: 50%;">
                                        </div>
                                        <button type="submit" class="btn btn-primary">Update Password</button>
                                    </form>
                                </div>

                                <!-- Notifications -->
                                <div class="tab-section d-none" id="notificationsTab">
                                    <h4 class="fw-semibold mb-3">Notifications Settings</h4>

                                    <h4 class="text-center mb-4 pb-2 border-bottom">All Notifications</h4>
                                    <ul class="list-group list-group-flush">
                                        @forelse(auth()->user()->notifications as $notification)
                                            <li
                                                class="list-group-item px-3 py-3 {{ $notification->read_at ? '' : 'fw-bold bg-light' }}">
                                                <form method="POST"
                                                    action="{{ route('notifications.markAsRead', $notification->id) }}"
                                                    class="d-inline">
                                                    @csrf
                                                    <a href="{{ $notification->data['url'] ?? '#' }}"
                                                        class="text-decoration-none text-dark d-block notification-link"
                                                        onclick="event.preventDefault(); this.closest('form').submit();">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <strong>{{ $notification->data['title'] ?? 'Notification' }}</strong>
                                                            @if (!$notification->read_at)
                                                                <span class="badge bg-primary ms-2">New</span>
                                                            @endif
                                                        </div>
                                                        <div class="mt-1">{!! $notification->data['message'] ?? '' !!}</div>
                                                        <span
                                                            class="text-muted small d-block mt-1">{{ $notification->created_at->diffForHumans() }}</span>
                                                    </a>
                                                </form>
                                            </li>
                                        @empty
                                            <li class="list-group-item text-center py-4">No notifications found.</li>
                                        @endforelse
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>

    @push('scripts')
        <script>
            let currentStep = 1;
            const totalSteps = 4;

            function updateProgressBar(step) {
                const percent = (step / totalSteps) * 100;
                document.getElementById('formProgress').style.width = percent + '%';
            }

            function showStep(step) {
                document.querySelectorAll('.step').forEach(el => el.classList.add('d-none'));
                document.querySelector('.step-' + step).classList.remove('d-none');
                updateProgressBar(step);
            }

            function switchTab(tabId) {
                document.querySelectorAll('.tab-section').forEach(tab => tab.classList.add('d-none'));
                document.querySelector(`#${tabId}`).classList.remove('d-none');

                document.querySelectorAll('.nav-tab').forEach(link => link.classList.remove('active'));
                document.querySelector(`[data-tab="${tabId}"]`).classList.add('active');

                // Reset step to 1 if on profile tab
                if (tabId === 'profileTab') {
                    currentStep = 1;
                    showStep(currentStep);
                }
            }

            document.addEventListener('DOMContentLoaded', () => {
                showStep(currentStep);

                document.querySelectorAll('.next-btn').forEach(btn => {
                    btn.addEventListener('click', () => {
                        if (currentStep < totalSteps) {
                            currentStep++;
                            showStep(currentStep);
                        }
                    });
                });

                document.querySelectorAll('.prev-btn').forEach(btn => {
                    btn.addEventListener('click', () => {
                        if (currentStep > 1) {
                            currentStep--;
                            showStep(currentStep);
                        }
                    });
                });

                document.querySelectorAll('.nav-tab').forEach(link => {
                    link.addEventListener('click', () => {
                        switchTab(link.dataset.tab);
                    });
                });

                // Add loader GIF on form submission
                const overlayLoader = document.createElement('div');
                overlayLoader.id = 'overlay-loader';
                overlayLoader.style.cssText = `
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        `;
                overlayLoader.innerHTML =
                    `<img src="{{ asset('loader.gif') }}" alt="Loading..." style="width: 100px; height: 100px;">`;
                document.body.appendChild(overlayLoader);

                document.querySelector('form').addEventListener('submit', () => {
                    overlayLoader.style.display = 'flex';
                });
            });
        </script>
    @endpush

@endsection