@extends('layouts.app')

@section('content')
{{-- {{ Breadcrumbs::render('users.show', $user) }} --}}
<div class="container-fluid">
<div class="row">
    <!-- user summary -->
    <div class="col-md-3">
        <!-- img -->
        <div class="row text-center">
            <div class="col-12">
                @if ($user->file_location)
                <img style="width: 200px; " src="{{ $spserpUrl . '/' . $user->file_location . $user->file_name }}"
                class="img-avatar">
                @else
                <img style="width: 200px; " src="{{ $user->gender_id == 2 ? asset('assets/img/avatars/female.png') : asset('assets/img/avatars/male.png') }}"
                class="img-avatar">
                @endif
            </div>
        </div>
        {{-- details --}}
        <div class="row text-center mt-2">
            <div class="col-12">
                <div class="h5">{{ strtoupper($user->name) }}</div>
            </div>
        </div>
    </div>
    <!-- user tabs -->
    <div class="col-md-9">
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-link active" id="nav-details-tab" data-toggle="tab" href="#nav-details" role="tab"
                    aria-controls="nav-details" aria-selected="true">Details</a>
                <a class="nav-link" id="nav-jobs-tab" data-toggle="tab" href="#nav-jobs" role="tab"
                    aria-controls="nav-jobs" aria-selected="false">Jobs</a>
                <a class="nav-link" id="nav-documents-tab" data-toggle="tab" href="#nav-documents" role="tab"
                    aria-controls="nav-documents" aria-selected="false">Documents</a>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <!-- detail tab. contact. summary jobs. summary document. summary pic -->
            <div class="tab-pane fade show active mt-3" id="nav-details" role="tabpanel" aria-labelledby="nav-home-tab">

            </div>
            <!-- job tab. id. file number. pic count. status. service type. leader. last updated -->
            <div class="tab-pane fade mt-3" id="nav-jobs" role="tabpanel" aria-labelledby="nav-profile-tab">
                <table class="table table-responsive-sm table-hover table-outline mb-0">
                    <thead class="thead-light">
                        <tr>
                            <th>ID</th>
                            <th>File Number</th>
                            <th>Service Type</th>
                            <th>PIC</th>
                            <th>Leader</th>
                            <th>Last Updated</th>
                            <th>Document Count</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($jobs as $job)
                        <tr>
                            <td>
                                <div>{{ $job->id }}</div>
                            </td>
                            <td>
                                <div>{{ $job->file_number }}</div>
                            </td>
                            <td>
                                <div>{{ $job->pic_count }}</div>
                            </td>
                            <td>
                                <div>{{ $job->leader }}</div>
                            </td>
                            <td>
                                <div>{{ date('d/m/Y h:m A', strtotime($job->last_updated)) }}</div>
                            </td>
                            <td>
                                <div>{{ $job->document_count }}</div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6">No data available</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <!-- documents tab. file name. version. size, extension. last updated. drag and drop space -->
            <div class="tab-pane fade mt-3" id="nav-documents" role="tabpanel" aria-labelledby="nav-contact-tab">
                <table class="table table-responsive-sm table-hover table-outline mb-0">
                    <thead class="thead-light">
                        <tr>
                            <th>ID</th>
                            <th>File Name / Version</th>
                            <th>Size (kB)</th>
                            <th>Extension</th>
                            <th>Last Accessed</th>
                            <th>Last Updated</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($documents as $document)
                        <tr>
                            <td>
                                {{ $document->session_id }}
                            </td>
                            <td>
                                <p class="p-0 m-0">{{ $document->file_name }}</p>
                                <p class="p-0 m-0 text-muted">{{ $document->file_version_number }}</p>
                            </td>
                            <td>
                                {{ $document->activity }}
                            </td>
                            <td>
                                {{ date('d/m/Y h:m A', strtotime($document->activity_time)) }}
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4">No data available</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
</div>
@endsection