@extends('admin.layouts.app')

@section('title')
    Job Completion Report
@endsection

@section('content')
    <div class="container">
        <div class="page-inner">
            <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
                <div>
                    <h3 class="fw-bold mb-3">Job Completion Report</h3>
                </div>
                <div class="ms-md-auto py-2 py-md-0">
                    <a href="{{ route('admin.job.list') }}" class="btn btn-secondary btn-round">Back to Job List</a>
                </div>
            </div>

            <!-- Single Card for Job Details, Completion Details, and Media -->
            <div class="card card-round">
                <div class="card-body">

                    <!-- Job Details Section -->
                    <h5 class="fw-bold mb-3">Job Details</h5>
                    <div class="row">
                        <div class="col-md-4">
                            <p><strong>Job Number:</strong> {{ $job->job_number ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Job Name:</strong> {{ $job->job_name ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Job Type:</strong> {{ $job->job_type ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Job Status:</strong> {{ ucfirst($job->status) ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Due Date:</strong> {{ $job->due_date ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Assigned To:</strong> {{ $job->assign_to ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Location:</strong> {{ $job->job_location ?? 'N/A' }}</p>
                        </div>
                    </div>

                    <!-- Job Completion Details Section -->
                    <h5 class="fw-bold mb-3">Job Completion Details</h5>
                    <div class="row">
                        <div class="col-md-4">
                            <p><strong>Completion Status:</strong> {{ ucfirst($job->status) ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Remark:</strong> {{ $job->remark ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Technician IDs:</strong> {{ $job->tech_ids ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Start Time:</strong> {{ $job->start_time ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>End Time:</strong> {{ $job->end_time ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Total Time:</strong> {{ $job->total_time ?? 'N/A' }}</p>
                        </div>
                    </div>

                    <!-- Media Files Section (Separate for Video, Images, and Voice Note) -->

                    <!-- Job Video Section -->
                    <h5 class="fw-bold mb-3">Job Video</h5>
                    <div class="row">
                        <div class="col-md-12">
                            <video width="100%" controls>
                                <source src="{{ asset($jobCompletion->video) }}" type="video/webm">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    </div>

                    <!-- Job Images Section -->
                    <h5 class="fw-bold mb-3">Job Images</h5>
                    <div class="row">
                        @foreach(explode(',', $jobCompletion->images) as $image)
                            <div class="col-md-4 mb-4">
                                <div class="card">
                                    <img src="{{ asset($image) }}" class="card-img-top" alt="Job Image">
                                    <div class="card-body">
                                        <p class="card-text">Image Description or any other detail.</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Job Voice Note Section -->
                    <h5 class="fw-bold mb-3">Voice Note</h5>
                    <div class="row">
                        <div class="col-md-12">
                            <audio controls style="width: 100%;">
                                <source src="{{ asset($jobCompletion->voice_note) }}" type="audio/mpeg">
                                Your browser does not support the audio element.
                            </audio>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
@endsection