@extends('layouts.master')
@section('title')
    Statistiques Marche
@endsection
@section('content')
<div class="page-body">
    <div class="container-xl">
        <div class="row">
            @if(session()->has('success'))
                <div class="col-6 offset-3">
                    <div class="alert alert-success d-flex align-items-center justify-content-between" role="alert">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                            <path d="M9 12l2 2l4 -4"></path>
                        </svg>
                        <div>
                            {{ session()->get('success') }}
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                </div>
            @endif
            @if(session()->has('errors'))
                <div class="col-6 offset-3">
                    <div class="alert alert-warning d-flex align-items-center justify-content-between" role="alert">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                            <path d="M9 12l2 2l4 -4"></path>
                        </svg>
                        <div>
                            {{ session()->get('errors') }}
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                </div>
            @endif
        </div>
        <div class="row row-cards">
            <div class="col-12">
                <div class="card border border-teal">
                    <div class="card-header">
                        <h2><span class="badge bg-teal-lt">Statistiques du Marché: {{ $marche->reference }}</span></h2>
                    </div>
                    <div class="card-body">
                        <div class="row mb-4">
                            <div class="col-md-3">
                                <div class="card text-white bg-primary mb-3">
                                    <div class="card-body">
                                        <h5 class="card-title">Montant Global</h5>
                                        <p class="card-text h4">{{ number_format($marche->cout_initial, 2, ',', ' ') }} FCFA</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card text-white bg-success mb-3">
                                    <div class="card-body">
                                        <h5 class="card-title">Montant Facturé</h5>
                                        <p class="card-text h4">{{ number_format($statistiques['montant_total_facture'], 2, ',', ' ') }} FCFA</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card text-white bg-info mb-3">
                                    <div class="card-body">
                                        <h5 class="card-title">Montant Restant</h5>
                                        <p class="card-text h4">{{ number_format($statistiques['montant_restant'], 2, ',', ' ') }} FCFA</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card text-white bg-secondary mb-3">
                                    <div class="card-body">
                                        <h5 class="card-title">Progression</h5>
                                        <p class="card-text h4">{{ $statistiques['progression'] }}%</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Répartition par exercice</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>Exercice</th>
                                                        <th>Alloué</th>
                                                        <th>Utilisé</th>
                                                        <th>Reste</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($statistiques['repartition_par_exercice'] as $repartition)
                                                    <tr>
                                                        <td>{{ $repartition['exercice'] }}</td>
                                                        <td>{{ number_format($repartition['montant_alloue'], 2, ',', ' ') }} FCFA</td>
                                                        <td>{{ number_format($repartition['montant_utilise'], 2, ',', ' ') }} FCFA</td>
                                                        <td class="{{ $repartition['reste'] < 0 ? 'text-danger' : '' }}">
                                                            {{ number_format($repartition['reste'], 2, ',', ' ') }} FCFA
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Diagramme de progression par Exercice</h5>
                                    </div>
                                    <div class="card-body">
                                        <canvas id="progressionChart" width="400" height="200"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <a href="{{ route('marches.index') }}" class="btn btn-dark">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-left">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <path d="M5 12l14 0" />
                                <path d="M5 12l6 6" />
                                <path d="M5 12l6 -6" />
                            </svg> 
                            Retour à la liste
                        </a>
                            <a href="{{ route('marches.show', $marche) }}" class="btn btn-info">
                                <i class="fas fa-eye"></i> Voir les détails
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    const ctx = document.getElementById('progressionChart').getContext('2d');
    const progressionChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [{!! $statistiques['repartition_par_exercice']->map(fn($item) => '"' . $item['exercice'] . '"')->join(', ') !!}],
            datasets: [
                {
                    label: 'Montant alloué',
                    data: [{{ $statistiques['repartition_par_exercice']->map(fn($item) => $item['montant_alloue'])->join(', ') }}],
                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Montant utilisé',
                    data: [{{ $statistiques['repartition_par_exercice']->map(fn($item) => $item['montant_utilise'])->join(', ') }}],
                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return new Intl.NumberFormat('fr-FR', {
                                style: 'currency',
                                currency: 'XOF'
                            }).format(value);
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            label += new Intl.NumberFormat('fr-FR', {
                                style: 'currency',
                                currency: 'XOF'
                            }).format(context.raw);
                            return label;
                        }
                    }
                }
            }
        }
    });
});
</script>
@endpush