@extends('layout.app')

@section('title')
    {{ __('Sites') }}
@endsection

@push('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <style>
        #map {
            height: 400px;
            width: 100%;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        .coordinates-info {
            background: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            margin-top: 10px;
            font-size: 12px;
        }
        .info-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .info-item:last-child {
            border-bottom: none;
        }
        .info-label {
            font-weight: bold;
            color: #666;
            min-width: 120px;
            display: inline-block;
        }
        .status-badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        .status-active {
            background-color: #d4edda;
            color: #155724;
        }
        .status-inactive {
            background-color: #f8d7da;
            color: #721c24;
        }
        .site-reference {
            font-size: 14px;
            color: #999;
            margin-left: 10px;
        }
        .site-description {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin-top: 10px;
            white-space: pre-line;
        }
        .leaflet-container {
            font-family: inherit;
        }
    </style>
@endpush

@section('active_sites', 'active')
@section('data_col', '2-columns')
@section('body_class', '2-columns')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">{{ __('Sites')}}</h3>
                <div class="row breadcrumbs-top d-inline-block">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">{{ __('Détail') }}</li>
                            <li class="breadcrumb-item active">{{$site->reference}}</li>
                        </ol>
                    </div>
                </div>
            </div>
            <div class="content-header-right col-md-6 col-12">
                <div class="btn-group float-md-right">
                    <a class="btn btn-dark" href="{{ route('sites.index') }}">
                        <i class="la la-arrow-left"></i> {{ __('Sites') }}
                    </a>
                    <a class="btn btn-info ml-1" href="{{ route('sites.edit', $site->id) }}">
                        <i class="la la-edit"></i> {{ __('Edit') }}
                    </a>
                </div>
            </div>
        </div>
        <div class="content-body pb-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        {{-- Informations générales --}}
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">{{ __('Basic Informations') }}</h4>
                                <span class="site-reference">{{ $site->reference }}</span>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="info-item">
                                                <span class="info-label">{{ __('Name') }} :</span>
                                                <span>{{ $site->name }}</span>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="info-item">
                                                <span class="info-label">{{ __('Status') }} :</span>
                                                @if($site->is_active)
                                                    <span class="status-badge status-active">{{ __('Active') }}</span>
                                                @else
                                                    <span class="status-badge status-inactive">{{ __('Inactive') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    
                                    @if($site->description)
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="info-item">
                                                    <span class="info-label">{{ __('Description') }} :</span>
                                                    <div class="site-description">
                                                        {!! nl2br(e($site->description)) !!}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        
                        {{-- Informations de localisation --}}
                        <div class="card mt-3">
                            <div class="card-header">
                                <h4 class="card-title">{{ __('Address Information') }}</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="info-item">
                                                <span class="info-label">{{ __('Longitude') }} :</span>
                                                <span>{{ $site->longitude }}</span>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="info-item">
                                                <span class="info-label">{{ __('Latitude') }} :</span>
                                                <span>{{ $site->latitude }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    {{-- Carte --}}
                                    <div class="row mt-3">
                                        <div class="col-12">
                                            <div class="coordinates-info">
                                                <i class="la la-map-marker"></i>
                                                <span>{{ __('Location coordinates') }} : {{ $site->latitude }}, {{ $site->longitude }}</span>
                                            </div>
                                            <div id="map"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('modals')

@endsection

@push('scripts')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script>
        $(document).ready(function() {
            initMap();
        });
        
        function initMap() {
            const lat = {{ $site->latitude ?? 33.98 }};
            const lng = {{ $site->longitude ?? 9.54 }};
            
            // Initialiser la carte
            const map = L.map('map').setView([lat, lng], 13);
            
            // Ajouter la couche OpenStreetMap
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                maxZoom: 19
            }).addTo(map);
            
            // Ajouter un marqueur (non déplaçable en lecture seule)
            L.marker([lat, lng], {
                draggable: false,
                title: '{{ $site->name }}'
            }).addTo(map)
              .bindPopup(`
                  <strong>{{ $site->name }}</strong><br>
                  {{ __('Coordinates') }}:<br>
                  {{ __('Latitude') }}: ${lat.toFixed(6)}<br>
                  {{ __('Longitude') }}: ${lng.toFixed(6)}
              `)
              .openPopup();
            
            // Ajouter une échelle
            L.control.scale().addTo(map);
        }
    </script>
@endpush