@extends('layouts.app')

@section('content')
    {{-- {{ Breadcrumbs::render('users.show', $user) }} --}}
    <div class="container-fluid">
        <div class="row">
            <!-- customer summary -->
            {{-- <div class="col-md-3">
        <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>
        <div class="row text-center mt-2">
            <div class="col-12">
                <div class="h5">{{ strtoupper($user->name) }}</div>
            </div>
        </div>
    </div> --}}
            <!-- customer tabs -->
            <div class="col-md-12">
                <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>Description</th>
                                    <th>Service Type</th>
                                    <th>PIC</th>
                                    <th>Status
                                    <th>
                                    <th>Document Count</th>
                                    <th>Deadline</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($jobs as $job)
                                    <tr>
                                        <td>
                                            <div><a
                                                    href="{{ route('jobs.show', $job->ID) }}">{{ $job->description }}</a>
                                            </div>
                                        </td>
                                        <td>
                                            <div>{{ $job->service_name ?? 'NA' }}</div>
                                        </td>
                                        <td>
                                            <div>{{ $job->pic_count }}</div>
                                        </td>
                                        <td>
                                            <div>{{ $job->status }}</div>
                                        </td>
                                        <td>
                                            <div></div>
                                        </td>
                                        <td>
                                            <div>0</div>
                                        </td>
                                        <td>
                                            <div>{{ date('d/m/Y h:i A', strtotime($job->deadline)) }}</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">
                        <div class="card">
                            <div class="card-header">
                                <div class="float-right">
                                    <form method="POST" action="{{ route('documents.create') }}"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="form-inline">
                                            <input type="hidden" name="customer_id" value="{{ $customer->id }}">
                                            <input type="file" name="documents" class="form-control">
                                            <button class="btn btn-primary ml-2" type="submit">Upload</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="card-body">
                                <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:i A', strtotime($document->activity_time)) }}
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6">No data available</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

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