@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.searchAccount') }}">
                    @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($rootAccounts) > 0)

                                @foreach ($rootAccounts 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">
                                                <!-- Avatar -->
                                                <div class="avatar avatar-md flex-shrink-0">
                                                    <img class="avatar-img rounded-circle" src="{{ $item->avatar }}" alt="avatar">
                                                </div>
                                                <!-- Info -->
                                                <div class="ms-0 ms-sm-2 mt-2 mt-sm-0">
                                                    <h5 class="mb-0"><a href="#" class="text-primary">{{ $item->name }}</a></h5>
                                                    <p class="mb-0 small text-info">
                                                        {{ $item->role }} | 
                                                        @if(intval($item->active) == 1)
                                                        <em class="text-success">active</em>
                                                        @else
                                                        <em class="text-danger">inactive</em>
                                                        @endif
                                                        <br>
                                                        {{ $item->service->libelle ?? '' }}
                                                    </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.editAccount', ['id' => $item->id]) }}"><i class="bi bi-pencil fa-fw me-2"></i>Editer</a></li>
                                                    <li><a class="dropdown-item" href="{{ route('root.destroyAccount', ['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">
                                        Aucun compte 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.storeAccount') }}">
                            @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">Nouveau Compte</a></h5>
                                        </div>
                                    </div>
                                </div>

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

                                        <!-- Course level -->
                                        <div class="col-md-6">
                                            <label class="form-label">Commune</label>
                                            <select class="form-select js-choice border-0 z-index-9 bg-transparent" name="commune_id" required>
                                                <option value="">Select Commune</option>
                                                @foreach($rootCommunes as $commune)
                                                <option value="{{ $commune->id }}">{{ $commune->libelle }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <!-- Course level -->
                                        <div class="col-md-6">
                                            <label class="form-label">Service</label>
                                            <select class="form-select js-choice border-0 z-index-9 bg-transparent" name="service_id" required>
                                                <option value="">Select Service</option>
                                                @foreach($rootServices as $service)
                                                <option value="{{ $service->id }}">{{ $service->libelle }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-xl-6">
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="noms">Noms <em class="text-danger">*</em></label>
                                                <input type="text" class="form-control @error('noms') is-invalid @enderror" name="noms" placeholder="Noms" required value="{{ old('noms') }}">
                                                @error('noms')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="sexe">Sexe <em class="text-danger">*</em></label>
                                                <select class="wide form-control @error('sexe') is-invalid @enderror" name="sexe" required>
                                                    <option data-display="Select">Please select</option>
                                                    <option value="M" @if(old('sexe') == 'M') selected @endif>M</option>
                                                    <option value="F" @if(old('sexe') == 'F') selected @endif>F.</option>
                                                </select>
                                                @error('sexe')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="email">Email <em class="text-danger">*</em></label>
                                                <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" placeholder="Email" required value="{{ old('email') }}">
                                                @error('email')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="poste">Poste <em class="text-danger">*</em></label>
                                                <input type="text" class="form-control @error('poste') is-invalid @enderror" name="poste" placeholder="Poste" required value="{{ old('poste') }}">
                                                @error('poste')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="matricule">Matricule <em class="text-danger">*</em></label>
                                                <input type="text" class="form-control @error('matricule') is-invalid @enderror" name="matricule" placeholder="Matricule" required value="{{ old('matricule') }}">
                                                @error('matricule')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="role">Droits d'acces <em class="text-danger">*</em></label>
                                                <select class="form-control @error('role') is-invalid @enderror" name="role" required>
                                                    <option data-display="Select">Please select</option>
                                                    <option value="Root" @if(old('role') == 'Root') selected @endif>Root</option>
                                                    <option value="Admin" @if(old('role') == 'Admin') selected @endif>Admin</option>
                                                    <option value="Chef" @if(old('role') == 'Chef') selected @endif>Chef</option>
                                                    <option value="Agent" @if(old('role') == 'Chef') selected @endif>Agent</option>
                                                </select>
                                                @error('role')
                                                <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="prenoms">Prenoms <em class="text-danger">*</em></label>
                                                <input type="text" class="form-control @error('prenoms') is-invalid @enderror" name="prenoms" placeholder="Prenoms" required value="{{ old('prenoms') }}">
                                                @error('prenoms')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="name">Pseudo <em class="text-danger">*</em></label>
                                                <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" placeholder="Pseudo" required value="{{ old('name') }}">
                                                @error('name')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="birthday">Date naissance <em class="text-danger">*</em></label>
                                                <input type="date" class="form-control @error('birthday') is-invalid @enderror" name="birthday" placeholder="Date naissance" required value="{{ old('date_naissance') }}">
                                                @error('birthday')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="phone">Telephone <em class="text-danger">*</em></label>
                                                <input type="phone" class="form-control @error('phone') is-invalid @enderror" name="phone" placeholder="Telephone" required value="{{ old('phone') }}">
                                                @error('phone')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="phone">Grade <em class="text-danger">*</em></label>
                                                <input type="text" class="form-control @error('grade') is-invalid @enderror" name="grade" placeholder="Grade" required value="{{ old('grade') }}">
                                                @error('phone')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="password">Mot de passe <em class="text-danger">*</em></label>
                                                <input type="text" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Mot de passe" value="QWzx1234" readonly>
                                                @error('password')
                                                <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="adresse">Adresse <em class="text-danger">*</em></label>
                                                <input type="text" class="form-control @error('adresse') is-invalid @enderror" name="adresse" placeholder="Adresse" value="{{ old('adresse') }}">
                                                @error('adresse')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="active">Activation <em class="text-danger">*</em></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>Compte inactif</option>
                                                    <option value="1" @if(old('active') == 1) selected @endif>Compte 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 : ({{ $rootAccounts->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