@extends('layouts.base')

@section('title')
    Réclamation/cloturé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 class="active">
                    <a class="f-s-14 f-w-500" href="#">Réclamation(s) cloturée(s)</a>
                </li>
                {{-- <li class="active">
                    <a class="f-s-14 f-w-500" href="#">Listes</a>
                </li> --}}
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            {{-- <div class="alert alert-light-success " role="alert"> Light success color alert with an example link check
                it </div> --}}
            <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 class="col-md-8 text-end">
                            <a href="#" class="btn btn-outline-danger mx-1">
                                <i class="ph-light ph-prohibit"></i> Exporter
                            </a>
                        </div>
                    </div>
                </div> --}}
                <div class="card-body">
                    <div class="app-datatable-default overflow-auto">
                        <table id="fencedClaimsTable" class="display app-data-table default-data-table">
                            <thead>
                                <tr>
                                    {{-- <th>Date de réclamation</th> --}}
                                    <th>Réference</th>
                                    <th>Ticket</th>
                                    <th>Jeu</th>
                                    <th>Réclamant</th>
                                    <th>Téléphone</th>
                                    <th>Statut</th>
                                    <th>Date du paiement</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($fencedClaims as $claim)
                                    <tr>
                                        {{-- <td>{{ $claim->claim_date->format('d/m/Y H:i') }}</td> --}}
                                        <td>{{ $claim->claim_reference }}</td>
                                        <td>{{ $claim->ticket_number }}</td>
                                        <td>{{ $claim->gameType->name }}</td>
                                        <td>{{ $claim->claimant_first_name." ".$claim->claimant_last_name }}</td>
                                        <td>{{ $claim->claimant_phone }}</td>
                                        <td>
                                            <span class="badge bg-success">{{ $claim->claimStatus->name }}</span>
                                        </td>
                                        <td>{{ $claim->payment_date->format('d/m/Y H:i') }}</td>
                                        <td class="text-nowrap">
                                            <button type="button" class="btn btn-sm btn-outline-secondary mx-1"
                                                data-bs-toggle="modal" data-bs-target="#voirReclamation{{ $claim->id }}">
                                                <i class="ph-light ph-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    {{-- <tr>
                                        <td colspan="8" class="text-center">Aucune réclamation clôturée</td>
                                    </tr> --}}
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Modale Voir Réclamation 1 -->
            @foreach ($fencedClaims as $claim)
                <div class="modal fade" id="voirReclamation{{ $claim->id }}" tabindex="-1" aria-labelledby="voirReclamation1Label"
                    aria-hidden="true">
                    <div class="modal-dialog modal-lg app_modal_lg">
                        <div class="modal-content">
                            <div class="modal-header bg-primary-800">
                                <h5 class="modal-title fs-5 text-white" id="voirReclamation1Label">Détails de la réclamation cloturée</h5>
                                <button type="button" class="fs-5 border-0 bg-none text-white" data-bs-dismiss="modal" aria-label="Close">
                                    <i class="ph ph-x-circle fs-3"></i>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="row g-3">
                                    <!------Information sur l'opération de paiement----->
                                    <div class="col-md-4">
                                        <div class="f-w-600 mb-2">Paiement</div>
                                        <div class="mb-1">
                                            <span class="text-muted">Date de paiement:</span>
                                            <div class="f-w-600">
                                                {{ optional($claim->payment_date)->format('d/m/Y H:i') }}
                                            </div>
                                        </div>
                                        {{-- <div class="mb-1">
                                            <span class="text-muted">Réf. paiement:</span>
                                            <div class="f-w-600">{{ $claim->payment_reference ?? '-' }}</div>
                                        </div> --}}
                                        <div class="mb-2">
                                            <span class="text-muted d-block">Capture du paiement:</span>
                                            @if(!empty($claim->payment_reference))
                                                <a href="{{ asset('storage/'.$claim->payment_reference) }}" target="_blank" class="d-inline-block border rounded p-1">
                                                    <img src="{{ asset('storage/'.$claim->payment_reference) }}" alt="Preuve de paiement" style="max-height: 250px; width: 150px;">
                                                </a>
                                            @else
                                                <div>-</div>
                                            @endif
                                        </div>
                                    </div>
                                    <!------Information sur la réclamation et ticket----->
                                    <div class="col-md-4">
                                        <div class="f-w-600 mb-2">Réclamation & ticket</div>
                                        <div class="mb-1">
                                            <span class="text-muted">Réf. réclamation:</span>
                                            <div class="f-w-600">{{ $claim->claim_reference }}</div>
                                        </div>
                                        <div class="mb-1">
                                            <span class="text-muted">N° ticket:</span>
                                            <span class="f-w-600">{{ $claim->ticket_number }}</span>
                                        </div>
                                        <div class="mb-1">
                                            <span class="text-muted">Type de jeu:</span>
                                            <span class="f-w-600">{{ optional($claim->gameType)->name ?? '-' }}</span>
                                        </div>
                                        <div class="mb-1">
                                            <span class="text-muted">Prix du ticket:</span>
                                            <span class="f-w-600">{{ number_format((float)($claim->amount ?? 0), 0, ',', ' ') }} F</span>
                                        </div>
                                        <div class="mb-1">
                                            <span class="text-muted">Gain:</span>
                                            <span class="f-w-600">{{ number_format((float)($claim->gain_amount ?? 0), 0, ',', ' ') }} F</span>
                                        </div>
                                        <div class="mb-1">
                                            <span class="text-muted">Code opérateur:</span>
                                            <span class="f-w-600">{{ $claim->operator_code }}</span>
                                        </div>
                                        <div class="mb-1">
                                            <span class="text-muted">Réference:</span>
                                            <span class="f-w-600">{{ $claim->ticket_referenceId }}</span>
                                        </div>
                                        {{-- <div class="mb-2">
                                            <span class="text-muted d-block">Capture du ticket:</span>
                                            @if(!empty($claim->ticket_file_path))
                                                <a href="{{ asset('storage/'.$claim->ticket_file_path) }}" target="_blank" class="d-inline-block border rounded p-1">
                                                    <img src="{{ asset('storage/'.$claim->ticket_file_path) }}" alt="Ticket" style="max-width: 100%; height: auto;">
                                                </a>
                                            @else
                                                <div>-</div>
                                            @endif
                                        </div> --}}
                                    </div>
                                    <!------Information sur le reclamant----->
                                    <div class="col-md-4">
                                        <div class="f-w-600 mb-2">Réclamant</div>
                                        <div class="mb-1">
                                            <span class="text-muted">Nom & Prénoms:</span>
                                            <div class="f-w-600">{{ $claim->claimant_first_name." ".$claim->claimant_last_name }}</div>
                                        </div>
                                        <div class="mb-1">
                                            <span class="text-muted">Téléphone:</span>
                                            <div class="f-w-600">{{ $claim->claimant_phone }}</div>
                                        </div>
                                        <div class="mb-1">
                                            <span class="text-muted">Email:</span>
                                            <div class="f-w-600">{{ $claim->claimant_mail ?? '-' }}</div>
                                        </div>
                                        <div class="mb-2">
                                            <span class="text-muted">NPI:</span>
                                            <div class="f-w-600">{{ $claim->claimant_npi }}</div>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        {{-- <div class="f-w-600 mb-2">Descriptions (captures)</div>
                                        <div class="d-flex gap-3 flex-wrap">
                                            @if(!empty($claim->first_description_file))
                                                <a href="{{ asset('storage/'.$claim->first_description_file) }}" target="_blank" class="d-inline-block border rounded p-1">
                                                    <img src="{{ asset('storage/'.$claim->first_description_file) }}" alt="Description 1" style="max-height: 140px; width: auto;">
                                                </a>
                                            @endif
                                            @if(!empty($claim->second_description_file ?? null))
                                                <a href="{{ asset('storage/'.($claim->second_description_file)) }}" target="_blank" class="d-inline-block border rounded p-1">
                                                    <img src="{{ asset('storage/'.($claim->second_description_file)) }}" alt="Description 2" style="max-height: 140px; width: auto;">
                                                </a>
                                            @endif
                                            @if(empty($claim->first_description_file) && empty($claim->second_description_file ?? null))
                                                <div>-</div>
                                            @endif
                                        </div> --}}
                                        <p>Ce paiment a été effectué par : </p>
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                            </div> --}}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection

@section('script')
<script>
        $(document).ready(function(){
            $("#fencedClaimsTable").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