{{-- <x-default-layout>

    @section('title')
        Profile Manager
    @endsection

    @section('breadcrumbs')
        {{ Breadcrumbs::render('profile.show', $driver) }}
    @endsection

    <!--begin::Layout-->
    <div class="d-flex flex-column flex-lg-row">
        <!--begin::Sidebar-->
        <div class="flex-column flex-lg-row-auto w-lg-250px w-xl-350px mb-10">
            <!--begin::Card-->
            <div class="card mb-5 mb-xl-8">
                <!--begin::Card body-->
                <div class="card-body">
                    <!--begin::Summary-->
                    <!--begin::User Info-->
                    <div>
                        @livewire('profile-photo')
                    </div>
                    <!--end::User Info-->
                    <!--end::Summary-->
                    <!--begin::Details toggle-->
                    <div class="d-flex flex-stack fs-4 py-3">
                        <div class="fw-bold rotate collapsible" data-bs-toggle="collapse" href="#kt_user_view_details" role="button" aria-expanded="false" aria-controls="kt_user_view_details">Details
                            <span class="ms-2 rotate-180">
                                <i class="ki-duotone ki-down fs-3"></i>
                            </span>
                        </div>
                        <span data-bs-toggle="tooltip" data-bs-trigger="hover" title="Edit details">
                            <a href="#" class="btn btn-sm btn-light-primary" data-bs-toggle="modal" data-bs-target="#editUserUpdateModal{{ $driver->id }}">Edit</a>
                        </span>

                    </div>
                    <!--begin::Modal - Edit User Profile-->
                    <div class="modal fade" id="editUserUpdateModal{{ $driver->id }}" tabindex="-1" aria-hidden="true" wire:ignore.self>
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Edit User Profile</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <livewire:profile.edit-user-update-modal :user="$driver" :key="$driver->id" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end::Modal - Edit User Profile-->
                    <!--end::Details toggle-->
                    <div class="separator"></div>
                    <!--begin::Details content-->
                    <div id="kt_user_view_details" class="collapse show">
                        <div class="pb-5 fs-6">
                            <div class="fw-bold mt-5">Email</div>
                            <div class="text-gray-600">
                                <a href="#" class="text-gray-600 text-hover-primary">{{ $driver->email }}</a>
                            </div>
                            <!--begin::Details item-->
                            <div class="fw-bold mt-5">Username</div>
                            <div class="text-gray-600">{{ $driver->username }}</div>
                            <!--begin::Details item-->

                            <!--begin::Details item-->
                            <div class="fw-bold mt-5">Phone No.</div>
                            <div class="text-gray-600">{{ $driver->phone_no }}</div>
                            <!--begin::Details item-->
                            <!--begin::Details item-->
                            <div class="fw-bold mt-5">Last Login</div>
                            <div class="text-gray-600">{{ $driver->last_login_at }}</div>
                            <!--begin::Details item-->
                        </div>
                    </div>
                    <!--end::Details content-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->
            <!--begin::Connected Accounts-->
            @if ($driver->hasrole('Company'))
            @if($driver->userDetails)
            <div class="card mb-5 mb-xl-8">
                <!--begin::Card header-->
                <div class="card-header border-0">
                    <div class="card-title">
                        <h3 class="fw-bold m-0">Company Details</h3>
                    </div>
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-2">
                    <div class="fw-bold mt-5">Company Name</div>
                    <div class="text-gray-600">
                        <a href="#" class="text-gray-600 text-hover-primary">{{ $driver->userDetails->company_name }}</a>
                    </div>
                    <!--begin::Details item-->
                    <div class="fw-bold mt-5">Company Address</div>
                    <div class="text-gray-600">{{ $driver->userDetails->company_address }}</div>
                    <!--begin::Details item-->

                    <!--begin::Details item-->
                    <div class="fw-bold mt-5">Contact Person Name</div>
                    <div class="text-gray-600">{{ $driver->userDetails->primary_contact_first_name }} {{ $driver->userDetails->primary_contact_last_name }}</div>
                    <!--begin::Details item-->
                    <!--begin::Details item-->
                    <div class="fw-bold mt-5">Contact Person Phone no.</div>
                    <div class="text-gray-600">{{ $driver->userDetails->primary_contact_phone }}</div>
                    <!--begin::Details item-->
                    <div class="fw-bold mt-5">Contact Person Email</div>
                    <div class="text-gray-600">{{ $driver->userDetails->primary_contact_email }}</div>
                </div>
                <!--end::Card body-->
            </div>
            @endif
            @endif
            <!--end::Connected Accounts-->
        </div>
        <!--end::Sidebar-->
        <!--begin::Content-->
        @if ($driver->hasrole('Driver') || $driver->hasrole('Mechanic') || $driver->hasrole('Manager'))
        <div class="flex-lg-row-fluid ms-lg-15">
            <div class="tab-content" id="myTabContent">
                <!-- Primary Tab Pane -->
                <div class="tab-pane fade show active" id="kt_driver_view_overview_tab" role="tabpanel">
                    <!-- Card -->
                    <div>
                        <livewire:driver-personal-details />
                    </div>
                    <div>
                        <livewire:driver-licence-details />
                    </div>
                    <div>
                        <livewire:driver-details-bank />
                    </div>
                    <div>
                        <livewire:driver-details-superannuation />
                    </div>
                    <div>
                        <livewire:driver-details-tax />
                    </div>
                    <div>
                        <livewire:driver-details-residence />
                    </div>
                    <div>
                        <livewire:driver-details-emergency />
                    </div>
                </div>
            </div>
        </div>
        @elseif ($driver->hasrole('Company'))
        <div class="flex-lg-row-fluid ms-lg-15">
            <!--begin:::Tabs-->
            <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-8">
                <!--begin:::Tab item-->
                <li class="nav-item">
                    <a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab" href="#kt_user_view_overview_tab">Primary</a>
                </li>
                <!--end:::Tab item-->
                <!--begin:::Tab item-->
                <li class="nav-item">
                    <a class="nav-link text-active-primary pb-4" data-kt-countup-tabs="true" data-bs-toggle="tab" href="#kt_user_view_overview_security">Secondary</a>
                </li>
                <!--end:::Tab item-->
                <!--begin:::Tab item-->
                <li class="nav-item">
                    <a class="nav-link text-active-primary pb-4" data-kt-countup-tabs="true" data-bs-toggle="tab" href="#kt_user_view_overview_additional">Additional</a>
                </li>
                <!--end:::Tab item-->
                @if (session()->has('exmessage'))
                    <div class="alert alert-success">
                        {{ session('exmessage') }}
                    </div>
                @endif

                <!--begin:::Tab item-->
                <li class="nav-item ms-auto">
                    <!--begin::Action menu-->
                    <span data-bs-toggle="tooltip" data-bs-trigger="hover" title="Print">
                        <a href="{{ route('user.downloadPdf', ['id' => $driver->id]) }}" class="btn btn-sm btn-light-primary">Print</a>
                    </span>
                    <!--end::Menu-->
                </li>
                <!--end:::Tab item-->
            </ul>
            <!--end:::Tabs-->
            <!--begin:::Tab content-->
            <div class="tab-content" id="myTabContent">
                <!--begin:::Tab pane-->
                <div class="tab-pane fade show active" id="kt_user_view_overview_tab" role="tabpanel">

                    <!--begin::Card-->
                    <div>
                        <livewire:user-details-component />
                    </div><br>
                    <!--end::Card-->
                    <div>
                        <livewire:user-business-details-component />
                    </div>
                </div>

                <div class="tab-pane fade" id="kt_user_view_overview_security" role="tabpanel">
                    <!--begin::Card-->
                    <livewire:user-secondary-details-component />

                    <!--end::Card-->
                </div>
                <!--end:::Tab pane-->

                <div class="tab-pane fade" id="kt_user_view_overview_additional" role="tabpanel">
                    <!--begin::Card-->
                    <livewire:user-additional-details-component />

                    <!--end::Card-->
                </div>
                <!--end:::Tab pane-->
            </div>
            <!--end:::Tab content-->
        </div>
        @endif
        <!--end::Content-->
    </div>
    <!--end::Layout-->
    <!--begin::Modals-->
    <!--begin::Modal - Update user details-->
    @include('pages/apps/user-management/users/modals/_update-details')
    <!--end::Modal - Update user details-->
    <!--begin::Modal - Add schedule-->
    @include('pages/apps/user-management/users/modals/_add-schedule')
    <!--end::Modal - Add schedule-->
    <!--begin::Modal - Add one time password-->
    @include('pages/apps/user-management/users/modals/_add-one-time-password')
    <!--end::Modal - Add one time password-->
    <!--begin::Modal - Update email-->
    @include('pages/apps/user-management/users/modals/_update-email')
    <!--end::Modal - Update email-->
    <!--begin::Modal - Update password-->
    @include('pages/apps/user-management/users/modals/_update-password')
    <!--end::Modal - Update password-->
    <!--begin::Modal - Update role-->
    @include('pages/apps/user-management/users/modals/_update-role')
    <!--end::Modal - Update role-->
    <!--begin::Modal - Add auth app-->
    @include('pages/apps/user-management/users/modals/_add-auth-app')
    <!--end::Modal - Add auth app-->
    <!--begin::Modal - Add task-->
    @include('pages/apps/user-management/users/modals/_add-task')
    <!--end::Modal - Add task-->
    <!--end::Modals-->
    @livewireScripts
    <script>
    function toggleArrow(element) {
        var arrowIcon = element.querySelector('.ki-duotone');
        if (arrowIcon.classList.contains('ki-down')) {
            arrowIcon.classList.remove('ki-down');
            arrowIcon.classList.add('ki-up');
        } else {
            arrowIcon.classList.remove('ki-up');
            arrowIcon.classList.add('ki-down');
        }
    }
    </script>

    <script>
        document.addEventListener('livewire:load', function () {
            Livewire.on('refreshComponent', () => {
                Livewire.emit('refreshComponent'); // Optional: Refresh other Livewire components listening for 'refreshComponent'
                $('#editUserUpdateModal{{ $driver->id }}').modal('hide');
            });
        });
    </script>
</x-default-layout> --}}