@canany(['hr_manager_hq', 'employees'])

    @extends('adminlte::page')

    @section('title', $title)

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>{{ $subtitle }}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Admin</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.employees.index') }}">Employee</a></li>
                    <li class="breadcrumb-item active">View</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <style>
        .table {
            max-width: 100%;
            overflow-x: auto;
        }

        /* Prevent the table from overlapping the design on mobile devices */
        @media (max-width: 768px) {
            .table {
                position: relative;
                top: 0;
                left: 0;
            }
        }
    </style>


    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    {{-- Navigation --}}
                        <div class="col-12">
                            <a href={{ route('admin.employees.index') }} class="btn btn-secondary"><i
                                    class="fas fa-arrow-left"></i> Back</a>
                            <a href="{{ route('admin.employees.edit', $user->id) }}" class="btn btn-primary"><i
                                    class="fa fa-pen"></i> Edit</a>
                    </div>

                    <hr class="bg-secondary">
                    {{-- Main Card Content --}}
                    <div class="card shadow-sm">
                        <div class="card-header bg-light">
                            <div class="row">
                                <div class="col-sm  ms-auto text-left">
                                    <h4 class="card-title">{{ $user->employee_ref }} - {{ $user->name }} </h4>
                                </div>
                                <div class="col-sm-auto ms-auto text-muted">
                                    Last updated: {{ date('l, j F Y H:i', strtotime($user->updated_at)) }} UTC
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            {{-- Contents goes here --}}
                            <div class="card-deck mb-3">

                                <div class="card shadow-sm">
                                    <div class="card-header bg-light">
                                        <h4 class="card-title">Personal</h4>
                                    </div>
                                    <div class="card-body">
                                        @include('admin.employees.partial.view.personal', [
                                            'myUser' => $myUser,
                                        ])
                                    </div>
                                </div>

                                <div class="card shadow-sm">
                                    <div class="card-header bg-light">
                                        <h4 class="card-title">Contact Details</h4>
                                    </div>
                                    <div class="card-body">
                                        @include('admin.employees.partial.view.contact', [
                                            'myUser' => $myUser,
                                        ])
                                    </div>
                                </div>

                            </div>

                            <div class="card-deck mb-3">
                                <div class="card shadow-sm">
                                    <div class="card-header bg-light">
                                        <h4 class="card-title">Employment</h4>
                                    </div>
                                    <div class="card-body">
                                        @include('admin.employees.partial.view.employment', [
                                            'myUser' => $myUser,
                                        ])
                                    </div>
                                </div>

                                <div class="card shadow-sm">
                                    <div class="card-header bg-light">
                                        <h4 class="card-title">Employee</h4>
                                    </div>
                                    <div class="card-body">
                                        @include('admin.employees.partial.view.employee', [
                                            'myUser' => $myUser,
                                        ])
                                    </div>
                                </div>
                            </div>

                            <div class="card-deck mb-3">
                                <div class="card shadow-sm">
                                    <div class="card-header bg-light">
                                        <h4 class="card-title">Holiday</h4>
                                    </div>
                                    <div class="card-body">
                                        @include('admin.employees.partial.view.holiday', [
                                            'myUser' => $myUser,
                                        ])
                                    </div>
                                </div>

                                <div class="card shadow-sm">
                                    <div class="card-header bg-light">
                                        <h4 class="card-title">Miscellaneous</h4>
                                    </div>
                                    <div class="card-body">
                                        @include('admin.employees.partial.view.miscellaneous', [
                                            'myUser' => $myUser,
                                        ])
                                    </div>
                                </div>
                            </div>

                            <div class="card-deck mb-3">
                                <div class="card shadow-sm">
                                    <div class="card-header bg-light">
                                        <h4 class="card-title">Permission</h4>
                                    </div>
                                    <div class="card-body">
                                        @include('admin.employees.partial.view.permissions', [
                                            'myUser' => $myUser,
                                        ])
                                    </div>
                                </div>
                            </div>



                            <div> {{-- Diversity --}}
                                <div class="row mb-2 bg-light p-2 rounded">
                                    <div class="col-sm-12">
                                        <h4 data-toggle="collapse" data-target="#diversityCollapse" aria-expanded="false"
                                            aria-controls="diversityCollapse" style="cursor: pointer;">
                                            Diversity
                                            <i class="fas fa-angle-down collapse-icon"></i>
                                        </h4>
                                    </div>
                                </div>

                                @include('admin.employees.partial.view.diversity', [
                                    'myUser' => $myUser,
                                ])
                            </div>

                            <div> {{-- Next of Kin --}}
                                <div class="row mb-2 bg-light p-2 rounded">
                                    <div class="col-sm-12">
                                        <h4 data-toggle="collapse" data-target="#nextOffKinCollapse" aria-expanded="false"
                                            aria-controls="nextOffKinCollapse" style="cursor: pointer;">
                                            Next of Kin
                                            <i class="fas fa-angle-down collapse-icon"></i>
                                        </h4>
                                    </div>
                                </div>

                                @include('admin.employees.partial.view.next-of-kin', [
                                    'myUser' => $myUser,
                                ])
                            </div>

                            <div> {{-- Medical Facts --}}
                                <div class="row mb-2 bg-light p-2 rounded">
                                    <div class="col-sm-12">
                                        <h4 data-toggle="collapse" data-target="#medicalFactsCollapse" aria-expanded="false"
                                            aria-controls="medicalFactsCollapse" style="cursor: pointer;">
                                            Medical Facts
                                            <i class="fas fa-angle-down collapse-icon"></i>
                                        </h4>
                                    </div>
                                </div>

                                @include('admin.employees.partial.view.medicalFacts', [
                                    'myUser' => $myUser,
                                ])
                            </div>

                        </div>
                        {{-- end of Contents --}}
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {

            // Add smooth icon rotation on collapse toggle
            $('#diversityCollapse').on('show.bs.collapse hide.bs.collapse', function() {
                $(this).prev().find('h4').attr('aria-expanded', function(i, attr) {
                    return attr == 'true' ? 'false' : 'true';
                });
            });

            $('#nextOffKinCollapse').on('show.bs.collapse hide.bs.collapse', function() {
                $(this).prev().find('h4').attr('aria-expanded', function(i, attr) {
                    return attr == 'true' ? 'false' : 'true';
                });
            });

            $('#medicalFactsCollapse').on('show.bs.collapse hide.bs.collapse', function() {
                $(this).prev().find('h4').attr('aria-expanded', function(i, attr) {
                    return attr == 'true' ? 'false' : 'true';
                });
            });


        });
    </script>
@stop

@section('footer')
    &nbsp;
@stop

@endcan