@extends('layouts.app')

@section('title', 'Job Information')

@section('content')
    <div class="content py-3">
        <div class="page-header">
            <div class="page-title">
                <h4>Job Information</h4>
                <h6>View details about jobs, used pieces, and waste information.</h6>
            </div>
        </div>

        <!-- Export Button -->
        <div class="text-end mb-3">
            <a href="{{ route('export.jobs') }}" class="btn btn-primary">
                Export Job and Waste Details to Excel
            </a>
        </div>

        <!-- Job Details Card -->
        <div class="job-info-card mb-4">
            <div class="card">
                <div class="card-body">
                    @foreach ($jobs as $job)
                        <h5 class="card-title">Job No: {{ $job['job_no'] }}</h5>
                        <p><strong>Address:</strong> {{ $job['address'] }}</p>
                        <p><strong>Site:</strong> {{ $job['site'] }}</p>
                        <p><strong>Created At:</strong> 
                            {{ \Carbon\Carbon::parse($job['created_at'])->format('d M Y, h:i A') }}
                        </p>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Job Length and Used Pieces Table -->
        <div class="job-details mb-4">
            <h3 class="my-3">Job Details</h3>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Job Length</th>
                        <th>Used Piece</th>
                        <th>Qty</th>
                        <th>Source</th>
                        {{-- <th>Remaining Waste</th> --}}
                    </tr>
                </thead>
                <tbody>
                    @foreach ($jobs as $job)
                        @php
                            $jobInformation = json_decode($job['information'], true);
                        @endphp
                        @foreach ($jobInformation as $info)
                            <tr>
                                <td>{{ $info['length'] }} mm</td>
                                <td>{{ $info['used_piece'] }} mm</td>
                                <td>{{ $info['qty'] }}</td>
                                <td>{{ ucfirst($info['source']) }}</td>
                                {{-- <td>{{ $info['remaining_waste'] }}</td> --}}
                            </tr>
                        @endforeach
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Waste Details Table -->
        <div class="waste-details">
            <h3 class="my-3">Waste Details</h3>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Job Length</th>
                        <th>Waste Length</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($jobs as $job)
                        @php
                            $lengths = json_decode($job['length']);
                            $wastes = $job['wastes'];
                        @endphp
                        @foreach ($lengths as $index => $length)
                            <tr>
                                <td>{{ $length }} mm</td>
                                <td>
                                    @if (isset($wastes[$index]))
                                        {{ $wastes[$index]['length'] }} mm
                                    @else
                                        0 mm
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/home.css') }}">
    <style>
        .job-info-card {
            margin-bottom: 20px;
        }

        .job-details,
        .waste-details {
            margin-bottom: 30px;
        }
    </style>
@endpush