@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.searchProvince') }}">
                    @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-6">
                        <div class="row g-4">
                    
                            @if(count($rootProvinces) > 0)

                                @foreach ($rootProvinces 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->libelle }}</a></h5>
                                                    <p class="mb-0 small text-info">
                                                        {{ $item->pays->libelle }} |
                                                        @if(intval($item->active) == 1)
                                                        <em class="text-success">active</em>
                                                        @else
                                                        <em class="text-danger">inactive</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" href="{{ route('root.editProvince', ['id' => $item->id]) }}"><i class="bi bi-pencil fa-fw me-2"></i>Editer</a></li>
                                                    <li><a class="dropdown-item" href="{{ route('root.destroyProvince', ['id' => $item->id]) }}"><i class="bi bi-trash fa-fw me-2"></i>Supprimer</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">
                                        Aucune province pour le moment !
                                    </div>
                                </div>
                                <!-- Card item END -->
                            @endif
                            
                        </div>
                        
                    </div>

                    <!-- Card item START -->
                    <div class="col-md-6">
                        
                        <!-- Card item START -->
                        <form method="POST" action="{{ route('root.storeProvince') }}">
                            @csrf


                            <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">Nouvelle Province</a></h5>
                                        </div>
                                    </div>
                                </div>

                                <div class="card-body">
                                    <div class="row">

                                        <div class="col-xl-6">
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="code">Code</label>
                                                <input type="text" class="form-control @error('code') is-invalid @enderror" name="code" placeholder="Code" required value="{{ old('code') }}">
                                                @error('code')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                
                                        <div class="col-xl-6">
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="libelle">Libelle</label>
                                                <input type="text" class="form-control @error('libelle') is-invalid @enderror" name="libelle" placeholder="Libelle" required value="{{ old('libelle') }}">
                                                @error('libelle')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-xl-12">
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label" for="pays">Pays</label>
                                                <select class="form-control" name="pays_id" required>
                                                    <option data-display="Select">Please select</option>
                                                    @foreach($paysList as $pays)
                                                        <option value="{{ $pays->id }}">{{ $pays->libelle }}</option>
                                                    @endforeach
                                                </select>
                                                @error('pays_id')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                
                                        <div class="col-xl-12">
                                            
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="active">Activation</label>
                                                <select class="form-control @error('active') is-invalid @enderror" name="active" required>
                                                    <option data-display="Select">Please select</option>
                                                    <option value="0" @if(old('active') == 0) selected @endif>Province inactif</option>
                                                    <option value="1" @if(old('active') == 1) selected @endif>Province actif</option>
                                                </select>
                                                @error('role')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                
                                    </div>
                                </div>

                                <!-- Card footer -->
                                <div class="card-footer bg-transparent border-top">
                                    <!-- Message button -->
                                    <button type="submit" class="btn btn-primary btn-block text-white">
                                        soumettre
                                    </button>
                                </div>

                            </div>
                        </form>
						<!-- Card item END -->
                        
                    </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 : ({{ $rootProvinces->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