@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>
                        </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" data-bs-toggle="modal" data-bs-target="#cancelAssignmentModal">
                                        <i class="bi bi-x-circle"></i> Cancel Assignment
                                    </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">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#route-map">
                                    <i class="bi bi-map"></i> Peta Rute
                                </button>
                            </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>

                                <hr>
                                <!-- foto check in and lokasi (lat lon) check in foto -->
                                <h6>Foto dan Lokasi Check-In:</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>
                                                <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>
                                            </div>
                                        @else
                                            <span class="text-muted">No Image</span>
                                        @endif 
                                    </div>
                                    <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>
                                    <br><br>
                                    <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->notes)
                                    <hr>
                                    <h6>Catatan Admin:</h6>
                                    <div class="alert alert-info">{{ $order->notes }}</div>
                                @endif

                                <hr>
                                <h6>Hasil Pekerjaan (gambar):</h6>
                                @if($order->result_images && count($order->result_images) > 0)
                                    <div class="row">
                                        @foreach($order->result_images as $image)
                                            <div class="col-md-4 mb-3">
                                                <a href="{{ asset('storage/' . $image) }}" target="_blank">
                                                    <img src="{{ asset('storage/' . $image) }}" class="img-fluid img-thumbnail" alt="Hasil Pekerjaan">
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                                <!-- show foto1 from order --> 
                                <div class="row">
                                    <!-- check if foto1 exists or not null or not empty and width 200px -->
                                    @if($order->foto1)
                                        <div class="col-md-4 mb-3">
                                            <div class="position-relative d-inline-block">
                                                <a href="{{ asset('uploads/completion/' . $order->id . '/' . $order->foto1) }}" target="_blank">
                                                    <img src="{{ asset('uploads/completion/' . $order->id . '/' . $order->foto1) }}" class="img-fluid img-thumbnail" alt="Foto 1" style="width: 200px;" >
                                                </a>
                                                <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" onclick="confirmDeleteImage('foto1', 'Foto 1')" title="Hapus Gambar">
                                                    <i class="bi bi-x-circle"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                    <!-- check if foto2 exists or not null or not empty and width 200px -->
                                    @if($order->foto2)
                                        <div class="col-md-4 mb-3">
                                            <div class="position-relative d-inline-block">
                                                <a href="{{ asset('uploads/completion/' . $order->id . '/' . $order->foto2) }}" target="_blank">
                                                    <img src="{{ asset('uploads/completion/' . $order->id . '/' . $order->foto2) }}" class="img-fluid img-thumbnail" alt="Foto 2" style="width: 200px;">
                                                </a>
                                                <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" onclick="confirmDeleteImage('foto2', 'Foto 2')" title="Hapus Gambar">
                                                    <i class="bi bi-x-circle"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                    <!-- check if foto3 exists or not null or not empty and width 200px -->
                                    @if($order->foto3)
                                        <div class="col-md-4 mb-3">
                                            <div class="position-relative d-inline-block">
                                                <a href="{{ asset('uploads/completion/' . $order->id . '/' . $order->foto3) }}" target="_blank">
                                                    <img src="{{ asset('uploads/completion/' . $order->id . '/' . $order->foto3) }}" class="img-fluid img-thumbnail" alt="Foto 3" style="width: 200px;">
                                                </a>
                                                <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" onclick="confirmDeleteImage('foto3', 'Foto 3')" title="Hapus Gambar">
                                                    <i class="bi bi-x-circle"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                    <!-- check if foto4 exists or not null or not empty and width 200px -->
                                    @if($order->foto4)
                                        <div class="col-md-4 mb-3">
                                            <div class="position-relative d-inline-block">
                                                <a href="{{ asset('uploads/completion/' . $order->id . '/' . $order->foto4) }}" target="_blank">
                                                    <img src="{{ asset('uploads/completion/' . $order->id . '/' . $order->foto4) }}" class="img-fluid img-thumbnail" alt="Foto 4" style="width: 200px;">
                                                </a>
                                                <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" onclick="confirmDeleteImage('foto4', 'Foto 4')" title="Hapus Gambar">
                                                    <i class="bi bi-x-circle"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                    <!-- check if foto5 exists or not null or not empty and width 200px -->
                                    @if($order->foto5)
                                        <div class="col-md-4 mb-3">
                                            <div class="position-relative d-inline-block">
                                                <a href="{{ asset('uploads/completion/' . $order->id . '/' . $order->foto5) }}" target="_blank">
                                                    <img src="{{ asset('uploads/completion/' . $order->id . '/' . $order->foto5) }}" class="img-fluid img-thumbnail" alt="Foto 5" style="width: 200px;">
                                                </a>
                                                <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" onclick="confirmDeleteImage('foto5', 'Foto 5')" title="Hapus Gambar">
                                                    <i class="bi bi-x-circle"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                    <!-- check if foto6 exists or not null or not empty and width 200px -->
                                    @if($order->foto6)
                                        <div class="col-md-4 mb-3">
                                            <div class="position-relative d-inline-block">
                                                <a href="{{ asset('uploads/completion/' . $order->id . '/' . $order->foto6) }}" target="_blank">
                                                    <img src="{{ asset('uploads/completion/' . $order->id . '/' . $order->foto6) }}" class="img-fluid img-thumbnail" alt="Foto 6" style="width: 200px;">
                                                </a>
                                                <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" onclick="confirmDeleteImage('foto6', 'Foto 6')" title="Hapus Gambar">
                                                    <i class="bi bi-x-circle"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <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>
                                                <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>
                                            </div>
                                        @else
                                            <span class="text-muted">No Image</span>
                                        @endif
                                    </div> 
                                    <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>
                                    <br><br>
                                    <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>

                            <!-- Client Info Tab -->
                            <div class="tab-pane fade" id="client-info">
                                <h5 class="mb-3">Informasi Klien</h5>
                                
                                <div class="row mb-3">
                                    <div class="col-sm-3"><strong>Nama:</strong></div>
                                    <div class="col-sm-9">{{ $order->client_name }}</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>
                                    </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>
                                        </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 }}</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>

                            <!-- Route Map Tab -->
                            @if($order->status !== 'draft' && $order->status !== 'assigned' && $order->lat_start && $order->lon_start && $order->client_lat && $order->client_lng)
                            <div class="tab-pane fade" id="route-map">
                                <h5 class="mb-3">Rute Perjalanan Teknisi ke Lokasi</h5>
                                
                                <div class="alert alert-info">
                                    <i class="bi bi-info-circle"></i>
                                    <strong>Lokasi Awal Teknisi:</strong> {{ $order->lat_start }}, {{ $order->lon_start }}<br>
                                    <small>Diambil saat teknisi menerima order pada {{ $order->accepted_at ? $order->accepted_at->format('d M Y H:i') : '-' }}</small>
                                </div>

                                <div id="routeMap" style="width: 100%; height: 500px; border-radius: 8px; background: #f0f0f0;"></div>
                                
                                <div class="mt-3">
                                    <h6>Alternatif Rute:</h6>
                                    <div id="routeAlternatives" class="list-group">
                                        <div class="list-group-item text-muted text-center">
                                            <i class="bi bi-hourglass-split"></i> Memuat rute...
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif

                            <!-- 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">
                            <a href="{{ route('orders.index') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> Kembali ke Daftar
                            </a>
                            
                            <div>
                                @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>
                                    <select name="teknisi_id" id="teknisi_id" class="form-control">
                                        <option value="">Pilih Teknisi...</option>
                                        @foreach($teknisis as $teknisi) 
                                            <option value="{{ $teknisi->id }}">
                                                {{ $teknisi->name }}
                                                @if($teknisi->nama_jasa) - {{ $teknisi->nama_jasa }} @endif
                                                @if($teknisi->phone) - {{ $teknisi->phone }} @endif
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted">
                                        <strong>Total teknisi tersedia: {{ $teknisis->count() }}</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>
                                    <select name="rombongan_id" id="rombongan_id" class="form-control">
                                        <option value="">Pilih Rombongan...</option>
                                        @foreach($rombongans as $rombongan)
                                            <option value="{{ $rombongan->id }}">
                                                {{ $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: {{ $rombongans->count() }}</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>
@endsection

@push('styles')
<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>
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);
        });
    });
    
    // Reset modal when hidden
    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
    const assignModal = document.getElementById('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
    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...');
    });
});
</script>
@endpush

