@extends('layouts.master')

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@stop

@section('content')

<style>

.ben-img-profile {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 15px;
  overflow: hidden;
  display: block;
  margin: 0 auto; 
}
.cursor-pointer{
  cursor: pointer;
}

.ben-foto {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
        /* border-radius: 15px;
        overflow: hidden;
        display: block;
        margin: 0 auto; */
    }
    .btn-outline-light {
    border: 2px solid white; /* Bordure du bouton */
    color: white; /* Couleur du texte */
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent pour le bouton */
}

.btn-outline-light:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Fond un peu plus sombre au survol */
}

</style>
<!-- complex headers -->
<div class="row">
    <div class="col-12">
        <div class="material-card card">
            <div class="card-body">
                <h3 class="font-weight-bold text-center">Suivi Loyer</h3>
                <h6 class="card-subtitle"></h6><br/><br/>
                <div class="table-responsive">
                    <table id="file_export" class="table table-striped table-bordered display" style="width:100%">
                        <thead>
                            <tr>
                                <th>Immeuble</th>
                                <th>Dimension</th>
                                <th>Adresse</th>
                                <th>Montant</th>
                                <th>Bailleur</th>
                                <th>Date Début</th>
                                <th>Date Fin</th>
                                <th>Délai</th>
                                {{-- <th>Actions</th> --}}
                            </tr>
                        </thead>
                        <tbody>
                            @if(empty($loyers))
                                <h4 class="text-center"></h4>
                            @endif

                            @if(!empty($loyers))
                            {{-- @dd($loyers); --}}
                                @foreach($loyers as $loyer)
                                {{-- @if($loyer->delet_status==false) --}}

                            <tr>
                                <td> <a href="{{url('info_imm?immeuble='.$loyer->immeuble_id)}}">{{$loyer->name_immeuble}} </a></td>
                                <td> {{$loyer->dimenssion}} </td>
                                <td> {{$loyer->adresse}} </td>
                                <td> {{$loyer->cout}} HTG</td>
                                <td> {{$loyer->bailleur_nom}} {{$loyer->bailleur_prenom}} <span role="button" class="cursor-pointer"><i class="mdi mdi-information" data-toggle="modal" data-target="#myModal{{$loyer->id}}"></i></span></td>
                                <td>{{ \Carbon\Carbon::parse($loyer->date_debut)->format('d-m-Y') }}</td>
                                <td>{{ \Carbon\Carbon::parse($loyer->date_fin)->format('d-m-Y') }}</td>
                                <td> <span class="badge badge-info">{{$loyer->jours_restant}} jrs {{$loyer->heures_restant}} h</span></td>

                                {{--Start Modal info Bailleur --}}
                                    <div class="modal" id="myModal{{$loyer->id}}">
                                        <div class="modal-dialog">
                                        <div class="modal-content">
                                        
                                            <!-- Modal Header -->
                                            <div class="modal-header">
                                            <h4 class="modal-title">Détail Du Bailleur</h4>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            </div>
                                            
                                            <!-- Modal body -->
                                            <div class="modal-body">
                                                @if($loyer->en_qualite_de == 1)
                                                <h3 class="subtitle"> Propriétaire {{$loyer->bailleur_nom}}</h3>
                                                @endif
                                                @if($loyer->en_qualite_de == 2)
                                                <h3 class="subtitle"> Mandataire {{$loyer->bailleur_nom}}</h3>
                                                @endif
                                                <div>
                                                    <b>Nom : </b> {{$loyer->bailleur_nom}} <br/>
                                                    <b>Prénom : </b> {{$loyer->bailleur_prenom}} <br/>
                                                    <b>Date de Naissance : </b> {{ \Carbon\Carbon::parse($loyer->bailleur_naissance)->format('d-m-Y') }} <br/>
                                                    <b>NIF : </b> {{$loyer->bailleur_nif}} <br/>
                                                    <b>CIN : </b> {{$loyer->bailleur_cin}} <br/>
                                                    <b>E-Mail : </b> {{$loyer->bailleur_mail}} <br/>
                                                    <b>Adresse : </b> {{$loyer->bailleur_adresse}} <br/>
                                                    <b>Téléphone : </b> {{$loyer->bailleur_phone}} <br/>
                                                    <hr>
                                                </div>
                                                {{-- <div>
                                                <img src="assets/images/bailleurs/{{$loyer->image_piece}}" alt="homepage" class="dark-logo ben-img-profile" />
                                                </div> --}}
                                                <!-- Conteneur d'image avec une position relative pour le bouton -->
                                                <div class="col-md-6 text-center position-relative">
                                                    <!-- Image de l'immeuble -->
                                                    <img src="assets/images/bailleurs/{{$loyer->image_piece}}" 
                                                        alt="Image de Document" 
                                                        class="img-fluid rounded ben-foto">
                                                        
                                                    <!-- Bouton voir image -->
                                                    <a class="btn btn-outline-light position-absolute" 
                                                    title="Voir image" 
                                                    href="{{ asset('assets/images/bailleurs/' . $loyer->image_piece) }}"
                                                    style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
                                                    <i class="fas fa-eye"></i>
                                                    </a>
                                                </div>



                                            </div>
                                            
                                            <!-- Modal footer -->
                                            <div class="modal-footer">
                                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                            </div>
                                            
                                        </div>
                                        </div>
                                    </div>
                                {{-- End Modal info Bailleur --}}
                               
                            </tr>
                                    {{-- @endif --}}
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- DOM Positioning -->

 <!-- Create Modal -->
 {{-- <div class="modal fade" id="createmodel" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form action="addbllr" method="post" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="createModalLabel"><i class="ti-marker-alt mr-2"></i> Enregistrement Nouveau Bailleur </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body row">
                    <div class="col-12">
                        <div class="form-group mb-3">
                            <label class=""><small>Choisir En Qualité De</small></label>
                            <select class="form-control" name="qualite" aria-label="name" required>
                                <option>Choisir En Qualité De</option>
                                <option value="1"> Propriétaire</option>
                                <option value="2"> Mandataire </option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label class=""><small>Nom</small></label>
                            <input type="text" class="form-control" name="nom" placeholder="Entrer Nom" aria-label="no" required>
                        </div>
                        <div class="form-group mb-3">
                            <label class=""><small>Prénom</small></label>
                            <input type="text" class="form-control" name="prenom" placeholder="Entrer Prénom" aria-label="no" required>
                        </div>
                        <div class="form-group mb-3">
                            <label class=""><small>Choisir Sexe</small></label>
                            <select class="form-control" name="sexe" aria-label="name" required>
                                <option>Choisir le sexe</option>
                                <option value="0"> Féminin</option>
                                <option value="1"> Masculin </option>
                            </select>
                        </div>
                        <div class="form-group mb-3">
                            <label class=""><small>Date de Naissance</small></label>
                            <input type="date" class="form-control" name="naissance" placeholder="Entrer Naissance" aria-label="no" required>
                        </div>
                        <div class="form-group mb-3">
                            <label class=""><small>Numéro Identification Fiscale (NIF)</small></label>
                            <input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==10) return false;" class="form-control" name="nif" placeholder="Entrer NIF" aria-label="no" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label class=""><small>Carte Identification Nationale (CIN)</small></label>
                            <input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==10) return false;" class="form-control" name="cin" placeholder="Entrer CIN" aria-label="no" required>
                        </div>
                        <div class="form-group mb-3">
                            <label class=""><small>E-mail</small></label>
                            <input type="mail" class="form-control" name="mail" placeholder="Entrer E-Mail" aria-label="no">
                        </div>
                        <div class="form-group mb-3">
                            <label class=""><small>Téléphone</small></label>
                            <input type="phone" class="form-control" name="telephone" placeholder="Entrer Téléphone" aria-label="no" required>
                        </div>
                        <div class="form-group mb-3">
                            <label class=""><small>Adresse</small></label>
                            <input type="text" class="form-control" name="adresse" placeholder="Entrer Adresse" aria-label="no" required>
                        </div>
                        <div class="form-group mb-3">
                            <label class=""><small>Images Pièce</small></label>
                            <input type="file" class="form-control" name="image" aria-label="no" required>
                        </div>
                        <br/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                    <button type="submit" class="btn btn-success"><i class="ti-save"></i> Enregistrer</button>
                </div>
            </form>
        </div>
    </div>
</div> --}}

@stop