@extends('layouts.base')
@section('content')
<div class="layout-px-spacing">
    <div class="middle-content container-xxl p-0">
        <div id="tableCustomBasic" class="col-lg-12 col-12 layout-spacing">
            <div class="widget-header seperator-header layout-top-spacing">
                <div class="row">
                    <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                        <div class="d-flex justify-content-between mb-4">
                            <h1>Liste des cartes en attente d'impression</h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="statbox widget box box-shadow">
                <div class="widget-content widget-content-area">
                    <table id="zero-config" class="table style-1 dt-table-hover non-hover">
                        <thead>
                            <tr>
                                <th class="" scope="col">Numero carte</th>
                                <th class="text-center" scope="col">Immatriculation Véhicule</th>
                                <th class="text-center" scope="col">Nom Bénéficiaire</th>
                                <th class="text-center" scope="col">Statut Carte</th>
                                <th class="text-center" scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($cartes as $carte)
                            <tr>
                                <td class="">{{ $carte->NumeroAutorisation}}</td>
                                <td class="text-center">{{ $carte->vehicule->Immatriculation}}</td>
                                <td class="text-center">{{ $carte->vehicule->beneficiaire->RaisonSociale}}</td>
                                <td class="text-center">
                                    <span class="badge badge-light-secondary bg-opacity-15 px-2 py-6px rounded fs-12px d-inline-flex align-items-center"><i class="fa fa-circle fs-9px fa-fw me-5px"></i>En attente d'impression</span>
                                </td>

                                <td class="text-center">
                                    <form action="{{ route('cartes.update_state_approved_printer', $carte->id) }}" method="GET" id="submit{{ $carte->id}}">
                                        <button type="button" class="btn btn-success" data-original-title="Valider l'impression" data-toggle="tooltip" title="Valider l'impression" onclick="changeAction('{{ $carte->id}}')"><i class="fa fa-check"></i></button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
<script type="text/javascript">
    function changeAction(id) {
        let form = document.querySelector(`#submit${id}`);
        swal({
            title: 'Etes vous sur de vouloir Validé l\'impression'
            , text: 'L\exécution de cette action prouve que vous avez bien imprimé la carte. Assurez vous que l\'impression est de bonne qualité avant d\'appuyer sur OUI parceque la carte disparaitra de votre vue'
            , icon: 'warning'
            , showCancelButton: true
            , buttons: ['Annuler', 'OUI']
            , dangerMode: true,

        }).then((result) => {
            if (result) {
                form.submit();
            }
        })
    }

</script>
@endsection