@extends('layouts.app')

@section('title', 'Dashboard - L\'unique Création')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-6 col-xxl-12">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row ">
                                    <div class="col-xl-8 col-xxl-7 col-sm-7">
                                        <div class="update-profile d-flex">
                                            <img src="{{ asset('/assets/images/logo.png') }}" alt="">
                                            <div class="ms-4">
                                                <h3 class="mb-0">Bonjour {{ auth()->user()->name }}</h3>
                                                <span class="text-primary d-block mb-xl-3 mb-1">$$LIBELLE_PROFESSION$$</span>
                                                <span><i class="fas fa-map-marker-alt me-1"></i><span id="localisation">Chargement...</span></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-4 col-xxl-5 col-sm-5 sm-mt-auto mt-3 text-sm-end">
                                        <a href="javascript:void(0);" class="btn btn-primary">Gestion du profile</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="card">
                            <div class="card-header border-0 pb-0">
                                <h4 class="card-title mb-0">Types de demandes <small class="fw-light">ce mois</small></h4>
                            </div>
                            <div class="card-body pt-3">
                                <div class="row align-items-center">
                                    <div class="col-12">
                                        Prochainement...
                                    </div>
                                    {{-- <div class="col-xl-6 col-sm-6">
                                        <div class="progress default-progress">
                                            <div class="progress-bar  bg-vigit progress-animated" style="width: 90%; height:8px;" role="progressbar">
                                                <span class="sr-only">90% Complete</span>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end mt-2 pb-4 justify-content-between">
                                            <span class="font-w500">Non traitées</span>
                                            <h6 class="mb-0">90%</h6>
                                        </div>
                                        <div class="progress default-progress">
                                            <div class="progress-bar bg-contact progress-animated" style="width: 68%; height:8px;" role="progressbar">
                                                <span class="sr-only">45% Complete</span>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end mt-2 pb-4 justify-content-between">
                                            <span class="font-w500">En cours</span>
                                            <h6 class="mb-0">68%</h6>
                                        </div>
                                        <div class="progress default-progress">
                                            <div class="progress-bar bg-contact progress-animated" style="width: 68%; height:8px;" role="progressbar">
                                                <span class="sr-only">45% Complete</span>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end mt-2 pb-4 justify-content-between">
                                            <span class="font-w500">Terminé</span>
                                            <h6 class="mb-0">68%</h6>
                                        </div>
                                        <div class="progress default-progress">
                                            <div class="progress-bar bg-follow progress-animated" style="width: 85%; height:8px;" role="progressbar">
                                                <span class="sr-only">85% Complete</span>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end mt-2 justify-content-between">
                                            <span class="font-w500">Archivé</span>
                                            <h6 class="mb-0">85%</h6>
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-sm-6">
                                        <div id="pieChart3"></div>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="card">
                            <div class="card-header border-0 pb-2">
                                <h4 class="card-title mb-0">Dernières demandes de Poses</h4>
                            </div>
                            <div class="card-body loadmore-content pb-0 pt-3 list-grid-area dlab-scroll height370 recent-activity-wrapper" id="RecentActivityContent">
                                <div class="table-responsive">
                                    <table class="table display mb-4 dataTablesCard job-table card-table" id="example5">
                                        <thead>
                                        <tr>
                                            <th>Id</th>
                                            <th>Informations BGB</th>
                                            <th>Client / Chantier</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @if(empty($demandes))
                                            <tr>
                                                <td colspan="4">
                                                    <p>Aucune demande trouvée.</p>
                                                </td>
                                            </tr>
                                        @else
                                            @foreach($demandes as $demande)
                                                <tr>
                                                    <td data-order="{{ $demande->id }}">
                                                        <b class="text-primary">#{{ $demande->id }}</b>
                                                    </td>
                                                    <td class="wspace-no">
                                                        <b class="text-primary">N°{{ $demande->id_prospectBGB }}</b>
                                                        <br>
                                                        {!! formatDate($demande->created_at, 'd/m/Y') . '<br><small>' . formatDate($demande->created_at, 'H:i:s') . '</small>' !!}
                                                    </td>

                                                    <td>
                                                        {{ $demande->client->nom ?? 'Non renseigné' }} {{ $demande->client->prenom ?? 'Non renseigné' }} {{ $demande->client->societe ?? '' }}<br>
                                                        <small>
                                                            {{ $demande->client->adresse ?? 'Non renseigné' }}, <br>{{ $demande->client->cp ?? 'Non renseigné' }} {{ $demande->client->ville ?? 'Non renseigné' }}<br>
                                                        </small>

                                                    </td>

                                                    <td>
                                                        <a href="{{ route('demandeDetails.details', ['id' => $demande->id]) }}" type="button" class="btn btn-outline-primary"><i class="fa-solid fa-pencil"></i> Voir projet</a><br>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="card-footer border-0 text-center">
                                <a href="{{ route('demande.encours') }}" class="btn btn-outline-primary m-auto">Voir toutes les demandes poses</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-6 col-xxl-12">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row shapreter-row">
                                    <div class="col-6">
                                        <div class="static-icon">
                                            <span>
                                                <i class="fas fa-calendar-alt mb-2"></i>
                                            </span>
                                            <h4 class="card-title mb-0">{{ formatDate(now(), 'D d M Y') }}</h4>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="static-icon">
                                            <span>
                                                <i class="far fa-sun mb-2"></i>
                                            </span>
                                            <h4 class="card-title mb-0" id="weather-info">Chargement météo...</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="card" id="user-activity">
                            <div class="card-header border-0 pb-0 flex-wrap">
                                <h4 class="card-title mb-0">Chiffres d'affaires</h4>
                            </div>
                            <div class="card-body pt-3">
                                Prochainement...
                                {{-- <div class="">
                                    <div id="vacancyChart"></div>
                                </div> --}}
                            </div>
                        </div>
                    </div>

                    <!-- TODO : Ajouter popup d'informations (détail événement avec itinéraire) -->
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header border-0 pb-2 flex-wrap">
                                <h4 class="card-title mb-0 me-3">Mon planning</h4>
                                <div>
                                    @foreach($typeEvenements as $typeEvenement)
                                        <span class="text-{{ $typeEvenement->couleur }} fw-semibold pe-3">
                                            <i class="fa-solid fa-{{ $typeEvenement->icon }} me-1"></i>{{ $typeEvenement->libelle }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                            <div class="card-body loadmore-content pb-0 pt-3 list-grid-area dlab-scroll height370 recent-activity-wrapper" id="RecentActivityContent">

                                <div class="table-responsive">
                                    <table class="table display mb-4 dataTablesCard job-table card-table" id="example5">
                                        <thead>
                                        <tr>
                                            @foreach($semaine as $jour)
                                                <th class="p-2" style="width:14.28%; text-align:center !important">{{ $jour['libelle'] }} <span class="d-block fs-12">{{ $jour['dateFR'] }}</span></th>
                                            @endforeach
                                        </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                @foreach($semaine as $jour)
                                                    <td class="p-1 text-center">
                                                        @foreach($jour['evenements'] as $evenement)
                                                            <div class="btn btn-{{ $evenement->typeEvenement->couleur ?? 'success' }} p-1 mb-1">
                                                                @if($evenement->all_day)
                                                                    <small class="d-block fw-bold mb-1">JOUR ENTIER</small>
                                                                @else
                                                                    <small class="d-block fw-bold mb-1">{{ $evenement->heure_debut }} - {{ $evenement->heure_fin }}</small>
                                                                @endif
                                                                <p class="fs-12 m-auto ellipsis" style="max-width: 90px;"><i class="fa-solid fa-{{ $evenement->typeEvenement->icon ?? 'calendar' }} me-1"></i>{{ $evenement->demande_id }} {{ $evenement->title }}</p>
                                                            </div>
                                                        @endforeach
                                                    </td>
                                                @endforeach
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="card-footer border-0 text-center">
                                <a href="{{ route('calendrier') }}" class="btn btn-outline-primary m-auto">Voir le calendrier</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
@endsection


@push('scripts')

    <!-- Apex Chart -->
    <script src="{{ asset('/assets/vendor/apexchart/apexchart.js') }}"></script>
    <script src="{{ asset('/assets/vendor/chartjs/chart.bundle.min.js') }}"></script>

    <!-- Dashboard 1 -->
    <script src="{{ asset('/assets/js/dashboard/statistics-page.js') }}"></script>

    <script>
        // Site : https://home.openweathermap.org/users/sign_in
        document.addEventListener("DOMContentLoaded", function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showWeather);
            } else {
                document.querySelector('#weather-info').innerHTML = "Localisation non disponible.";
            }

            function showWeather(position) {
                const lat = position.coords.latitude;
                const lon = position.coords.longitude;
                const apiKey = 'TA_CLE_API_ICI'; // 🔑 Remplace par ta clé OpenWeatherMap

                fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric&lang=fr`)
                    .then(response => response.json())
                    .then(data => {
                        const temp = Math.round(data.main.temp);
                        const condition = data.weather[0].description;
                        const city = data.name;
                        const icon = data.weather[0].icon;

                        document.querySelector('#weather-info').innerHTML =
                            `<img src="https://openweathermap.org/img/wn/${icon}.png" alt="${condition}" style="vertical-align:middle;"/> ${temp}°C, ${condition} à ${city}`;
                    })
                    .catch(error => {
                        console.error("Erreur météo :", error);
                        document.querySelector('#weather-info').innerHTML = "Météo indisponible.";
                    });
            }
        });

        document.addEventListener("DOMContentLoaded", function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    const lat = position.coords.latitude;
                    const lon = position.coords.longitude;

                    fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=TA_CLE_API&lang=fr`)
                        .then(response => response.json())
                        .then(data => {
                            const city = data.name;
                            document.getElementById("localisation").innerText = city;
                        });
                });
            } else {
                document.getElementById("localisation").innerText = "Localisation non disponible";
            }
        });
    </script>
@endpush