{% extends 'base.html.twig' %}
{% block body %}
        <main class="main">
        	<div class="page-header text-center" style="background-image: url('assets/images/page-header-bg.jpg')">
        		<div class="container">
        			<h1 class="page-title">My Account<span>Shop</span></h1>
        		</div><!-- End .container -->
        	</div><!-- End .page-header -->
            <nav aria-label="breadcrumb" class="breadcrumb-nav mb-3">
                <div class="container">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/index">Home</a></li>
                        <li class="breadcrumb-item"><a href="/cats">Shop</a></li>
                        <li class="breadcrumb-item active" aria-current="page">My Account</li>
                    </ol>
                </div><!-- End .container -->
            </nav><!-- End .breadcrumb-nav -->

            <div class="page-content">
            	<div class="dashboard">
	                <div class="container">
	                	<div class="row">
	                		<aside class="col-md-4 col-lg-3">
	                			<ul class="nav nav-dashboard flex-column mb-3 mb-md-0" role="tablist">
								   <!-- <li class="nav-item">
								        <a class="nav-link active" id="tab-dashboard-link" data-toggle="tab" href="#tab-dashboard" role="tab" aria-controls="tab-dashboard" aria-selected="true">Dashboard</a>
								    </li>-->
								    <li class="nav-item">
								        <a class="nav-link" id="tab-orders-link" data-toggle="tab" href="#tab-orders" role="tab" aria-controls="tab-orders" aria-selected="false">Orders</a>
								    </li>
								   <!-- <li class="nav-item">
								        <a class="nav-link" id="tab-downloads-link" data-toggle="tab" href="#tab-downloads" role="tab" aria-controls="tab-downloads" aria-selected="false">Downloads</a>
								    </li>-->
								    <li class="nav-item">
								        <a class="nav-link" id="tab-address-link" data-toggle="tab" href="#tab-address" role="tab" aria-controls="tab-address" aria-selected="false" onclick="$('#show_bill').show();$('#tab-account-edit').hide();$('#tab-account-edit1').hide();">Adresses</a>
								    </li>
								    <li class="nav-item">
								        <a class="nav-link" id="tab-account-link" data-toggle="tab" href="#tab-account" role="tab" aria-controls="tab-account" aria-selected="false">Account Details</a>
								    </li>
								    <li class="nav-item">
								        <a class="nav-link" href="/logout">Sign Out</a>
								    </li>
								</ul>
	                		</aside><!-- End .col-lg-3 -->

	                		<div class="col-md-8 col-lg-9">
	                			<div class="tab-content">
								    <div class="tab-pane fade" id="tab-dashboard" role="tabpanel" aria-labelledby="tab-dashboard-link">
								    	<p>Hello <span class="font-weight-normal text-dark">User</span> (not <span class="font-weight-normal text-dark">User</span>? <a href="#">Log out</a>) 
								    	<br>
								    	From your account dashboard you can view your <a href="#tab-orders" class="tab-trigger-link link-underline">recent orders</a>, manage your <a href="#tab-address" class="tab-trigger-link">shipping and billing addresses</a>, and <a href="#tab-account" class="tab-trigger-link">edit your password and account details</a>.</p>
								    </div><!-- .End .tab-pane -->

								    <div class="tab-pane fade show active" id="tab-orders" role="tabpanel" aria-labelledby="tab-orders-link">
									<h5>My Orders</h5>
					<!--<p>No order has been made yet.</p>
					<a href="category.html" class="btn btn-outline-primary-2"><span>GO SHOP</span><i class="icon-long-arrow-right"></i></a>-->
					<table class="table table-wishlist table-mobile">
					{% set p=1 %}
					{% set pr=0 %}
{% if(FTCHOrdr|length)>0 %}
						<thead>
							<tr>
								<th>S.No</th>
								<th>Order Date</th>
								<th>Order Id</th>
								<!--<th>Pay Type</th>
								<th>Order Details</th>-->
								<th>Total</th>
								<th>Shipped Address</th>
							</tr>
						</thead>
						<tbody>
					{% for prodcrt in FTCHOrdr %}
							<tr>
								<td>{{p}}</td>
								<td >{{prodcrt['order_date']|date('d-m-Y') }}<br>
								<span>{{prodcrt['order_date']|date('h:i:s') }}</span></td>
								<td><a href="javascript:;" onclick="$('#orderdet{{p}}').slideToggle();">{{prodcrt['order_id']}}</a></td>
								<td>Rs.{{prodcrt['price']|number_format(2, '.', ',')  }}</td>
								<td>
								<div class="tooltips">{{(prodcrt['address']|slice(0, 40) |raw) }}
								<span class="tooltiptext">{{(prodcrt['address'] |raw) }}</span>
								</div>
							</td>
							<tr>
  <td colspan="5" id="orderdet{{p}}" style="display:none;">
    {{pr_html[prodcrt['id']] | raw}}
  </td>
