<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Réserver un des cadeaux</title>
    <link rel="stylesheet" href="/styles.css">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
  </head>
</head>
<body>
    <div class="container mt-4">
        <div class="mt-4 p-5 bg-danger text-white rounded">
            <h1>Réserver ce cadeau</h1>
            <p>{{ message }}</p>
        </div>
    </div>
    <div class="container mt-4">
        <div class="card" style="width: 40rem;">     
            <div class="card-header">{{infosCadeaux.libelle}}</div>    
            <div class="card-body">
                <form action="/confirm-reservation" method="POST">
                    <input type="hidden" name="cadeau" id="cadeau-id" value="{{infosCadeaux.id}}">
                    <input type="hidden" name="offrant" id="offrant-id" value="{{offrant.id}}">
                    <div class="mb-3">
                        <img src="{{infosCadeaux.photo}}" class="image">                        
                    </div>
                    <div class="mb-3">
                        <label for="responsable-reg" class="form-label">Qui es-tu ?</label>
                        <input type="text" disabled id="offrant-reg" name="offrant" value="{{offrant.prenom}}">
                        <p class="depenses">Pour l'instant, tu as déjà dépensé : {{totalAchats}}€</p>
                    </div>
                    <br>
                    <div class="mb-3">
                        <label class="form-label">Le cadeau a-t-il déjà été acheté ?</label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="achete" id="achete1" value="1" {{#if infosCadeaux.achete}}checked{{/if}}>
                                <label class="form-check-label" for="achete1">Oui</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="achete" id="achete2" value="0" {{#unless infosCadeaux.achete}}checked{{/unless}}>
                                <label class="form-check-label" for="achete2">Non</label>
                            </div>
                    </div>
                    <div class="mb-3">
                        <label for="responsable-reg" class="form-label">Qui doit s'occuper de l'achat (toi y compris) ?</label>
                        <select name="responsableAchat" id="acheteur-reg" required class="form-select" aria-label="Default select example">
                            <option value="" disabled selected>Choisir dans la liste</option>
                            {{#each listeResponsables}} 
                            <option value="{{this.id}}">{{this.prenom}}</option>
                            {{/each}}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Si quelqu'un d'autre doit acheter le cadeau, avez-vous déjà remboursé cette personne ?</label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="paye" id="paye1" value="1" {{#if infosCadeaux.paye}}checked{{/if}}>
                                <label class="form-check-label" for="paye1">Oui</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="paye" id="paye2" value="0"  {{#unless infosCadeaux.paye}}checked{{/unless}}>
                                <label class="form-check-label" for="paye2">Non</label>
                            </div>
                    </div>
                    <br>
                    <div class="mb-3">
                        <label class="form-label">Pour quelle occasion veux-tu l'offrir ?</label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="occasion" id="occasion1" value="1" {{#if infosCadeaux.pourNoel}}checked{{/if}}>
                                <label class="form-check-label" for="occasion1">Pour Noël</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="occasion" id="occasion2" value="0"  {{#unless infosCadeaux.pourNoel}}checked{{/unless}}>
                                <label class="form-check-label" for="occasion2">Pour son anniversaire</label>
                            </div>
                    </div>                   
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                    <a href="/" class="btn btn-secondary">Retour aux cadeaux</a>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
