{% extends "frontend/base.html" %}
{% load i18n %}
{% load static %}
{% 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">
                    <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">
                                            <a href="#"><img src="{% static "frontend/images/hotel-grid-1.jpg" %}" class="img-fluid" alt="detail-img"/></a>
                                            <div class="detail-title">
                                                <h4><a href="#">{{ obj.destination.name }}</a></h4>
                                                <p></p>
                                            </div><!-- end detail-title -->
                                            
                                            <span class="detail-price"><h4>€ {{ obj.amount }} <span></h4></span>
                                        </div><!-- end detail-img -->
                                        
                                        <div class="table-responsive">
                                            <table class="table">
                                                <tbody>
                                                    <tr>
                                                        <td>{% trans "Ankunft ab" %}</td>
                                                        <td>{{ obj.first_date|date:"SHORT_DATE_FORMAT" }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>{% trans "Abreise bis" %}</td>
                                                        <td>{{ obj.last_date|date:"SHORT_DATE_FORMAT" }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>{% trans "Erwachsene" %}</td>
                                                        <td>{{ obj.adults }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>{% trans "Kinder" %}</td>
                                                        <td>{{ obj.children }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>{% trans "Gebotener Betrag" %}</td>
                                                        <td>€ {{ obj.amount }}</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 zur Urlaubsauktion 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 -->
                                    </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">
                                <div class="lg-booking-form-heading">
                                    <span>1</span>
                                    <h3>Personal Information</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>First Name</label>
                                                <input type="text" class="form-control" id="txt_name" name="txt_name"/>
                                            </div>
                                        </div><!-- end columns -->
                                        
                                        <div class="col-6 col-md-6">
                                            <div class="form-group">
                                                <label>Last Name</label>
                                                <input type="text" class="form-control" id="txt_last_name" name="txt_last_name"/>
                                            </div>
                                        </div><!-- end columns -->
                                    </div><!-- end row -->
                                    
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Date of Birth</label>
                                                <input type="text" class="form-control dpd3" id="txt_dob" name="txt_dob"/>
                                            </div>
                                        </div><!-- end columns -->
                                        
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Country</label>
                                                <input type="text" class="form-control" id="txt_country" name="txt_country"/>
                                            </div>
                                        </div><!-- end columns -->
                                    </div><!-- end row -->
                                    
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Email Address</label>
                                                <input type="email" class="form-control" id="txt_email" name="txt_email"/>
                                            </div>
                                        </div><!-- end columns -->
                                        
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Phone Number</label>
                                                <input type="text" class="form-control" id="txt_phone" name="txt_phone"/>
                                            </div>
                                        </div><!-- end columns -->
                                    </div><!-- end row -->
                                    
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Permanent Address</label>
                                                <textarea type="text" class="form-control" rows="2" id="txt_address" name="txt_address"/></textarea>
                                            </div>
                                        </div><!-- end columns -->
                                    </div>   
                                </div><!-- end personal-info -->
                                
                                <div class="lg-booking-form-heading">
                                    <span>2</span>
                                    <h3>Payment Information</h3>
                                </div><!-- end lg-bform-heading -->
                                
                                <div class="payment-tabs">
                                    <ul class="nav nav-tabs">
                                        <li class="nav-item active"><a class="nav-link" href="#tab-credit-card" data-toggle="tab"> Via Credit Card</a></li>
                                        <li class="nav-item"><a class="nav-link" href="#tab-paypal" data-toggle="tab">Via Paypal</a></li>
                                    </ul>
                                    
                                    <div class="tab-content">
                                        <div id="tab-credit-card" class="tab-pane in active">
                                            <img src="{% static "frontend/images/stripe.png" %}" class="img-fluid" alt="stripe" />
                                            <div class="paypal-text">
                                                <p>{% trans "Die Zahlung per Kreditkarte wird durch unseren Zahlungsdienstleister Stripe abgewickelt." %}</p>
                                                 <a href="#" class="btn btn-default btn-lightgrey">{% trans "Per Kreditkarte bezahlen" %}<span><i class="fa fa-angle-double-right"></i></span></a>
                                            </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>
                                                 <a href="#" class="btn btn-default btn-lightgrey">{% trans "Per PayPal bezahlen" %}<span><i class="fa fa-angle-double-right"></i></span></a>
                                            </div><!-- end paypal-text -->
                                            
                                            <div class="clearfix"></div>
                                        </div><!-- end tab-paypal -->
                                        
                                    </div><!-- end tab-content -->
                                </div><!-- end payment-tabs -->
                                            
                                <div class="checkbox">
                                    <label><input type="checkbox" id="chk_agree" name="chk_agree"> {% trans "Ich erkläre mich einverstanden mit den" %} <a href="#">{% trans "Allgemeinen Geschäftsbedingungen" %}</a>.</label>
                                </div><!-- end checkbox -->
                                 <div class="col-md-12 text-center" id="result_msg"></div> 
                                <button type="submit" 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 %}