@php
    use Carbon\Carbon;
@endphp



@extends('layouts.root')

@section('scripts')

@endsection

@section('root-body')
    
<!-- Card START -->
<div class="card bg-transparent">

    <!-- Card header START -->
    <div class="card-header bg-transparent border-bottom px-0">
        <!-- Search and select START -->
        <div class="row g-3 align-items-center justify-content-between">

            <!-- Search bar -->
            <div class="col-md-12">
                <form class="rounded position-relative" method="GET" action="{{ route('root.searchCarte') }}">
                    @csrf
                    <input class="form-control bg-transparent" type="text" name="keyword" placeholder="Recherche" aria-label="Search">
                    <button class="bg-transparent p-2 position-absolute top-50 end-0 translate-middle-y border-0 text-primary-hover text-reset" type="submit">
                        <i class="fas fa-search fs-6 "></i>
                    </button>
                </form>
            </div>
        </div>
        <!-- Search and select END -->
    </div>
    <!-- Card header END -->

    <!-- Card body START -->
    <div class="card-body px-0">
        <!-- Tabs content START -->
        <div class="tab-content">

            <!-- Tabs content item START -->
            <div class="tab-pane fade show active" id="nav-preview-tab-1">
                <div class="row g-4">

                    
                    <!-- Card item START -->
                    <div class="col-md-12">
                        <div class="row g-4">
                    
                            @if(count($rootCartes) > 0)

                                @foreach ($rootCartes as $item)
                                <!-- Card item START -->
                                <div class="col-md-6">
                                    <div class="card bg-transparent border h-100"> 
                                        <!-- Card header -->
                                        <div class="card-header bg-transparent border-bottom d-flex align-items-sm-center justify-content-between">
                                            <div class="d-sm-flex align-items-center">
                                                <!-- Info -->
                                                <div class="ms-0 ms-sm-2 mt-2 mt-sm-0">
                                                    <h5 class="mb-0"><a href="#" class="text-primary">{{ $item->operateur->raison_sociale ?? '' }}</a></h5>
                                                    <p class="mb-0 small text-info">
                                                        <br>
                                                        <strong class="text-primary">Responsable : </strong> {{ $item->responsable->nom_complet ?? '' }}
                                                        <br>
                                                        <strong class="text-primary">Validateur : </strong> {{ $item->validateur->noms ?? '' }} {{ $item->validateur->prenoms ?? '' }}
                                                        <br>
                                                        <strong class="text-primary">Signataire : </strong> {{ $item->signataire->noms ?? '' }} {{ $item->signataire->prenoms ?? '' }}
                                                        <br><br>
                                                        <strong class="text-primary">Date debut : </strong> {{ Carbon::parse($item->date_emission)->isoFormat('dddd D MMMM YYYY') }}
                                                        <br>
                                                        <strong class="text-primary">Date expiration : </strong> {{ Carbon::parse($item->date_expiration)->isoFormat('dddd D MMMM YYYY') }}
                                                        <br><br>
                                                        <strong class="text-primary">Code ID : </strong> {{ $item->code }} 
                                                        <br>
                                                        <strong class="text-primary">Status : </strong>
                                                        @if(intval($item->active) == 1)
                                                        <em class="text-success">signature accordee</em>
                                                        @else
                                                        <em class="text-warning">en attente de signature...</em>
                                                        @endif
                                                    </p>
                                                </div>
                                            </div>

                                            <!-- Edit dropdown -->
                                            <div class="dropdown">
                                                <a href="#" class="btn btn-sm btn-light btn-round small mb-0" role="button" id="dropdownShare1" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="bi bi-three-dots fa-fw"></i>
                                                </a>
                                                <!-- dropdown button -->
                                                <ul class="dropdown-menu dropdown-w-sm dropdown-menu-end min-w-auto shadow rounded" aria-labelledby="dropdownShare1">
                                                    <li><a class="dropdown-item" target="_blank" href="{{ route('root.editCarte', ['id' => $item->id]) }}"><i class="bi bi-pencil fa-fw me-2"></i>Editer</a></li>
                                                    <li><a class="dropdown-item" target="_blank" href="{{ route('root.signCarte', ['id' => $item->id]) }}"><i class="bi bi-pencil fa-fw me-2"></i>Signer</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Card item END -->



                                @endforeach
                            @else
                                
                                <!-- Card item START -->
                                <div class="col-md-12">
                                    <div class="alert alert-primary" role="alert">
                                        Aucun Carte pour le moment !
                                    </div>
                                </div>
                                <!-- Card item END -->
                            @endif
                            
                        </div>
                        
                    </div>

                </div> <!-- Row END -->
            </div>
            <!-- Tabs content item END -->

        </div>
        <!-- Tabs content END -->
    </div>
    <!-- Card body END -->

    <!-- Card footer START -->
    <div class="card-footer bg-transparent p-0">
        <!-- Pagination START -->
        <div class="d-sm-flex justify-content-sm-between align-items-sm-center">
            <!-- Content -->
            <p class="mb-0 text-center text-sm-start text-primary">Nombre d'elements : ({{ $rootCartes->count() }})</p>
            <!-- Pagination -->
            <nav class="d-flex justify-content-center mb-0" aria-label="navigation">
                <ul class="pagination pagination-sm pagination-primary-soft d-inline-block d-md-flex rounded mb-0">
                    <li class="page-item mb-0"><a class="page-link" href="#" tabindex="-1"><i class="fas fa-angle-left"></i></a></li>
                    <li class="page-item mb-0"><a class="page-link" href="#">1</a></li>
                    <li class="page-item mb-0 active"><a class="page-link" href="#">2</a></li>
                    <li class="page-item mb-0"><a class="page-link" href="#">3</a></li>
                    <li class="page-item mb-0"><a class="page-link" href="#"><i class="fas fa-angle-right"></i></a></li>
                </ul>
            </nav>
        </div>
        <!-- Pagination END -->
    </div>
    <!-- Card footer END -->
</div>
<!-- Card END -->

@endsection

@section('scripts')
    <!-- Les scripts spécifiques à cette vue enfant vont ici -->
@endsection