@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Order Detail</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('orders.index') }}">Orders</a></li>
                <li class="breadcrumb-item active">{{ $order->order_number }}</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        @if (session()->has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle me-1"></i>
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session()->has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-octagon me-1"></i>
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if($order->isResponseOverdue())
            <div class="alert alert-warning">
                <h6><i class="bi bi-exclamation-triangle-fill"></i> Order Overdue!</h6>
                <p class="mb-0">Teknisi belum merespon dalam batas waktu yang ditentukan. Silakan batalkan assignment dan assign ke teknisi lain.</p>
            </div>
        @endif

        <div class="row">
            <!-- Order Info Card -->
            <div class="col-xl-4">
                <div class="card">
                    <div class="card-body pt-4 d-flex flex-column align-items-center">
                        <div class="text-center mb-3">
                            <h3>{{ $order->order_number }}</h3>
                            <div class="mb-2">
                                {!! $order->type_badge !!}
                                {!! $order->sub_category_badge !!}
                            </div>
                            <div class="mb-2">
                                {!! $order->status_badge !!}
                            </div>
                            {!! $order->priority_badge !!}
                        </div>

                        <div class="w-100">
                            <h6 class="text-center text-muted mb-3">Status Tracking</h6>
                            
                            <div class="progress-stacked mb-3" style="height: 20px;">
                                @php
                                    $progress = [
                                        'draft' => 20,
                                        'assigned' => 40,
                                        'accepted' => 60,
                                        'in_progress' => 80,
                                        'completed' => 100,
                                        'cancelled' => 0
                                    ][$order->status] ?? 0;
                                @endphp
                                <div class="progress" role="progressbar" style="width: {{ $progress }}%">
                                    <div class="progress-bar bg-primary"></div>
                                </div>
                            </div>

                            <div class="timeline">
                                <div class="timeline-item {{ $order->status != 'draft' ? 'completed' : 'active' }}">
                                    <i class="bi bi-file-earmark"></i>
                                    <span>Draft</span>
                                    @if($order->created_at)
                                        <small>{{ $order->created_at->format('d M Y H:i') }}</small>
                                    @endif
                                </div>
                                
                                <div class="timeline-item {{ in_array($order->status, ['assigned', 'accepted', 'in_progress', 'completed']) ? 'completed' : ($order->status == 'assigned' ? 'active' : '') }}">
                                    <i class="bi bi-person-check"></i>
                                    <span>Assigned</span>
                                    @if($order->assigned_at)
                                        <small>{{ $order->assigned_at->format('d M Y H:i') }}</small>
                                    @endif
                                </div>
                                
                                <div class="timeline-item {{ in_array($order->status, ['accepted', 'in_progress', 'completed']) ? 'completed' : ($order->status == 'accepted' ? 'active' : '') }}">
                                    <i class="bi bi-check-circle"></i>
                                    <span>Accepted</span>
                                    @if($order->accepted_at)
                                        <small>{{ $order->accepted_at->format('d M Y H:i') }}</small>
                                    @endif
                                </div>
                                
                                <div class="timeline-item {{ in_array($order->status, ['in_progress', 'completed']) ? 'completed' : ($order->status == 'in_progress' ? 'active' : '') }}">
                                    <i class="bi bi-gear"></i>
                                    <span>In Progress</span>
                                    @if($order->started_at)
                                        <small>{{ $order->started_at->format('d M Y H:i') }}</small>
                                    @endif
                                </div>
                                
                                <div class="timeline-item {{ $order->status == 'completed' ? 'completed' : '' }}">
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span>Completed</span>
                                    @if($order->completed_at)
                                        <small>{{ $order->completed_at->format('d M Y H:i') }}</small>
                                    @endif
                                </div>

                                <div>
                                    <br>
                                @if($order->status === 'accepted' || $order->status === 'in_progress')
                                    <button class="btn btn-danger me-2" data-bs-toggle="modal" data-bs-target="#cancelOrderModal">
                                        <i class="bi bi-x-circle"></i> Cancel Order
                                    </button>
                                    @if($order->status === 'in_progress')
                                        <small class="text-muted d-block mt-2">
                                            <i class="bi bi-info-circle"></i> Order akan kembali ke Draft untuk di-assign ulang
                                        </small>
                                    @endif
                                @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Assignment Card -->
                @if($order->assignedTeknisi || $order->assignedRombongan || $order->canBeReassigned())
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Assignment</h5>
                            
                            @if($order->assignedTeknisi)
                                <!-- Individual Assignment -->
                                <div class="alert alert-info mb-3">
                                    <i class="bi bi-person-circle me-2"></i>
                                    <strong>Tipe: Teknisi Individu</strong>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Teknisi:</strong></div>
                                    <div class="col-sm-8">
                                        {{ $order->assignedTeknisi->name }}
                                        @if($order->assignedTeknisi->categoryJasa)
                                            <br><small class="text-muted"><i class="bi bi-briefcase"></i> {{ $order->assignedTeknisi->categoryJasa->name }}</small>
                                        @endif
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Email:</strong></div>
                                    <div class="col-sm-8">{{ $order->assignedTeknisi->email }}</div>
                                </div>
                                @if($order->assignedTeknisi->phone)
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Phone:</strong></div>
                                    <div class="col-sm-8">{{ $order->assignedTeknisi->phone }}</div>
                                </div>
                                @endif
                                
                                @if($order->assignedKendaraan)
                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Kendaraan:</strong></div>
                                        <div class="col-sm-8">
                                            {{ $order->assignedKendaraan->merk }} {{ $order->assignedKendaraan->type }}<br>
                                            <small class="text-muted">{{ $order->assignedKendaraan->plat_no }}</small>
                                        </div>
                                    </div>
                                @endif
                                
                                <!-- Inventaris Tools -->
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Inventaris Tools:</strong></div>
                                    <div class="col-sm-8">
                                        @php
                                            $tools = $order->assignedTeknisi->inventarisTools->where('status', 'in_use');
                                        @endphp
                                        @if($tools->count() > 0)
                                            <ul class="list-unstyled mb-0">
                                                @foreach($tools as $tool)
                                                    <li class="mb-1">
                                                        <i class="bi bi-tools text-success"></i>
                                                        <strong>{{ $tool->name }}</strong> ({{ $tool->code }})
                                                        @if($tool->category)
                                                            <br><small class="text-muted ms-3">Kategori: {{ $tool->category }}</small>
                                                        @endif
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @else
                                            <span class="text-muted"><i class="bi bi-x-circle"></i> Tidak ada inventaris yang dibawa</span>
                                        @endif
                                    </div>
                                </div>
                                
                                @if($order->response_deadline)
                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Deadline:</strong></div>
                                        <div class="col-sm-8">
                                            {{ $order->response_deadline->format('d M Y H:i') }}
                                            @if($order->isResponseOverdue())
                                                <br><span class="text-danger"><small>Overdue!</small></span>
                                            @endif
                                        </div>
                                    </div>
                                @endif

                                @if($order->canBeReassigned())
                                    <button class="btn btn-warning btn-sm w-100" data-bs-toggle="modal" data-bs-target="#cancelAssignmentModal">
                                        <i class="bi bi-x-circle"></i> Cancel Assignment
                                    </button>
                                @endif
                            @elseif($order->assignedRombongan)
                                <!-- Rombongan Assignment -->
                                <div class="alert alert-success mb-3">
                                    <i class="bi bi-people-fill me-2"></i>
                                    <strong>Tipe: Rombongan (Tim)</strong>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Rombongan:</strong></div>
                                    <div class="col-sm-8">{{ $order->assignedRombongan->name }} ({{ $order->assignedRombongan->code }})</div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Ketua:</strong></div>
                                    <div class="col-sm-8">
                                        {{ $order->assignedRombongan->ketua->name }}
                                        @php
                                            $ketuaTools = $order->assignedRombongan->ketua->inventarisTools->where('status', 'in_use');
                                        @endphp
                                        @if($ketuaTools->count() > 0)
                                            <br><small class="text-success"><i class="bi bi-tools"></i> Tools: {{ $ketuaTools->count() }} item</small>
                                            <ul class="list-unstyled mb-0 mt-1 ms-3">
                                                @foreach($ketuaTools as $tool)
                                                    <li><small>• {{ $tool->name }} ({{ $tool->code }})</small></li>
                                                @endforeach
                                            </ul>
                                        @else
                                            <br><small class="text-muted"><i class="bi bi-x-circle"></i> Tidak ada tools</small>
                                        @endif
                                    </div>
                                </div>
                                @php
                                    // Filter anggota, exclude ketua
                                    $anggotaOnly = $order->assignedRombongan->activeMembers->filter(function($member) use ($order) {
                                        return $member->user_id != $order->assignedRombongan->ketua_id;
                                    });
                                @endphp
                                @if($anggotaOnly->count() > 0)
                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Anggota:</strong></div>
                                        <div class="col-sm-8">
                                            {{ $anggotaOnly->count() }} orang
                                            <br>
                                            @foreach($anggotaOnly as $member)
                                                <div class="mt-2 p-2 bg-light rounded">
                                                    <strong>{{ $member->user->name }}</strong>
                                                    @php
                                                        $memberTools = $member->user->inventarisTools->where('status', 'in_use');
                                                    @endphp
                                                    @if($memberTools->count() > 0)
                                                        <br><small class="text-success"><i class="bi bi-tools"></i> Tools: {{ $memberTools->count() }} item</small>
                                                        <ul class="list-unstyled mb-0 mt-1 ms-3">
                                                            @foreach($memberTools as $tool)
                                                                <li><small>• {{ $tool->name }} ({{ $tool->code }})</small></li>
                                                            @endforeach
                                                        </ul>
                                                    @else
                                                        <br><small class="text-muted"><i class="bi bi-x-circle"></i> Tidak ada tools</small>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                                
                                @if($order->response_deadline)
                                    <div class="row mb-3">
                                        <div class="col-sm-4"><strong>Deadline:</strong></div>
                                        <div class="col-sm-8">
                                            {{ $order->response_deadline->format('d M Y H:i') }}
                                            @if($order->isResponseOverdue())
                                                <br><span class="text-danger"><small>Overdue!</small></span>
                                            @endif
                                        </div>
                                    </div>
                                @endif

                                @if($order->canBeReassigned())
                                    <button class="btn btn-warning btn-sm w-100 mb-2" data-bs-toggle="modal" data-bs-target="#cancelAssignmentModal">
                                        <i class="bi bi-x-circle"></i> Cancel Assignment
                                    </button>
                                @endif
                                
                                @if($order->status === 'accepted' || $order->status === 'in_progress')
                                    <button class="btn btn-danger btn-sm w-100" data-bs-toggle="modal" data-bs-target="#cancelOrderModal">
                                        <i class="bi bi-trash"></i> Cancel Order
                                    </button>
                                @endif
                                
                            @else
                                <!-- No Assignment Yet -->
                                <p class="text-muted mb-3">Order belum di-assign</p>
                @if($order->canBeReassigned())
                    <button class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#assignModal">
                        <i class="bi bi-person-plus"></i> Assign Petugas
                    </button>
                @endif
                            @endif
                        </div>
                    </div>
                @endif
            </div>

            <!-- Order Details -->
            <div class="col-xl-8">
                <div class="card">
                    <div class="card-body pt-3">
                        <!-- Tabs -->
                        <ul class="nav nav-tabs nav-tabs-bordered">
                            <li class="nav-item">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#order-details">
                                    Detail Order
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#client-info">
                                    Info Klien
                                </button>
                            </li>
                            @if($order->status !== 'draft' && $order->status !== 'assigned' && $order->lat_start && $order->lon_start && $order->client_lat && $order->client_lng)
                            <li class="nav-item">
                                <a href="{{ route('orders.route-map', $order->id) }}" class="nav-link" target="_blank">
                                    <i class="bi bi-map"></i> Peta Rute <i class="bi bi-box-arrow-up-right ms-1" style="font-size: 0.8em;"></i>
                                </a>
                            </li>
                            @endif
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#assignment-history">
                                    Riwayat Assignment
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content pt-3">
                            <!-- Order Details Tab -->
                            <div class="tab-pane fade show active" id="order-details">
                                <h5 class="mb-3">{{ $order->title }}</h5>
                                
                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Jenis:</strong></div>
                                    <div class="col-sm-9">
                                        @if($order->type == 'psb')
                                            PSB (Pemasangan Sambungan Baru)
                                        @else
                                            Tiket Umum (Service/Perbaikan)
                                        @endif
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Prioritas:</strong></div>
                                    <div class="col-sm-9">{!! $order->priority_badge !!}</div>
                                </div>

                                @if($order->scheduled_date)
                                    <div class="row mb-3">
                                        <div class="col-sm-3"><strong>Jadwal:</strong></div>
                                        <div class="col-sm-9">{{ $order->scheduled_date->format('d M Y H:i') }}</div>
                                    </div>
                                @endif

                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Dibuat oleh:</strong></div>
                                    <div class="col-sm-9">{{ $order->createdBy->name }}</div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Tanggal dibuat:</strong></div>
                                    <div class="col-sm-9">{{ $order->created_at->format('d M Y H:i') }}</div>
                                </div>

                                @if($order->odp)
                                    <div class="row mb-3">
                                        <div class="col-sm-3"><strong>ODP:</strong></div>
                                        <div class="col-sm-9">{{ $order->odp }}</div>
                                    </div>
                                @endif

                                @if($order->catatan_order)
                                    <div class="row mb-3">
                                        <div class="col-sm-3"><strong>Catatan Order:</strong></div>
                                        <div class="col-sm-9">{{ $order->catatan_order }}</div>
                                    </div>
                                @endif

                                <hr>
                                
                                <!-- Info Mitra (Opsional) -->
                                @if($order->mitra_id && $order->mitra)
                                <h6><i class="bi bi-people"></i> Info Mitra:</h6>
                                <div class="border rounded p-3 mb-3 bg-light">
                                    <div class="row mb-2">
                                        <div class="col-sm-3"><strong>Nama Mitra:</strong></div>
                                        <div class="col-sm-9">{{ $order->mitra->nama }}</div>
                                    </div>
                                    @if($order->mitra->no_telp)
                                    <div class="row mb-2">
                                        <div class="col-sm-3"><strong>No. Telepon:</strong></div>
                                        <div class="col-sm-9">
                                            <a href="tel:{{ $order->mitra->no_telp }}">{{ $order->mitra->no_telp }}</a>
                                        </div>
                                    </div>
                                    @endif
                                    @if($order->mitra->alamat)
                                    <div class="row mb-2">
                                        <div class="col-sm-3"><strong>Alamat:</strong></div>
                                        <div class="col-sm-9">{{ $order->mitra->alamat }}</div>
                                    </div>
                                    @endif
                                    @if($order->mitra->foto)
                                    <div class="row">
                                        <div class="col-sm-3"><strong>Foto:</strong></div>
                                        <div class="col-sm-9">
                                            <img src="{{ asset('uploads/' . $order->mitra->foto) }}" 
                                                 alt="Foto {{ $order->mitra->nama }}" 
                                                 class="img-thumbnail"
                                                 style="max-width: 150px; max-height: 150px; object-fit: cover;">
                                        </div>
                                    </div>
                                    @endif
                                </div>
                                <hr>
                                @endif

                                <!-- foto check in and lokasi (lat lon) check in foto -->
                                <h6>Foto dan Lokasi Check-In: <small class="text-muted">(Opsional)</small></h6>
                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Foto Check-In:</strong></div>
                                    <div class="col-sm-9">
                                        @if($order->foto_check_in)
                                            <div class="position-relative d-inline-block">
                                                <a href="{{ asset('uploads/check_in/' . $order->id . '/' . $order->foto_check_in) }}" target="_blank">
                                                    <img src="{{ asset('uploads/check_in/' . $order->id . '/' . $order->foto_check_in) }}" class="img-fluid img-thumbnail" alt="Foto Check-In" style="max-width: 200px;">
                                                </a>
                                                @if(auth()->user()->role === 'admin')
                                                <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" onclick="confirmDeleteImage('foto_check_in', 'Foto Check-In')" title="Hapus Gambar">
                                                    <i class="bi bi-x-circle"></i>
                                                </button>
                                                @endif
                                            </div>
                                        @else
                                            <span class="text-muted">No Image</span>
                                        @endif 
                                    </div>
                                </div>
                                
                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Waktu Check-In:</strong></div>
                                    <div class="col-sm-9">
                                        {{ $order->check_in_date ? $order->check_in_date->format('d M Y') : '-' }} 
                                        {{ $order->check_in_time ? $order->check_in_time->format('H:i') : '-' }}
                                    </div>
                                </div>
                                
                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Lokasi Check-In:</strong></div>
                                    <div class="col-sm-9">
                                        @if($order->lat_check_in && $order->lon_check_in)
                                            Latitude: {{ $order->lat_check_in }}, Longitude: {{ $order->lon_check_in }}<br>
                                            <a href="https://www.google.com/maps?q={{ $order->lat_check_in }},{{ $order->lon_check_in }}" target="_blank" class="btn btn-sm btn-outline-primary mt-2">
                                                <i class="bi bi-geo-alt"></i> Lihat di Google Maps
                                            </a>
                                        @else
                                            <span class="text-muted">No Location</span>
                                        @endif
                                    </div>
                                </div>

                                <hr>
                                <h6>Deskripsi Pekerjaan:</h6>
                                <p>{{ $order->description }}</p>

                                @if($order->info_foto1 || $order->info_foto2 || $order->info_file1 || $order->info_file2)
                                    <hr>
                                    <h6>Info untuk Teknisi:</h6>
                                    <div class="row">
                                        @if($order->info_foto1)
                                            <div class="col-md-6 mb-3">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <br>
                                                        <h6 class="card-subtitle mb-2 text-muted">
                                                            {{ $order->label_info_foto1 ?? 'Foto Referensi 1' }}
                                                        </h6>
                                                        <div class="position-relative d-inline-block">
                                                            <a href="{{ asset($order->info_foto1) }}" target="_blank" data-lightbox="info-photos" data-title="{{ $order->label_info_foto1 ?? 'Foto Referensi 1' }}">
                                                                <img src="{{ asset($order->info_foto1) }}" class="img-fluid img-thumbnail" alt="Info Foto 1" style="max-height: 200px;">
                                                            </a>
                                                            @if(auth()->user()->role === 'admin')
                                                            <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" onclick="confirmDeleteImage('info_foto1', 'Foto Referensi 1')" title="Hapus Gambar">
                                                                <i class="bi bi-x-circle"></i>
                                                            </button>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        @if($order->info_foto2)
                                            <div class="col-md-6 mb-3">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <br>
                                                        <h6 class="card-subtitle mb-2 text-muted">
                                                            {{ $order->label_info_foto2 ?? 'Foto Referensi 2' }}
                                                        </h6>
                                                        <div class="position-relative d-inline-block">
                                                            <a href="{{ asset($order->info_foto2) }}" target="_blank" data-lightbox="info-photos" data-title="{{ $order->label_info_foto2 ?? 'Foto Referensi 2' }}">
                                                                <img src="{{ asset($order->info_foto2) }}" class="img-fluid img-thumbnail" alt="Info Foto 2" style="max-height: 200px;">
                                                            </a>
                                                            @if(auth()->user()->role === 'admin')
                                                            <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" onclick="confirmDeleteImage('info_foto2', 'Foto Referensi 2')" title="Hapus Gambar">
                                                                <i class="bi bi-x-circle"></i>
                                                            </button>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        @if($order->info_file1)
                                            <div class="col-md-6 mb-3">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <br>
                                                        <h6 class="card-subtitle mb-2 text-muted">
                                                            {{ $order->label_info_file1 ?? 'Dokumen Referensi 1' }}
                                                        </h6>
                                                        <a href="{{ asset($order->info_file1) }}" target="_blank" class="btn btn-primary btn-sm">
                                                            <i class="bi bi-file-pdf"></i> Lihat PDF
                                                        </a>
                                                        <a href="{{ asset($order->info_file1) }}" download class="btn btn-secondary btn-sm">
                                                            <i class="bi bi-download"></i> Download
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        @if($order->info_file2)
                                            <div class="col-md-6 mb-3">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <br>
                                                        <h6 class="card-subtitle mb-2 text-muted">
                                                            {{ $order->label_info_file2 ?? 'Dokumen Referensi 2' }}
                                                        </h6>
                                                        <a href="{{ asset($order->info_file2) }}" target="_blank" class="btn btn-primary btn-sm">
                                                            <i class="bi bi-file-pdf"></i> Lihat PDF
                                                        </a>
                                                        <a href="{{ asset($order->info_file2) }}" download class="btn btn-secondary btn-sm">
                                                            <i class="bi bi-download"></i> Download
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                @endif 

                                @if($order->admin_notes)
                                    <hr>
                                    <h6>Catatan Admin:</h6>
                                    <div class="alert alert-info"><pre>{{ $order->admin_notes }}</pre></div>
                                @endif

                                @if($order->notes)
                                    <hr>
                                    <h6>Catatan Teknisi:</h6>
                                    <div class="alert alert-info"><pre>{{ $order->notes }}</pre></div>
                                @endif

                                <hr>
                                
                                {{-- Dynamic Result Photos --}}
                                @php
                                    $instalasiPhotos = $order->resultPhotos->where('category', 'instalasi');
                                    $snPerangkatPhotos = $order->resultPhotos->where('category', 'sn_perangkat');
                                @endphp

                                @if($instalasiPhotos->count() > 0 || $snPerangkatPhotos->count() > 0)
                                    <div class="mb-4">
                                        <h6 class="text-primary mb-3">Foto Hasil Pekerjaan :</h6>
                                        
                                        {{-- Instalasi Photos --}}
                                        @if($instalasiPhotos->count() > 0)
                                            <div class="mb-3">
                                                <strong class="d-block mb-2">Foto Instalasi:</strong>
                                                <div class="row">
                                                    @foreach($instalasiPhotos as $photo)
                                                        <div class="col-md-3 mb-3">
                                                            <div class="card position-relative">
                                                                <a href="{{ asset('uploads/completion/' . $order->id . '/' . $photo->file_name) }}" target="_blank">
                                                                    <img src="{{ asset('uploads/completion/' . $order->id . '/' . $photo->file_name) }}" 
                                                                         class="card-img-top" 
                                                                         alt="{{ $photo->title }}"
                                                                         style="height: 200px; object-fit: cover;">
                                                                </a>
                                                                @if(auth()->user()->role === 'admin')
                                                                <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" 
                                                                        onclick="confirmDeleteResultPhoto({{ $photo->id }}, '{{ $photo->title ?? 'Foto Instalasi' }}')" 
                                                                        title="Hapus Gambar">
                                                                    <i class="bi bi-x-circle"></i>
                                                                </button>
                                                                @endif
                                                                @if($photo->title)
                                                                    <div class="card-body p-2">
                                                                        <small class="text-muted">{{ $photo->title }}</small>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif

                                        {{-- SN Perangkat Photos --}}
                                        @if($snPerangkatPhotos->count() > 0)
                                            <div class="mb-3">
                                                <strong class="d-block mb-2">Foto Serial Number Perangkat:</strong>
                                                <div class="row">
                                                    @foreach($snPerangkatPhotos as $photo)
                                                        <div class="col-md-3 mb-3">
                                                            <div class="card position-relative">
                                                                <a href="{{ asset('uploads/completion/' . $order->id . '/' . $photo->file_name) }}" target="_blank">
                                                                    <img src="{{ asset('uploads/completion/' . $order->id . '/' . $photo->file_name) }}" 
                                                                         class="card-img-top" 
                                                                         alt="{{ $photo->title }}"
                                                                         style="height: 200px; object-fit: cover;">
                                                                </a>
                                                                @if(auth()->user()->role === 'admin')
                                                                <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" 
                                                                        onclick="confirmDeleteResultPhoto({{ $photo->id }}, '{{ $photo->title ?? 'Foto SN Perangkat' }}')" 
                                                                        title="Hapus Gambar">
                                                                    <i class="bi bi-x-circle"></i>
                                                                </button>
                                                                @endif
                                                                @if($photo->title)
                                                                    <div class="card-body p-2">
                                                                        <small class="text-muted">{{ $photo->title }}</small>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                    <hr>
                                @endif 

                                <h6>Foto dan Lokasi Check-Out:</h6>
                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Foto Check-Out:</strong></div>
                                    <div class="col-sm-9">
                                        @if($order->foto_check_out)
                                            <div class="position-relative d-inline-block">
                                                <a href="{{ asset('uploads/check_out/' . $order->id . '/' . $order->foto_check_out) }}" target="_blank">
                                                    <img src="{{ asset('uploads/check_out/' . $order->id . '/' . $order->foto_check_out) }}" class="img-fluid img-thumbnail" alt="Foto Check-Out" style="max-width: 200px;">
                                                </a>
                                                @if(auth()->user()->role === 'admin')
                                                <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" onclick="confirmDeleteImage('foto_check_out', 'Foto Check-Out')" title="Hapus Gambar">
                                                    <i class="bi bi-x-circle"></i>
                                                </button>
                                                @endif
                                            </div>
                                        @else
                                            <span class="text-muted">No Image</span>
                                        @endif
                                    </div>
                                </div>
                                
                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Waktu Check-Out:</strong></div>
                                    <div class="col-sm-9">
                                        {{ $order->check_out_date ? $order->check_out_date->format('d M Y') : '-' }} 
                                        {{ $order->check_out_time ? $order->check_out_time->format('H:i') : '-' }}
                                    </div>
                                </div>
                                
                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Lokasi Check-Out:</strong></div>
                                    <div class="col-sm-9">
                                        @if($order->lat_check_out && $order->lon_check_out)
                                            Latitude: {{ $order->lat_check_out }}, Longitude: {{ $order->lon_check_out }}<br>
                                            <a href="https://www.google.com/maps?q={{ $order->lat_check_out }},{{ $order->lon_check_out }}" target="_blank" class="btn btn-sm btn-outline-primary mt-2">
                                                <i class="bi bi-geo-alt"></i> Lihat di Google Maps
                                            </a>
                                        @else
                                            <span class="text-muted">No Location</span>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Client Info Tab -->
                            <div class="tab-pane fade" id="client-info">
                                <h5 class="mb-3">Informasi Klien</h5>
                                
                                @if($order->customer)
                                    <div class="alert alert-info">
                                        <i class="bi bi-info-circle"></i> Data dari Customer: <strong>{{ $order->customer->name }}</strong>
                                    </div>
                                @endif
                                
                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Nama:</strong></div>
                                    <div class="col-sm-9">
                                        {{ $order->client_name }}
                                        @if($order->customer && $order->customer->name != $order->client_name)
                                            <br><small class="text-muted">(Customer: {{ $order->customer->name }})</small>
                                        @endif
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Telepon:</strong></div>
                                    <div class="col-sm-9">
                                        <a href="tel:{{ $order->client_phone }}">{{ $order->client_phone }}</a>
                                        @if($order->customer && $order->customer->phone && $order->customer->phone != $order->client_phone)
                                            <br><small class="text-muted">(Customer: {{ $order->customer->phone }})</small>
                                        @endif
                                    </div>
                                </div>

                                @if($order->client_email)
                                    <div class="row mb-3">
                                        <div class="col-sm-3"><strong>Email:</strong></div>
                                        <div class="col-sm-9">
                                            <a href="mailto:{{ $order->client_email }}">{{ $order->client_email }}</a>
                                            @if($order->customer && $order->customer->email && $order->customer->email != $order->client_email)
                                                <br><small class="text-muted">(Customer: {{ $order->customer->email }})</small>
                                            @endif
                                        </div>
                                    </div>
                                @endif

                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Alamat:</strong></div>
                                    <div class="col-sm-9">
                                        {{ $order->client_address }}
                                        @if($order->customer && $order->customer->address && $order->customer->address != $order->client_address)
                                            <br><small class="text-muted">(Customer: {{ $order->customer->address }})</small>
                                        @endif
                                    </div>
                                </div>

                                @if($order->client_lat && $order->client_lng)
                                    <div class="row mb-3">
                                        <div class="col-sm-3"><strong>Koordinat:</strong></div>
                                        <div class="col-sm-9">
                                            {{ $order->client_lat }}, {{ $order->client_lng }}
                                            <br>
                                            <a href="https://www.google.com/maps?q={{ $order->client_lat }},{{ $order->client_lng }}" 
                                               target="_blank" class="btn btn-sm btn-outline-primary mt-1">
                                                <i class="bi bi-geo-alt"></i> Buka di Google Maps
                                            </a>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <!-- Assignment History Tab -->
                            <div class="tab-pane fade" id="assignment-history">
                                <h5 class="mb-3">Riwayat Assignment</h5>
                                
                                @if($order->assignments->count() > 0)
                                    <div class="timeline">
                                        @foreach($order->assignments as $assignment)
                                            <div class="timeline-item">
                                                <div class="timeline-content">
                                                    <div class="d-flex justify-content-between align-items-start">
                                                        <div>
                                                            <h6 class="mb-1">
                                                                {{ $assignment->teknisi->name }}
                                                                {!! $assignment->status_badge !!}
                                                            </h6>
                                                            @if($assignment->teknisi->categoryJasa)
                                                                <small class="text-muted d-block mb-1">
                                                                    <i class="bi bi-briefcase"></i> {{ $assignment->teknisi->categoryJasa->name }}
                                                                </small>
                                                            @endif
                                                            <p class="mb-1">
                                                                <small class="text-muted">
                                                                    Assigned oleh {{ $assignment->assignedBy->name }}
                                                                    pada {{ $assignment->assigned_at->format('d M Y H:i') }}
                                                                </small>
                                                            </p>
                                                            @if($assignment->kendaraan)
                                                                <p class="mb-1">
                                                                    <small>
                                                                        <i class="bi bi-car-front"></i> 
                                                                        {{ $assignment->kendaraan->merk }} {{ $assignment->kendaraan->type }}
                                                                        ({{ $assignment->kendaraan->plat_no }})
                                                                    </small>
                                                                </p>
                                                            @endif
                                                            @if($assignment->response_note)
                                                                <p class="mb-0">
                                                                    <small><strong>Note:</strong> {{ $assignment->response_note }}</small>
                                                                </p>
                                                            @endif
                                                            @if($assignment->cancel_reason)
                                                                <p class="mb-0">
                                                                    <small><strong>Cancel Reason:</strong> {{ $assignment->cancel_reason }}</small>
                                                                </p>
                                                            @endif
                                                        </div>
                                                        <small class="text-muted">{{ $assignment->created_at->diffForHumans() }}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <p class="text-muted">Belum ada riwayat assignment</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                            <a href="{{ route('orders.index') }}" class="btn btn-secondary mb-2">
                                <i class="bi bi-arrow-left"></i> Kembali ke Daftar
                            </a>
                            
                            <div class="mb-2">
                                <!-- Link Mitra Button -->
                                <button class="btn btn-info me-2" data-bs-toggle="modal" data-bs-target="#mitraLinkModal">
                                    <i class="bi bi-link-45deg"></i> Link untuk Mitra
                                </button>
                                
                                @if($order->status === 'draft')
                                    <a href="{{ route('orders.edit', $order->id) }}" class="btn btn-warning me-2">
                                        <i class="bi bi-pencil"></i> Edit
                                    </a>
                                @endif
                                
                                @if($order->canBeReassigned() && !$order->assignedTeknisi)
                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#assignModal">
                                        <i class="bi bi-person-plus"></i> Assign Teknisi
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Assign Modal -->
    <div class="modal fade" id="assignModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form action="{{ route('orders.assign', $order->id) }}" method="POST" id="assignForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Assign Order ke Petugas</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <!-- Pilih Tipe Petugas -->
                        <div class="mb-4">
                            <label class="form-label">Tipe Petugas <span class="text-danger">*</span></label>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card border h-100">
                                        <div class="card-body text-center">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="tipe_petugas" id="modal_tipe_individu" value="individu" checked required>
                                                <label class="form-check-label w-100" for="modal_tipe_individu">
                                                    <div class="mt-2">
                                                        <i class="bi bi-person-circle display-6 text-primary"></i>
                                                        <h6 class="mt-2">Teknisi Individu</h6>
                                                        <small class="text-muted">Assign ke 1 teknisi</small>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card border h-100">
                                        <div class="card-body text-center">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="tipe_petugas" id="modal_tipe_rombongan" value="rombongan" required>
                                                <label class="form-check-label w-100" for="modal_tipe_rombongan">
                                                    <div class="mt-2">
                                                        <i class="bi bi-people-fill display-6 text-success"></i>
                                                        <h6 class="mt-2">Rombongan</h6>
                                                        <small class="text-muted">Assign ke tim teknisi</small>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Assignment Section -->
                        <div id="modal_assignment_section">
                            <!-- Individual Assignment -->
                            <div id="modal_individu_assignment" class="assignment-section">
                                <div class="mb-3">
                                    <label for="teknisi_id" class="form-label">Pilih Teknisi <span class="text-danger">*</span></label>
                                    
                                    <!-- Search Box for Teknisi -->
                                    <div class="input-group mb-2">
                                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                                        <input type="text" class="form-control" id="search_teknisi" placeholder="Cari teknisi (nama, jasa, nomor HP)..." autocomplete="off">
                                    </div>
                                    
                                    <select name="teknisi_id" id="teknisi_id" class="form-control" size="8">
                                        <option value="">Pilih Teknisi...</option>
                                        @foreach($teknisis as $teknisi) 
                                            <option value="{{ $teknisi->id }}" data-name="{{ strtolower($teknisi->name) }}" data-jasa="{{ strtolower($teknisi->nama_jasa ?? '') }}" data-phone="{{ $teknisi->phone ?? '' }}">
                                                {{ $teknisi->name }}{{ $teknisi->nama_jasa ? ' - ' . $teknisi->nama_jasa : '' }}{{ $teknisi->phone ? ' - ' . $teknisi->phone : '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted">
                                        <strong>Total teknisi tersedia: <span id="teknisi_count">{{ $teknisis->count() }}</span></strong>
                                        @if($teknisis->count() == 0)
                                            <span class="text-danger"> - Tidak ada teknisi aktif!</span>
                                        @endif
                                    </small>
                                </div>

                                <div class="mb-3">
                                    <label for="kendaraan_id" class="form-label">Pilih Kendaraan</label>
                                    <select name="kendaraan_id" id="kendaraan_id" class="form-control">
                                        <option value="">Tidak menggunakan kendaraan</option>
                                        @foreach($kendaraans as $kendaraan)
                                            <option value="{{ $kendaraan->id }}">
                                                {{ $kendaraan->merk }} {{ $kendaraan->type }} - {{ $kendaraan->plat_no }}
                                                @if($kendaraan->user)
                                                    (Assigned: {{ $kendaraan->user->name }})
                                                @else
                                                    (Ready)
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted">Opsional - Kendaraan yang akan digunakan teknisi</small>
                                </div>
                            </div>

                            <!-- Rombongan Assignment -->
                            <div id="modal_rombongan_assignment" class="assignment-section" style="display: none;">
                                <div class="mb-3">
                                    <label for="rombongan_id" class="form-label">Pilih Rombongan <span class="text-danger">*</span></label>
                                    
                                    <!-- Search Box for Rombongan -->
                                    <div class="input-group mb-2">
                                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                                        <input type="text" class="form-control" id="search_rombongan" placeholder="Cari rombongan (nama rombongan, ketua, anggota)..." autocomplete="off">
                                    </div>
                                    
                                    <select name="rombongan_id" id="rombongan_id" class="form-control" size="8">
                                        <option value="">Pilih Rombongan...</option>
                                        @foreach($rombongans as $rombongan)
                                            <option value="{{ $rombongan->id }}" 
                                                data-name="{{ strtolower($rombongan->name) }}" 
                                                data-code="{{ strtolower($rombongan->code) }}" 
                                                data-ketua="{{ strtolower($rombongan->ketua->name) }}"
                                                data-members="{{ strtolower($rombongan->activeMembers->pluck('user.name')->implode(' ')) }}">
                                                {{ $rombongan->name }} ({{ $rombongan->code }}) - Ketua: {{ $rombongan->ketua->name }}
                                                - {{ $rombongan->activeMembers->count() }}/{{ $rombongan->max_members }} anggota
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted">
                                        <strong>Total rombongan tersedia: <span id="rombongan_count">{{ $rombongans->count() }}</span></strong>
                                        @if($rombongans->count() == 0)
                                            <span class="text-danger"> - Tidak ada rombongan aktif!</span>
                                        @endif
                                    </small>
                                </div>

                                <div class="mb-3">
                                    <label for="rombongan_kendaraan_id" class="form-label">Pilih Kendaraan</label>
                                    <select name="kendaraan_id" id="rombongan_kendaraan_id" class="form-control">
                                        <option value="">Tidak menggunakan kendaraan</option>
                                        @foreach($kendaraans as $kendaraan)
                                            <option value="{{ $kendaraan->id }}">
                                                {{ $kendaraan->merk }} {{ $kendaraan->type }} - {{ $kendaraan->plat_no }}
                                                @if($kendaraan->user)
                                                    (Assigned: {{ $kendaraan->user->name }})
                                                @else
                                                    (Ready)
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted">Opsional - Kendaraan yang akan digunakan rombongan</small>
                                </div>
                            </div>
                        </div>

                        <!-- Response Deadline - Always visible -->
                        <div class="mb-3 border rounded p-3 bg-light">
                            <label for="response_minutes" class="form-label fw-bold">
                                <i class="bi bi-clock text-warning"></i>
                                Batas Waktu Response <span class="text-danger">*</span>
                            </label>
                            <select name="response_minutes" id="response_minutes" class="form-control" required>
                                <option value="">Pilih batas waktu response...</option>
                                @foreach($responseDeadlines as $deadline)
                                    <option value="{{ $deadline->duration_minutes }}">
                                        {{ $deadline->name }} ({{ $deadline->formatted_duration }})
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted">
                                <i class="bi bi-info-circle"></i>
                                Teknisi harus merespons dalam waktu yang ditentukan
                                @if($responseDeadlines->count() == 0)
                                    <br><span class="text-warning">
                                        <i class="bi bi-exclamation-triangle"></i> 
                                        Belum ada setting deadline. 
                                        <a href="{{ route('response-deadline-settings.index') }}" target="_blank">Kelola Settings</a>
                                    </span>
                                @endif
                            </small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Assign Order</button>
                    </div>
                </form>
                
                <!-- Inline script to handle assignment display - GUARANTEED TO RUN -->
                <script>
                (function() {
                    console.log('INLINE SCRIPT RUNNING');
                    
                    function toggleAssignment() {
                        const individuRadio = document.getElementById('modal_tipe_individu');
                        const rombonganRadio = document.getElementById('modal_tipe_rombongan');
                        const individuSection = document.getElementById('modal_individu_assignment');
                        const rombonganSection = document.getElementById('modal_rombongan_assignment');
                        
                        // Get input fields
                        const teknisiSelect = document.getElementById('teknisi_id');
                        const kendaraanSelect = document.getElementById('kendaraan_id');
                        const rombonganSelect = document.getElementById('rombongan_id');
                        const rombonganKendaraanSelect = document.getElementById('rombongan_kendaraan_id');
                        
                        console.log('Toggle function called');
                        console.log('Individu checked:', individuRadio?.checked);
                        console.log('Rombongan checked:', rombonganRadio?.checked);
                        
                        if (individuRadio?.checked) {
                            if (individuSection) {
                                individuSection.style.display = 'block';
                                console.log('Showing individu section');
                            }
                            if (rombonganSection) {
                                rombonganSection.style.display = 'none';
                                console.log('Hiding rombongan section');
                            }
                            
                            // Enable individu fields, disable rombongan fields
                            if (teknisiSelect) teknisiSelect.disabled = false;
                            if (kendaraanSelect) kendaraanSelect.disabled = false;
                            if (rombonganSelect) rombonganSelect.disabled = true;
                            if (rombonganKendaraanSelect) rombonganKendaraanSelect.disabled = true;
                        } else if (rombonganRadio?.checked) {
                            if (individuSection) {
                                individuSection.style.display = 'none';
                                console.log('Hiding individu section');
                            }
                            if (rombonganSection) {
                                rombonganSection.style.display = 'block';
                                console.log('Showing rombongan section');
                            }
                            
                            // Disable individu fields, enable rombongan fields
                            if (teknisiSelect) teknisiSelect.disabled = true;
                            if (kendaraanSelect) kendaraanSelect.disabled = true;
                            if (rombonganSelect) rombonganSelect.disabled = false;
                            if (rombonganKendaraanSelect) rombonganKendaraanSelect.disabled = false;
                        }
                    }
                    
                    // Attach to radios
                    const individuRadio = document.getElementById('modal_tipe_individu');
                    const rombonganRadio = document.getElementById('modal_tipe_rombongan');
                    
                    if (individuRadio) {
                        individuRadio.addEventListener('change', toggleAssignment);
                        individuRadio.addEventListener('click', toggleAssignment);
                    }
                    
                    if (rombonganRadio) {
                        rombonganRadio.addEventListener('change', toggleAssignment);
                        rombonganRadio.addEventListener('click', toggleAssignment);
                    }
                    
                    // Initial call
                    console.log('Calling initial toggle');
                    toggleAssignment();
                })();
                </script>
            </div>
        </div>
    </div>

    <!-- Cancel Assignment Modal -->
    <div class="modal fade" id="cancelAssignmentModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('orders.cancel-assignment', $order->id) }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Cancel Assignment</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p>Apakah Anda yakin ingin membatalkan assignment order ini?</p>
                        
                        <div class="mb-3">
                            <label for="cancel_reason" class="form-label">Alasan Pembatalan <span class="text-danger">*</span></label>
                            <textarea name="cancel_reason" id="cancel_reason" class="form-control" 
                                      rows="3" placeholder="Jelaskan alasan pembatalan assignment" required></textarea>
                        </div>
                        
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle"></i>
                            <strong>Perhatian:</strong> Order akan kembali ke status draft dan bisa di-assign ke teknisi lain.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-warning">Ya, Cancel Assignment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>



    <script>
    // Search functionality for Teknisi (Individual)
    document.getElementById('search_teknisi').addEventListener('input', function(e) {
        const searchTerm = e.target.value.toLowerCase();
        const select = document.getElementById('teknisi_id');
        const options = select.querySelectorAll('option');
        let visibleCount = 0;
        
        options.forEach(option => {
            if (option.value === '') {
                option.style.display = 'block';
                return;
            }
            
            const name = option.getAttribute('data-name') || '';
            const jasa = option.getAttribute('data-jasa') || '';
            const phone = option.getAttribute('data-phone') || '';
            
            const matches = name.includes(searchTerm) || 
                          jasa.includes(searchTerm) || 
                          phone.includes(searchTerm);
            
            option.style.display = matches ? 'block' : 'none';
            if (matches) visibleCount++;
        });
        
        document.getElementById('teknisi_count').textContent = visibleCount;
    });

    // Search functionality for Rombongan
    document.getElementById('search_rombongan').addEventListener('input', function(e) {
        const searchTerm = e.target.value.toLowerCase();
        const select = document.getElementById('rombongan_id');
        const options = select.querySelectorAll('option');
        let visibleCount = 0;
        
        options.forEach(option => {
            if (option.value === '') {
                option.style.display = 'block';
                return;
            }
            
            const name = option.getAttribute('data-name') || '';
            const code = option.getAttribute('data-code') || '';
            const ketua = option.getAttribute('data-ketua') || '';
            const members = option.getAttribute('data-members') || '';
            
            const matches = name.includes(searchTerm) || 
                          code.includes(searchTerm) || 
                          ketua.includes(searchTerm) ||
                          members.includes(searchTerm);
            
            option.style.display = matches ? 'block' : 'none';
            if (matches) visibleCount++;
        });
        
        document.getElementById('rombongan_count').textContent = visibleCount;
    });

    // Clear search when switching assignment type
    document.querySelectorAll('input[name="tipe_petugas"]').forEach(radio => {
        radio.addEventListener('change', function() {
            document.getElementById('search_teknisi').value = '';
            document.getElementById('search_rombongan').value = '';
            
            // Reset all options to visible
            document.querySelectorAll('#teknisi_id option').forEach(opt => opt.style.display = 'block');
            document.querySelectorAll('#rombongan_id option').forEach(opt => opt.style.display = 'block');
            
            // Reset counters
            document.getElementById('teknisi_count').textContent = {{ $teknisis->count() }};
            document.getElementById('rombongan_count').textContent = {{ $rombongans->count() }};
        });
    });
    </script>

    <!-- Cancel Order Modal (for Accepted status) -->
    <div class="modal fade" id="cancelOrderModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('orders.cancel-order', $order->id) }}" method="POST">
                    @csrf
                    <div class="modal-header bg-danger text-white">
                        <h5 class="modal-title">
                            <i class="bi bi-exclamation-triangle-fill"></i> Cancel Order
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning">
                            <strong><i class="bi bi-info-circle"></i> Perhatian:</strong>
                            <ul class="mb-0 mt-2">
                                <li>Order akan kembali ke status <strong>Draft</strong></li>
                                <li>Teknisi akan di-unassign</li>
                                <li>Kendaraan akan dikembalikan ke pool (jika ada)</li>
                                <li>Order bisa di-assign ulang ke teknisi lain</li>
                            </ul>
                        </div>
                        
                        <p class="mb-3">Apakah Anda yakin ingin membatalkan order ini?</p>
                        
                        <div class="mb-3">
                            <label for="cancel_order_reason" class="form-label">
                                Alasan Pembatalan <span class="text-danger">*</span>
                            </label>
                            <textarea name="cancel_reason" id="cancel_order_reason" class="form-control" 
                                      rows="3" placeholder="Jelaskan alasan pembatalan order..." required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="bi bi-x"></i> Tidak, Batal
                        </button>
                        <button type="submit" class="btn btn-danger">
                            <i class="bi bi-check-circle"></i> Ya, Cancel Order
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Mitra Link Modal -->
    <div class="modal fade" id="mitraLinkModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title"><i class="bi bi-link-45deg"></i> Link untuk Mitra</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-3">
                        <i class="bi bi-info-circle"></i> Generate link khusus untuk mitra agar dapat melihat progress pengerjaan order tanpa perlu login.
                    </p>
                    
                    @if($order->mitra_token)
                        <!-- Link sudah ada -->
                        <div id="linkContainer">
                            <label class="form-label">Link Mitra:</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="mitraLinkInput" 
                                       value="{{ route('mitra.order.view', ['token' => $order->mitra_token]) }}" readonly>
                                <button class="btn btn-primary" type="button" id="copyLinkBtn" onclick="copyMitraLink()">
                                    <i class="bi bi-clipboard"></i> Copy
                                </button>
                            </div>
                            <small class="text-muted">
                                <i class="bi bi-shield-check"></i> Link ini aman dan hanya dapat diakses dengan token unik.
                            </small>
                        </div>
                    @else
                        <!-- Belum ada link -->
                        <button class="btn btn-info w-100" id="generateLinkBtn" onclick="generateMitraLink()">
                            <i class="bi bi-plus-circle"></i> Generate Link Mitra
                        </button>
                        
                        <div id="linkContainer" style="display: none;">
                            <label class="form-label">Link Mitra:</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="mitraLinkInput" readonly>
                                <button class="btn btn-primary" type="button" id="copyLinkBtn" onclick="copyMitraLink()">
                                    <i class="bi bi-clipboard"></i> Copy
                                </button>
                            </div>
                            <small class="text-muted">
                                <i class="bi bi-shield-check"></i> Link ini aman dan hanya dapat diakses dengan token unik.
                            </small>
                        </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<style>
.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline-item {
    position: relative;
    padding: 15px 0;
    border-left: 2px solid #e9ecef;
    margin-left: 15px;
    padding-left: 30px;
}

.timeline-item.completed {
    border-left-color: #28a745;
}

.timeline-item.active {
    border-left-color: #007bff;
}

.timeline-item i {
    position: absolute;
    left: -10px;
    top: 18px;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 50%;
    padding: 3px;
    color: #6c757d;
}

.timeline-item.completed i {
    border-color: #28a745;
    color: #28a745;
}

.timeline-item.active i {
    border-color: #007bff;
    color: #007bff;
}

.timeline-content {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin-top: 10px;
}

/* Ensure response_minutes field is always visible and accessible */
#response_minutes {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
</style>

<script>
// ============================================
// DELETE IMAGE FUNCTIONS - GLOBAL SCOPE
// ============================================
console.log('Loading delete image functions...');

// Delete main order images (foto_check_in, foto_check_out, info_foto1, info_foto2)
window.confirmDeleteImage = function(imageField, imageName) {
    console.log('confirmDeleteImage called with:', imageField, imageName);
    
    if (confirm('Apakah Anda yakin ingin menghapus ' + imageName + '?\n\nFile akan dihapus secara permanen dari server!')) {
        // Show loading
        const btn = event.target.closest('button');
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
        }
        
        // Send delete request
        fetch('{{ route("orders.delete-image", $order->id) }}', {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                image_field: imageField
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Gambar berhasil dihapus!');
                location.reload();
            } else {
                alert('Gagal menghapus gambar: ' + data.message);
                if (btn) {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="bi bi-x-circle"></i>';
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat menghapus gambar');
            if (btn) {
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-x-circle"></i>';
            }
        });
    }
};

// Delete result photos (instalasi, sn_perangkat)
window.confirmDeleteResultPhoto = function(photoId, photoTitle) {
    console.log('confirmDeleteResultPhoto called with:', photoId, photoTitle);
    
    if (confirm('Apakah Anda yakin ingin menghapus ' + photoTitle + '?\n\nFile akan dihapus secara permanen dari server!')) {
        // Show loading
        const btn = event.target.closest('button');
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
        }
        
        // Send delete request
        fetch('/admin/orders/result-photos/' + photoId, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Foto berhasil dihapus!');
                location.reload();
            } else {
                alert('Gagal menghapus foto: ' + data.message);
                if (btn) {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="bi bi-x-circle"></i>';
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat menghapus foto');
            if (btn) {
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-x-circle"></i>';
            }
        });
    }
};

console.log('Delete image functions loaded successfully');
console.log('confirmDeleteImage available:', typeof window.confirmDeleteImage);
console.log('confirmDeleteResultPhoto available:', typeof window.confirmDeleteResultPhoto);
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM Content Loaded - Starting assignment modal setup');
    
    // Handle tipe petugas selection in modal
    const tipePetugasRadios = document.querySelectorAll('input[name="tipe_petugas"]');
    const assignmentSection = document.getElementById('modal_assignment_section');
    const individuAssignment = document.getElementById('modal_individu_assignment');
    const rombonganAssignment = document.getElementById('modal_rombongan_assignment');
    const assignForm = document.getElementById('assignForm');
    
    console.log('Elements found:', {
        radios: tipePetugasRadios.length,
        assignmentSection: assignmentSection ? 'YES' : 'NO',
        individuAssignment: individuAssignment ? 'YES' : 'NO',
        rombonganAssignment: rombonganAssignment ? 'YES' : 'NO'
    });
    
    // Function to show/hide assignment sections
    function updateAssignmentDisplay(tipePetugas) {
        console.log('updateAssignmentDisplay called with:', tipePetugas);
        
        if (!assignmentSection || !individuAssignment || !rombonganAssignment) {
            console.error('Required elements not found!');
            return;
        }
        
        // Show parent section
        assignmentSection.style.display = 'block';
        assignmentSection.style.visibility = 'visible';
        
        // Hide all child sections first
        individuAssignment.style.display = 'none';
        rombonganAssignment.style.display = 'none';
        
        // Show appropriate section
        if (tipePetugas === 'individu') {
            individuAssignment.style.display = 'block';
            individuAssignment.style.visibility = 'visible';
            document.getElementById('teknisi_id').required = true;
            document.getElementById('rombongan_id').required = false;
            console.log('Individual assignment shown');
        } else if (tipePetugas === 'rombongan') {
            rombonganAssignment.style.display = 'block';
            rombonganAssignment.style.visibility = 'visible';
            document.getElementById('teknisi_id').required = false;
            document.getElementById('rombongan_id').required = true;
            console.log('Rombongan assignment shown');
        }
    }
    
    tipePetugasRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            console.log('Radio changed to:', this.value);
            updateAssignmentDisplay(this.value);
        });
        
        // Also add click event as fallback
        radio.addEventListener('click', function() {
            console.log('Radio clicked:', this.value);
            updateAssignmentDisplay(this.value);
        });
    });
    
    // Initialize modal element FIRST before using it
    const assignModal = document.getElementById('assignModal');
    
    // Reset modal when hidden
    if (assignModal) {
        assignModal.addEventListener('hidden.bs.modal', function() {
            console.log('Modal hidden - resetting form');
            
            // Reset to default (individu)
            document.getElementById('modal_tipe_individu').checked = true;
            document.getElementById('modal_tipe_rombongan').checked = false;
            
            // Clear form fields
            document.getElementById('teknisi_id').value = '';
            document.getElementById('kendaraan_id').value = '';
            document.getElementById('rombongan_id').value = '';
            
            // Don't hide the sections - keep them ready for next open
            // This ensures they're visible when modal opens again
        });
    }
    
    // Initialize modal when shown - use both show and shown events
    if (assignModal) {
        assignModal.addEventListener('show.bs.modal', function() {
            console.log('========== MODAL SHOWING (before animation) ==========');
            // Show individu form immediately
            updateAssignmentDisplay('individu');
        });
        
        assignModal.addEventListener('shown.bs.modal', function() {
            console.log('========== MODAL SHOWN (after animation) ==========');
            
            // Ensure individu is checked and form is visible
            const individuRadio = document.getElementById('modal_tipe_individu');
            if (individuRadio) {
                individuRadio.checked = true;
                updateAssignmentDisplay('individu');
                console.log('Forced individu display');
            }
            
            // Double-check visibility
            setTimeout(() => {
                const checkedRadio = document.querySelector('input[name="tipe_petugas"]:checked');
                if (checkedRadio) {
                    console.log('Final check - selected:', checkedRadio.value);
                    updateAssignmentDisplay(checkedRadio.value);
                }
            }, 100);
            
            console.log('========== MODAL INITIALIZATION COMPLETE ==========');
        });
    }
    
    // Add form submission handler for debugging
    if (assignForm) {
        assignForm.addEventListener('submit', function(e) {
        console.log('Form submission triggered');
        
        const formData = new FormData(this);
        console.log('Form data:');
        for (let [key, value] of formData.entries()) {
            console.log(key, value);
        }
        
        // Check if tipe_petugas is selected
        const tipePetugas = formData.get('tipe_petugas');
        if (!tipePetugas) {
            e.preventDefault();
            alert('Pilih tipe petugas terlebih dahulu!');
            return false;
        }
        
        // Check conditional requirements
        if (tipePetugas === 'individu') {
            if (!formData.get('teknisi_id')) {
                e.preventDefault();
                alert('Pilih teknisi terlebih dahulu!');
                document.getElementById('teknisi_id').focus();
                return false;
            }
        } else if (tipePetugas === 'rombongan') {
            if (!formData.get('rombongan_id')) {
                e.preventDefault();
                alert('Pilih rombongan terlebih dahulu!');
                document.getElementById('rombongan_id').focus();
                return false;
            }
        }
        
        if (!formData.get('response_minutes')) {
            e.preventDefault();
            alert('Pilih batas waktu response terlebih dahulu!');
            document.getElementById('response_minutes').focus();
            document.getElementById('response_minutes').style.borderColor = '#dc3545';
            setTimeout(() => {
                document.getElementById('response_minutes').style.borderColor = '';
            }, 3000);
            return false;
        }
        
        console.log('Form validation passed, submitting...');
        });
    }
});

// Mitra Link Modal Functions
function generateMitraLink() {
    const button = document.getElementById('generateLinkBtn');
    const originalText = button.innerHTML;
    button.disabled = true;
    button.innerHTML = '<i class="bi bi-hourglass-split"></i> Generating...';
    
    fetch('{{ route("orders.generate-mitra-token", $order->id) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('mitraLinkInput').value = data.url;
            document.getElementById('linkContainer').style.display = 'block';
            button.style.display = 'none';
        }
    })
    .catch(error => {
        alert('Gagal generate link. Silakan coba lagi.');
        console.error('Error:', error);
    })
    .finally(() => {
        button.disabled = false;
        button.innerHTML = originalText;
    });
}

function copyMitraLink() {
    const input = document.getElementById('mitraLinkInput');
    input.select();
    document.execCommand('copy');
    
    const button = document.getElementById('copyLinkBtn');
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="bi bi-check2"></i> Copied!';
    
    setTimeout(() => {
        button.innerHTML = originalText;
    }, 2000);
}
</script>
@endpush

@push('scripts')
{{-- Google Maps moved to separate page: route('orders.route-map', $order->id) --}}
</script>
@endpush