{% extends 'base.html.twig' %}

{% block title %}Détail d'une entreprise{% endblock %}

{% block body %}
<style>
    .form-label {
        font-size: 16px;
        font-weight: bold;
    }
    .form-label span {
        font-size: 14px;
        font-weight: normal;
    }
    .form-container, .row {
        margin-left: 20px;
        margin-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    #btn-edit-infos {
        position: absolute;
        top: 30px;
        right: 30px;
    }
    .section-title {
        font-size: 24px;
        font-weight: bold;
        margin-left: 30px;
        margin-bottom: 30px;
    }
    /* Rounded border */
    hr.sep-rounded {
    border-top: 8px solid #bbb;
    border-radius: 5px;
    }
</style>
<script>
    $(document).ready(function () {
        $(".page-title h1").text('FICHE CLIENT : {{ company.companyName }}');
        //$(".bandeau-img img").attr("src","assets/icons/icon_office.png");

        $('#btn-add-client').click(function() {
            $('#addClientPopup').modal('show');
        })

        $('#saveClient').click( function() {

            var url = window.location.href;

            var nom = $('#client_userName').val();
            var prenom = $('#client_userLastName').val();
            var mail = $('#client_userMail').val();
            var fonction = $('#client_userMail').val();
            var phone = $('#client_userPhone').val();
            var photo = $('#client_userPhoto').val();
            var company = "{{ company.companyName }}";

            //alert('nom = ' + nom + ", prenom = " + prenom + ", mail = " + mail + ", function = " + fonction + ", phone = " + phone);
            $.ajax({
                url: '/users/add-ajax-list',
                method: "get",
                dataType: "json",
                data: {
                    nom: nom,
                    prenom: prenom,
                    mail : mail,
                    fonction: fonction,
                    phone: phone,
                    company: company, 
                    userPhoto: photo
                }
            }).done(function (response) {
                console.log('L\' utilisateur ' + nom + ' ' + prenom + ' a bien été enregistré.');
                $('#addClientPopup').modal('hide');
                window.location.href = url;
            }).fail(function (response) {
                alert("Une erreur est survenue à l'insertion du tag. Veuillez réessayer plus tard.");
            });
        })

    })
