@extends('admin.layouts.app')

@section('content')
    <div class="conatiner-fluid content-inner mt-n5 py-0" style="margin-top: 100px !important;">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <div class="flex-wrap d-flex justify-content-between align-items-center">
                            <div>
                                <div class="header-title">
                                    <h2 class="card-title">Detail Cabang</h2>
                                    <p>Informasi cabang</p>
                                </div>
                            </div>
                            <div>
                                <a href="{{ url("/admin/branch") }}" class="btn btn-md btn-secondary">
                                    <i class="fa fa-arrow-left"></i> Kembali
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body" id="branch-detail">
                        <div class="row">
                            <div class="col-md-8">
                                <table class="table">
                                    <tr>
                                        <td><strong>ID</strong></td>
                                        <td id="detail-id"></td>
                                    </tr>
                                    <tr>
                                        <td><strong>Nama Cabang</strong></td>
                                        <td id="detail-name"></td>
                                    </tr>
                                    <tr>
                                        <td><strong>Latitude</strong></td>
                                        <td id="detail-latitude"></td>
                                    </tr>
                                    <tr>
                                        <td><strong>Longitude</strong></td>
                                        <td id="detail-longitude"></td>
                                    </tr>
                                    <tr>
                                        <td><strong>Radius (meter)</strong></td>
                                        <td id="detail-radius"></td>
                                    </tr>
                                    <tr>
                                        <td><strong>Deskripsi</strong></td>
                                        <td id="detail-description"></td>
                                    </tr>
                                    <tr>
                                        <td><strong>Status</strong></td>
                                        <td id="detail-status"></td>
                                    </tr>
                                    <tr>
                                        <td><strong>Dibuat</strong></td>
                                        <td id="detail-created"></td>
                                    </tr>
                                    <tr>
                                        <td><strong>Diperbarui</strong></td>
                                        <td id="detail-updated"></td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-4">
                                <div id="map" style="height: 400px; border-radius: 8px;"></div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-12">
                                <a href="{{ url("/admin/branch") }}/{{ $id }}/edit" class="btn btn-info">
                                    <i class="fa fa-pencil"></i> Edit
                                </a>
                                <a href="{{ url("/admin/branch") }}" class="btn btn-secondary">
                                    <i class="fa fa-arrow-left"></i> Kembali
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

    <script>
        $(document).ready(function() {
            var branchId = '{{ $id }}';
            var map;

            $.ajaxSetup({
                headers:{
                    'Authorization': "Bearer {{$session_token}}"
                }
            });

            $.get('/api/admin/branches/' + branchId, function(response) {
                var branch = response.data;
                
                $('#detail-id').text(branch.id);
                $('#detail-name').text(branch.name);
                $('#detail-latitude').text(branch.latitude);
                $('#detail-longitude').text(branch.longitude);
                $('#detail-radius').text(branch.radius + ' meter');
                $('#detail-description').text(branch.description || '-');
                $('#detail-status').html(branch.is_active ? '<span class="badge bg-success">Aktif</span>' : '<span class="badge bg-danger">Tidak Aktif</span>');
                $('#detail-created').text(new Date(branch.created_at).toLocaleString('id-ID'));
                $('#detail-updated').text(branch.updated_at ? new Date(branch.updated_at).toLocaleString('id-ID') : '-');

                // Initialize map
                if(!map) {
                    map = L.map('map').setView([branch.latitude, branch.longitude], 15);
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '© OpenStreetMap contributors',
                        maxZoom: 19
                    }).addTo(map);
                }

                // Add marker
                L.marker([branch.latitude, branch.longitude]).addTo(map)
                    .bindPopup('<b>' + branch.name + '</b><br>Radius: ' + branch.radius + ' meter');

                // Add circle (radius)
                L.circle([branch.latitude, branch.longitude], {
                    color: 'blue',
                    fillColor: '#f03',
                    fillOpacity: 0.1,
                    radius: branch.radius
                }).addTo(map);

            }).fail(function() {
                Swal.fire('Error!', 'Gagal memuat data cabang', 'error').then(() => {
                    window.location.href = '/admin/branch';
                });
            });
        });
    </script>
@endsection