@extends('layouts.superadmin')

@section('title', 'Transactions')

@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">
@endsection


@section('content')
    <!-- Main Body -->

    <!-- Page Title Start -->
    <div class="card-header rounded-top-5">
        <div class="row align-items-center">
            <div class="col-6">
                <h4>Transactions</h4>
            </div>
        </div>
    </div>

    <!-- Table Start -->
    <div class="row">
        <!-- Styled Table Card-->
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="card rounded-bottom-5 border-0 table-card">

                <div class="card-body">
                    <div class="chart-holder">


                        <div class="table-responsive" style="overflow-x: hidden!important;">
                            {{-- <form method="post" id="transactionsForm"> --}}
                            <table class="table table-bordered table-striped" data-method="post" id="transactions-list">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th style="text-align:center">Objet de la requête</th>
                                        <th style="text-align:center">Type de requête</th>
                                        <th style="text-align:center">Nom de la radio</th>
                                        <th style="text-align:center">Nom du client</th>
                                        <th style="text-align:center" title="Montant total payé par le client">Montant</th>
                                        <th style="text-align:center" title="Montant à envoyer à la radio">A rembourser</th>
                                        <th style="text-align:center">Statut</th>
                                        <th style="text-align:center">{{ __('adminWords.action') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $i = 1;
                                    @endphp
                                    @foreach ($requetes as $requete)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $requete->title }}</td>
                                            @php
                                                $typerequete = $requete->typerequete;
                                            @endphp
                                            <td>
                                                @if ($typerequete)
                                                    {{ $typerequete->name }}
                                                @endif
                                            </td>
                                            @php
                                                $radio = $requete->radio;
                                            @endphp
                                            <td>
                                                @if ($radio)
                                                    {{ $radio->name }}
                                                @endif
                                            </td>
                                            <td>{{ $requete->nom_auditeur }}</td>
                                            <td>
                                                {{ $requete->total_amount ? (int) $requete->total_amount : (int) $requete->amount }}
                                                {{ $requete->currency }}
                                            </td>
                                            <td>{{ (int) $requete->amount }} {{ $requete->currency }}</td>
                                            <td
                                                class="@if ($requete->status) text-success @else text-danger @endif">
                                                {{ $requete->status ? 'Remboursé' : 'Non remboursé' }}
                                            </td>
                                            <td>
                                                @if ($radio)
                                                    <a type="button" class="btn btn-outline-warning" data-tooltip="tooltip"
                                                        title="Voir les détails de la transaction"
                                                        href="{{ route('transaction.show', ['id' => $requete->id]) }}">
                                                        <i class="fa fa-eye"></i>
                                                    </a>
                                                @endif

                                                {{-- @if (!$requete->status)
                                                        <a
                                                            type="button"
                                                            class="btn btn-outline-primary"
                                                            data-toggle="modal"
                                                            data-target="#transactionRepayModal-{{ $requete->id }}"
                                                            title="Rembourser la radio"
                                                            href=""
                                                        >
                                                            <i class="far fa-credit-card"></i>
                                                        </a>
                                                    @endif --}}
                                            </td>
                                        </tr>

                                        @if ($radio)
                                            <div class="modal fade" id="transactionRepayModal-{{ $requete->id }}">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h4 class="modal-title">Remboursement de la requête</h4>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <form method="post" id="transactionRepayForm"
                                                            action="{{ route('transaction.payradio', ['radio_id' => $radio->id, 'requete_id' => $requete->id]) }}"
                                                            enctype="multipart/form-data" data-reset="1" data-modal='1'
                                                            table-reload="musiooDtToShowData">
                                                            {{ csrf_field() }}
                                                            <div class="modal-body">
                                                                <div class="row">
                                                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                                                        <div class="form-group">
                                                                            <p style="text-align:justify;">
                                                                                Vous vous apprêtez à effectuer le
                                                                                remboursement de la requête
                                                                                "{{ $requete->title }}" pour
                                                                                {{ $radio->name }}.
                                                                                Voulez-vous valider cette transaction ?
                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer justify-content-around">
                                                                <button type="submit" class="effect-btn btn btn-primary"
                                                                    id="saveAlbum" title="Valider">
                                                                    Valider
                                                                </button>
                                                                <button type="button" class="effect-btn btn btn-danger"
                                                                    data-dismiss="modal">
                                                                    Annuler
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                </tbody>
                            </table>
                            {{-- </form> --}}
                        </div>
                    </div>

                </div>
            </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/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="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#transactions-list').DataTable({
                responsive: true,
                language: {
                   url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json',
                    paginate: {
                        previous: '<i class="bi bi-chevron-left"></i>',
                        next: '<i class="bi bi-chevron-right"></i>'
                    }
                },
                initComplete: function () {
                    $('.dataTables_filter input[type="search"]').css({
                    'width': '180px',
                    'display': 'inline-block'
                    });
                },

                /* buttons: [
                    'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'
                ], */
                lengthMenu: [
                    [5, 10, 25, 50, 100, -1],
                    [5, 10, 25, 50, 100, "Tous"]
                ],
                pageLength: 5,
                lengthChange: true,
            });
        });
    </script>
@endsection