@extends('layouts.partner_layout')

@section('content')
<x-page-header title="{{ $pageTitle }}" :backButton="true" />

<div class="container my-4">
    <div class="card shadow border-0">
        <div class="card-header bg-white text-white">
            <h4 class="mb-0"><i class="fa fa-building me-2"></i>Training Centre Information</h4>
        </div>
        <div class="card-body">
            {{-- Basic Details --}}
            <div class="row g-4 mb-4">
                <div class="col-md-6">
                    <strong>Training Centre Name:</strong>
                    <p class="mb-0">{{ $basicDetails->centre_name ?? 'N/A' }}</p>
                </div>
                <div class="col-md-6">
                    <strong>Year Established:</strong>
                    <p class="mb-0">{{ $basicDetails->establish_year ?? 'N/A' }}</p>
                </div>
                <div class="col-md-6">
                    <strong>Director/Head Name:</strong>
                    <p class="mb-0">{{ $basicDetails->director_name ?? 'N/A' }}</p>
                </div>
                <div class="col-md-6">
                    <strong>Official Email:</strong>
                    <p class="mb-0">
                        @if($basicDetails->official_email)
                        <a href="mailto:{{ $basicDetails->official_email }}" class="text-decoration-none">
                            {{ $basicDetails->official_email }}
                        </a>
                        @else
                        N/A
                        @endif
                    </p>
                </div>
                <div class="col-md-6">
                    <strong>Mobile Number:</strong>
                    <p class="mb-0">{{ $basicDetails->primary_phone ?? 'N/A' }}</p>
                </div>
                <div class="col-md-6">
                    <strong>Alternate Phone Number:</strong>
                    <p class="mb-0">{{ $basicDetails->alternate_phone ?? 'N/A' }}</p>
                </div>
                <div class="col-md-6">
                    <strong>Website:</strong>
                    <p class="mb-0">
                        @if($basicDetails->website)
                        <a href="{{ $basicDetails->website }}" target="_blank" rel="noopener" class="text-decoration-none">
                            {{ $basicDetails->website }}
                        </a>
                        @else
                        N/A
                        @endif
                    </p>
                </div>
            </div>

            <hr>

            {{-- Address Information --}}
            <h5 class="mb-4"><i class="fa fa-map-marker-alt me-2 text-danger"></i>Address Information</h5>
            <div class="row g-4">
                <div class="col-md-6">
                    <strong>Complete Address:</strong>
                    <p class="mb-0">{{ $addressDetails->address ?? 'N/A' }}</p>
                </div>
                <div class="col-md-6">
                    <strong>State:</strong>
                    <p class="mb-0">{{ $addressDetails->stateMapped->state_name_en ?? 'N/A' }}</p>
                </div>
                <div class="col-md-6">
                    <strong>District:</strong>
                    <p class="mb-0">{{ $addressDetails->districtMapped->district_name_en ?? 'N/A' }}</p>
                </div>
                <div class="col-md-6">
                    <strong>City:</strong>
                    <p class="mb-0">{{ $addressDetails->city ?? 'N/A' }}</p>
                </div>
                <div class="col-md-6">
                    <strong>PIN Code:</strong>
                    <p class="mb-0">{{ $addressDetails->pincode ?? 'N/A' }}</p>
                </div>
                <div class="col-md-6">
                    <strong>Landmark:</strong>
                    <p class="mb-0">{{ $addressDetails->landmark ?? 'N/A' }}</p>
                </div>
                <div class="col-md-6">
                    <strong>Longitude:</strong>
                    <p class="mb-0">{{ $addressDetails->longitude ?? 'N/A' }}</p>
                </div>
                <div class="col-md-6">
                    <strong>Latitude:</strong>
                    <p class="mb-0">{{ $addressDetails->latitude ?? 'N/A' }}</p>
                </div>
            </div>

            {{-- Optional: Add map integration here (Google Maps/Leaflet) to show location --}}
            @if($addressDetails && $addressDetails->latitude && $addressDetails->longitude)
            <hr>
            <h5 class="mb-3"><i class="fa fa-map fa-fw me-2"></i>Location Map</h5>
            <div id="map" style="height: 300px; border-radius: 8px;"></div>
            @endif
        </div>
    </div>
</div>

@endsection

@section('pages-scripts')
@if($addressDetails && $addressDetails->latitude && $addressDetails->longitude)
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const lat = {{ $addressDetails->latitude }};
        const lng = {{ $addressDetails->longitude }};

        // Using Leaflet.js for open-source maps (you can use Google Maps API if preferred)
        var map = L.map('map').setView([lat, lng], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        L.marker([lat, lng]).addTo(map)
            .bindPopup("{{ $basicDetails->centre_name ?? 'Training Centre' }}")
            .openPopup();
    });
</script>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
@endif
@endsection