@push('scripts')
<script>
// Delete Image Function - Global scope
function confirmDeleteImage(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');
        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);
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-x-circle"></i>';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat menghapus gambar');
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-x-circle"></i>';
        });
    }
}

// Leaflet Map Route Display (using OSRM for free routing)
@if($order->status !== 'draft' && $order->status !== 'assigned' && $order->lat_start && $order->lon_start && $order->client_lat && $order->client_lng)
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" 
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" 
    crossorigin=""/>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" 
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" 
    crossorigin=""></script>

<script>
let map;
let routeLayers = [];

function initRouteMap() {
    // Starting location (teknisi)
    const startLat = {{ $order->lat_start }};
    const startLng = {{ $order->lon_start }};
    
    // Destination (client)
    const endLat = {{ $order->client_lat }};
    const endLng = {{ $order->client_lng }};

    // Initialize map centered between start and end
    const centerLat = (startLat + endLat) / 2;
    const centerLng = (startLng + endLng) / 2;
    
    // Initialize Leaflet map
    map = L.map('routeMap').setView([centerLat, centerLng], 13);
    
    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 19
    }).addTo(map);

    // Add markers
    const startIcon = L.divIcon({
        html: '<div style="background-color: #3b82f6; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; border: 3px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.3);">T</div>',
        className: 'custom-div-icon',
        iconSize: [30, 30],
        iconAnchor: [15, 15]
    });

    const endIcon = L.divIcon({
        html: '<div style="background-color: #ef4444; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; border: 3px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.3);">C</div>',
        className: 'custom-div-icon',
        iconSize: [30, 30],
        iconAnchor: [15, 15]
    });

    L.marker([startLat, startLng], {icon: startIcon})
        .addTo(map)
        .bindPopup('<b>Lokasi Awal Teknisi</b><br>{{ $order->lat_start }}, {{ $order->lon_start }}');

    L.marker([endLat, endLng], {icon: endIcon})
        .addTo(map)
        .bindPopup('<b>Lokasi Customer</b><br>{{ $order->client_lat }}, {{ $order->client_lng }}');

    // Fit map bounds to show both markers initially
    const bounds = L.latLngBounds([
        [startLat, startLng],
        [endLat, endLng]
    ]);
    map.fitBounds(bounds, {padding: [50, 50]});

    // Fetch routes using OSRM (OpenStreetMap Routing Machine)
    fetchRoutes(startLat, startLng, endLat, endLng);
}

