@extends('layouts.app')

@section('content')

<link
  rel="stylesheet"
  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
/>

<style>
    #map {
        height: 520px;
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        z-index: 0;
        isolation: isolate;
    }

    .dispatch-page .leaflet-container {
        z-index: 0;
    }

    .dispatch-page {
        --dispatch-ink: #1e293b;
        --dispatch-muted: #64748b;
        --dispatch-line: #e2e8f0;
        --dispatch-surface: #ffffff;
        --dispatch-soft: #f8fafc;
        --dispatch-accent: #0f766e;
        --dispatch-accent-soft: #ecfdf5;
        position: relative;
        z-index: 1;
    }

    .dispatch-page .dispatch-card {
        background: var(--dispatch-surface);
        border: 1px solid var(--dispatch-line);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
        margin-bottom: 1.25rem;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }

    .dispatch-page .dispatch-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--dispatch-line);
        background: linear-gradient(180deg, #ffffff 0%, var(--dispatch-soft) 100%);
        position: relative;
        z-index: 2;
    }

    .dispatch-page .dispatch-card-header--map {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
    }

    .dispatch-page .dispatch-card-header h3,
    .dispatch-page .dispatch-card-header h4 {
        margin: 0;
        color: var(--dispatch-ink);
        font-weight: 700;
        font-size: 1.15rem;
    }

    .dispatch-page .dispatch-card-body {
        padding: 1.25rem;
    }

    .dispatch-page .refresh-banner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        margin: 0;
        padding: 0.35rem 0.8rem;
        border-radius: 999px;
        background: var(--dispatch-accent-soft);
        color: var(--dispatch-accent);
        border: 1px solid #a7f3d0;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .dispatch-page .dispatch-card-header--map .refresh-banner {
        grid-column: 2;
        justify-self: center;
    }

    .dispatch-page .refresh-banner.is-warning {
        background: #fff7ed;
        color: #c2410c;
        border-color: #fdba74;
    }

    .dispatch-page .refresh-banner strong {
        font-size: 0.95rem;
    }

    @media (max-width: 900px) {
        .dispatch-page .dispatch-card-header--map {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
    }

    .dispatch-page .rides-table-wrap {
        overflow-x: auto;
    }

    .dispatch-page .rides-table {
        width: 100%;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .dispatch-page .rides-table thead th {
        background: var(--dispatch-soft);
        color: var(--dispatch-muted);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        border: none;
        border-bottom: 1px solid var(--dispatch-line);
        padding: 0.9rem 1rem;
        white-space: nowrap;
    }

    .dispatch-page .rides-table tbody td {
        border: none;
        border-bottom: 1px solid var(--dispatch-line);
        padding: 1rem;
        color: var(--dispatch-ink);
        vertical-align: middle;
        background: #fff;
    }

    .dispatch-page .rides-table tbody tr:last-child td {
        border-bottom: none;
    }

    .dispatch-page .rides-table tbody tr:hover td {
        background: #f1f5f9;
    }

    .dispatch-page .ride-id {
        font-weight: 700;
        color: var(--dispatch-accent);
    }

    .dispatch-page .ride-driver {
        font-weight: 600;
    }

    .dispatch-page .ride-meta {
        color: var(--dispatch-muted);
        font-size: 0.92rem;
    }

    .dispatch-page .ride-phone-cell {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .dispatch-page .ride-coords {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        color: var(--dispatch-accent);
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        word-break: break-all;
    }

    .dispatch-page .ride-coords:hover {
        color: #0d9488;
        text-decoration: underline;
    }

    .dispatch-page .ride-plate {
        display: inline-block;
        padding: 0.2rem 0.55rem;
        border-radius: 6px;
        background: #f1f5f9;
        border: 1px solid var(--dispatch-line);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.03em;
    }

    .dispatch-page .ride-route {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        min-width: 180px;
        max-width: 260px;
    }

    .dispatch-page .ride-route-line {
        display: flex;
        align-items: flex-start;
        gap: 0.45rem;
        font-size: 0.86rem;
        line-height: 1.35;
        color: var(--dispatch-ink);
    }

    .dispatch-page .ride-route-dot {
        flex-shrink: 0;
        width: 0.55rem;
        height: 0.55rem;
        margin-top: 0.3rem;
        border-radius: 50%;
    }

    .dispatch-page .ride-route-dot.from {
        background: #0f766e;
    }

    .dispatch-page .ride-route-dot.to {
        background: #c2410c;
    }

    .dispatch-page .ride-stack {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

    .dispatch-page .ride-stack-title {
        font-weight: 600;
        color: var(--dispatch-ink);
    }

    .dispatch-page .ride-amount {
        font-weight: 700;
        color: var(--dispatch-ink);
        white-space: nowrap;
    }

    .dispatch-page .ride-detail-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.85rem;
        border-radius: 8px;
        background: var(--dispatch-accent);
        color: #fff !important;
        font-size: 0.82rem;
        font-weight: 700;
        text-decoration: none !important;
        white-space: nowrap;
        transition: background 0.15s ease, transform 0.15s ease;
    }

    .dispatch-page .ride-detail-btn:hover {
        background: #0d9488;
        color: #fff !important;
        transform: translateY(-1px);
    }

    .dispatch-page .status-pill {
        display: inline-flex;
        align-items: center;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .dispatch-page .status-completed { background: #dcfce7; color: #166534; }
    .dispatch-page .status-confirmed { background: #dbeafe; color: #1d4ed8; }
    .dispatch-page .status-onride,
    .dispatch-page .status-oncrimescene { background: #e0f2fe; color: #0369a1; }
    .dispatch-page .status-ondelivery { background: #ffedd5; color: #c2410c; }
    .dispatch-page .status-new { background: #ede9fe; color: #6d28d9; }
    .dispatch-page .status-canceled,
    .dispatch-page .status-rejected,
    .dispatch-page .status-driver_rejected { background: #fee2e2; color: #b91c1c; }
    .dispatch-page .status-default { background: #f1f5f9; color: #475569; }

    .dispatch-page .empty-rides {
        text-align: center;
        color: var(--dispatch-muted);
        padding: 2rem 1rem;
    }
</style>

@php
    $statusMap = [
        'completed' => ['label' => 'Tamamlandı', 'class' => 'status-completed'],
        'confirmed' => ['label' => 'Onaylandı', 'class' => 'status-confirmed'],
        'on ride' => ['label' => 'Olay Yerine Gidiyor', 'class' => 'status-onride'],
        'OnRide' => ['label' => 'Olay Yerine Gidiyor', 'class' => 'status-onride'],
        'onRide' => ['label' => 'Olay Yerine Gidiyor', 'class' => 'status-onride'],
        'OnCrimeScene' => ['label' => 'Olay Yerinde', 'class' => 'status-oncrimescene'],
        'OnDelivery' => ['label' => 'Teslimat Noktasına Gidiyor', 'class' => 'status-ondelivery'],
        'new' => ['label' => 'Yeni', 'class' => 'status-new'],
        'rejected' => ['label' => 'Reddedildi', 'class' => 'status-rejected'],
        'canceled' => ['label' => 'İptal Edildi', 'class' => 'status-canceled'],
        'cancelled' => ['label' => 'İptal Edildi', 'class' => 'status-canceled'],
        'driver_rejected' => ['label' => 'Çekici Reddedildi', 'class' => 'status-driver_rejected'],
        'driver rejected' => ['label' => 'Çekici Reddedildi', 'class' => 'status-driver_rejected'],
    ];
@endphp

<div id="main-wrapper" class="page-wrapper dispatch-page">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="dispatch-card">
                    <div class="dispatch-card-header dispatch-card-header--map">
                        <h3>Dispatcher – Sürücü Haritası</h3>
                        <div class="refresh-banner alert-info" id="refreshBanner">
                            <strong id="refreshCounter">60</strong>
                            <span>saniye sonra harita güncellenecektir.</span>
                        </div>
                    </div>
                    <div class="dispatch-card-body">
                        <div id="map"></div>
                    </div>
                </div>

                <div class="dispatch-card">
                    <div class="dispatch-card-header">
                        <h4>Son 10 Çekim</h4>
                    </div>
                    <div class="rides-table-wrap">
                        <table class="rides-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Müşteri</th>
                                    <th>Sürücü / Araç</th>
                                    <th>Güzergah</th>
                                    <th>Mesafe</th>
                                    <th>Tutar</th>
                                    <th>Durum</th>
                                    <th>Tarih</th>
                                    <th>İşlem</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($lastRides as $ride)
                                    @php
                                        $statusKey = (string) ($ride->statut ?? '');
                                        $status = $statusMap[$statusKey] ?? [
                                            'label' => $statusKey !== '' ? $statusKey : '-',
                                            'class' => 'status-default',
                                        ];
                                        $customerName = trim(($ride->customer_prenom ?? '') . ' ' . ($ride->customer_nom ?? ''));
                                        $driverName = trim(($ride->prenom ?? '') . ' ' . ($ride->nom ?? ''));
                                        $createdAt = !empty($ride->creer) ? strtotime($ride->creer) : false;
                                    @endphp
                                    <tr>
                                        <td><span class="ride-id">{{ $ride->id }}</span></td>
                                        <td>
                                            <div class="ride-stack">
                                                <span class="ride-stack-title">{{ $customerName !== '' ? $customerName : '-' }}</span>
                                                <span class="ride-meta">{{ $ride->customer_phone ?? '-' }}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="ride-stack">
                                                <span class="ride-driver">{{ $driverName !== '' ? $driverName : '-' }}</span>
                                                <span class="ride-meta">{{ $ride->vehicle_type ?? '-' }}</span>
                                                @if(!empty($ride->numberplate))
                                                    <span class="ride-plate">{{ $ride->numberplate }}</span>
                                                @endif
                                                <span class="ride-meta">{{ $ride->phone ?? '-' }}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="ride-route">
                                                <div class="ride-route-line">
                                                    <span class="ride-route-dot from"></span>
                                                    <span>{{ $ride->depart_name ?: 'Kalkış belirtilmemiş' }}</span>
                                                </div>
                                                <div class="ride-route-line">
                                                    <span class="ride-route-dot to"></span>
                                                    <span>{{ $ride->destination_name ?: 'Varış belirtilmemiş' }}</span>
                                                </div>
                                                @if(!empty($ride->latitude_depart) && !empty($ride->longitude_depart))
                                                    <a
                                                        class="ride-coords"
                                                        href="https://www.google.com/maps?q={{ $ride->latitude_depart }},{{ $ride->longitude_depart }}"
                                                        target="_blank"
                                                        rel="noopener noreferrer"
                                                        title="Kalkış noktasını Google Maps'te aç"
                                                    >
                                                        Haritada aç
                                                    </a>
                                                @endif
                                            </div>
                                        </td>
                                        <td class="ride-meta">
                                            {{ !empty($ride->distance) ? $ride->distance : '-' }}
                                        </td>
                                        <td>
                                            @if($ride->montant !== null && $ride->montant !== '')
                                                <span class="ride-amount">{{ number_format((float) $ride->montant, 2, ',', '.') }} ₺</span>
                                            @else
                                                <span class="ride-meta">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="status-pill {{ $status['class'] }}">
                                                {{ $status['label'] }}
                                            </span>
                                        </td>
                                        <td class="ride-meta">
                                            @if($createdAt)
                                                <div class="ride-stack">
                                                    <span>{{ date('d.m.Y', $createdAt) }}</span>
                                                    <span>{{ date('H:i', $createdAt) }}</span>
                                                </div>
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td>
                                            <a href="{{ route('ride.show', ['id' => $ride->id]) }}" class="ride-detail-btn">
                                                <i class="fa fa-eye"></i> Detay
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="empty-rides">Henüz çekim bulunamadı</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
/* ======================================================
    FONKSİYONLAR
====================================================== */
function formatTimeAgo(seconds) {
    if (seconds < 60) return seconds + " sn önce";
    if (seconds < 3600) return Math.floor(seconds / 60) + " dk önce";
    if (seconds < 86400) return Math.floor(seconds / 3600) + " saat önce";
    return Math.floor(seconds / 86400) + " gün önce";
}

function buildDriverPopup(driver) {
    const photoUrl = driver.photo_path
        ? `https://alfa.cekicin.tr/assets/images/driver/${driver.photo_path}`
        : `{{ asset('images/user.png') }}`;

    const photo = `<img src="${photoUrl}" alt="Sürücü" style="width:90px;height:90px;object-fit:cover;border-radius:8px;margin-bottom:6px;" onerror="this.onerror=null;this.src='{{ asset('images/user.png') }}';">`;

    const statusText = (driver.online && driver.online.toLowerCase() === "yes")
        ? "Müsait"
        : "Meşgul";

    const lastUpdateRaw = driver.last_update_time || driver.lastUpdateTime || driver.updated_at;
    const lastUpdateDate = lastUpdateRaw ? new Date(lastUpdateRaw) : null;
    const secondsAgo = lastUpdateDate && !Number.isNaN(lastUpdateDate.getTime())
        ? Math.max(0, Math.floor((Date.now() - lastUpdateDate.getTime()) / 1000))
        : null;

    const timeText = secondsAgo !== null ? formatTimeAgo(secondsAgo) : "Bilinmiyor";

    const lat = driver.latitude != null && driver.latitude !== '' ? Number(driver.latitude) : null;
    const lng = driver.longitude != null && driver.longitude !== '' ? Number(driver.longitude) : null;
    const hasCoords = Number.isFinite(lat) && Number.isFinite(lng);
    const coordsText = hasCoords
        ? `${lat.toFixed(5)}, ${lng.toFixed(5)}`
        : '-';
    const coordsHtml = hasCoords
        ? `<a href="https://www.google.com/maps?q=${lat},${lng}" target="_blank" rel="noopener noreferrer" style="color:#0f766e;font-weight:600;text-decoration:none;">${coordsText}</a>`
        : coordsText;

    return `
        <div style="text-align:center;">
            ${photo}
        </div>
        <strong>Sürücü ID:</strong> ${driver.id}<br>
        <strong>Sürücü Adı:</strong> ${driver.prenom} ${driver.nom}<br>
        <strong>Telefon:</strong> ${driver.phone ?? '-'}<br>
        <strong>Durum:</strong> ${statusText}<br>
        <strong>Konum:</strong> ${coordsHtml}<br>
        <strong>Son Güncelleme:</strong> ${timeText}
    `;
}
</script>

<script>
/* ======================================================
   HARİTA + MARKER
====================================================== */

// Laravel'den gelen sürücüler
let drivers = @json($drivers);

// Varsayılan merkez
let centerLat = 39.925533;
let centerLng = 32.866287;

const firstValidDriver = drivers.find(d =>
    d.latitude && d.longitude && !isNaN(d.latitude) && !isNaN(d.longitude)
);

if (firstValidDriver) {
    centerLat = parseFloat(firstValidDriver.latitude);
    centerLng = parseFloat(firstValidDriver.longitude);
}

// Harita
const map = L.map('map').setView([centerLat, centerLng], 7);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© Alfa Asistans - Çekicin'
}).addTo(map);

// Iconlar
const carIconOnline = L.icon({
    iconUrl: "{{ asset('images/tow-truck.png') }}",
    iconSize: [54, 44],
    iconAnchor: [27, 44],
    popupAnchor: [0, -40]
});

const carIconOffline = L.icon({
    iconUrl: "{{ asset('images/tow-truck-grey.png') }}",
    iconSize: [36, 36],
    iconAnchor: [18, 36],
    popupAnchor: [0, -30]
});

// İlk marker'lar
drivers.forEach(driver => {
    if (!driver.latitude || !driver.longitude) return;

    const icon = (driver.online && driver.online.toLowerCase() === "yes")
        ? carIconOnline
        : carIconOffline;

    const marker = L.marker(
        [parseFloat(driver.latitude), parseFloat(driver.longitude)],
        { icon }
    )
    .addTo(map)
    .bindPopup(buildDriverPopup(driver));

    driver.marker = marker;
});
</script>

<script>
/* ======================================================
   CANLI KONUM GÜNCELLEME + GERİ SAYIM
====================================================== */

function updateDriverPositions() {
    fetch('{{ route("getDriversJson") }}')
        .then(res => res.json())
        .then(data => {
            data.forEach(driverUpdate => {
                if (!driverUpdate.latitude || !driverUpdate.longitude) return;

                const driver = drivers.find(d => d.id === driverUpdate.id);
                if (!driver || !driver.marker) return;

                driver.marker.setLatLng([
                    parseFloat(driverUpdate.latitude),
                    parseFloat(driverUpdate.longitude)
                ]);

                const newIcon = (driverUpdate.online && driverUpdate.online.toLowerCase() === "yes")
                    ? carIconOnline
                    : carIconOffline;

                driver.marker.setIcon(newIcon);
                driver.marker.setPopupContent(buildDriverPopup(driverUpdate));

                Object.assign(driver, driverUpdate);
            });
        })
        .catch(err => console.error(err));
}

// Sayaç
let refreshTime = 60; // harita geri sayım
let remainingTime = refreshTime;
const counterEl = document.getElementById('refreshCounter');
const refreshBanner = document.getElementById('refreshBanner');

setInterval(() => {
    remainingTime--;

    if (remainingTime <= 10) {
        refreshBanner.classList.add('is-warning');
    }

    if (remainingTime <= 0) {
        updateDriverPositions();
        remainingTime = refreshTime;
        refreshBanner.classList.remove('is-warning');
    }

    counterEl.innerText = remainingTime;
}, 1000);
</script>
@endsection