</tr>

							</tr>
							{% set pr=pr+1 %}
							{% set p=p+1 %}
					{% endfor %}
					</tbody>
					{% else %}
						<tr><td colspan="4"><p>No order has been made yet.</p>
						<a href="/cats" class="btn btn-outline-primary-2"><span>GO SHOP</span><i class="icon-long-arrow-right"></i></a></td></tr>
						{% endif %}
					</table>
					</div><!-- .End .tab-pane -->

								    <div class="tab-pane fade" id="tab-downloads" role="tabpanel" aria-labelledby="tab-downloads-link">
								    	<p>No downloads available yet.</p>
								    	<a href="category.html" class="btn btn-outline-primary-2"><span>GO SHOP</span><i class="icon-long-arrow-right"></i></a>
								    </div><!-- .End .tab-pane -->

				<div class="tab-pane fade" id="tab-address" role="tabpanel" aria-labelledby="tab-address-link">
					<p>The following addresses will be used on the checkout page by default.</p>

			<div class="row" id="show_bill" >
				<div class="col-lg-6">
					<div class="card card-dashboard">
						<div class="card-body">
							<h3 class="card-title">Billing Address</h3><!-- End .card-title -->

							<p >{{FTCHAddr[0]['billing_first']}}<br>
							{{FTCHAddr[0]['billing_last']}}<br>
							{{FTCHAddr[0]['billing_street1']}}, {{FTCHAddr[0]['billing_street2']}}<br>
							{{FTCHAddr[0]['billing_city']}}<br>
							{{FTCHAddr[0]['billing_country']}}<br>
							{{FTCHAddr[0]['billing_zip']}}<br>
							{{FTCHAddr[0]['billing_phone']}}<br>
							{{FTCHAddr[0]['billing_email']}}<br>
							<a href="javascript:;" onclick="edit_shipping();">Edit <i class="icon-edit"></i></a></p>
						</div><!-- End .card-body -->
					</div><!-- End .card-dashboard -->
				</div><!-- End .col-lg-6 -->

				<div class="col-lg-6">
					<div class="card card-dashboard">
						<div class="card-body">
							<h3 class="card-title">Shipping Address</h3><!-- End .card-title -->
							<p>{{FTCHAddr[0]['shipping_first']}}<br>
							{{FTCHAddr[0]['shipping_last']}}<br>
							{{FTCHAddr[0]['shipping_street1']}}, {{FTCHAddr[0]['shipping_street2']}}<br>
							{{FTCHAddr[0]['shipping_city']}}<br>
							{{FTCHAddr[0]['shipping_country']}}<br>
							{{FTCHAddr[0]['shipping_zip']}}<br>
							{{FTCHAddr[0]['shipping_phone']}}<br>
							{{FTCHAddr[0]['shipping_email']}}</p>
							<!--<p>You have not set up this type of address yet.-->
							<a href="javascript:;" onclick="edit_shipping1();">Edit <i class="icon-edit"></i></a></p>
						</div><!-- End .card-body -->
					</div><!-- End .card-dashboard -->
				</div><!-- End .col-lg-6 -->
			</div><!-- End .row -->

			<div id="tab-account-edit" style="display:none;">
		<form action="#" method="post">
		<input type="hidden" name="account_details" value="1">
				<div class="col-lg-9">
		            <h2 class="checkout-title">Billing Address - Edit</h2>
									<!-- End .checkout-title -->
		            <div class="row">
					<div class="col-sm-6">
						<label>First Name *</label>
						<input type="text" name="txt_first" id="txt_first" class="form-control" required="" value="{{FTCHC1[0]['billing_first']}}">
					</div>

					<div class="col-sm-6">
						<label>Last Name *</label>
						<input type="text" name="txt_last" id="txt_last" class="form-control" required="" value="{{FTCHC1[0]['billing_last']}}">
					</div><!-- End .col-sm-6 -->
				</div><!-- End .row -->

				<label>Street address *</label>
				<input type="text" name="txt_street1" id="txt_street1" class="form-control" placeholder="House number and Street name" required="" value="{{FTCHC1[0]['billing_street1']}}">
				<input type="text" name="txt_street2" id="txt_street2" class="form-control" placeholder="Appartments, suite, unit etc ..." required="" value="{{FTCHC1[0]['billing_street2']}}">

				<div class="row">
					<div class="col-sm-6">
						<label>Town / City *</label>
						<input type="text" name="txt_city" id="txt_city" class="form-control" required="" value="{{FTCHC1[0]['billing_city']}}">
					</div><!-- End .col-sm-6 -->

				<div class="col-sm-6">
					<label>State *</label>
					<input type="text" name="txt_state" id="txt_state" class="form-control" required="" value="{{FTCHC1[0]['billing_state']}}">
				</div><!-- End .col-sm-6 -->
			</div><!-- End .row -->

			<div class="row">
			<div class="col-sm-6">
					<label>Country *</label>
					<input type="text" name="txt_country" id="txt_country" class="form-control" required="" value="{{FTCHC1[0]['billing_country']}}">
				</div><!-- End .col-sm-6 -->
				<div class="col-sm-6">
					<label>Postcode / ZIP *</label>
					<input type="text" name="txt_zip" id="txt_zip" class="form-control" required="" value="{{FTCHC1[0]['billing_zip']}}">
				</div><!-- End .col-sm-6 -->

				<div class="col-sm-6">
					<label>Phone *</label>
					<input type="text" name="txt_phone" id="txt_phone" class="form-control" required="" value="{{FTCHC1[0]['billing_phone']}}">
				</div><!-- End .col-sm-6 -->
				<div class="col-sm-6">
					<label>Email address *</label>
					<input type="email" name="txt_email" id="txt_email" class="form-control" required="" value="{{FTCHC1[0]['billing_email']}}">
				</div><!-- End .col-sm-6 -->
			</div><!-- End .row -->
			</div>
			<button type="submit" class="btn btn-outline-primary-2">
					<span>UPDATE</span>
					<i class="icon-long-arrow-right"></i>
				</button>
		</form>
		</div>
		<div id="tab-account-edit1" style="display:none;">
		<form action="#" method="post">
		<input type="hidden" name="account_details" value="3">
	 <h2 class="checkout-title">Shipping Address - Edit</h2>

		<div class="row">
					<div class="col-sm-6">
						<label>First Name *</label>
						<input type="text" name="ctxt_first" id="ctxt_first" class="form-control" required value="{{FTCHC1[0]['shipping_first']}}">
					</div>

					<div class="col-sm-6">
						<label>Last Name *</label>
						<input type="text" name="ctxt_last" id="ctxt_last" class="form-control" required value="{{FTCHC1[0]['shipping_last']}}">
					</div><!-- End .col-sm-6 -->
				</div><!-- End .row -->

				<label>Street address *</label>
				<input type="text" name="ctxt_street1" id="ctxt_street1" class="form-control" placeholder="House number and Street name" required value="{{FTCHC1[0]['shipping_street1']}}">
				<input type="text" name="ctxt_street2"  id="ctxt_street2" class="form-control" placeholder="Appartments, suite, unit etc ..." required value="{{FTCHC1[0]['shipping_street2']}}">

				<div class="row">
					<div class="col-sm-6">
						<label>Town / City *</label>
						<input type="text" name="ctxt_city" id="ctxt_city" class="form-control" required value="{{FTCHC1[0]['shipping_city']}}">
					</div><!-- End .col-sm-6 -->

				<div class="col-sm-6">
					<label>State *</label>
					<input type="text" name="ctxt_state" id="ctxt_state" class="form-control" required value="{{FTCHC1[0]['shipping_state']}}">
				</div><!-- End .col-sm-6 -->
			</div><!-- End .row -->

			<div class="row">
			<div class="col-sm-6">
					<label>Country *</label>
					<input type="text" name="ctxt_country" id="ctxt_country" class="form-control" required value="{{FTCHC1[0]['shipping_country']}}">
				</div><!-- End .col-sm-6 -->
				<div class="col-sm-6">
					<label>Postcode / ZIP *</label>
					<input type="text" name="ctxt_zip" id="ctxt_zip" class="form-control" required value="{{FTCHC1[0]['shipping_zip']}}">
				</div><!-- End .col-sm-6 -->

				<div class="col-sm-6">
					<label>Phone *</label>
					<input type="text" name="ctxt_phone" id="ctxt_phone" class="form-control" required value="{{FTCHC1[0]['shipping_phone']}}">
				</div><!-- End .col-sm-6 -->
				<div class="col-sm-6">
					<label>Email address *</label>
					<input type="email" name="ctxt_email" id="ctxt_email" class="form-control" required value="{{FTCHC1[0]['shipping_email']}}">
				</div><!-- End .col-sm-6 -->
			</div><!-- End .row -->
			<button type="submit" class="btn btn-outline-primary-2">
					<span>UPDATE</span>
					<i class="icon-long-arrow-right"></i>
				</button>
			</form>
		</div>
		</div><!-- .End .tab-pane -->

		<div class="tab-pane fade" id="tab-account" role="tabpanel" aria-labelledby="tab-account-link">
			<form action="#" method="post">
			<input type="hidden" name="account_details" value="2">
				<div class="row">
					<div class="col-sm-6">
						<label>First Name *</label>
						<input type="text" class="form-control" name="txt_first" required value="{{FTCHUssr[0]['fist_name']}}">
					</div><!-- End .col-sm-6 -->

					<div class="col-sm-6">
						<label>Last Name *</label>
						<input type="text" class="form-control" required value="{{FTCHUssr[0]['last_name']}}" name="txt_last">
					</div><!-- End .col-sm-6 -->
				</div><!-- End .row -->

				<label>Display Name *</label>
				<input type="text" class="form-control" required value="{{FTCHUssr[0]['disp_name']}}" name="txt_disp">
				<small class="form-text">This will be how your name will be displayed in the account section and in reviews</small>

				<label>Email address *</label>
				<input type="email" class="form-control" required value="{{FTCHUssr[0]['email_id']}}" name="txt_email">

			<label>Current password (leave blank to leave unchanged)</label>
			<input type="password" id="txt_curpass" class="form-control" name="txt_curpass">

			<label>New password (leave blank to leave unchanged)</label>
			<input type="password" class="form-control" name="txt_newpass" id="txt_newpass">

			<label>Confirm new password</label>
			<input type="password" class="form-control mb-2" name="txt_cnewpass" id="txt_cnewpass" onblur="cnfrmpass(this.value);">

			<button type="submit" class="btn btn-outline-primary-2">
				<span>SAVE CHANGES</span>
				<i class="icon-long-arrow-right"></i>
				</button>
			</form>
								    </div><!-- .End .tab-pane -->
								</div>
	                		</div><!-- End .col-lg-9 -->
	                	</div><!-- End .row -->
	                </div><!-- End .container -->
                </div><!-- End .dashboard -->
            </div><!-- End .page-content -->
        </main><!-- End .main -->
{% endblock %}