{#Integration du fichier base.html.twig#}
{% extends 'base.html.twig' %}

{#Titre de la page#}
{% block title %}
    Uploader une radiographie
{% endblock %}

{#Feuilles de styles#}
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
{% endblock %}

{#Corps de la page#}
{% block body %}

<center>
    <div class="card shadow mb-4 col-md-6">{#Conteneur Principal#}
        <div class="card-header py-3">
            {#Element titre du conteneur#}
            <h6 class="m-0 font-weight-bold text-primary">Uploader une radiographie</h6>
        </div>
        <div class="card-body" style="">
            <h1>Uploader une radiographie</h1>
            {#Affichage eventuelles des erreurs du formulaire#}
            {{ form_errors(form) }}
            {#Debut du formulaire#}
            {{ form_start(form) }}
            <div style="">


                {% form_theme form 'bootstrap_4_layout.html.twig' %}
                    <div class="input-group">
                        <div class="custom-file">
                            {#Champ pour Inserer les fichiers#}
                            {{ form_widget(form.fichiers, {'attr': {'class': 'custom-file-input', 'id': 'inputfile','multiple': 'multiple'}}) }}
                            {{ form_errors(form.fichiers) }}
                            {{ form_label(form.fichiers, null, {'label_attr': {'class': 'custom-file-label'}}) }}
                        </div>
                    </div>

                <br style="height:50%">
<hr class="sidebar-divider d-none d-md-block">
                {#Données et informations sur le fichier#}
                <h2>Informations du fichier</h2>

                <div class="col-md-6">
                    {#Champ format du formulaire#}
                    {{ form_label(form.unFormat, "Format du fichier") }}
                    {{ form_errors(form.unFormat) }}
                    {{ form_widget(form.unFormat, {'attr': {'class': 'form-control', 'id': 'unFormat'}}) }}
                </div>
                <br>
                <div class="col-md-6">
                    {#Champ modalite du formulaire#}
                    {{ form_label(form.laModalite, "Modalité du fichier") }}
                    {{ form_widget(form.laModalite, {'attr': {'class': 'form-control', 'id': 'laModalite'}}) }}
                </div>
                <br>
                <div class="col-md-6">
                    {#Champ Proprietaire du formulaire#}
                    {{ form_label(form.proprietaire, "Propriétaire de l'animal") }}
                    {{ form_widget(form.proprietaire, {'attr': {'class': 'form-control', 'id': 'proprietaire'}}) }}
                </div>
                <br>
                <div class="col-md-6">
                    {#Champ Animal du formulaire#}
                    {{ form_label(form.animal, "Animal associé à la radiographie") }}
                    {{ form_widget(form.animal, {'attr': {'class': 'form-control', 'id': 'animal'}}) }}
                </div>
                <br>
                {#Bouton pour envoyer le formulaire#}
                <button type="submit" class="btn btn-primary">Uploader</button>
            </div>
            {#Fermeture du formulaire#}
            {{ form_end(form) }}
            {#Bibliothéque JavaScript Jquery#}
            <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
            {#Bibliothéque JavaScript Bootstrap#}
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
            {#Bibliothéque JavaScript DicomParser#}
            <script src="https://unpkg.com/dicom-parser@1.8.21/dist/dicomParser.js"></script>
            {#Bibliothéque JavaScript permettant de recuperer les infos  du fichier à partir du nom de fichier#}
            <script src="{{ asset('js/upload.js') }}"></script>
            <script>
     $(document).on('change', '.custom-file-input', function (event) {
    $(this).next('.custom-file-label').html(event.target.files[0].name);
    })
  </script>
            <script>
                function displayFileName(input) {
                    var fileName = input.files[0].name;
                    document.getElementById('fichier2-label').innerHTML = fileName;
                }
            </script>
        </div>
    </div>
</center>
{% endblock %}