@extends('layouts.app')
@section('content')
<style>
    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }
    
    .active, .accordion:hover {
      background-color: #ccc;
    }
    
    .accordion:after {
      content: '\002B';
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }
    
    .active:after {
      content: "\2212";
    }
    
    .panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }
</style>
<!-- Middle Column -->
<div class="dc-col m9">
    <div class="dc-row-padding">
        <div class="dc-col">
            <div class="dc-card dc-round dc-white dc-center">
                <div class="dc-container" style="text-align: left;" >                  
                    <div class="">
                        <h2>My Account</h2>
                        
                        <button class="accordion">Profile and Password</button>
                        <div class="panel">
                            <form class="register-form" >
                                <div class="colums">
                                    <div class="form-group item">
                                        <label for="email" class="text-uppercase">Email *</label>
                                        <input type="email" class="form-control" name="email" disabled value="dc@gmail.com">
                                    </div>
                                </div>
                                <div class="colums">
                                    <div class="form-group item">
                                        <label for="fname" class="text-uppercase">First Name *</label>
                                        <input type="text" class="form-control" name="fname" required placeholder="" value="Decemarie">
                                    </div>
                                </div>
                                <div class="colums">
                                    <div class="form-group item">
                                        <label for="lname" class="text-uppercase">Last Name *</label>
                                        <input type="text" class="form-control" name="lname" required placeholder="" value="Catti">
                                    </div>
                                </div>
                                <div class="colums">
                                    <div class="form-group item">
                                        <label for="password" class="text-uppercase">Password *</label>
                                        <input type="password" class="form-control" name="password" required placeholder="" value="lionheart">
                                    </div>                       
                                </div>
                                    <div class="form-check">
                                    {{csrf_field()}}
                                    <button type="submit" class="btn btn-register">Update</button>
                                </div>
                            </form>                             
                        </div>
                        
                        <button class="accordion">Home & Shipping Address</button>
                        <div class="panel">
                          <p></p>
                        </div>
                        
                        <button class="accordion">Payment Method</button>
                        <div class="panel">
                          <p></p>
                        </div>

                        <button class="accordion">History</button>
                        <div class="panel">
                          <p></p>
                        </div>    
                        <button class="accordion" onclick="window.location.assign('/logout')">Sign-out</button>


                        </br>
                        </br>
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var acc = document.getElementsByClassName("accordion");
    var i;
    
    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        } 
      });
    }
</script>
@endsection