@extends('layouts.base')

@section('title')
    Réclamation/enregistrée
@endsection

@section('style')

@endsection

@section('content')
    <!-- Breadcrumb start -->
    <div class="row m-1">
        <div class="col-12 ">
            <h4 class="main-title">Réclamation de gain</h4>
            <ul class="app-line-breadcrumbs mb-3">
                <li class="">
                    <a class="f-s-14 f-w-500" href="{{ route('reclamation.index') }}">
                        <span>
                            <i class="ph-duotone  ph-stack f-s-16 "></i> Tableau de bord
                        </span>
                    </a>
                </li>
                {{-- <li>
                    <a class="f-s-14 f-w-500" href="{{ route('reclamation.list') }}">Toutes Réclamations</a>
                </li> --}}
                <li class="active">
                    <a class="f-s-14 f-w-500" href="#">Réclamation(s) enregistrée(s)</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                {{-- <div class="card-header">
                    <div class="row">
                        <div class="col-md-4">
                            <input type="text" placeholder="Rechercher une réclamation..." class="form-control rounded">
                        </div>
                    </div>
                </div> --}}
                <div class="card-body">
                    <div class="app-datatable-default overflow-auto">
                        <table id="registeredClaimsTable" class="display app-data-table default-data-table">
                            <thead>
                                <tr>
                                    {{-- <th>Date</th> --}}
                                    <th>Référence</th>
                                    <th>Nature réclamation</th>
                                    <th>Ticket</th>
                                    <th>Type de jeu</th>
                                    {{-- <th>Réclamant</th> --}}
                                    {{-- <th>NPI</th> --}}
                                    <th>Date du jeu</th>
                                    {{-- <th>Expiration</th> --}}
                                    <th>Statut</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Loop through the reclamations and display them -->
                                @forelse ($claims as $claim)
                                    <tr>
                                        {{-- <td>{{ ($claim->claim_date)->format('d/m/Y H:i') }}</td> --}}
                                        <td>{{ $claim->claim_reference }}</td>
                                        <td>{{ $claim->claim_nature }}</td>
                                        <td>{{ $claim->ticket_number }}</td>
                                        {{-- <td>{{ $claim->claimant_first_name." ".$claim->claimant_last_name }}</td> --}}
                                        <td>{{ $claim->gameType->name }}</td>
                                        <td>{{ $claim->play_date->format('d/m/Y H:i') }}</td>
                                        {{-- <td>{{ $claim->ticket_expire_date->format('d/m/Y H:i') }}</td> --}}
                                        <td>
                                            @php
                                                $statusId = optional($claim->claimStatus)->id;
                                                $statusName = optional($claim->claimStatus)->name;
                                                $badgeClass = match ($statusId) {
                                                    1 => 'bg-secondary',    // Initiée
                                                    2 => 'bg-info',         // Enregistrée
                                                    3 => 'bg-warning',      // En attente
                                                    4 => 'bg-primary',      // A transmettre
                                                    5 => 'bg-indigo',       // Transmise
                                                    6 => 'bg-success',      // Clôturée
                                                    7 => 'bg-danger',       // Rejetée
                                                    default => 'bg-secondary'
                                                };
                                            @endphp
                                            <span class="badge {{ $badgeClass }}">{{ $statusName }}</span>
                                        </td>
                                        <td class="text-nowrap">
                                            <a href="#" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
                                                data-bs-target="#exampleModalLarge{{ $claim->id }}"> <i
                                                    class="ph-duotone ph-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty

                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @foreach ($claims as $claim)
        <div class="modal fade" id="exampleModalLarge{{ $claim->id }}" tabindex="-1" aria-modal="true" role="dialog">
            <div class="modal-dialog app_modal_lg ">
                <div class="modal-content">
                    <div class="modal-header bg-primary-800">
                        <h1 class="modal-title fs-5 text-white" id="exampleModalLarge2">Détails de la Réclamation</h1>
                        <button aria-label="Close" class="fs-5 border-0 bg-none text-white" data-bs-dismiss="modal"
                            type="button"><i class="ph ph-x-circle fs-3"></i></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p class="fw-bold">Référence :</p>
                                <p id="claimReference">{{ $claim->claim_reference }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="fw-bold">Date de la Réclamation :</p>
                                <p id="claimDate">{{ ($claim->claim_date)->format('d/m/Y H:i') }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="fw-bold">Nature de la réclamation :</p>
                                <p id="claimNature">{{ $claim->claim_nature }}</p>
                            </div>
                        </div>
                        <div class="app-divider-v dashed"></div>
                        <h6 class="fw-bold">Informations sur le Ticket</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="fw-bold">Date du Jeu :</p>
                                <p id="playDate">{{ ($claim->play_date)->format('d/m/Y H:i') }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="fw-bold">Date et Heure d'Expiration :</p>
                                <p id="expirationDate">{{ ($claim->ticket_expire_date)->format('d/m/Y H:i') }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="fw-bold">Numéro du Ticket :</p>
                                <p id="ticketNumber">{{ $claim->ticket_number }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="fw-bold">Référence :</p>
                                <p id="ticketReference">{{ $claim->ticket_referenceId }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="fw-bold">Gain potentiel :</p>
                                <p id="operatorCode">{{ $claim->gain_amount ?? 'XXX...XX' }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="fw-bold">Montant de la Mise :</p>
                                <p id="betAmount">{{ $claim->amount }}</p>
                            </div>
                        </div>
                        <div class="app-divider-v dashed"></div>
                        <h6 class="fw-bold">Informations sur le Réclamant</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="fw-bold">Nom :</p>
                                <p id="claimantLastName">{{ $claim->claimant_last_name }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="fw-bold">Prénom :</p>
                                <p id="claimantFirstName">{{ $claim->claimant_first_name }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="fw-bold">Téléphone :</p>
                                <p id="claimantPhone">{{ $claim->claimant_phone }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="fw-bold">NPI :</p>
                                <p id="claimantNPI">{{ $claim->claimant_npi }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $("#registeredClaimsTable").DataTable({
                language: {
                    processing: "Traitement en cours...",
                    search: "Rechercher&nbsp;:",
                    lengthMenu: " _MENU_ ",
                    info: "",
                    infoEmpty: "Affichage de l'élément 0 à 0 sur 0 élément",
                    infoFiltered: "(filtré de _MAX_ éléments au total)",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: "Aucun élément à afficher",
                    emptyTable: "Aucune donnée disponible dans le tableau",
                    paginate: {
                        first: "Premier",
                        previous: "Précédent",
                        next: "Suivant",
                        last: "Dernier"
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    }
                }
            });
        });
    </script>
@endsection