{% extends "frontend/base.html" %}
{% load i18n %}
{% load static %}
{% load mapimage %}
{% load dbsetting %}
{% block "content" %}
        <!--================== PAGE-COVER ================-->
        <section class="page-cover" id="cover-hotel-booking">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-title">{% trans "Anfrage erstellen" %}</h1>
                        <!--<ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item">Hotel Booking Left Sidebar</li>
                        </ul>-->
                    </div><!-- end columns -->
                </div><!-- end row -->
            </div><!-- end container -->
        </section><!-- end page-cover -->
        
        
        <!--===== INNERPAGE-WRAPPER ====-->
        <section class="innerpage-wrapper">
            <div id="flight-booking" class="innerpage-section-padding">
                <div class="container">
                    {% if messages %}
                    {% for message in messages %}
                     <div class="alert alert-{{ message.tags }} alert-dismissible text-center" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        {{ message }}
                      </div>
                    {% endfor %}
                    {% endif %}
                    <div class="row">
                        <div class="col-12 col-md-12 col-lg-5 col-xl-4 side-bar left-side-bar">
                            <div class="row">
                            
                                <div class="col-12 col-md-6 col-lg-12">
                                    <div class="side-bar-block detail-block style2 text-center">
                                        <div class="detail-img text-center">
                                            <img src="{% mapimage object.destination_coords %}" class="img-fluid" alt="detail-img"/>
                                            <div class="detail-title">
                                                <h4><a href="#">{{ object.destination_name }}</a></h4>
                                                <p></p>
                                            </div><!-- end detail-title -->
                                            
                                            <span class="detail-price"><h4>€ {{ object.budget }} <span></h4></span>
                                        </div><!-- end detail-img -->
                                        
                                        <div class="table-responsive">
                                            <table class="table">
                                                <tbody>
                                                    <tr>
                                                        <td>{% trans "Anreisedatum" %}</td>
                                                        <td>{{ object.arrival|date:"SHORT_DATE_FORMAT" }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>{% trans "Aufenthaltsdauer" %}</td>
                                                        <td>{% if object.min_nights == 0 %}Egal!{% elif object.min_nights == 1 %}Kurztrip (2 – 3 Nächte){% else %}min. 3 Nächte{% endif %}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>{% trans "Erwachsene" %}</td>
                                                        <td>{{ object.adults }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>{% trans "Kinder" %}</td>
                                                        <td>{{ object.children }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>{% trans "Gebotener Betrag" %}</td>
                                                        <td>€ {{ object.budget }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div><!-- end table-responsive -->
                                    </div><!-- end side-bar-block -->
                                </div><!-- end columns -->
                                
                                <div class="col-12 col-md-6 col-lg-12">    
                                    <div class="side-bar-block support-block">
                                        <h3>{% trans "Hilfe benötigt?" %}</h3>
                                        <p>{% trans "Bei Fragen zu JourneyJoker stehen wir Ihnen gerne telefonisch zur Verfügung." %}</p>
                                        <div class="support-contact">
                                            <span><i class="fa fa-phone"></i></span>
                                            <p>+43 800 093004</p>
                                        </div><!-- end support-contact -->
                                        <br/><p><small><a href="https://www.openstreetmap.org/copyright">Base map and data from OpenStreetMap and OpenStreetMap Foundation</a></small></p>
                                    </div><!-- end side-bar-block -->
                                </div><!-- end columns -->
                                
                            </div><!-- end row -->
                        
                        </div><!-- end columns -->
                        
                        
                        <div class="col-12 col-md-12 col-lg-7 col-xl-8 content-side">
                            <form class="lg-booking-form" id="frm_booking" name="frm_booking" method="post" %}">
                                {% csrf_token %}
                                {% if not request.user.is_authenticated %}
                                <div class="lg-booking-form-heading">
                                    <span>0</span>
                                    <h3>{% trans "Login" %}</h3>
                                </div><!-- end lg-bform-heading -->
                                <p>{% trans "Um fortzufahren, loggen Sie sich bitte in Ihren Account ein." %}</p>
                                <div id="login-tabs" class="payment-tabs">
                                    <ul class="nav nav-tabs">
                                        <li class="nav-item active"><a class="nav-link" href="#tab-login" data-toggle="tab">{% trans "Login" %}</a></li>
                                        <li class="nav-item"><a class="nav-link" href="#tab-register" data-toggle="tab">{% trans "Registrieren" %}</a></li>
                                    </ul>
                                    
                                    <div class="tab-content">
                                        <div id="tab-login" class="tab-pane in active">
                                            <div class="form-group">
                                                <label class="control-label  " for="id_username">{% trans "Benutzername" %}</label>
                                                <div class=" ">
                                                    <input type="text" name="username" autofocus class=" form-control" id="id_username">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label  " for="id_password">{% trans "Passwort" %}</label>
                                                <div class=" ">
                                                    <input type="password" name="password" class=" form-control" id="id_password">
                                                </div>
                                            </div>
                                            <button id="btn_login" class="btn btn-orange btn-block" formaction="{% url "localauth:login" %}?next={{ request.path }}">{% trans "Login" %}</button>
                                        
                                            <div class="clearfix" style="height: 50px;"></div>
                                        </div><!-- end tab-login -->
                                        
                                        <div id="tab-register" class="tab-pane">
                                            <div class="form-group">
                                                <label class="control-label  " for="id_username">{% trans "Benutzername" %}</label>
                                                <div class=" ">
                                                    <input type="text" name="username" autofocus class=" form-control" id="id_username">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label  " for="id_password1">{% trans "Passwort" %}</label>
                                                <div class=" ">
                                                    <input type="password" name="password1" class=" form-control"  id="id_password1">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label  " for="id_password2">{% trans "Passwort wiederholen" %}</label>
                                                <div class=" ">
                                                    <input type="password" name="password2" class=" form-control" id="id_password2">
                                                </div>
                                            </div>
                                            <button id="btn_login" class="btn btn-orange btn-block" formaction="{% url "localauth:register" %}?next={{ request.path }}">{% trans "Registrieren" %}</button>

                                            
                                            <div class="clearfix"></div>
                                        </div><!-- end tab-paypal -->
                                        
                                    </div><!-- end tab-content -->
                                </div><!-- end auth-tabs -->
                                {% endif %}
                                <div class="lg-booking-form-heading">
                                    <span>1</span>
                                    <h3>{% trans "Kundendaten" %}</h3>
                                </div><!-- end lg-bform-heading -->
                                
                                <div class="personal-info">
                                
                                    <div class="row">
                                        <div class="col-6 col-md-6">
                                            <div class="form-group">
                                                <label>{% trans "Vorname" %}</label>
                                                <input type="text" class="form-control" id="id_first_name" name="first_name" {% if request.user.is_authenticated %}required{% else %}disabled{% endif %} value="{{ request.user.clientprofile.first_name }}"/>
                                            </div>
                                        </div><!-- end columns -->
                                        
                                        <div class="col-6 col-md-6">
                                            <div class="form-group">
                                                <label>{% trans "Nachname" %}</label>
                                                <input type="text" class="form-control" id="id_last_name" name="last_name" {% if request.user.is_authenticated %}required{% else %}disabled{% endif %} value="{{ request.user.clientprofile.last_name }}"/>
                                            </div>
                                        </div><!-- end columns -->
                                    </div><!-- end row -->
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>{% trans "Straße" %}</label>
                                                <input type="text" class="form-control" id="id_street" name="street" {% if request.user.is_authenticated %}required{% else %}disabled{% endif %} value="{{ request.user.clientprofile.street }}"/>
                                            </div>
                                        </div><!-- end columns -->
                                    </div><!-- end row -->

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>{% trans "PLZ" %}</label>
                                                <input type="text" class="form-control" id="id_zip" name="zip" {% if request.user.is_authenticated %}required{% else %}disabled{% endif %} value="{{ request.user.clientprofile.zip }}"/>
                                            </div>
                                        </div><!-- end columns -->
                                        
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>{% trans "Ort" %}</label>
                                                <input type="text" class="form-control" id="id_city" name="city" {% if request.user.is_authenticated %}required{% else %}disabled{% endif %} value="{{ request.user.clientprofile.city }}"/>
                                            </div>
                                        </div><!-- end columns -->
                                    </div><!-- end row -->

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>{% trans "Bundesland" %}</label>
                                                <input type="text" class="form-control" id="id_state" name="state" {% if not request.user.is_authenticated %}disabled{% endif %} value="{{ request.user.clientprofile.state }}"/>
                                            </div>
                                        </div><!-- end columns -->

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>{% trans "Staat" %}</label>
                                                {{ form.country }}
                                            </div>
                                        </div><!-- end columns -->
                                    </div><!-- end row -->
                                    
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>{% trans "E-Mail-Adresse" %}</label>
                                                <input type="email" class="form-control" id="id_email" name="email" {% if request.user.is_authenticated %}required{% else %}disabled{% endif %} value="{{ request.user.email }}"/>
                                            </div>
                                        </div><!-- end columns -->
                                        
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>{% trans "Telefonnummer" %}</label>
                                                <input type="text" class="form-control" id="id_phone" name="phone" {% if request.user.is_authenticated %}required{% else %}disabled{% endif %} value="{{ request.user.clientprofile.phone }}" />
                                            </div>
                                        </div><!-- end columns -->
                                    </div><!-- end row -->
                                    
                                </div><!-- end personal-info -->
                                
                                <div class="lg-booking-form-heading">
                                    <span>2</span>
                                    <h3>{% trans "Zahlungsdaten" %}</h3>
                                </div><!-- end lg-bform-heading -->
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>{% trans "Gutscheincode" %} ({% trans "aktuelles Guthaben" %}: € {{ request.user.clientprofile.balance | floatformat:2 }})</label>
                                            <input type="text" class="form-control" id="id_state" name="voucher" {% if not request.user.is_authenticated %}disabled{% endif %} value=""/><button class="btn btn-secondary" type="button">{% trans "Gutschein anwenden" %}</button>
                                        </div>
                                    </div><!-- end columns -->

                                <input type="hidden" name="gateway" id="id_gateway" {% if request.user.is_authenticated %}required{% else %}disabled{% endif %} />
                                <div id="payment-tabs" class="payment-tabs">
                                    <ul class="nav nav-tabs">
                                        <li class="nav-item active"><a class="nav-link" href="#tab-credit-card" data-toggle="tab">{% trans "Kreditkarte" %}</a></li>
                                        <li class="nav-item"><a class="nav-link" href="#tab-paypal" data-toggle="tab">{% trans "PayPal" %}</a></li>
                                        <li class="nav-item"><a class="nav-link" href="#tab-sepa" data-toggle="tab">{% trans "Überweisung" %}</a></li>
                                        {% if DEBUG %}
                                        <li class="nav-item"><a class="nav-link" href="#tab-demo" data-toggle="tab">{% trans "Demo-Zahlung" %}</a></li>
                                        {% endif %}
                                    </ul>
                                    
                                    <div class="tab-content">
                                        <div id="tab-credit-card" class="tab-pane in active">
                                            <img src="{% static "frontend/images/paypal.png" %}" class="img-fluid" alt="stripe" />
                                            <div class="paypal-text">
                                                <p>{% trans "Die Zahlung per Kreditkarte wird durch unseren Zahlungsdienstleister Stripe abgewickelt." %}</p>
                                                <p>{% trans "Der gebotene Betrag wird autorisiert und erst bei verbindlicher Buchung einer Reise tatsächlich von Ihrer Kreditkarte abgebucht. Bei Auslaufen oder Stornierung Ihres Angebots wird der Betrag ohne Abzug wieder freigegeben." %}</p>
                                            </div><!-- end paypal-text -->
                                            
                                            <div class="clearfix"></div>
                                        </div><!-- end tab-credit-card -->
                                        
                                        <div id="tab-paypal" class="tab-pane">
                                            <img src="{% static "frontend/images/paypal.png" %}" class="img-fluid" alt="paypal" />
                                            <div class="paypal-text">
                                                <p>{% trans "Zur Zahlung per PayPal erfolgt eine Weiterleitung auf deren Server." %}</p>
                                            </div><!-- end paypal-text -->
                                            
                                            <div class="clearfix"></div>
                                        </div><!-- end tab-paypal -->

                                        <div id="tab-sepa" class="tab-pane">
                                            <img src="{% static "frontend/images/paypal.png" %}" class="img-fluid" alt="sepa" />
                                            <div class="paypal-text">
                                                <p>{% trans "Die Daten für die Überweisung werden im nächsten Schritt angezeigt." %}</p>
                                            </div><!-- end paypal-text -->
                                            
                                            <div class="clearfix"></div>
                                        </div><!-- end tab-paypal -->

                                        {% if DEBUG %}
                                        <div id="tab-demo" class="tab-pane">
                                            <img src="{% static "frontend/images/paypal.png" %}" class="img-fluid" alt="demo" />
                                            <div class="paypal-text">
                                                <p>{% trans "Bezahlung mit Luft und Liebe." %}</p>
                                            </div><!-- end paypal-text -->
                                            
                                            <div class="clearfix"></div>
                                        </div><!-- end tab-paypal -->
                                        {% endif %}
                                        
                                    </div><!-- end tab-content -->
                                </div><!-- end payment-tabs -->
                                            
                                <div class="checkbox">
                                    <label><input type="checkbox" {% if request.user.is_authenticated %}required{% else %}disabled{% endif %} id="id_terms" name="terms"> {% trans "Ich erkläre mich einverstanden mit den" %} <a href="#">{% trans "Allgemeinen Geschäftsbedingungen" %}</a> {% trans "und der" %} <a href="#">{% trans "Datenschutzerklärung" %}</a>.</label>
                                </div><!-- end checkbox -->
                                 <div class="col-md-12 text-center" id="result_msg"></div> 
                                <button type="submit" onclick="setPaymentMethod(); return true;" class="btn btn-orange" name="submit" id="submit">{% trans "Zahlung durchführen" %}</button>
                            </form>
                            
                        </div><!-- end columns -->
        
                    </div><!-- end row -->
                </div><!-- end container -->         
            </div><!-- end flight-booking -->
        </section><!-- end innerpage-wrapper -->
{% endblock %}
{% block "scripts" %}
<script src="{% static "auction/js/custom-paymentmethod.js" %}"></script>
{% endblock %}