@extends('layouts.app')

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

@section('content')
    <div class="container-fluid">
        <h3><i class="fas fa-map-location-dot"></i> Merchant Terdekat</h3>

        <div class="card mt-3">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="latitude" class="form-label">Latitude</label>
                        <input type="text" class="form-control" id="latitude" placeholder="-6.2xxxx">
                    </div>
                    <div class="col-md-4">
                        <label for="longitude" class="form-label">Longitude</label>
                        <input type="text" class="form-control" id="longitude" placeholder="106.8xxxx">
                    </div>
                    <div class="col-md-4">
                        <label for="jangkauan" class="form-label">Jangkauan (km)</label>
                        <input type="number" class="form-control" id="jangkauan" placeholder="5" min="1" step="0.1"
                            value="5">
                    </div>
                </div>

                <div class="mt-3 d-flex gap-2">
                    <button class="btn btn-primary" type="button" id="btn-current">
                        <i class="fas fa-location-dot"></i> Lokasi Saya
                    </button>
                    <button class="btn btn-success" type="button" id="btn-search">
                        <i class="fas fa-search"></i> Cari
                    </button>
                </div>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover" id="table-terdekat">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Kategori</th>
                                <th>City</th>
                                <th>Jarak (km)</th>
                            </tr>
                        </thead>
                        <tbody id="tbody-terdekat"></tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>

    <script>
        const apiToken = @json($apiToken);

        function renderRows(data) {
            if (!data || data.length === 0) {
                $('#tbody-terdekat').html(
                    '<tr><td colspan="4" class="text-center">Tidak ada merchant dalam jangkauan</td></tr>'
                );
                return;
            }

            const rows = data.map(function (m) {
                const jarak = (m?.jarak_km === undefined || m?.jarak_km === null)
                    ? '-'
                    : (Number(m.jarak_km) || Number(m.jarak_km));
                const jarakText = jarak === '-' ? '-' : (Number(jarak).toFixed(2));
                const kategori = (m?.merchant_category ? m.merchant_category : '-') +
                    ' - ' +
                    (m?.merchant_sub_category ? m.merchant_sub_category : '');

                return '<tr>' +
                    '<td>' + (m?.name ?? '-') + '</td>' +
                    '<td>' + kategori + '</td>' +
                    '<td>' + (m?.city ?? '-') + '</td>' +
                    '<td>' + jarakText + '</td>' +
                    '</tr>';
            }).join('');

            $('#tbody-terdekat').html(rows);
        }

        function loadCurrentLocation() {
            if (!navigator.geolocation) {
                alert('Geolocation tidak didukung browser ini');
                return;
            }

            navigator.geolocation.getCurrentPosition(
                function (pos) {
                    $('#latitude').val(pos.coords.latitude);
                    $('#longitude').val(pos.coords.longitude);
                },
                function () {
                    alert('Gagal mengambil lokasi');
                },
                { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
            );
        }

        function searchNearbyMerchants() {
            const latitude = $('#latitude').val();
            const longitude = $('#longitude').val();
            const jangkauan = $('#jangkauan').val();

            if (!latitude || !longitude || !jangkauan) {
                alert('Isi latitude, longitude, dan jangkauan');
                return;
            }

            $.ajax({
                url: "{{ route('merchant.lokasi.terdekat') }}",
                method: "POST",
                data: {
                    latitude: latitude,
                    longitude: longitude,
                    jangkauan: jangkauan
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Authorization': 'Bearer ' + apiToken
                },
                beforeSend: function () {
                    $.blockUI({
                        message: '<h4><i class="fa fa-spinner fa-spin"></i> Mencari merchant terdekat...</h4>',
                        css: {
                            border: 'none',
                            padding: '15px',
                            backgroundColor: '#000',
                            '-webkit-border-radius': '10px',
                            '-moz-border-radius': '10px',
                            opacity: .5,
                            color: '#fff'
                        }
                    });
                },
                success: function (res) {
                    $.unblockUI();
                    renderRows(res?.content?.data ?? []);
                },
                error: function (xhr) {
                    $.unblockUI();
                    const msg = xhr?.responseJSON?.content?.message ?? 'Gagal mengambil data';
                    alert(msg);
                }
            });
        }

        $(document).ready(function () {
            $('#btn-current').on('click', loadCurrentLocation);
            $('#btn-search').on('click', searchNearbyMerchants);
        });
    </script>
@endsection