function fetchRoutes(startLat, startLng, endLat, endLng) {
    // Show loading indicator
    const alternativesContainer = document.getElementById('routeAlternatives');
    alternativesContainer.innerHTML = '<div class="list-group-item text-center"><i class="bi bi-hourglass-split"></i> Memuat rute...</div>';
    
    // OSRM API endpoint (free, no API key required)
    const url = `https://router.project-osrm.org/route/v1/driving/${startLng},${startLat};${endLng},${endLat}?alternatives=3&steps=true&geometries=geojson&overview=full`;

    fetch(url)
        .then(response => response.json())
        .then(data => {
            if (data.code === 'Ok' && data.routes && data.routes.length > 0) {
                displayMultipleRoutes(data.routes);
            } else {
                throw new Error('No routes found');
            }
        })
        .catch(error => {
            console.error('Error fetching routes:', error);
            document.getElementById('routeAlternatives').innerHTML = 
                '<div class="alert alert-danger">Gagal memuat rute. Silakan coba lagi.</div>';
        });
}

function displayMultipleRoutes(routes) {
    const routeColors = ['#22c55e', '#3b82f6', '#f59e0b', '#ef4444']; // Green for fastest, then blue, orange, red
    const alternativesContainer = document.getElementById('routeAlternatives');
    alternativesContainer.innerHTML = '';

    // Sort routes by duration (fastest first)
    routes.sort((a, b) => {
        return a.duration - b.duration;
    });

    routes.forEach((route, index) => {
        // Draw route on map
        const routeLayer = L.geoJSON(route.geometry, {
            style: {
                color: routeColors[index] || '#6b7280',
                weight: index === 0 ? 6 : 4,
                opacity: 0.7
            }
        }).addTo(map);

        routeLayers.push({ layer: routeLayer, color: routeColors[index] || '#6b7280' });

        // Create route info card
        const routeCard = document.createElement('div');
        routeCard.className = 'list-group-item list-group-item-action';
        routeCard.style.cursor = 'pointer';
        routeCard.style.borderLeft = `4px solid ${routeColors[index] || '#6b7280'}`;
        
        if (index === 0) {
            routeCard.classList.add('active');
        }

        // Format distance and duration
        const distanceKm = (route.distance / 1000).toFixed(1);
        const durationMin = Math.round(route.duration / 60);

        routeCard.innerHTML = `
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="mb-1">
                        ${index === 0 ? '<i class="bi bi-lightning-charge-fill text-success"></i> Rute Tercepat' : 'Rute Alternatif ' + index}
                        ${index === 0 ? '<span class="badge bg-success ms-2">Rekomendasi</span>' : ''}
                    </h6>
                    <p class="mb-1">
                        <i class="bi bi-speedometer2"></i> <strong>${distanceKm} km</strong> 
                        <span class="mx-2">•</span>
                        <i class="bi bi-clock"></i> <strong>${durationMin} menit</strong>
                    </p>
                </div>
                <div>
                    <i class="bi bi-chevron-right"></i>
                </div>
            </div>
        `;

        // Click to focus on this route
        routeCard.addEventListener('click', function() {
            // Remove active class from all
            document.querySelectorAll('#routeAlternatives .list-group-item').forEach(item => {
                item.classList.remove('active');
            });
            
            // Add active class to clicked
            this.classList.add('active');
            
            // Highlight this route by adjusting opacity
            routeLayers.forEach((routeObj, i) => {
                if (i === index) {
                    routeObj.layer.setStyle({
                        color: routeObj.color,
                        weight: 7,
                        opacity: 1
                    });
                    routeObj.layer.bringToFront();
                } else {
                    routeObj.layer.setStyle({
                        color: routeObj.color,
                        weight: 3,
                        opacity: 0.3
                    });
                }
            });

            // Fit bounds to selected route
            map.fitBounds(routeLayer.getBounds());
        });

        alternativesContainer.appendChild(routeCard);
    });

    // Fit map to show all routes
    if (routeLayers.length > 0) {
        const group = new L.featureGroup(routeLayers.map(r => r.layer));
        map.fitBounds(group.getBounds().pad(0.1));
    }
}

// Initialize map when "Peta Rute" tab is clicked
let mapInitialized = false;

// Listen for tab shown event
document.addEventListener('DOMContentLoaded', function() {
    const routeMapTab = document.querySelector('[data-bs-target="#route-map"]');
    
    if (routeMapTab) {
        routeMapTab.addEventListener('shown.bs.tab', function (event) {
            // Only initialize once
            if (!mapInitialized && typeof google !== 'undefined' && google.maps) {
                console.log('Initializing route map...');
                initRouteMap();
                mapInitialized = true;
            }
        });
    }
});

// Also initialize if tab is already active (direct link with hash)
window.addEventListener('load', function() {
    if (window.location.hash === '#route-map' && typeof google !== 'undefined' && google.maps) {
        setTimeout(function() {
            if (!mapInitialized) {
                console.log('Initializing route map from hash...');
                initRouteMap();
                mapInitialized = true;
            }
        }, 500);
    }
});
</script>
@endif

</script>
@endpush