</script>
<!-- Modal -->
<div class="modal fade" id="addClientPopup" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Ajouter un nouveau contact client</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
            <label for="client_userPhoto" class="form-label">Photo du client</label>
            <input type="file" name="userPhoto" id="client_userPhoto" class="form-control" placeholder="Photo du client">
        </div>
        <div class="mb-3">
                <label for="client_userName" class="form-label">Nom</label>
                <input type="text" name="userName" id="client_userName" class="form-control" placeholder="Nom du client">
        </div>
        <div class="mb-3">
                <label for="client_userLastName" class="form-label">Prénom</label>
                <input type="text" name="userLastName" id="client_userLastName" class="form-control" placeholder="Prénom du client">
        </div>
        <div class="mb-3">
                <label for="client_userMail" class="form-label">Mail</label>
                <input type="email" name="userMail" id="client_userMail" class="form-control" placeholder="Mail du client">
        </div>
        <div class="mb-3">
            <label for="client_userFunction" class="form-label">Fonction</label>
            <input type="text" name="userFunction" id="client_userFunction" class="form-control" placeholder="Fonction du client">
        </div>
        <div class="mb-3">
            <label for="client_userPhone" class="form-label">Téléphone</label>
            <input type="number" name="userPhone" id="client_userPhone" class="form-control" placeholder="Téléphone du client">
        </div>
      </div>
      <div class="modal-footer">
        <div class="pos-controls">
            <button type="button" id="closePopUp" class="btn-glossy red pos-left" data-bs-dismiss="modal">Fermer</button>
            <button type="button" id="saveClient" class="btn-glossy green pos-right">Enregistrer</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container-page">
    <!-- Your grid container -->
    <a href="/company">Mes clients</a>
    <br>
    <br>
    <div class="form-container" style="position: relative;">
        <div class="section-title">INFORMATIONS SUR L'ENTREPRISE</div>
        <hr class="sep-rounded">
        <div class="row">
            <div class="col-2">
                <img src="/uploads/companies/{{ company.companyLogo }}" class="img-thumbnail" alt="logo de l\' entreprise">
            </div>
            <div class="col-10">
                <div class="form-label">RAISON SOCIALE : &nbsp;<span>{{ company.companyName }}</span></div>
                <div class="form-label">ADRESSE : &nbsp;<span>{{ company.companyAddress }}</span></div>
                <div class="form-label">CODE POSTAL : &nbsp;<span>{{ company.companyZipcode }}</span></div>
                <div class="form-label">VILLE : &nbsp;<span>{{ company.companyCity }}</span></div>
                <div class="form-label">SIRET : &nbsp;<span>{{ company.companySIRET }}</span></div>
            </div>
        </div>
        <button class="btn-glossy" id="btn-edit-infos"><a style="" target="_blank" href="/company/edit/{{ company.id }}">Modifier les informations</a></button>
    </div>
    <div class="form-container" style="position: relative;">
        <div class="section-title">CONTACT CLIENT</div>
        <button class="section-btn btn-glossy" id="btn-add-client"><a style="" href="#">Ajouter un contact client</a></button>
        <hr class="sep-rounded">
        {% if clients|length == 0 %}
        <div class="row">
            <div class="no-data">
                <div class="no-data-text">Il n'y a encore aucun contact renseigné pour cette entreprise</div>
            </div>
        </div>
        {% else %}
            {% if clients|length == 1 %}
            <div class="row">
                <div class="col-2">
                    {% if clients[0].userPhoto is null %}
                    <img src="/uploads/users/client.png" class="img-thumbnail" alt="">
                    {% else %}
                    <img src="/uploads/users/{{ clients[0].userPhoto }}" class="img-thumbnail" alt="">
                    {% endif %}
                </div>
                <div class="col-10">
                    <div class="form-label">NOM : &nbsp;<span>{{ clients[0].nom }}</span></div>
                    <div class="form-label">PRENOM : &nbsp;<span>{{ clients[0].prenom }}</span></div>
                    <div class="form-label">MAIL : &nbsp;<span>{{ clients[0].email }}</span></div>
                    <div class="form-label">TELEPHONE : &nbsp;<span>{{ clients[0].telephone }}</span></div>
                    <div class="form-label">POSTE : &nbsp;<span>{{ clients[0].fonction }}</span></div>
                </div>
            </div>
            {% else %}
            <div class="table-container table-responsive">
                <table class="table table-striped table-hover table-bordered">
                    <caption>Contacts enregistrés chez ce client</caption>
                    <thead class="table-primary">
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">NOM</th>
                            <th scope="col">PRENOM</th>
                            <th scope="col">MAIL</th>
                            <th scope="col">TELEPHONE</th>
                            <th scope="col">POSTE</th>
                        </tr>
                    </thead>
                    <tbody style="text-align: center;">
                        {% for client in clients %}
                        <tr>
                            <th scope="row">{{ client.id }}</th>
                            <td>{{ client.nom }}</td>
                            <td>{{ client.prenom }}</td>
                            <td>{{ client.email }}</td>
                            <td>{{ client.telephone }}</td>
                            <td>{{ client.fonction }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}
        {% endif %}
    </div>
    <div class="form-container" style="position: relative;">
        <div class="section-title">PROJET(S)</div>
        <button class="section-btn btn-glossy" id="btn-add-client"><a style="" href="#">Ajouter un projet</a></button>
        <hr class="sep-rounded">
        <div class="table-container table-responsive">
            {% if projects|length == 0 %}
            <div class="row">
                <div class="no-data">
                    <div class="no-data-text">Il n'y a encore aucun projet enregistré pour ce client</div>
                </div>
            </div>
            {% else %}
            <table class="table table-striped table-hover table-bordered">
                <caption>Projets en cours ou réalisés chez ce client</caption>
                <thead class="table-primary">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">NOM DU PROJET</th>
                        <th scope="col">BRIEF</th>
                        <th scope="col">BUDGET</th>
                        <th scope="col">ESTIMATION</th>
                        <th scope="col">RESSOURCES AFFECTEES</th>
                        <th scope="col">TICKETS</th>
                        <th scope="col">TACHES</th>
                    </tr>
                </thead>
                <tbody style="text-align: center;">
                    {% for project in projects %}
                    <tr>
                        <th scope="row">{{ project.id }}</th>
                        <td>{{ project.projectName }}</td>
                        <td><div style="text-align: left;">{{ project.projectBrief|raw }}</div></td>
                        <td>{{ project.projectBudget }}</td>
                        <td>{{ project.costEstimation }}</td>
                        <td>{{ project.getMembers|length }}</td>
                        <td>{{ project.getTickets|length }}</td>
                        <td>{{ '-' }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <!--div class="dig-block-table">
            <div class="row dig-block-table-header">
                <div class="col">
                    NOM DU PROJET
                </div>
                <div class="col">
                    BRIEF
                </div>
                <div class="col">
                    BUDGET
                </div>
                <div class="col">
                    ESTIMATION
                </div>
                <div class="col">
                    RESSOURCES AFFECTEES
                </div>
                <div class="col">
                    TICKETS
                </div>
                <div class="col">
                    TACHES
                </div>
            </div>
            <div class="row">
                <div class="col">
                    DIGISTACK
                </div>
                <div class="col">
                    Lorem upsum pellifurum
                </div>
                <div class="col">
                    180 jh
                </div>
                <div class="col">
                    160 jh
                </div>
                <div class="col">
                    12
                </div>
                <div class="col">
                    23
                </div>
                <div class="col">
                    13
                </div>
            </div>
            <div class="row">
                <div class="col">
                    DIGISTACK
                </div>
                <div class="col">
                    Lorem upsum pellifurum
                </div>
                <div class="col">
                    180 jh
                </div>
                <div class="col">
                    160 jh
                </div>
                <div class="col">
                    12
                </div>
                <div class="col">
                    23
                </div>
                <div class="col">
                    13
                </div>
            </div>
        </div-->
        {% endif %}
    </div>
</div>  
{% endblock %}