@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Detail Teknisi</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('data-worker.index') }}">Data Worker</a></li>
                <li class="breadcrumb-item active">Detail</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section profile">
        <div class="row">
            <div class="col-xl-4">
                <div class="card">
                    <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
                        @if($worker->profile)
                            <img src="{{ asset('uploads/user/' . $worker->id . '/' . $worker->profile) }}" 
                                 alt="Profile" class="rounded-circle" style="width: 150px; height: 150px; object-fit: cover;">
                        @else
                            <div class="rounded-circle bg-secondary d-flex align-items-center justify-content-center" 
                                 style="width: 150px; height: 150px;">
                                <i class="bi bi-person-fill text-white" style="font-size: 60px;"></i>
                            </div>
                        @endif
                        <h2 class="mt-3">{{ $worker->name }}</h2>
                        <h3>{{ $worker->categoryJasa->name ?? 'Tidak ada kategori' }}</h3>
                        <div class="mt-2">
                            @if($worker->status_worker == 1)
                                <span class="badge bg-success fs-6">Worker Disetujui</span>
                            @elseif($worker->status_worker == 2)
                                <span class="badge bg-danger fs-6">Worker Ditolak</span>
                            @else
                                <span class="badge bg-warning fs-6">Pending Approval</span>
                            @endif
                        </div>
                        
                        <!-- Status Pekerjaan Saat Ini -->
                        <div class="mt-3">
                            <h6 class="text-muted mb-2">Status Pekerjaan:</h6>
                            <span class="badge bg-{{ $statusColor }} fs-6">
                                <i class="bi bi-{{ $workStatus === 'on_going' ? 'hourglass-split' : 'check-circle' }}"></i>
                                {{ $statusLabel }}
                            </span>
                        </div>

                        @if($currentJob)
                        <div class="mt-3 p-3 border rounded">
                            <h6 class="mb-2"><i class="bi bi-briefcase text-primary"></i> Pekerjaan Saat Ini:</h6>
                            <p class="mb-1"><strong>{{ $currentJob->title }}</strong></p>
                            <p class="mb-1 text-muted small">Order: {{ $currentJob->order_number }}</p>
                            <p class="mb-1 text-muted small">Status: 
                                <span class="badge bg-info">{{ ucfirst($currentJob->status) }}</span>
                            </p>
                            @if($currentJob->scheduled_date)
                            <p class="mb-0 text-muted small">
                                <i class="bi bi-calendar"></i> 
                                {{ \Carbon\Carbon::parse($currentJob->scheduled_date)->format('d M Y H:i') }}
                            </p>
                            @endif
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Lokasi Teknisi Saat Ini -->
                @if($latestLocation)
                <div class="card">
                    <div class="card-body pt-3">
                        <h5 class="card-title">
                            <i class="bi bi-geo-alt-fill text-danger"></i> Lokasi Saat Ini
                        </h5>
                        <p class="text-muted small mb-2">
                            Update terakhir: {{ $latestLocation->created_at->diffForHumans() }}
                            <br>
                            <small class="text-secondary">
                                {{ $latestLocation->created_at->format('d M Y, H:i:s') }}
                            </small>
                        </p>
                        <div class="mb-2">
                            <small class="text-muted">
                                <i class="bi bi-pin-map"></i> 
                                Lat: {{ number_format($latestLocation->lat, 6) }}, 
                                Lng: {{ number_format($latestLocation->lng, 6) }}
                            </small>
                        </div>
                        <div id="map" style="height: 300px; width: 100%; border-radius: 8px; border: 2px solid #dee2e6;"></div>
                        <div class="mt-2">
                            <a href="https://www.google.com/maps?q={{ $latestLocation->lat }},{{ $latestLocation->lng }}" 
                               target="_blank" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-map"></i> Buka di Google Maps
                            </a>
                        </div>
                    </div>
                </div>
                @else
                <div class="card">
                    <div class="card-body pt-3 text-center">
                        <i class="bi bi-geo-alt text-muted" style="font-size: 48px;"></i>
                        <h5 class="text-muted mt-2">Lokasi Tidak Tersedia</h5>
                        <p class="text-muted small">Teknisi belum mengirim data lokasi</p>
                    </div>
                </div>
                @endif

                @if($worker->img_ktp)
                <div class="card">
                    <div class="card-body pt-3">
                        <h5 class="card-title">Foto KTP</h5>
                        <img src="{{ asset('uploads/user/' . $worker->id . '/' . $worker->img_ktp) }}" 
                             alt="KTP" class="img-fluid" style="border: 1px solid #ddd; border-radius: 5px;">
                    </div>
                </div>
                @endif
            </div>

            <div class="col-xl-8">
                <div class="card">
                    <div class="card-body pt-3">
                        <!-- Bordered 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="#profile-overview">Overview</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Informasi Lengkap</button>
                            </li>
                            @if($worker->status_worker == 0)
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-action">Aksi</button>
                            </li>
                            @endif
                        </ul>
                        <div class="tab-content pt-2">

                            <div class="tab-pane fade show active profile-overview" id="profile-overview">
                                <h5 class="card-title">Tentang Worker</h5>
                                <p class="small fst-italic">{{ $worker->deskripsi_pekerjaan ?? 'Belum ada deskripsi' }}</p>

                                <h5 class="card-title">Detail Profil</h5>

                                <div class="row">
                                    <div class="col-lg-3 col-md-4 label ">Nama Lengkap</div>
                                    <div class="col-lg-9 col-md-8">{{ $worker->name }}</div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-3 col-md-4 label">Email</div>
                                    <div class="col-lg-9 col-md-8">{{ $worker->email }}</div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-3 col-md-4 label">No HP/Username</div>
                                    <div class="col-lg-9 col-md-8">{{ $worker->username }}</div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-3 col-md-4 label">Kategori Jasa</div>
                                    <div class="col-lg-9 col-md-8">{{ $worker->categoryJasa->name ?? 'Tidak ada kategori' }}</div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-3 col-md-4 label">Status Worker</div>
                                    <div class="col-lg-9 col-md-8">
                                        @if($worker->status_worker == 1)
                                            <span class="badge bg-success">Disetujui</span>
                                        @elseif($worker->status_worker == 2)
                                            <span class="badge bg-danger">Ditolak</span>
                                        @else
                                            <span class="badge bg-warning">Pending</span>
                                        @endif
                                    </div>
                                </div>

                                @if($worker->status_worker == 2 && $worker->reject_reason)
                                <div class="row">
                                    <div class="col-lg-3 col-md-4 label">Alasan Penolakan</div>
                                    <div class="col-lg-9 col-md-8 text-danger">{{ $worker->reject_reason }}</div>
                                </div>
                                @endif

                                <div class="row">
                                    <div class="col-lg-3 col-md-4 label">Bergabung</div>
                                    <div class="col-lg-9 col-md-8">{{ $worker->created_at->format('d F Y') }}</div>
                                </div>

                            </div>

                            <div class="tab-pane fade profile-edit pt-3" id="profile-edit">
                                <h5 class="card-title">Informasi Lengkap Worker</h5>

                                <div class="row mb-3">
                                    <label class="col-md-4 col-lg-3 col-form-label">Deskripsi Pekerjaan</label>
                                    <div class="col-md-8 col-lg-9">
                                        <div class="form-control" style="min-height: 80px; background-color: #f8f9fa;">
                                            {{ $worker->deskripsi_pekerjaan ?? 'Belum ada deskripsi' }}
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-md-4 col-lg-3 col-form-label">Skills/Keahlian</label>
                                    <div class="col-md-8 col-lg-9">
                                        <div class="form-control" style="min-height: 60px; background-color: #f8f9fa;">
                                            {{ $worker->skills ?? 'Belum ada data skills' }}
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-md-4 col-lg-3 col-form-label">Point Referral</label>
                                    <div class="col-md-8 col-lg-9">
                                        <span class="badge bg-info">{{ $worker->point_reff ?? 0 }} point</span>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-md-4 col-lg-3 col-form-label">Point Worker</label>
                                    <div class="col-md-8 col-lg-9">
                                        <span class="badge bg-success">{{ $worker->point_reff_worker ?? 0 }} point</span>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-md-4 col-lg-3 col-form-label">Worker Boost Point</label>
                                    <div class="col-md-8 col-lg-9">
                                        <span class="badge bg-warning">{{ $worker->worker_boost_point ?? 0 }} point</span>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-md-4 col-lg-3 col-form-label">Total Tokens</label>
                                    <div class="col-md-8 col-lg-9">
                                        <span class="badge bg-secondary">{{ $worker->totalTokensUser ?? 0 }} tokens</span>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-md-4 col-lg-3 col-form-label">Saldo</label>
                                    <div class="col-md-8 col-lg-9">
                                        <span class="badge bg-primary">Rp {{ number_format($worker->saldo ?? 0, 0, ',', '.') }}</span>
                                    </div>
                                </div>

                            </div>

                            @if($worker->status_worker == 0)
                            <div class="tab-pane fade pt-3" id="profile-action">
                                <h5 class="card-title">Aksi Worker</h5>
                                <p class="text-muted">Worker ini masih dalam status pending. Anda dapat menyetujui atau menolak aplikasi worker.</p>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <form action="{{ route('data-worker.approve', $worker->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menyetujui worker ini?')">
                                            @csrf
                                            @method('PUT')
                                            <button type="submit" class="btn btn-success w-100">
                                                <i class="bi bi-check-circle"></i> Setujui Worker
                                            </button>
                                        </form>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <button type="button" class="btn btn-danger w-100" onclick="rejectWorker()">
                                            <i class="bi bi-x-circle"></i> Tolak Worker
                                        </button>
                                    </div>
                                </div>

                                <form id="rejectForm" action="{{ route('data-worker.reject', $worker->id) }}" method="POST" style="display: none;">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="reject_reason" id="rejectReason">
                                </form>
                            </div>
                            @endif

                        </div><!-- End Bordered Tabs -->

                    </div>
                </div>

                <div class="d-flex justify-content-between align-items-center">
                    <a href="{{ route('data-worker.index') }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> Kembali ke Daftar
                    </a>
                    <a href="{{ route('data-worker.edit', $worker->id) }}" class="btn btn-primary">
                        <i class="bi bi-pencil"></i> Edit Worker
                    </a>
                </div>
            </div>

        </div>
    </section>

