<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../../vendors/base/vendor.bundle.base.css">
    <link rel="stylesheet" href="../../css/style.css"> 
    <link rel="stylesheet" href="{{ asset('assets/css/profile.css') }}">
    <link rel="stylesheet" href="{{ asset('css/css-modification.css') }}">
    <link rel="shortcut icon" href="../../images/favicon.png"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        .error {
            color: red;
            font-size: 0.875em;
            display: block;
            margin-top: 0.25em;
        }
    </style>
</head>
<body>
    <div class="container-scroller">
        <div class="container-fluid page-body-wrapper full-page-wrapper">
            <div class="content-wrapper d-flex align-items-center auth px-0">
                <div class="row w-100 mx-0">
                    <div class="col-lg-4 mx-auto">
                        <div class="auth-form-light text-left py-5 px-4 px-sm-5">
                            <div class="brand-logo">
                                <img src="../../images/favicon.svg" alt="logo">
                            </div>
                            <h6 class="font-weight-light">Inscrivez-vous</h6>
                            <form class="pt-3 d-flex flex-column gap-2" method="POST" action="{{ path('app_register_inscription') }}" enctype="multipart/form-data">
                                
                                <!-- Designation -->
                                <div class="form-floating">
                                    <input name="designation" type="text" class="form-control form-control-lg" id="designation" placeholder="Designation">
                                    <label for="designation">Designation</label>
                                    <span class="error" id="error-designation"></span>
                                </div>

                                <!-- Description -->
                                <div class="form-floating">
                                    <textarea name="description" id="description" rows="10" class="form-control"></textarea>
                                    <label for="description">Description</label>
                                    <span class="error" id="error-description"></span>
                                </div>

                                <!-- Telephone -->
                                <div class="form-floating">
									<input name="telephone" type="number" class="form-control form-control-lg" id="telephone" placeholder="telephone">
									<label for="telephone">Telephone</label>
									<span id="error-telephone" class="error"></span>
								</div>

								<div class="form-floating">
									<input name="telephone2" type="number" class="form-control form-control-lg" id="telephone2" placeholder="telephone">
									<label for="telephone2">Telephone2</label>

								</div>

								<div class="form-floating">
									<input name="telephone3" type="number" class="form-control form-control-lg" id="telephone3" placeholder="telephone">
									<label for="telephone3">Telephone3</label>

								</div>
                                <!-- Firstname -->
                                <div class="form-floating">
                                    <input name="firstname" type="text" class="form-control form-control-lg" id="firstname" placeholder="Firstname">
                                    <label for="firstname">Firstname</label>
                                    <span class="error" id="error-firstname"></span>
                                </div>

                                <!-- Lastname -->
                                <div class="form-floating">
                                    <input name="lastname" type="text" class="form-control form-control-lg" id="lastname" placeholder="Lastname">
                                    <label for="lastname">Lastname</label>
                                    <span class="error" id="error-lastname"></span>
                                </div>

                                <!-- Adresse -->
                                <div class="form-floating">
                                    <input name="adresse" type="text" class="form-control form-control-lg" id="adresse" placeholder="Adresse">
                                    <label for="adresse">Adresse</label>
                                    <span class="error" id="error-adresse"></span>
                                </div>

                                <!-- Pays -->
                                <div class="form-floating">
                                    <select name="pays" id="pays" class="form-control">
                                        <option value="1" selected>Madagascar</option>
                                    </select>
                                    <label for="pays">Pays</label>
                                </div>

                                <!-- Ville -->
                                <div class="form-floating">
                                    <span id="loader-ville" class="loader profil"></span>
                                    <select name="ville" id="ville" class="form-control">
                                        {% for ville in villes %}
                                            <option value="{{ ville.id }}" selected>{{ ville.name }}</option>
                                        {% endfor %}
                                    </select>
                                    <label for="ville">Ville</label>
                                    <span class="error" id="error-ville"></span>
                                </div>

                                <!-- Quartier -->
                                <div class="form-floating">
                                    <span id="loader-quartier" class="loader profil"></span>
                                    <select name="quartier" id="quartier" class="form-control">
                                        {% for quartier in quartiers %}
                                            <option value="{{ quartier.id }}" selected>{{ quartier.name }}</option>
                                        {% endfor %}
                                    </select>
                                    <label for="quartier">Quartier</label>
                                    <span class="error" id="error-quartier"></span>
                                </div>

                                <!-- Image -->
                                <div class="form-floating">
                                    <input name="image" type="file" class="form-control form-control-lg" id="image" accept=".png,.jpg" placeholder="Choose image">
                                    <label for="image">Image</label>
                                </div>

                                <!-- Numero CIN -->
                                <div class="form-floating">
                                    <input name="cin" type="text" class="form-control form-control-lg" id="cin" placeholder="Numero CIN">
                                    <label for="cin">Numero CIN</label>
                                    <span class="error" id="error-cin"></span>
                                </div>

                                <!-- Email -->
                                <div class="form-floating">
                                    <input name="email" type="email" class="form-control form-control-lg" id="email" placeholder="Email" aria-required="true">
                                    <label for="email">Email</label>
                                    <span class="error" id="error-email"></span>
                                </div>

                                <!-- Password -->
                                <div class="form-floating">
                                    <input name="mdp" type="password" class="form-control form-control-lg" id="mdp" placeholder="Password">
                                    <label for="mdp">Password</label>
                                    <span class="error" id="error-mdp"></span>
                                </div>

                                <!-- Terms & Conditions -->
                                <div class="mb-4">
                                    <div class="form-check">
                                        <label class="form-check-label text-muted">
                                            <input type="checkbox" class="form-check-input" id="terms">
                                            I agree to all Terms & Conditions
                                        </label>
                                    </div>
                                </div>

                                <!-- Submit Button -->
                                <div class="mt-3">
                                    <button type="submit" class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn">SIGN UP</button>
                                </div>

                                <!-- Login Link -->
                                <div class="text-center mt-4 font-weight-light">
                                    Already have an account?
                                    <a href="{{ path('app_register_login') }}" class="text-primary">Login</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Plugins JS -->
        <script src="../../vendors/base/vendor.bundle.base.js"></script>
        <script src="../../js/off-canvas.js"></script>
        <script src="../../js/hoverable-collapse.js"></script>
        <script src="../../js/template.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
        <script src="{{ asset('js/js-modification.js') }}"></script>
    </div>
</body>
</html>
