@extends('technician.layouts.app')
@section('title', 'Job Details')
@section('content')
@php($booking = $assignment->serviceBooking) @php($visit = $assignment->serviceVisit)
<div class="page-title"><div><h1>Job Details</h1><p>{{ $booking->booking_no }}</p></div></div>
@if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif @if($errors->any())<div class="alert alert-error">{{ $errors->first() }}</div>@endif
<div class="detail-grid"><section class="detail-card"><h3>Customer & Schedule</h3><div class="detail-line"><span>Customer</span>{{ $booking->customer->customer_name ?? '-' }}</div><div class="detail-line"><span>Service Schedule</span>{{ \Carbon\Carbon::parse($booking->service_date)->format('d M Y') }}{{ $booking->service_time ? ' · ' . \Carbon\Carbon::parse($booking->service_time)->format('h:i A') : '' }}</div><div class="detail-line"><span>Service Address</span>{{ $booking->service_address ?? '-' }}</div><div class="detail-line"><span>Instructions</span>{{ $assignment->instructions ?: 'No special instructions' }}</div>@if($booking->service_address)<a class="tech-button" target="_blank" rel="noopener" href="https://www.google.com/maps/search/?api=1&query={{ urlencode($booking->service_address) }}"><i class="fas fa-route"></i> Navigate</a>@endif</section><section class="detail-card"><h3>Service Visit</h3><div class="detail-line"><span>Job Status</span><span class="job-status">{{ $assignment->work_status }}</span></div><div class="detail-line"><span>Check-In</span>{{ $visit?->checked_in_at?->format('d M Y, h:i A') ?? 'Not checked in' }}</div><div class="detail-line"><span>Check-Out</span>{{ $visit?->checked_out_at?->format('d M Y, h:i A') ?? 'Not checked out' }}</div>@if(!$visit?->checked_in_at && $assignment->work_status !== 'Completed')<form method="POST" action="{{ route('technician.jobs.check-in', $assignment) }}">@csrf<button class="tech-button"><i class="fas fa-location-dot"></i> Check In</button></form>@endif</section></div>
@if($booking->images->isNotEmpty())<section class="detail-card" style="margin-top:18px"><h3>Customer Booking Images</h3><div class="photo-grid">@foreach($booking->images as $image)<a href="{{ asset('storage/'.$image->image_path) }}" target="_blank"><img class="visit-photo" src="{{ asset('storage/'.$image->image_path) }}" alt="Customer booking image {{ $loop->iteration }}"></a>@endforeach</div></section>@endif
@if($assignment->work_status !== 'Completed')
@php($selectedChemicals = old('chemicals_used', $visit?->chemicals_used ? array_map('trim', explode(',', $visit->chemicals_used)) : []))
<section class="detail-card visit-form" style="margin-top:18px">
    <h3>Complete Service Visit</h3>
    <form method="POST" enctype="multipart/form-data" action="{{ route('technician.jobs.complete', $assignment) }}">
        @csrf
        <label>Completion Notes *</label>
        <textarea name="completion_notes" rows="4" required>{{ old('completion_notes', $visit?->completion_notes) }}</textarea>
        <label>Chemicals Used *</label>
        <div class="chemical-picker" id="chemicalPicker">
            <input type="search" id="chemicalSearch" placeholder="Type to search chemicals" autocomplete="off">
            <div class="chemical-options" id="chemicalOptions">
                @forelse($chemicals as $chemical)
                    <label class="chemical-option" data-name="{{ strtolower($chemical->name) }}">
                        <input type="checkbox" name="chemicals_used[]" value="{{ $chemical->name }}" {{ in_array($chemical->name, $selectedChemicals, true) ? 'checked' : '' }}>
                        <span>{{ $chemical->name }}</span>
                    </label>
                @empty
                    <div class="chemical-empty">No chemicals added by admin.</div>
                @endforelse
            </div>
        </div>
        <label>Before Photo</label><input type="file" name="before_photo" accept="image/*">
        <label>After Photo</label><input type="file" name="after_photo" accept="image/*"><br><br>
        <button class="tech-button"><i class="fas fa-circle-check"></i> Complete Job</button>
    </form>
</section>
<style>
.chemical-picker{margin-bottom:15px}.chemical-options{max-height:190px;overflow:auto;border:1px solid #dce5e2;border-radius:10px;background:#fff}.chemical-option{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:10px 12px;border-bottom:1px solid #edf1ef;cursor:pointer}.chemical-option:last-child{border-bottom:0}.chemical-option:hover{background:#f3faf7}.chemical-option input{width:auto!important;margin:0}.chemical-option:has(input:checked){background:#e8f7f0;color:#176c57}.chemical-empty{padding:14px;color:#71817d;font-size:13px}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const search = document.getElementById('chemicalSearch');
    const options = document.querySelectorAll('#chemicalOptions .chemical-option');
    search.addEventListener('input', function () {
        const term = this.value.trim().toLowerCase();
        options.forEach(function (option) {
            option.style.display = option.dataset.name.includes(term) ? 'flex' : 'none';
        });
    });
});
</script>
@elseif($visit)<section class="detail-card" style="margin-top:18px"><h3>Completion Report</h3><div class="detail-line"><span>Completion Notes</span>{{ $visit->completion_notes }}</div><div class="detail-line"><span>Chemicals Used</span>{{ $visit->chemicals_used ?: 'Not recorded' }}</div><div class="photo-grid">@if($visit->before_photo)<div><small>Before</small><br><img class="visit-photo" src="{{ asset('storage/' . $visit->before_photo) }}"></div>@endif @if($visit->after_photo)<div><small>After</small><br><img class="visit-photo" src="{{ asset('storage/' . $visit->after_photo) }}"></div>@endif</div></section>@endif
@endsection