<div class="pd-20 card-box">

    <div class="row">

        <div class="col-md-1">
            <div class="input-group custom ">
                <select wire:model.live="per_page" class="form-control form-control-sm">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="75">75</option>
                    <option value="100">100</option>
                </select>
            </div>
        </div>
        <div class="col-md-6 offset-md-2">
            <div class="input-group custom ">
                <input
                    type="text"
                    class="form-control form-control-sm"
                    placeholder="recherche"
                    id="_filter"
                    wire:model.live="search" />
                <div class="input-group-append custom">
                    <span class="input-group-text"><i class="icon-copy dw dw-search"></i></span>
                </div>
            </div>
        </div>

    </div>

    <div class="table-responsive">
        <table id="table" class="table-striped mb-2" border="1" style="width:100%; font-size:0.8rem;">

            <thead>
                <tr>
                    <td class="pl-1" style="width: 3%;"><b>#</b></td>
                    <td align="center" style="width: 3%;"></td>
                    <td class="pl-1" style="width: 24%;"><b>Entité</b></td>
                    <td align="center" style="width: 20%;"><b>Infraction</b></td>
                    <td align="center" style="width: 10%;"><b>type</b></td>
                    <td class="pl-1" style="width: 17%;"><b>date</b></td>
                    <td align="center" style="width: 2%;"></td>
                    <td align="center" style="width: 4%;"></td>
                </tr>
            </thead>
            <tbody>
                @php
                $n = 1;
                @endphp
                @forelse($lists as $list )
                <tr>
                    <td class="pl-1">{{ $n }}</td>
                    <td align="center">
                        @if($list->is_active)
                        <span style="color:red;"> <i class="icon-copy bi bi-circle-fill"></i></span>
                        @else
                        <span style="color:green;"> <i class="icon-copy bi bi-circle-fill"></i></span>
                        @endif
                    </td>
                    <td class="pl-1"></td>
                    <td class="pl-1">{{ $list->infraction }}</td>
                    <td class="pl-1">{{ $list->type_rens }}</td>
                    <td class="pl-1">{{ $list->created_at }}</td>
                    <td align="center">
                        <a class="text-primary" style="cursor:pointer;"
                            wire:click="detailRens({{$list->id}})">

                            <span class="icon-copy ti-info-alt"></span>
                        </a>
                    </td>
                    <td align="center">
                        <a class="text-primary" style="cursor:pointer;"
                            wire:click="$dispatch('editCustomer',[{{ $list->id }}])">

                            resolu
                        </a>
                    </td>
                </tr>
                @php
                ++$n ;
                @endphp
                @empty
                <tr>
                    <td colspan="7" align="center">Aucune donnée trouvée</td>
                </tr>
                @endforelse


            </tbody>

        </table>
        {{ $lists->links() }}
    </div>



    <div wire:ignore.self
        class="modal fade "
        id="ModalDetailRens"
        tabindex="-1"
        role="dialog"
        data-backdrop="static"
        aria-labelledby="Modal_FC"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-top">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="Modal_FC">
                        Intervenants
                    </h6>
                    <button
                        type="button"
                        class="close"
                        wire:click.prevent="closeModal"
                        data-dismiss="modal"
                        aria-hidden="true">
                        ×
                    </button>
                </div>
                <div class="modal-body">


                </div>
                <div class="modal-footer">

                    <form>
                        <div class="row">

                            <div class="col-md-4">

                                <input type="text" class="form-control form-control-sm" wire:model="key_noms" maxlength="50" placeholder="Noms">
                                @error('key_noms')
                                <small class="form-text text-danger">{{ $message }}</small>
                                @enderror

                            </div>
                            <div class="col-md-3">

                                <input type="text" class="form-control form-control-sm" wire:model="key_phone" maxlength="12" placeholder="Téléphone">
                                @error('key_phone')
                                <small class="form-text text-danger">{{ $message }}</small>
                                @enderror

                            </div>
                            <div class="col-md-4">

                                <input type="email" class="form-control form-control-sm" wire:model="key_email" placeholder="Email">
                                @error('key_email')
                                <small class="form-text text-danger">{{ $message }}</small>
                                @enderror

                            </div>

                            <div class="col-md-1 ">
                                <div class="row " style="padding-top: 5px;">

                                    <span class="badge  badge-primary" wire:click="addItem_intervenant" style="cursor:pointer;" title="Ajouter">

                                        <i class="icon-copy fa fa-check"></i>
                                    </span>

                                </div>
                            </div>

                        </div>


                    </form>

                </div>
            </div>
        </div>
    </div>



</div>


@push('scripts')

<script>
    window.addEventListener('hideModalDetailRens', event => {
        $('#ModalDetailRens').modal('hide');
    })

    window.addEventListener('showModalDetailRens', event => {
        $('#ModalDetailRens').modal('show');
    })
</script>

@endpush