@extends('adminlte::page')

@section('title', config('adminlte.title') . ' | Profile')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Profile</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 active">Profile</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <style>
        /* Better responsive card layouts */
        @media (max-width: 767px) {
            .card-deck {
                display: block;
            }
            .card-deck .card {
                margin-bottom: 15px;
            }
        }

        /* Improve table readability */
        .table-sm td {
            padding: 0.5rem;
        }

        .table-sm strong {
            color: #495057;
        }
    </style>

    @if (session('success'))
        <script>
            toastr.options = {
                "closeButton": true,
                "debug": false,
                "newestOnTop": false,
                "progressBar": true,
                "positionClass": "toast-top-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
            toastr.success('{{ session('success') }}');
        </script>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    {{-- Navigation --}}
                    <div class="d-grid gap-1 d-sm-flex">
                        <a href="/" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Back</a>
                        <a href="{{ route('profile.edit', $profile->id) }}" class=" btn btn-primary"><i class="fa fa-pen"></i> Edit</a>
                    </div>

                    <hr class="bg-secondary">

                    {{-- Main Content Card --}}
                    <div class="card shadow-sm">
                        <div class="card-header bg-light">
                            <div class="d-flex flex-column flex-sm-row justify-content-sm-between">
                                <div>
                                    <h4 class="card-title">
                                        {{ $profile->employee_ref }} - {{ $profile->name }}
                                    </h4>
                                </div>
                                <div class="text-muted">
                                    Last updated: {{ date('l, j F Y H:i', strtotime($profile->updated_at)) }} UTC
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            {{-- Tabs Navigation --}}
                            <nav>
                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                    <button class="nav-link active" id="nav-summary-tab" data-toggle="tab" data-target="#nav-summary"
                                        type="button" role="tab" aria-controls="nav-summary" aria-selected="true">Summary</button>
                                    <button class="nav-link" id="nav-jobs-tab" data-toggle="tab" data-target="#nav-jobs"
                                        type="button" role="tab" aria-controls="nav-jobs" aria-selected="false">Jobs</button>
                                    <button class="nav-link" id="nav-personal-tab" data-toggle="tab" data-target="#nav-personal"
                                        type="button" role="tab" aria-controls="nav-personal" aria-selected="false">Personal</button>
                                </div>
                            </nav>

                            <div class="tab-content mt-3" id="nav-tabContent">
                                {{-- Summary Tab --}}
                                <div class="tab-pane fade show active" id="nav-summary" role="tabpanel" aria-labelledby="nav-summary-tab">
                                    <div class="card-deck mb-3">
                                        <div class="card shadow-sm">
                                            <div class="card-header bg-light">
                                                <h4 class="card-title">Basic Information</h4>
                                            </div>
                                            <div class="card-body">
                                                <table class="table table-sm table-hover mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <td style="width: 40%;"><strong class="text-black">Title:</strong></td>
                                                            <td >{{ $profile->title ?: 'Not specified' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Full Names:</strong></td>
                                                            <td>{{ $profile->name }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Job Title:</strong></td>
                                                            <td>{{ $profile->jobtitle ?: 'Not assigned' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Department:</strong></td>
                                                            <td>{{ $profile->department ? $profile->getDepartment->departmentname : 'Not assigned' }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </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">
                                                <table class="table table-sm table-hover mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <td style="width: 40%;"><strong class="text-black">Email:</strong></td>
                                                            <td><a href="mailto:{{ $profile->email }}">{{ $profile->email }}</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Telephone:</strong></td>
                                                            <td>{{ $profile->tel_no ?: 'N/A' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Mobile:</strong></td>
                                                            <td>{{ $profile->mob_no ?: 'N/A' }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card-deck mb-3">
                                        <div class="card shadow-sm">
                                            <div class="card-header bg-light">
                                                <h4 class="card-title">Reporting Structure</h4>
                                            </div>
                                            <div class="card-body">
                                                <table class="table table-sm table-hover mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <td style="width: 40%;"><strong class="text-black">Line Manager:</strong></td>
                                                            <td>{{ $profile->line_manager == '' ? 'Not assigned' : $profile->getLineManager->name }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Holiday Approver:</strong></td>
                                                            <td>{{ $profile->holiday_approver == '' ? 'Not assigned' : $profile->getHolidayApprover->name }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Report to:</strong></td>
                                                            <td>
                                                                @php
                                                                    $reportToIds = explode(',', trim($profile->report_to));
                                                                    $names = \App\Models\Profile::whereIn('id', $reportToIds)
                                                                        ->pluck('name')
                                                                        ->toArray();
                                                                    if ($names) {
                                                                        $badgeText = implode(', ', $names);
                                                                    } else {
                                                                        $badgeText = '—';
                                                                    }
                                                                @endphp
                                                                {{ $badgeText }}
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>

                                        <div class="card shadow-sm">
                                            <div class="card-header bg-light">
                                                <h4 class="card-title">Service Information</h4>
                                            </div>
                                            <div class="card-body">
                                                <table class="table table-sm table-hover mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <td style="width: 40%;"><strong class="text-black">Join Date:</strong></td>
                                                            <td>{{ date('d/m/Y', strtotime($profile->join_date)) }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Length of Service:</strong></td>
                                                            <td>
                                                                @php
                                                                    $startDate = $profile->join_date;
                                                                    $startDateObj = new DateTime($startDate);
                                                                    $currentDateObj = new DateTime();
                                                                    $interval = $startDateObj->diff($currentDateObj);
                                                                    $years = $interval->y;
                                                                    $months = $interval->m;
                                                                    echo "$years years and $months months";
                                                                @endphp
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Location:</strong></td>
                                                            <td class="d-flex align-items-center">
                                                                @if($profile->location)
                                                                    {{ $profile->getLocation->locationname }} - {{ $profile->getLocation->countrycode }}
                                                                    <img src="https://flagcdn.com/w20/{{ strtolower($profile->getLocation->countrycode) }}.png"
                                                                    srcset="https://flagcdn.com/w40/{{ strtolower($profile->getLocation->countrycode) }}.png 2x"
                                                                    width="20" alt="{{ $profile->getLocation->countrycode }}" class="ml-1">
                                                                @else
                                                                    Not assigned
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Jobs Tab --}}
                                <div class="tab-pane fade" id="nav-jobs" role="tabpanel" aria-labelledby="nav-jobs-tab">
                                    <div class="card-deck mb-3">
                                        <div class="card shadow-sm">
                                            <div class="card-header bg-light">
                                                <h4 class="card-title">Job Information</h4>
                                            </div>
                                            <div class="card-body">
                                                <table class="table table-sm table-hover mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <td style="width: 45%;"><strong class="text-black">Job Title:</strong></td>
                                                            <td>{{ $profile->jobtitle ?: 'Not assigned' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Person Type:</strong></td>
                                                            <td>{{ $profile->person_type ?: 'Not specified' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Is a Director?</strong></td>
                                                            <td>
                                                                @if($profile->is_director == 1)
                                                                    <span class="badge badge-info">Yes</span>
                                                                @else
                                                                    No
                                                                @endif
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Department:</strong></td>
                                                            <td>{{ $profile->department ? $profile->getDepartment->departmentname : 'Not assigned' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Division:</strong></td>
                                                            <td>{{ $profile->division ? $profile->getDivision->divisionname : 'Not assigned' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Location:</strong></td>
                                                            <td class="d-flex align-items-center">
                                                                @if($profile->location)
                                                                    {{ $profile->getLocation->locationname }} - {{ $profile->getLocation->countrycode }}
                                                                    <img src="https://flagcdn.com/w20/{{ strtolower($profile->getLocation->countrycode) }}.png"
                                                                    srcset="https://flagcdn.com/w40/{{ strtolower($profile->getLocation->countrycode) }}.png 2x"
                                                                    width="20" alt="{{ $profile->getLocation->countrycode }}" class="ml-1">
                                                                @else
                                                                    Not assigned
                                                                @endif
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Full/Part-Time:</strong></td>
                                                            <td>{{ $profile->fullparttime ?: 'Not specified' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Weekly Hours:</strong></td>
                                                            <td>{{ $profile->weeklyhours ? $profile->weeklyhours . ' hours' : 'Not specified' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Join Date:</strong></td>
                                                            <td>{{ date('d/m/Y', strtotime($profile->join_date)) }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Length of Service:</strong></td>
                                                            <td>
                                                                @php
                                                                    $startDate = $profile->join_date;
                                                                    $startDateObj = new DateTime($startDate);
                                                                    $currentDateObj = new DateTime();
                                                                    $interval = $startDateObj->diff($currentDateObj);
                                                                    $years = $interval->y;
                                                                    $months = $interval->m;
                                                                    echo "$years years and $months months";
                                                                @endphp
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>

                                        <div class="card shadow-sm">
                                            <div class="card-header bg-light">
                                                <h4 class="card-title">Contract Details</h4>
                                            </div>
                                            <div class="card-body">
                                                <table class="table table-sm table-hover mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <td style="width: 45%;"><strong class="text-black">Employee Type:</strong></td>
                                                            <td>{{ $profile->employee_type ?: 'Not specified' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Employee Ref:</strong></td>
                                                            <td>{{ $profile->employee_ref ?: 'Not assigned' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Probation Date:</strong></td>
                                                            <td>{{ $profile->probation_date ? date('d/m/Y', strtotime($profile->probation_date)) : 'Not specified' }}</td>
                                                        </tr>
                                                        @if ($profile->ext_prob == 1)
                                                            <tr>
                                                                <td><strong class="text-black">Extended Probation:</strong></td>
                                                                <td>
                                                                    {{ date('d/m/Y', strtotime($profile->extend_probation_date)) }}
                                                                    <br><small class="text-muted">{{ $profile->ext_probation_reason }}</small>
                                                                </td>
                                                            </tr>
                                                        @endif
                                                        <tr>
                                                            <td><strong class="text-black">Notice Period:</strong></td>
                                                            <td>{{ $profile->notice_period ?: 'Not specified' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Currency:</strong></td>
                                                            <td>{{ $profile->currency ?: 'Not specified' }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Personal Tab --}}
                                <div class="tab-pane fade" id="nav-personal" role="tabpanel" aria-labelledby="nav-personal-tab">
                                    <div class="card-deck mb-3">
                                        <div class="card shadow-sm">
                                            <div class="card-header bg-light">
                                                <h4 class="card-title">Basic Information</h4>
                                            </div>
                                            <div class="card-body">
                                                <table class="table table-sm table-hover mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <td style="width: 40%;"><strong class="text-black">Title:</strong></td>
                                                            <td>{{ $profile->title ?: 'Not specified' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Full Names:</strong></td>
                                                            <td>{{ $profile->name }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Marital Status:</strong></td>
                                                            <td>{{ $profile->marital_status ?: 'Not disclosed' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Gender:</strong></td>
                                                            <td>{{ $profile->gender ?: 'Not disclosed' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Date of Birth:</strong></td>
                                                            <td>{{ $profile->dob ? date('d/m/Y', strtotime($profile->dob)) : 'Not specified' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Age:</strong></td>
                                                            <td>
                                                                @if($profile->dob)
                                                                    @php
                                                                        $startDate = $profile->dob;
                                                                        $startDateObj = new DateTime($startDate);
                                                                        $currentDateObj = new DateTime();
                                                                        $interval = $startDateObj->diff($currentDateObj);
                                                                        $years = $interval->y;
                                                                        echo "$years years";
                                                                    @endphp
                                                                @else
                                                                    Not specified
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </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">
                                                <table class="table table-sm table-hover mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <td style="width: 40%;"><strong class="text-black">Work Email:</strong></td>
                                                            <td><a href="mailto:{{ $profile->email }}">{{ $profile->email }}</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Personal Email:</strong></td>
                                                            <td>
                                                                @if($profile->personal_email)
                                                                    <a href="mailto:{{ $profile->personal_email }}">{{ $profile->personal_email }}</a>
                                                                @else
                                                                    Not provided
                                                                @endif
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Telephone:</strong></td>
                                                            <td>{{ $profile->tel_no ?: 'Not provided' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Mobile:</strong></td>
                                                            <td>{{ $profile->mob_no ?: 'Not provided' }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card-deck mb-3">
                                        <div class="card shadow-sm">
                                            <div class="card-header bg-light">
                                                <h4 class="card-title">Address</h4>
                                            </div>
                                            <div class="card-body">
                                                @if(!empty($profile->address1) || !empty($profile->address2) || !empty($profile->address3) || !empty($profile->town) || !empty($profile->postcode) || !empty($profile->country))
                                                    <address class="mb-0">
                                                        @if (!empty($profile->address1))
                                                            {{ $profile->address1 }}<br>
                                                        @endif
                                                        @if (!empty($profile->address2))
                                                            {{ $profile->address2 }}<br>
                                                        @endif
                                                        @if (!empty($profile->address3))
                                                            {{ $profile->address3 }}<br>
                                                        @endif
                                                        @if (!empty($profile->town))
                                                            {{ $profile->town }}<br>
                                                        @endif
                                                        @if (!empty($profile->postcode))
                                                            {{ $profile->postcode }}<br>
                                                        @endif
                                                        @if (!empty($profile->country))
                                                            {{ $profile->country }}
                                                        @endif
                                                    </address>
                                                @else
                                                    <p class="text-muted mb-0">No address information provided</p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Diversity Section --}}
                                    <div class="card-deck mb-3">
                                        <div class="card shadow-sm">
                                            <div class="card-header bg-light">
                                                <h4 class="card-title">Diversity</h4>
                                            </div>
                                            <div class="card-body">
                                                <table class="table table-sm table-hover mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <td style="width: 40%;"><strong class="text-black">Nationality:</strong></td>
                                                            <td>{{ $profile->nationally ?: 'Not disclosed' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Disability:</strong></td>
                                                            <td>{{ $profile->disability == 1 ? 'Yes' : ($profile->disability === 0 ? 'No' : 'Not disclosed') }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Ethnicity:</strong></td>
                                                            <td>{{ $profile->ethnicity ?: 'Not disclosed' }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>

                                        <div class="card shadow-sm">
                                            <div class="card-header bg-light">
                                                <h4 class="card-title">Religion & Orientation</h4>
                                            </div>
                                            <div class="card-body">
                                                <table class="table table-sm table-hover mb-0">
                                                    <tbody>
                                                        <tr>
                                                            <td style="width: 40%;"><strong class="text-black">Religion:</strong></td>
                                                            <td>{{ $profile->religion ?: 'Not disclosed' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong class="text-black">Sexual Orientation:</strong></td>
                                                            <td>{{ $profile->sexorientation ?: 'Not disclosed' }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    </script>
@stop

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