@extends('admin.layouts.default')
@section('style')
    <style>
        .flash {
            position: absolute !important;
            top: 0;
            width: 90%;
        }

    </style>
@endsection
@section('content')
    <div class="content-i">
        <div class="content-box">
            <div class="element-wrapper">
                <div class="element-box">
                    <h5 class="form-header">
                        Code affiliation : {{ $aff->code }}
                    </h5>
                    <div class="row">
                        <div class="col-sm-6" style="padding-left: 20px;">
                            <div class="row">
                                <p><b>Bénéficiaire : </b>{{ $aff->owner ?? '' }}</p>
                            </div>
                            <div class="row">
                                <p><b>E-mail : </b>{{ $aff->email ?? '' }}</p>
                            </div>
                            <div class="row">
                                <p><b>Utilisations : </b>{{ $aff->utilisation ?? '' }}</p>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for=""> IBAN</label>
                                <input class="form-control" value="{{ $aff->banque_iban }}" type="text" disabled>
                            </div>
                            <div class="form-group">
                                <label class="d-block">RIB</label>
                                @if ($aff->banque_scan_rib)
                                    <a href="{{ asset('uploads/' . $aff->banque_scan_rib) }}" target="_blank"
                                        class="file-apercu">
                                        <i class="fa fa-download"></i>
                                        Télécharger le RIB
                                    </a>
                                @else
                                    aucun fichier
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table id="dataTableDetailsAffiliation" class="table table-striped table-lightfont">
                            <thead>
                                <tr>
                                    <th>N°</th>
                                    <th>Client</th>
                                    <th>Projet</th>
                                    <th>Forfait</th>
                                    <th>Date d'utilisation</th>
                                    <th>Gain</th>
                                    <th class="text-center">Paiement</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($achats as $achat)
                                    <tr>
                                        <td></td>
                                        <td>{{ $achat->user_id }}</td>
                                        <td>{{ $achat->projet_id }}</td>
                                        <td>{{ $achat->forfait }}</td>
                                        <td>{{ $achat->created_at->format('Y-m-d') }}</td>
                                        <td>{{ $achat->forfait == 'fantastique' ? $aff->reduction_fantastique : $aff->reduction_incontournable }}
                                        </td>
                                        <td class="text-center"
                                            action="{{ route('admin.affiliation.payed', $achat->id) }}">
                                            <input class="check-payed" type="checkbox" name="checkbox_payed"
                                                id="checkbox_payed_{{ $achat->id }}"
                                                {{ $achat->payed ? 'checked' : '' }}>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('js/sweetalert2@8.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            var t = $('#dataTableDetailsAffiliation').DataTable({
                "columnDefs": [{
                    "searchable": false,
                    "orderable": false,
                    "targets": 0
                }],
                "order": [
                    [0, 'asc']
                ],
                language: {
                    "sProcessing": "Traitement en cours...",
                    "sSearch": "Rechercher&nbsp;:",
                    "sLengthMenu": "Afficher _MENU_ &eacute;l&eacute;ments",
                    "sInfo": "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                    "sInfoEmpty": "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
                    "sInfoFiltered": "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    "sInfoPostFix": "",
                    "sLoadingRecords": "Chargement en cours...",
                    "sZeroRecords": "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    "sEmptyTable": "Aucune donn&eacute;e disponible dans le tableau",
                    "oPaginate": {
                        "sFirst": "Premier",
                        "sPrevious": "Pr&eacute;c&eacute;dent",
                        "sNext": "Suivant",
                        "sLast": "Dernier"
                    },
                    "oAria": {
                        "sSortAscending": ": activer pour trier la colonne par ordre croissant",
                        "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
                    },
                    "select": {
                        "rows": {
                            _: "%d lignes séléctionnées",
                            0: "Aucune ligne séléctionnée",
                            1: "1 ligne séléctionnée"
                        }
                    }
                }
            });
            t.on('order.dt search.dt', function() {
                let i = 1;

                t.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();

            var token = $('meta[name="csrf-token"]').attr('content');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var status = 0;
            var id = -1;
            $(document).on('change', '[id^="checkbox_payed_"]', function(event) {
                id = $(this).attr('id').split("_").pop();
                event.stopPropagation();
                event.preventDefault();
                var w = $(this).parent('td');
                $.ajax({
                        url: w.attr('action'),
                        method: 'POST',
                        header: {
                            'X-CSRF-TOKEN': token
                        },
                        data: {
                            payed: $(this).is(':checked') ? '1' : '0'
                        }
                    })
                    .done(function(response) {
                        if (response.status == true) {
                            Swal.fire({
                                title: 'Achat n° ' + id + ' modifié avec succès',
                                type: 'success',
                                confirmButtonColor: '#3085d6',
                                timer: '2500',
                                confirmButtonText: 'Ok',
                            });
                        }
                    })
                    .fail(function(jqXHR, ajaxOptions, thrownError) {
                        Swal.fire({
                            title: 'Erreur de mise à jour',
                            type: 'error',
                            confirmButtonColor: '#3085d6',
                            timer: '2500',
                            confirmButtonText: 'Ok',
                        });
                    });

            });
        });
    </script>
@endsection