@extends('layouts.superadmin')
@section('title', __('Détails de la radio'))
@section('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css">
    <style>
        .info-card {
            border-left: 4px solid #2575fc;
            transition: all 0.3s ease;
        }

        .info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .logo-container {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin: 0 auto;
            background: white;
        }

        .logo-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .badge-service {
            font-size: 0.8rem;
            padding: 0.35em 0.65em;
        }

        .status-pending {
            background-color: #ffc107;
            color: #000;
        }

        .status-completed {
            background-color: #28a745;
            color: #fff;
        }

        .status-failed {
            background-color: #dc3545;
            color: #fff;
        }

        .detail-label {
            font-weight: 600;
            color: #6c757d;
        }

        .detail-value {
            font-weight: 500;
            color: #495057;
        }
    </style>
@endsection
@section('content')
    <div class="py-2">
        <div class="row">
            <div class="col-12">
                <div class="card border-0 bg-linear-gradient text-white shadow-sm mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-2 text-center">
                                <div class="logo-container">
                                    <img src="{{ $radio->logo ? asset('media/logos/' . $radio->logo) : 'https://ui-avatars.com/api/?name=' . urlencode($radio->name) }}"
                                        alt="Logo de {{ $radio->name }}">
                                </div>
                            </div>
                            <div class="col-md-10">
                                <h2 class="mb-1">{{ $radio->name }}</h2>
                                <p class="mb-2">{{ $radio->description }}</p>
                                <div class="d-flex flex-wrap gap-2">
                                    <span class="badge bg-primary">{{ $radio->category ?? 'Non catégorisée' }}</span>
                                    @if ($radio->frequence)
                                        <span class="badge bg-success">{{ $radio->frequence }}</span>
                                    @endif
                                    @if ($radio->url_site)
                                        <a href="{{ $radio->url_site }}" target="_blank"
                                            class="badge bg-light text-dark text-truncate">
                                            <i class="fas fa-globe me-1"></i> {{ $radio->url_site }}
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-12 mb-2">
                <div class="card border-0 shadow-sm info-card h-100">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0"><i class="fas fa-info-circle me-2 text-gradient"></i>Informations
                            générales</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <p class="detail-label mb-1">Date de création</p>
                                <p class="detail-value">
                                    {{ \Carbon\Carbon::parse($radio->created_at)->locale('fr')->translatedFormat('l d F Y') }}
                                </p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <p class="detail-label mb-1">Propriétaire</p>
                                <p class="detail-value">
                                    {{ $radio->user->lastname . ' ' . $radio->user->firstname }}
                                    <a href="mailto:{{ $radio->user->email }}" class="text-decoration-none">
                                        <small class="d-block text-muted">{{ $radio->user->email }}</small>
                                    </a>
                                </p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <p class="detail-label mb-1">Contact</p>
                                <p class="detail-value">
                                    {{ $radio->phone ?? 'Non renseigné' }}
                                    @if ($radio->email)
                                        <small class="d-block text-muted">{{ $radio->email }}</small>
                                    @endif
                                </p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <p class="detail-label mb-1">Localisation</p>
                                <p class="detail-value">
                                    {{ $radio->address }}<br>
                                    {{ $radio->city }}, {{ $radio->country }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12 mt-4">
                <div class="card border-0 shadow-sm info-card h-100">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0"><i class="fas fa-chart-line me-2 text-gradient"></i>Statistiques E-Services</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Nombre total de requêtes de service -->
                            <div class="col-md-3 text-center mb-3">
                                <div class="p-3 bg-light rounded">
                                    <h3 class="mb-0">
                                        {{ $radio->new_services()->withCount('requetes_service')->get()->sum('requetes_service_count') }}
                                    </h3>
                                    <small class="text-muted">Demandes de service</small>
                                </div>
                            </div>

                            <!-- Services payés -->
                            <div class="col-md-3 text-center mb-3">
                                <div class="p-3 bg-light rounded">
                                    @php
                                        $totalCommission = $radio
                                            ->new_services()
                                            ->with([
                                                'requetes_service' => fn($q) => $q->where(
                                                    'transaction_status',
                                                    'approved',
                                                ),
                                            ])
                                            ->get()
                                            ->sum(
                                                fn($service) => $service->requetes_service->sum(
                                                    fn($r) => $r->amount - $r->radio_amount,
                                                ),
                                            );
                                    @endphp

                                    <h3 class="mb-0">
                                        {{ number_format($totalCommission, 0, '', ' ') }} FCFA
                                    </h3>
                                    <small class="text-muted">Total des commissions</small>
                                </div>
                            </div>

                            <!-- Services payés -->
                            <div class="col-md-3 text-center mb-3">
                                <div class="p-3 bg-light rounded">
                                    <h3 class="mb-0">
                                        {{ number_format($num = $radio->balance, 0, '', $thousands_separator = ' ') }} FCFA
                                    </h3>
                                    <small class="text-muted">Balance</small>
                                </div>
                            </div>
                            <!-- Chiffre généré -->
                            <div class="col-md-3 text-center mb-3">
                                <div class="p-3 bg-light rounded">
                                    <h3 class="mb-0">
                                        <h3 class="mb-0">
                                            @php
                                                $totalAmount = $radio
                                                    ->new_services()
                                                    ->with([
                                                        'requetes_service' => fn($q) => $q->where(
                                                            'transaction_status',
                                                            'approved',
                                                        ),
                                                    ])
                                                    ->get()
                                                    ->sum(fn($service) => $service->requetes_service->sum('amount'));
                                            @endphp
                                            {{ number_format($num = $totalAmount, 0, '', $thousands_separator = ' ') }}
                                            FCFA
                                        </h3>
                                        <small class="text-muted"> Total généré</small>
                                </div>
                            </div>

                            <!-- Barre de progression -->
                            <div class="col-12 mt-2">
                                <div class="progress" style="height: 10px;">
                                    @php
                                        $totalRequetes = $radio
                                            ->new_services()
                                            ->withCount('requetes_service')
                                            ->get()
                                            ->sum('requetes_service_count');
                                        $approvedRequetes = $radio
                                            ->new_services()
                                            ->whereHas(
                                                'requetes_service',
                                                fn($q) => $q->where('transaction_status', 'approved'),
                                            )
                                            ->count();
                                        $percentage =
                                            $totalRequetes > 0 ? ($approvedRequetes / $totalRequetes) * 100 : 0;
                                    @endphp
                                    <div class="progress-bar bg-success" role="progressbar"
                                        style="width: {{ $percentage }}%" aria-valuenow="{{ $percentage }}"
                                        aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <small class="text-muted">{{ round($percentage) }}% de demandes finalisées</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12 mt-4">
                <div class="card border-0 shadow-sm info-card h-100">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0"><i class="fas fa-chart-line me-2 text-gradient"></i>Statistiques soumissions</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Nombre total de requêtes de service -->
                            <div class="col-md-3 text-center mb-3">
                                <div class="p-3 bg-light rounded">
                                    <h3 class="mb-0">
                                    {{ $projects->where('amount', '>', 0)->count() }}
                                    </h3>
                                    <small class="text-muted">Appels à candidature avec frais de dossiers</small>
                                </div>
                            </div>

                            <!-- Services payés -->
                            <div class="col-md-3 text-center mb-3">
                                <div class="p-3 bg-light rounded">
                                 
                                    <h3 class="mb-0">
                                    {{ $projects->where('amount', '>', 0)
                                               ->sum(fn($p) => $p->submission->where('fees_paid', true)->count()) }}
                                    </h3>
                                    <small class="text-muted">Soumissions payées</small>
                                </div>
                            </div>


                            <!-- Services payés -->
                            <div class="col-md-3 text-center mb-3">
                                <div class="p-3 bg-light rounded">
                                    <h3 class="mb-0">
                                        {{ number_format($num = $radio->balance, 0, '', $thousands_separator = ' ') }} FCFA
                                    </h3>
                                    <small class="text-muted">Balance</small>
                                </div>
                            </div>
                            <!-- Chiffre généré -->
                            <div class="col-md-3 text-center h-auto mb-3">
                                <div class="p-3 bg-light rounded">
                                    <h3 class="mb-0">
                                        <h3 class="mb-0">
                                        {{ number_format(
                                                $projects
                                                    ->filter(fn($p) => $p->amount > 0) // uniquement projets avec frais
                                                    ->sum(fn($p) =>
                                                        $p->submission
                                                            ->where('fees_paid', true)
                                                            ->count() * $p->amount
                                                    ),
                                                0, '', ' '
                                            ) }} FCFA</h3>
                                        <small class="text-muted"> Total généré via les appels à candidature</small>
                                </div>
                            </div>

                            <!-- Barre de progression -->
                            <div class="col-12 mt-2">
                            @php
                                // On filtre uniquement les projets avec frais de dossier
                                $projectsWithFees = $projects->filter(fn($p) => $p->amount > 0);

                                // Nombre total de soumissions (uniquement projets avec amount > 0)
                                $totalSoumissions = $projectsWithFees->sum(fn($p) => $p->submission->count());

                                // Nombre de soumissions payées (fees_paid = true, uniquement projets avec amount > 0)
                                $soumissionsPayees = $projectsWithFees->sum(fn($p) =>
                                    $p->submission->where('fees_paid', true)->count()
                                );

                                // Pourcentage
                                $percentage = $totalSoumissions > 0
                                    ? ($soumissionsPayees / $totalSoumissions) * 100
                                    : 0;
                            @endphp

                            <div class="progress" style="height: 10px;">
                                <div class="progress-bar bg-success"
                                    role="progressbar"
                                    style="width: {{ $percentage }}%"
                                    aria-valuenow="{{ $percentage }}"
                                    aria-valuemin="0"
                                    aria-valuemax="100">
                                </div>
                            </div>
                            <small class="text-muted">{{ round($percentage) }}% de soumissions payées</small>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0"><i class="fas fa-list-alt me-2 text-gradient"></i>Demandes de e-service
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="">
                            <table id="serviceRequestsTable" class="table table-bordered table-striped align-middle  w-100">
                                <thead class="table-light">
                                    <tr>
                                        <th>Client</th>
                                        <th>Service</th>
                                        <th>Contact</th>
                                        <th>Montant</th>
                                        <th>Transaction</th>
                                        <th>Statut</th>
                                        <th>Livré</th>
                                        <th>Date</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($radio->new_services as $service)
                                        @foreach ($service->requetes_service as $request)
                                            <tr data-status="{{ $request->transaction_status }}">
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-grow-1">
                                                            {{ $request->name }}
                                                            <small class="d-block text-muted">{{ $request->email }}</small>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge badge-service bg-light text-dark">
                                                        {{ $service->name ?? 'Service inconnu' }}
                                                    </span>
                                                </td>
                                                <td>{{ $request->contact ?? $service->user->phone }}</td>
                                                <td>{{ number_format($request->amount) }} FCFA</td>
                                                <td>
                                                    <small
                                                        class="text-muted">{{ $request->transaction_id ?? 'N/A' }}</small>
                                                </td>
                                                <td>
                                                    @if ($request->transaction_status == 'approved')
                                                        <span class="badge status-completed"><i
                                                                class="fas fa-check-circle me-1"></i> Payé</span>
                                                    @elseif($request->transaction_status == 'pending')
                                                        <span class="badge status-pending"><i
                                                                class="fas fa-clock me-1"></i> En attente</span>
                                                    @else
                                                        <span class="badge status-failed"><i
                                                                class="fas fa-times-circle me-1"></i> Échoué</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input updateDeliveredSuperStatus"
                                                            type="checkbox"
                                                            {{ $request->delivered == 1 ? 'checked' : '' }}
                                                            data-url="{{ url('new_services/' . $request->id . '/requete/updateDeliveredSuperStatus') }}">
                                                    </div>
                                                </td>
                                                <td>{{ \Carbon\Carbon::parse($request->created_at)->locale('fr')->translatedFormat('l d F Y') }}
                                                </td>
                                                @php
                                                    $dateSlot = json_decode($request->date_slot, true);

                                                    $dates = $dateSlot['dates'];
                                                    $pricingIds = $dateSlot['pricings'];

                                                    $pricingModels = \App\Models\Pricing::whereIn('id', $pricingIds)
                                                        ->get()
                                                        ->keyBy('id');

                                                    $details = [];
                                                    foreach ($dates as $index => $date) {
                                                        $pricingId = $pricingIds[$index] ?? null;
                                                        $pricing = $pricingModels[$pricingId] ?? null;

                                                        if ($pricing) {
                                                            $details[] = [
                                                                'date' => $date,
                                                                'time_slot' => $pricing->time_slot,
                                                                'price' => $pricing->price,
                                                            ];
                                                        }
                                                    }
                                                @endphp
                                                <td>
                                                    <div class="btn-group" role="group">
                                                        <button class="btn btn-sm btn-outline-primary view-details"
                                                            data-bs-toggle="tooltip" title="Voir les détails"
                                                            data-client="{{ $request->name }}"
                                                            data-email="{{ $request->email }}"
                                                            data-contact="{{ $request->contact }}"
                                                            data-service="{{ $service->name }}"
                                                            data-amount="{{ number_format($request->amount) }} FCFA"
                                                            data-transaction="{{ $request->transaction_id }}"
                                                            data-status="{{ $request->transaction_status }}"
                                                            data-created="{{ \Carbon\Carbon::parse($request->created_at)->locale('fr')->translatedFormat('l d F Y') }}"
                                                            data-updated="{{ \Carbon\Carbon::parse($request->updated_at)->locale('fr')->translatedFormat('l d F Y') }}"
                                                            data-description="{{ $request->description ?? 'Aucune description' }}"
                                                            data-details="{{ json_encode($details ?? []) }}">
                                                            <i class="fas fa-eye"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white d-flex flex-md-row flex-column justify-content-md-between justify-content-start align-items-start align-items-md-center">
                        <div>
                            <h5 class="card-title mb-0"><i class="fas fa-list-alt me-2 text-gradient"></i>Reversements
                            </h5>
                        </div>

                        <div class="mt-2 mt-md-0">
                            <a class="gradient-btn float-end" href="javascript:void(0);" data-bs-toggle="modal"
                                data-bs-target="#createPayoutModal">
                                <i class="feather icon-plus me-2"></i>Initier un reversement
                            </a>
                        </div>

                    </div>
                    <div class="card-body">
                        <div class="">
                            <table id="payoutsTable" class="table table-bordered table-striped align-middle  w-100">
                                <thead class="table-light">
                                    <tr>
                                        <th>Montant</th>
                                        <th>Status</th>
                                        <th>Numero Paiement</th>
                                        <th>ID Paiement</th>
                                        <th>Date</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($radio->payouts as $payout)
                                        <tr>
                                            <td>{{ $payout->amount }}</td>
                                            <td>
                                                @if ($payout->status == 'sent')
                                                    <span class="badge status-completed"><i
                                                            class="fas fa-check-circle me-1"></i> Envoyé</span>
                                                @elseif($payout->status == 'pending')
                                                    <span class="badge status-pending"><i class="fas fa-clock me-1"></i>
                                                        En attente</span>
                                                @else
                                                    <span class="badge status-failed"><i
                                                            class="fas fa-times-circle me-1"></i> Échoué</span>
                                                @endif
                                            </td>
                                            <td>{{ $payout->payout_number }}</td>
                                            <td>{{ $payout->external_id }}</td>
                                            <td>{{ \Carbon\Carbon::parse($payout->created_at)->locale('fr')->translatedFormat('l d F Y') }}
                                            </td>

                                            <td>
                                                <div class="btn-group" role="group">
                                                    <button class="btn btn-sm btn-outline-primary view-details-payout"
                                                        data-id="{{ $payout->id }}"
                                                        data-amount="{{ $payout->amount }}"
                                                        data-external-id="{{ $payout->external_id }}"
                                                        data-status="{{ $payout->status }}"
                                                        data-number="{{ $payout->payout_number }}"
                                                        data-created="{{ \Carbon\Carbon::parse($payout->created_at)->format('Y-m-d H:i:s') }}"
                                                        type="button">
                                                        <i class="fas fa-eye"></i>
                                                    </button>

                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createPayoutModal" tabindex="-1" aria-labelledby="createPayoutModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">

                <form action="{{ route('create_payout', ['radio_id' => $radio->id]) }}" method="POST"
                    id="createPayoutForm">
                    @csrf

                    <div class="modal-header">
                        <h5 class="modal-title" id="createPayoutModalLabel">Initier un reversement</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <div class="mb-3">
                            <label>Montant</label>
                            <input name="amount" type="number" class="form-control" id="amount"
                                required></textarea>
                        </div>

                        <div class="modal-footer">
                            <button type="submit" class="gradient-btn btn text-white">Enregistrer</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            // Initialisation de DataTable avec des options étendues
            var table = $('#serviceRequestsTable, #payoutsTable').DataTable({
                responsive: true,
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json',
                    paginate: {
                        previous: '<i class="fas fa-chevron-left"></i>',
                        next: '<i class="fas fa-chevron-right"></i>'
                    }
                },
                initComplete: function () {
                    $('.dataTables_filter input[type="search"]').css({
                    'width': '180px',
                    'display': 'inline-block'
                    });
                },
                lengthMenu: [
                    [5, 10, 25, 50, 100, -1],
                    [5, 10, 25, 50, 100, "Tous"]
                ],
                pageLength: 5,
                lengthChange: true,
            });

            // Filtrage avancé avec prise en charge des recherches multiples
            $('.filter-item').on('click', function(e) {
                e.preventDefault();
                var filter = $(this).data('filter');

                table.column(5).search(filter === 'all' ? '' : filter).draw();
                $('#filterDropdown').html(`<i class="fas fa-filter me-1"></i>${$(this).text()}`);
            });

            // Initialisation des tooltips avec mise à jour automatique
            table.on('draw', function() {
                $('[data-bs-toggle="tooltip"]').tooltip();
            });

            $('#serviceRequestsTable').on('click', '.view-details', function() {
                var btn = $(this);
                var details = btn.data('details') || [];

                var broadcastsHtml = '';
                if (details.length > 0) {
                    broadcastsHtml = `
                        <div class="mb-3 mt-4">
                            <table class="table table-bordered table-striped table-sm">
                                <thead class="table-light">
                                    <tr>
                                        <th colspan="3" class="text-center">Détails des Diffusions</th>
                                    </tr>
                                    <tr>
                                        <th>Date</th>
                                        <th>Heure</th>
                                        <th>Montant (CFA)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${details.map(item => `
                                            <tr>
                                                <td>${new Date(item.date).toLocaleDateString('fr-FR')}</td>
                                                <td>${item.time_slot}</td>
                                                <td class="text-end">${new Intl.NumberFormat('fr-FR').format(item.price)}</td>
                                            </tr>
                                        `).join('')}
                                </tbody>
                            </table>
                        </div>
                    `;
                } else {
                    broadcastsHtml =
                        '<div class="alert alert-info mt-3">Aucun détail de diffusion disponible</div>';
                }

                Swal.fire({
                    title: 'Détails de la demande',
                    html: `
                        <div class="text-start">
                            <div class="d-flex mb-3">
                                <div class="flex-grow-1">
                                    <h5 class="mt-0 mb-1">${btn.data('client')}</h5>
                                    <p class="mb-0 text-muted">${btn.data('email')}</p>
                                    <p class="mb-0"><small>${btn.data('contact')}</small></p>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <p><strong>Service:</strong> ${btn.data('service')}</p>
                                    <p><strong>Montant:</strong> ${btn.data('amount')}</p>
                                </div>
                                <div class="col-md-6">
                                    <p><strong>Transaction ID:</strong> ${btn.data('transaction') || 'N/A'}</p>
                                    <p><strong>Statut:</strong> ${formatStatus(btn.data('status'))}</p>
                                </div>
                            </div>
                            
                            <hr>
                            
                            <div class="mb-3">
                                <h6>Description:</h6>
                                <p class="mb-0">${btn.data('description')}</p>
                            </div>
                            <hr>
                            ${broadcastsHtml}
                            <hr>
                            
                            <div class="d-flex justify-content-between text-muted">
                                <small>Créé le: ${btn.data('created')}</small>
                                <small>Mis à jour: ${btn.data('updated')}</small>
                            </div>
                        </div>
                    `,
                    icon: 'info',
                    confirmButtonText: 'Fermer',
                    confirmButtonColor: '#2575fc',
                    width: '700px',
                    showClass: {
                        popup: 'animate__animated animate__fadeInUp'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutDown'
                    }
                });
            });

            // Fonction helper pour formater le statut
            function formatStatus(status) {
                if (status === 'approved') {
                    return '<span class="badge status-completed"><i class="fas fa-check-circle me-1"></i> Payé</span>';
                } else if (status === 'pending') {
                    return '<span class="badge status-pending"><i class="fas fa-clock me-1"></i> En attente</span>';
                } else {
                    return '<span class="badge status-failed"><i class="fas fa-times-circle me-1"></i> Échoué</span>';
                }
            }

        });
    </script>

    <script>
        function showToast(type, message, timer = 3000) {
            const Toast = Swal.mixin({
                toast: true,
                position: "top-end",
                showConfirmButton: false,
                timer: timer,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });
            Toast.fire({
                icon: type,
                title: message
            });
        }
    </script>

    <script>
        $(document).ready(function() {
            $(document).on('change', '.updateDeliveredSuperStatus', function() {
                let checkbox = $(this);
                let url = checkbox.data('url');
                let info = checkbox.is(':checked') ? 1 : 0;

                console.log(info)

                $.ajax({
                    url: url,
                    method: 'PATCH',
                    data: JSON.stringify({
                        info: info
                    }),
                    contentType: 'application/json',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        console.log(response)
                        showToast('success', response.message ||
                            'Statut mis à jour avec succès')

                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                        showToast('error', 'Erreur lors de la mise à jour du statut')
                    }
                });
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            const modalBody = document.getElementById('payoutModalBody');

            const formatDate = (datetime) => {
                const date = new Date(datetime);
                return date.toLocaleDateString('fr-FR', {
                    weekday: 'long',
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
            };

            const formatAmount = (amount) => {
                return new Intl.NumberFormat('fr-FR').format(amount) + ' FCFA';
            };

            $('#payoutsTable').on('click', '.view-details-payout', function() {
                var btn = $(this);
                const amount = btn.data('amount');
                const externalId = btn.data('external-id');
                const status = btn.data('status');
                const number = btn.data('number');
                const created = btn.data('created');

                let statusLabel = '';
                switch (status) {
                    case 'pending':
                        statusLabel = '<span class="badge text-bg-warning">En attente</span>';
                        break;
                    case 'sent':
                        statusLabel = '<span class="badge text-bg-success">Reversé</span>';
                        break;
                    default:
                        statusLabel = '<span class="badge text-bg-danger">Échoué</span>';
                        break;
                }

                Swal.fire({
                    title: 'Informations du reversement',
                    html: `
                <div class="row">
                    <div class="row mb-3">
                        <div class="col fw-bold"> Montant </div>
                        <div class="col">${formatAmount(amount)}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col fw-bold"> Transaction ID : </div>
                        <div class="col">${externalId}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col fw-bold"> Statut du reversement : </div>
                        <div class="col">${statusLabel}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col fw-bold"> Numéro : </div>
                        <div class="col">${number}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col fw-bold"> Date de création : </div>
                        <div class="col">${formatDate(created)}</div>
                    </div>
                </div>
            `,
                    icon: 'info',
                    confirmButtonText: 'Fermer',
                    confirmButtonColor: '#2575fc',
                    width: '700px',
                    showClass: {
                        popup: 'animate__animated animate__fadeInUp'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutDown'
                    }
                });
            });
        });
    </script>

@endsection