@extends('layouts.app')

@section('title', 'Detail Metode Pengiriman Barang')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-eye"></i> Detail Metode Pengiriman Barang</h2>
    <div class="btn-group">
        <a href="{{ route('metode-pengiriman-barang.index') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
        <a href="{{ route('metode-pengiriman-barang.edit', $metodePengirimanBarang->id) }}" class="btn btn-warning">
            <i class="bi bi-pencil"></i> Edit
        </a>
        <a href="{{ route('metode-pengiriman-barang.pdf', $metodePengirimanBarang->id) }}" class="btn btn-danger" target="_blank">
            <i class="bi bi-file-pdf"></i> Cetak PDF
        </a>
    </div>
</div>

<div class="card">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="bi bi-info-circle"></i> Informasi Metode Pengiriman Barang</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Kode Metode Pengiriman Barang</label>
                <p class="form-control-plaintext">{{ $metodePengirimanBarang->kode_metode_pengiriman_barang }}</p>
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Nama Pelanggan</label>
                <p class="form-control-plaintext">
                    <i class="bi bi-person"></i> 
                    @if($pelanggan)
                        <strong>{{ $pelanggan->nama }}</strong>
                    @else
                        {{ $metodePengirimanBarang->nama }}
                    @endif
                </p>
            </div>
        </div>

        @if($pelanggan)
        <div class="row">
            <div class="col-12 mb-3">
                <label class="form-label fw-bold">Informasi Pelanggan</label>
                <div class="card bg-light">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <strong>Nama:</strong><br>
                                <i class="bi bi-person"></i> {{ $pelanggan->nama }}
                            </div>
                            @if($pelanggan->telepon)
                            <div class="col-md-4">
                                <strong>Telepon:</strong><br>
                                <i class="bi bi-telephone"></i> {{ $pelanggan->telepon }}
                            </div>
                            @endif
                            @if($pelanggan->email)
                            <div class="col-md-4">
                                <strong>Email:</strong><br>
                                <i class="bi bi-envelope"></i> {{ $pelanggan->email }}
                            </div>
                            @endif
                        </div>
                        @if($pelanggan->alamat)
                        <div class="row mt-2">
                            <div class="col-md-12">
                                <strong>Alamat:</strong> 
                                <i class="bi bi-geo-alt"></i> {{ $pelanggan->alamat }}
                            </div>
                        </div>
                        @endif
                        @if($pelanggan->latitude && $pelanggan->longitude)
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <strong>Latitude:</strong> 
                                <i class="bi bi-geo-alt"></i> {{ $pelanggan->latitude }}
                            </div>
                            <div class="col-md-6">
                                <strong>Longitude:</strong> 
                                <i class="bi bi-geo-alt"></i> {{ $pelanggan->longitude }}
                            </div>
                        </div>
                        @endif
                        <div class="mt-3">
                            <a href="{{ route('pelanggan.show', $pelanggan->id) }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-eye"></i> Lihat Detail Pelanggan
                            </a>
                            @if($pelanggan->latitude && $pelanggan->longitude)
                            <a href="https://www.google.com/maps?q={{ $pelanggan->latitude }},{{ $pelanggan->longitude }}" 
                               target="_blank" 
                               class="btn btn-sm btn-primary">
                                <i class="bi bi-map"></i> Buka di Google Maps
                            </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        @if($pelanggan && $pelanggan->latitude && $pelanggan->longitude)
        <div class="row">
            <div class="col-12 mb-3">
                <label class="form-label fw-bold">Lokasi Pelanggan di Peta</label>
                <div id="map" style="height: 400px; border: 1px solid #ddd; border-radius: 4px; margin-top: 10px;"></div>
            </div>
        </div>
        @endif
        @endif

        @if($barangKeluar)
        <div class="row">
            <div class="col-12 mb-3">
                <label class="form-label fw-bold">Barang Keluar Terkait</label>
                <div class="card bg-light">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <strong>Kode:</strong><br>
                                <span class="badge bg-primary">{{ $barangKeluar->kode_barang_keluar }}</span>
                            </div>
                            <div class="col-md-3">
                                <strong>Tanggal Keluar:</strong><br>
                                <i class="bi bi-calendar"></i> {{ $barangKeluar->tanggal_keluar->format('d F Y') }}
                            </div>
                            <div class="col-md-3">
                                <strong>Tujuan:</strong><br>
                                <i class="bi bi-geo-alt"></i> {{ $barangKeluar->tujuan }}
                            </div>
                            <div class="col-md-3">
                                <strong>Jumlah:</strong><br>
                                <i class="bi bi-box"></i> {{ number_format($barangKeluar->jumlah, 0, ',', '.') }}
                            </div>
                        </div>
                        @if($barangKeluar->total)
                        <div class="row mt-2">
                            <div class="col-md-12">
                                <strong>Total:</strong> 
                                <span class="text-success fw-bold">Rp {{ number_format($barangKeluar->total, 0, ',', '.') }}</span>
                            </div>
                        </div>
                        @endif
                        <div class="mt-3">
                            <a href="{{ route('barang-keluar.show', $barangKeluar->id) }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-eye"></i> Lihat Detail Barang Keluar
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <div class="row">
            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Biaya</label>
                <p class="form-control-plaintext">
                    @if($metodePengirimanBarang->biaya)
                        <strong class="text-success fs-5">Rp {{ number_format($metodePengirimanBarang->biaya, 0, ',', '.') }}</strong>
                    @else
                        -
                    @endif
                </p>
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Estimasi Waktu</label>
                <p class="form-control-plaintext">
                    <i class="bi bi-clock"></i> {{ $metodePengirimanBarang->estimasi_waktu ?? '-' }}
                </p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Status</label>
                <p class="form-control-plaintext">
                    @php
                        $status = null;
                        if (preg_match('/\[status:([^\]]+)\]/', $metodePengirimanBarang->keterangan ?? '', $matches)) {
                            $status = $matches[1];
                        }
                    @endphp
                    @if($status)
                        @if($status == 'pending')
                            <span class="badge bg-warning fs-6"><i class="bi bi-clock"></i> Pending</span>
                        @elseif($status == 'proses')
                            <span class="badge bg-info fs-6"><i class="bi bi-arrow-repeat"></i> Proses</span>
                        @elseif($status == 'terkirim')
                            <span class="badge bg-success fs-6"><i class="bi bi-check-circle"></i> Terkirim</span>
                        @else
                            <span class="badge bg-secondary fs-6">{{ ucfirst($status) }}</span>
                        @endif
                    @else
                        <span class="text-muted">-</span>
                    @endif
                </p>
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Dibuat Pada</label>
                <p class="form-control-plaintext text-muted">
                    <i class="bi bi-clock"></i> {{ $metodePengirimanBarang->created_at->format('d F Y H:i:s') }}
                </p>
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Diperbarui Pada</label>
                <p class="form-control-plaintext text-muted">
                    <i class="bi bi-clock-history"></i> {{ $metodePengirimanBarang->updated_at->format('d F Y H:i:s') }}
                </p>
            </div>
        </div>
    </div>
    <div class="card-footer">
        <form action="{{ route('metode-pengiriman-barang.destroy', $metodePengirimanBarang->id) }}" 
              method="POST" 
              class="d-inline"
              onsubmit="return confirm('Apakah Anda yakin ingin menghapus data ini?');">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-danger">
                <i class="bi bi-trash"></i> Hapus Data
            </button>
        </form>
    </div>
</div>

@if($pelanggan && $pelanggan->latitude && $pelanggan->longitude)
@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
@endpush

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
    const lat = {{ $pelanggan->latitude }};
    const lng = {{ $pelanggan->longitude }};
    const zoom = 15;

    // Initialize map
    const map = L.map('map').setView([lat, lng], zoom);

    // Add tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // Add marker
    L.marker([lat, lng])
        .addTo(map)
        .bindPopup('<b>{{ $pelanggan->nama }}</b><br>{{ $pelanggan->alamat ?? "Alamat tidak tersedia" }}')
        .openPopup();
</script>
@endpush
@endif
@endsection