@extends('layouts.app')

@section('title', config('app.name') . ' - Informasi Merchant')

@php
    $hasLocation = filled($merchant->latitude ?? null)
        && filled($merchant->longitude ?? null)
        && is_numeric($merchant->latitude)
        && is_numeric($merchant->longitude);
    $latitude = $hasLocation ? (float) $merchant->latitude : null;
    $longitude = $hasLocation ? (float) $merchant->longitude : null;
    $photoUrl = !empty($merchant->merchant_photo)
        ? asset($merchant->merchant_photo)
        : asset('assets/images/no_image.png');
@endphp

@section('content')
    @if ($hasLocation)
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
            integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
    @endif

    <div class="container py-4">

        <div class="card shadow border-0 mb-4">
            <div class="card-body">

                <div class="row">
                    <div class="col-md-4 text-center border-end">
                        <img src="{{ $photoUrl }}" class="rounded-circle img-thumbnail mb-3"
                            style="width:180px;height:180px;object-fit:cover;" alt="Foto Merchant">

                        <h4 class="mb-1">{{ $merchant->name }}</h4>

                        <span class="badge {{ ($merchant->merchant_status ?? '0') == '1' ? 'bg-success' : 'bg-warning' }}">
                            {{ ($merchant->merchant_status ?? '0') == '1' ? 'Sudah Konfirmasi' : 'Belum Konfirmasi' }}
                        </span>

                        @if (!empty($merchant->merchant_category))
                            <p class="text-muted small mt-3 mb-0">
                                {{ $merchant->merchant_category }}
                                @if (!empty($merchant->merchant_sub_category))
                                    &mdash; {{ $merchant->merchant_sub_category }}
                                @endif
                            </p>
                        @endif
                    </div>

                    <div class="col-md-8">
                        <h5 class="border-bottom pb-2 mb-4">
                            <i class="fa fa-info-circle me-2"></i>Informasi Merchant
                        </h5>

                        <div class="row mb-3">
                            <div class="col-md-4 text-muted">Nama Merchant</div>
                            <div class="col-md-8 fw-semibold">{{ $merchant->name }}</div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4 text-muted">Email</div>
                            <div class="col-md-8">{{ $merchant->email }}</div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4 text-muted">Nomor HP</div>
                            <div class="col-md-8">{{ $merchant->phone ?? '-' }}</div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4 text-muted">Kategori</div>
                            <div class="col-md-8">
                                @if (!empty($merchant->merchant_category))
                                    {{ $merchant->merchant_category }}
                                    @if (!empty($merchant->merchant_sub_category))
                                        &mdash; {{ $merchant->merchant_sub_category }}
                                    @endif
                                @else
                                    -
                                @endif
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4 text-muted">Deskripsi</div>
                            <div class="col-md-8">{{ $merchant->description ?? '-' }}</div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4 text-muted">Tanggal Bergabung</div>
                            <div class="col-md-8">
                                {{ isset($merchant->created_at) ? \Carbon\Carbon::parse($merchant->created_at)->format('d M Y') : '-' }}
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4 text-muted">Kota</div>
                            <div class="col-md-8">{{ $merchant->city ?? '-' }}</div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4 text-muted">Negara</div>
                            <div class="col-md-8">{{ $merchant->country ?? '-' }}</div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4 text-muted">Latitude</div>
                            <div class="col-md-8">{{ $hasLocation ? $latitude : '-' }}</div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4 text-muted">Longitude</div>
                            <div class="col-md-8">{{ $hasLocation ? $longitude : '-' }}</div>
                        </div>

                        <div class="mt-4 d-flex flex-wrap gap-2">
                            <a href="{{ route('merchant.index') }}" class="btn btn-primary">
                                <i class="fa fa-chevron-left"></i> Kembali
                            </a>
                            @if ($hasLocation)
                                <a href="https://www.google.com/maps?q={{ $latitude }},{{ $longitude }}" target="_blank"
                                    rel="noopener noreferrer" class="btn btn-outline-primary">
                                    <i class="fa fa-map-marker-alt me-1"></i> Buka di Google Maps
                                </a>
                            @endif
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="card shadow border-0">
            <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fa fa-map-marker me-2"></i>Lokasi Merchant
                </h5>
                @if ($hasLocation)
                    <button type="button" class="btn btn-primary btn-sm" onclick="refreshMap()" title="Muat ulang peta">
                        <i class="fa fa-refresh"></i>
                    </button>
                @endif
            </div>
            <div class="card-body p-0">
                @if ($hasLocation)
                    <div id="merchant-map" style="height: 420px; width: 100%;"></div>
                @else
                    <div class="text-center text-muted py-5">
                        <i class="fa fa-map-marked-alt fa-3x mb-3 opacity-50"></i>
                        <p class="mb-0">Koordinat lokasi belum tersedia untuk merchant ini.</p>
                    </div>
                @endif
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    @if ($hasLocation)
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
        <script>
            let map = null;
            const lat = {{ $latitude }};
            const lng = {{ $longitude }};
            const merchantName = @json($merchant->name);

            function initMap() {
                map = L.map('merchant-map').setView([lat, lng], 15);

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

                L.marker([lat, lng])
                    .addTo(map)
                    .bindPopup('<strong>' + merchantName + '</strong><br>' + lat + ', ' + lng)
                    .openPopup();

                setTimeout(function () {
                    map.invalidateSize();
                }, 200);
            }

            document.addEventListener('DOMContentLoaded', initMap);

            function refreshMap() {
                if (map) {
                    map.remove();
                    map = null;
                }
                initMap();
            }
        </script>
    @endif
@endpush