@endsection

@push('scripts')
@if($latestLocation)
<script>
// Namespace untuk worker map - hindari konflik
window.WorkerMapApp = (function() {
    let workerMap;
    let workerMarker;

    // Initialize map
    function initWorkerMap() {
        const mapElement = document.getElementById('map');
        if (!mapElement) {
            console.error('Worker map element not found!');
            return;
        }

        // Teknisi location
        const teknisiLat = {{ $latestLocation->lat }};
        const teknisiLng = {{ $latestLocation->lng }};
        const teknisiLocation = { lat: teknisiLat, lng: teknisiLng };

        // Create map centered on teknisi
        workerMap = new google.maps.Map(mapElement, {
            center: teknisiLocation,
            zoom: 15,
            mapTypeControl: true,
            streetViewControl: true,
            fullscreenControl: true
        });

        // Create marker for teknisi
        workerMarker = new google.maps.Marker({
            position: teknisiLocation,
            map: workerMap,
            title: '{{ $worker->name }}',
            icon: {
                url: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
                scaledSize: new google.maps.Size(40, 40)
            },
            animation: google.maps.Animation.DROP
        });

        // Info window for teknisi
        const infoWindow = new google.maps.InfoWindow({
            content: `
                <div style="padding: 10px;">
                    <h6 class="mb-2"><i class="bi bi-person-badge"></i> {{ $worker->name }}</h6>
                    <p class="mb-1 small"><strong>Kategori:</strong> {{ $worker->categoryJasa->name ?? 'N/A' }}</p>
                    <p class="mb-1 small"><strong>Status:</strong> <span class="badge bg-{{ $statusColor }}">{{ $statusLabel }}</span></p>
                    <p class="mb-1 small"><strong>Update:</strong> {{ $latestLocation->created_at->format('d M Y, H:i:s') }}</p>
                    <hr class="my-2">
                    <p class="mb-0 small text-muted">
                        <i class="bi bi-pin-map"></i> 
                        {{ number_format($latestLocation->lat, 6) }}, {{ number_format($latestLocation->lng, 6) }}
                    </p>
                </div>
            `
        });

        // Show info window on marker click
        workerMarker.addListener('click', function() {
            infoWindow.open(workerMap, workerMarker);
        });

        // Auto open info window
        infoWindow.open(workerMap, workerMarker);

        @if($currentJob && $currentJob->client_lat && $currentJob->client_lng)
        // Add customer location marker if worker has ongoing job
        const customerLat = {{ $currentJob->client_lat }};
        const customerLng = {{ $currentJob->client_lng }};
        const customerLocation = { lat: customerLat, lng: customerLng };

        const customerMarker = new google.maps.Marker({
            position: customerLocation,
            map: workerMap,
            title: 'Lokasi Customer',
            icon: {
                url: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
                scaledSize: new google.maps.Size(40, 40)
            }
        });

        // Customer info window
        const customerInfoWindow = new google.maps.InfoWindow({
            content: `
                <div style="padding: 10px;">
                    <h6 class="mb-2"><i class="bi bi-house-door"></i> Lokasi Customer</h6>
                    <p class="mb-1 small"><strong>Nama:</strong> {{ $currentJob->client_name }}</p>
                    <p class="mb-1 small"><strong>Telepon:</strong> {{ $currentJob->client_phone }}</p>
                    <p class="mb-1 small"><strong>Alamat:</strong> {{ Str::limit($currentJob->client_address, 100) }}</p>
                </div>
            `
        });

        customerMarker.addListener('click', function() {
            customerInfoWindow.open(workerMap, customerMarker);
        });

        // Draw line between teknisi and customer
        const line = new google.maps.Polyline({
            path: [teknisiLocation, customerLocation],
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 0.6,
            strokeWeight: 2,
            map: workerMap
        });

        // Calculate distance
        const distance = google.maps.geometry.spherical.computeDistanceBetween(
            new google.maps.LatLng(teknisiLat, teknisiLng),
            new google.maps.LatLng(customerLat, customerLng)
        );

        // Adjust map bounds to show both markers
        const bounds = new google.maps.LatLngBounds();
        bounds.extend(teknisiLocation);
        bounds.extend(customerLocation);
        workerMap.fitBounds(bounds);

        // Add distance label
        const midPoint = google.maps.geometry.spherical.interpolate(
            new google.maps.LatLng(teknisiLat, teknisiLng),
            new google.maps.LatLng(customerLat, customerLng),
            0.5
        );

        const distanceLabel = new google.maps.InfoWindow({
            content: `<div style="padding: 5px; font-weight: bold;">
                <i class="bi bi-arrow-left-right"></i> ${(distance / 1000).toFixed(2)} km
            </div>`,
            position: midPoint
        });
        distanceLabel.open(workerMap);
        @endif
    }

    return {
        init: initWorkerMap
    };
})();

// Initialize when Google Maps is loaded
function initMap() {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof google !== 'undefined' && google.maps) {
                WorkerMapApp.init();
            }
        });
    } else {
        if (typeof google !== 'undefined' && google.maps) {
            WorkerMapApp.init();
        }
    }
}

// If Google Maps already loaded
if (typeof google !== 'undefined' && google.maps) {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initMap);
    } else {
        initMap();
    }
}
</script>

<!-- Load Google Maps only if not loaded -->
<script>
(function() {
    if (typeof google === 'undefined' || !google.maps) {
        const script = document.createElement('script');
        script.src = 'https://maps.googleapis.com/maps/api/js?key={{ config("google.maps.api_key") }}&callback=initMap&libraries=geometry&loading=async';
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);
    } else {
        initMap();
    }
})();
</script>
@endif

<script>
function rejectWorker() {
    const reason = prompt('Alasan penolakan worker:');
    if (reason && reason.trim() !== '') {
        document.getElementById('rejectReason').value = reason;
        document.getElementById('rejectForm').submit();
    }
}
</script>
@endpush