@include('../header')

<main class="main" id="top">

    @include('../navigation')

    <div class="content">

        <div class="d-flex justify-content-between">
            <h4> <i class="fas fa-fan"></i> Compte Reditas</h4>

            {{-- <button type="button" id="BtnAppelModalAjoutDeVisite" class="btn btn-success btn-sm rounded-pill"
                data-bs-toggle="modal" data-bs-target="#VisiteModal"><i data-feather="plus-circle"></i>
                Ajouter</button> --}}
        </div>
        <hr>
        <div class="card card-shadow mb-3">
            <div class="card-body">

                {{-- <div class="d-flex justify-content-center">
                    <input style="width:300px; text-align:center"
                        class="form-control datetimepicker flatpickr-input dateInputSearch dateInput" type="text"
                        placeholder="d/m/Y À d/m/Y"
                        data-options="{&quot;mode&quot;:&quot;range&quot;,&quot;dateFormat&quot;:&quot;d/m/Y&quot;,&quot;disableMobile&quot;:true}"
                        readonly="readonly">

                    <button class="btn btn-success me-1" id="dateSearch" style="margin-left:12px;">
                        <i class="fa fa-search cursor-pointer  text-light "></i>
                    </button>
                </div> --}}



                    <ul class="nav nav-underline" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation"><a class="nav-link active" id="home-tab"
                                    data-bs-toggle="tab" href="#tab-home" role="tab" aria-controls="tab-home"
                                    aria-selected="false" tabindex="-1">Reditas</a></li>
                            <li class="nav-item" role="presentation"><a class="nav-link" id="profile-tab"
                                    data-bs-toggle="tab" href="#tab-profile" role="tab"
                                    aria-controls="tab-profile" aria-selected="false" tabindex="-1">Propriétaires</a></li>
                            <li class="nav-item" role="presentation"><a class="nav-link " id="contact-tab"
                                    data-bs-toggle="tab" href="#tab-contact" role="tab"
                                    aria-controls="tab-contact" aria-selected="true">Locataires</a></li>
                            <li class="nav-item" role="presentation"><a class="nav-link" id="reglementLocataire-tab"
                                    data-bs-toggle="tab" href="#tab-reglementLocataire" role="tab"
                                    aria-controls="tab-reglementLocataire" aria-selected="true">Prestataires</a>
                            </li>
                            <li class="nav-item" role="presentation"><a class="nav-link" id="reglementUtilise-tab"
                                    data-bs-toggle="tab" href="#tab-reglementUtilise" role="tab"
                                    aria-controls="tab-reglementUtilise" aria-selected="true">Travaux</a>
                            </li>
                            <li class="nav-item" role="presentation"><a class="nav-link"
                                    id="VersementProprietaire-tab" data-bs-toggle="tab"
                                    href="#tab-VersementProprietaire" role="tab"
                                    aria-controls="tab-VersementProprietaire" aria-selected="true">Factures locations</a></li>
                            <li class="nav-item" role="presentation"><a class="nav-link " id="versementUtilise-tab"
                                    data-bs-toggle="tab" href="#tab-versementUtilise" role="tab"
                                    aria-controls="tab-versementUtilise" aria-selected="true">Factures travaux</a>
                            </li>

                        </ul>
                        <div class="tab-content mt-3" id="myTabContent">
                            <div class="tab-pane fade active show" id="tab-home" role="tabpanel"
                                aria-labelledby="home-tab">

                                <div class="table-responsive">
                                    <table id="DocumentTable" class="table table-light">
                                        <thead>
                                            <th>#</th>
                                            <th>Type document</th>
                                            <th>Référence</th>
                                            <th>Libellé</th>

                                        </thead>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="tab-profile" role="tabpanel"
                                aria-labelledby="profile-tab">

                                <table id="BienTable" class="table table-light">
                                    <thead>
                                        <th>Référence</th>
                                        <th>Bien</th>
                                        <th>Type de bien</th>
                                        <th>Type précis</th>
                                        <th>Taux P. (%)</th>
                                        <th>Locataire</th>
                                        <th>Ville</th>
                                        <th>Commune</th>
                                    </thead>
                                </table>
                            </div>
                            <div class="tab-pane fade " id="tab-contact" role="tabpanel"
                                aria-labelledby="contact-tab">
                                <div class="d-flex flex-wrap">
                                    <span style="margin-right:10px" id="montantTotalFacture"></span>

                                    <span style="margin-right:10px" id="" class="text-warning">Encaissement
                                        : </span>

                                    <span style="margin-right:10px" id="montantTotalFactureEncaisse"></span>

                                    <span style="margin-right:10px" id="montantTotalFactureRestante"></span>

                                    <span style="margin-right:10px" id=""class="text-warning">Versement :
                                    </span>

                                    <span style="margin-right:10px" id="montantTotalFactureVerse"></span>

                                    <span style="margin-right:10px" id="montantTotalFactureVerseRestante"></span>
                                </div><br>

                                <div class="table-responsive">

                                    <table id="FactureTable" class="table table-light">
                                        <thead>
                                            <th>Date</th>
                                            <th>Référence</th>
                                            <th>Montant facture</th>
                                            <th>Part P.</th>
                                            <th>Taux P. (%)</th>
                                            <th>Encaissement</th>
                                            <th>Versement</th>
                                        </thead>
                                    </table>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="tab-reglementLocataire" role="tabpanel"
                                aria-labelledby="reglementLocataire-tab">

                                <div class="d-flex justify-content-between mb-2">
                                    <span id="montanttotalReglement"></span>
                                    <span id="montanttotalRegle"></span>
                                    <a class="btn btn-success" href="{{ route('ReglementFacture.view') }}">
                                        <i class="fa fa-plus-circle"></i> Faire un Règlement
                                    </a>
                                </div>
                                <div class="table-responsive">

                                    <table id="ReglementsLocataireTable" class="table table-light">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>Réference</th>
                                                <th>Locataire</th>
                                                <th>Mode règlement</th>
                                                <th>Numero chèque</th>
                                                <th>Banque</th>
                                                <th>Statut</th>
                                                <th>Mont. règlement</th>
                                                <th>Mont. réglé</th>
                                                <th>Solde</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>


                            </div>

                            <div class="tab-pane fade" id="tab-reglementUtilise" role="tabpanel"
                                aria-labelledby="reglementUtilise-tab">

                                <div class="d-flex justify-content-between mb-2">
                                    <span id="montanttotalReglementUtilise"></span>
                                    <span id="montanttotalRegleUtilise"></span>

                                </div>
                                <div class="table-responsive">

                                    <table id="ReglementsUtiliseLocataireTable" class="table table-light">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>Référence réglement</th>
                                                <th>Référence facture</th>
                                                <th>Mode règlement</th>
                                                <th>Numero chèque</th>
                                                <th>Banque</th>
                                                <th>Montant facture</th>

                                            </tr>
                                        </thead>
                                    </table>
                                </div>


                            </div>

                            <div class="tab-pane fade" id="tab-VersementProprietaire" role="tabpanel"
                                aria-labelledby="VersementProprietaire-tab">

                                <div class="d-flex justify-content-between mb-2">
                                    <span id="montanttotalVersement"></span>
                                    <a class="btn btn-success" id="CallversementModal">
                                        <i class="fa fa-plus-circle"></i> Faire un versement
                                    </a>
                                </div>
                                <div class="table-responsive">

                                    <table id="VersementProprietaireTable" class="table table-light">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>Mode règlement</th>
                                                <th>Numero chèque</th>
                                                <th>Banque</th>
                                                <th>Statut</th>
                                                <th>Montant</th>
                                                <th>Montant réglé</th>
                                                <th>Solde</th>
                                            </tr>
                                        </thead>
                                    </table>


                                </div>


                            </div>

                            <div class="tab-pane fade" id="tab-versementUtilise" role="tabpanel"
                                aria-labelledby="versementUtilise-tab">
                                <input type="hidden" id="idProprietaire">
                                <div class="d-flex justify-content-between mb-2">
                                    <span id="totalVersement"></span>

                                </div>
                                <div class="table-responsive">
                                    <table id="VersementsTable" class="table table-light">
                                        <thead>
                                            <th>Date</th>
                                            <th>Référence</th>
                                            <th>Montant réglé</th>
                                            <th>Infos</th>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>



            </div>
        </div>


        @include('../primary_footer')

    </div>

    @include('../chatblock')

</main>

@include('../rightbar')

@include('../footer')



</body>

</html>