<?php
use yii\helpers\Html;
use kartik\widgets\ActiveForm;
use common\models\SignupForm;
use common\models\AccountForm;
use yii\helpers\Url;
use yii\bootstrap\Modal;

/* @var $this yii\web\View */
/* @var $model common\models\AccountForm */

?>
<script type="text/javascript">
    //get the click of modal button to create / update item
    //we get the button by class not by ID because you can only have one id on a page and you can
    //have multiple classes therefore you can have multiple open modal buttons on a page all with or without
    //the same link.
//we use on so the dom element can be called again if they are nested, otherwise when we load the content once it kills the dom element and wont let you load anther modal on click without a page refresh
      $(document).on('click', '.showModalButton', function(){
        //check if the modal is open. if it's open just reload content not whole modal
        //also this allows you to nest buttons inside of modals to reload the content it is in
        //the if else are intentionally separated instead of put into a function to get the 
        //button since it is using a class not an #id so there are many of them and we need
        //to ensure we get the right button and content. 
        if ($('#modal').data('bs.modal').isShown) {
            $('#modal').find('#modalContent')
                    .load($(this).attr('value'));
            //dynamiclly set the header for the modal via title tag
            document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
        } else {
            //if modal isn't open; open it and load content
            $('#modal').modal('show')
                    .find('#modalContent')
                    .load($(this).attr('value'));
             //dynamiclly set the header for the modal via title tag
            document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
        }
        $('#modal').on('hidden.bs.modal', function () {
       	 location.reload();
       	})
       
    });
     
      </script>
      
<style>		
.box {
     float: left;
     width: 33.33333%;
     padding: 20px;
     box-sizing: border-box;
}
.box:last-child {
     margin-right: 0;
}
</style>
      
<main id="main">
        <section class="gradient-bar-thin" style="height: 1px;"></section>
        <div class="container pb-5">
            <div class="row">
                <div class="col">
                <h1>Profile</h1>
	Change your personal data! Some information can only be modified by an administrator.
	 If you wish to alter this information (e.g. your e-mail), please contact the administrator!
     
	 <?php
		$user = $model->user; 
		$form = ActiveForm::begin ( [ 
				'options' => [ 
				'id' => 'edit-form' 
				] 
		] );
		?>

    <div class="box" id="personal" >
    <h2>Personal information:</h2>

	<table class="table table-striped table-hover table-sm">
		<tr>
			<td>Username:</td>
			<td></td>
			<td><?php echo  $user->__get('username')?></td>
		</tr>
		<tr>
			<td>Email:</td>
			<td></td>
			<td><?php echo  $user->__get('email')?></td>
		</tr>
		<tr>
			<td>Form of address:</td>
			<td></td>
			<td><?php echo  $user->__get('form_of_address')?></td>
		</tr>

		<tr>
			<td>Title:</td>
			<td></td>
			<td><?php echo  $user->__get('title')?></td>
		</tr>
		<tr>
			<td>Name:</td>
			<td></td>
			<td><?php echo  $user->__get('name')?></td>
		</tr>
		<tr>
			<td>First name:</td>
			<td></td>
			<td><?php echo  $user->__get('first_name')?></td>
		</tr>
	</table>
	<p></p>
	<div class="form-group">          
    <?= Html::a('Edit', ['account/personal?user='.$user->__get('username')],['title' => 'Edit your personal information', 'class' => 'showModalButton btn btn-warning', 'id'=>'edit']); ?>
    </div>
	
</div>
<div class="box" id="address">
	<h2>Address:</h2>
	<table class="table table-striped table-hover table-sm">
		<tr>
			<td>Institution:</td>
			<td></td>
			<td><?php echo  $user->__get('institution')?></td>
		</tr>
		<tr>
			<td>Division:</td>
			<td></td>
			<td><?php echo  $user->__get('division')?></td>
		</tr>
		<tr>
			<td>Street/P.O. Box:</td>
			<td></td>
			<td><?php echo  $user->__get('street_pobox')?></td>
		</tr>
		<tr>
			<td>Postal Code:</td>
			<td></td>
			<td><?php echo  $user->__get('postal_code')?></td>
		</tr>
		<tr>
			<td>Location/City:</td>
			<td></td>
			<td><?php echo  $user->__get('location_city')?></td>
		</tr>


		<tr>
			<td>Country:</td>
			<td></td>
			<td><?php echo  $user->__get('country')?></td>
		</tr>
	</table>
	<p></p>
	<div class="form-group">
    <?= Html::a('Edit', ['account/address?user='.$user->__get('username')],['title' => 'Edit your address', 'class' => 'showModalButton btn btn-warning']); ?>
   </div>
	<p></p>
</div>
<div class="box" id="delivery">
	<h2>Delivery address:</h2>
	<table class="table table-striped table-hover table-sm">
		<tr>
			<td>Institution:</td>
			<td></td>
			<td> <?php echo  $user->__get('delivery_institution')?></td>
		</tr>
		<tr>
			<td>Division:</td>
			<td></td>
			<td><?php echo  $user->__get('delivery_division')?></td>
		</tr>
		<tr>
			<td>Street/P.O. Box:</td>
			<td></td>
			<td><?php echo  $user->__get('delivery_street')?></td>
		</tr>
		<tr>
			<td>Postal Code:</td>
			<td></td>
			<td><?php echo  $user->__get('delivery_postal_code')?></td>
		</tr>
		<tr>
			<td>Location/City:</td>
			<td></td>
			<td><?php echo  $user->__get('delivery_location')?></td>
		</tr>
		<tr>
			<td>Country:</td>
			<td></td>
			<td><?php echo  $user->__get('delivery_country')?></td>
		</tr>
	</table>
	<p></p>
	<div class="form-group">
    <?= Html::a('Edit', ['account/delivery?user='.$user->__get('username')],['title' => 'Edit your delivery address', 'class' => 'showModalButton btn btn-warning', 'width'=>'20px']); ?>
   </div>
	
</div>
    
 <?php
	Modal::begin ( [ 
			'headerOptions' => [ 
					'id' => 'modalHeader' 
			],
			'id' => 'modal',
			'size' => 'modal-lg',
			// keeps from closing modal with esc key or by clicking out of the modal.
			// user must click cancel or X to close
			'clientOptions' => [ 
					'backdrop' => 'static',
					'keyboard' => FALSE 
			] 
	] );
	?>
      <div class="modalContent" id="modalContent"></div>
	<div class="modal-footer">
	<div class="form-group">
      	<button type="button" class="btn btn-default"  data-dismiss="modal">Cancel</button>
	</div>
      </div>
<?php
Modal::end ();
ActiveForm::end ();
?>    
            	</div>
        	</div>
        </div>
    </main>