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

                                @foreach ($rootCommunes as $item)

                                <!-- Card item START -->
                                <div class="col-md-12">
                                    <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="{{ asset('storage/' . $item->logo) }}" alt="logo">
                                                </div>
                                                <!-- 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">
                                                        <br>
                                                        <strong class="text-primary">Adresse : </strong> {{ $item->adresse }}
                                                        <br>
                                                        <strong class="text-primary">Contact : </strong> {{ $item->telephone }}
                                                    </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.editCommune', ['id' => $item->id]) }}"><i class="bi bi-pencil fa-fw me-2"></i>Editer</a></li>
                                                    <li><a class="dropdown-item" href="{{ route('root.destroyCommune', ['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 commune 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.storeCommune') }}" enctype="multipart/form-data">
                            @csrf

                            <input type="hidden" name="active" value="1" />


                            <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 Mairie</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-6">
                                            <div class="mb-3">
                                                <label class="col-lg-4 col-form-label text-primary" for="adresse">Adresse</label>
                                                <input type="text" class="form-control @error('adresse') is-invalid @enderror" name="adresse" placeholder="Adresse" required value="{{ old('adresse') }}">
                                                @error('adresse')
                                                <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="telephone">Telephone</label>
                                                <input type="phone" class="form-control @error('telephone') is-invalid @enderror" name="telephone" placeholder="Telephone" required value="{{ old('telephone') }}">
                                                @error('telephone')
                                                <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="website">Site web</label>
                                                <input type="phone" class="form-control @error('website') is-invalid @enderror" name="website" placeholder="Site web" required value="{{ old('website') }}">
                                                @error('website')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-xl-12">
                                            <!-- Course title -->
                                            <div class="mb-3">
                                                <label class="form-label">Uploader le logo</label>
                                                <div class="input-group mb-3">
                                                    <input type="file" class="form-control" id="inputGroupFile01" name="logo">
                                                    <label class="input-group-text">Logo</label>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Course level -->
                                        <div class="col-md-12">
                                            <label class="form-label">Quartier</label>
                                            <select class="form-select js-choice border-0 z-index-9 bg-transparent" name="quartier_id" required>
                                                <option value="">Select Quartier</option>
                                                @foreach($quartierList as $quartier)
                                                <option value="{{ $quartier->id }}">{{ $quartier->libelle }}</option>
                                                @endforeach
                                            </select>
                                        </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">Mairies : ({{ $rootCommunes->count() }})</p>
            <!-- Pagination -->
            
        </div>
        <!-- Pagination END -->
    </div>
    <!-- Card footer END -->
</div>
<!-- Card END -->

@endsection

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