@extends('layouts.front-end.app')

@section('title','Home')

@push('css_or_js')

@endpush

@section('content')
    <style>
        .headerTitle {
            font-size: 24px;
            font-weight: 600;
            margin-top: 1rem;
        }

        .sidebar {
            max-width: 20rem;
        }

        
     

        .custom-control-label {
            cursor: pointer;
        }
     body {
    font-family: 'Titillium Web', sans-serif
}


.product-qty span {
    font-size: 14px;
    color: #6A6A6A;
}
.spanTr{
    color: #FFFFFF;
    font-weight: 600;
    font-size: 13px;

}
.font-nameA{
  
   display: inline-block;
  
    font-size: 13px;
    color: #030303;
}

.spandHead{
   color: #FFFFFF;
    font-weight: 600;
    font-size: 20px;
    margin-left: 25px;
}
.spandHeadO{
   color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    
}
/* .modal-header{
        border-top: 20px solid #4884ea;
        border-bottom: none;
} */
.font-name{
    font-weight: 600;
    font-size: 15px;
    padding-bottom: 6px;
    color: #030303;
}

.btn-p{


    color: #fff;
    background-color: #1B7FED;
    border-color: #1B7FED;
    box-shadow: none;
}
.btn-p:hover{


    color: #fff;
    background-color: #1B7FED;
    border-color: #1B7FED;
    box-shadow: none;
}

.tdBorder {
        border-right: 1px solid #f7f0f0;
    text-align: center;
}
.bodytr {
   border: 1px solid #dadada;
}
.sellerName {
        font-size: 15px;
    font-weight: 600;
}
.modal-footer{
    border-top: none;
}
a{
    color: #030303;
    cursor: pointer;
}
a:hover{
    color: #4884ea;
    cursor: pointer;
}
.divider-role{
    border-bottom:1px solid whitesmoke;
}
.cz-sidebar-body h3:hover+.divider-role{
    border-bottom: 3px solid #1b7fed !important;
    transition: .2s ease-in-out;
}
label{
    font-size: 15px;
    font-style: bold;
    margin-bottom: 8px;
    color: #030303;

}
.nav-pills .nav-link.active {
    box-shadow:none;
    color: #ffffff !important;
}
.modal-header{
    border-bottom: none;
}
.nav-pills .nav-link {
    padding-top: .575rem;
    padding-bottom: .575rem;
    background-color: #ffffff;
    color: #050b16 !important;
    font-size: .9375rem;
    border: 1px solid #e4dfdf;
}
.nav-pills .nav-link :hover {
    padding-top: .575rem;
    padding-bottom: .575rem;
    background-color: #ffffff;
    color: #050b16 !important;
    font-size: .9375rem;
    border: 1px solid #e4dfdf;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #216fff;
}

.iconHad{
    color: #1B7FED;
    padding: 4px;
}
.modal-body {
 padding: none;
}
.iconSp{
    margin-top: 0.70rem;
}
.fa-lg{
    padding: 4px;
}
.fa-trash{
    color: #FF4D4D;
}
.namHad{
    color: #030303;
    position: absolute;
    padding-left: 13px;
    padding-top: 8px;
}
.cardColor{
border: 1px solid #92C6FF !important;

}
.card-header{
    border-bottom: 1px solid #92C6FF !important;
}
.sidebarL{
    padding: ;
}
.closeB{
    border: 1px solid #FFD5A4 !important;
    padding: 10px 30px 9px 30px;
    border-radius: 7px;
    color: #FFD5A4;
    background: white;
}
.donate-now {
  list-style-type: none;
  margin: 25px 0 0 0;
  padding: 0;
}

.donate-now li {
  float: left;
  margin: 0 5px 0 0;
  width: 100px;
  height: 40px;
  position: relative;
}

.donate-now label,
.donate-now input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: #1B7FED;
}

.donate-now label {
  padding: 5px;
  border: 1px solid #CCC;
  cursor: pointer;
  z-index: 90;
}

.donate-now label:hover {
  background: #DDD;
}
 .price_sidebar{
        padding: 20px;
    }
@media(max-width:600px){
    .sidebar_heading{
        background: #1B7FED;
    }
    .sidebar_heading h1{
        text-align: center;
        color: aliceblue;
        padding-bottom: 17px;
        font-size: 19px;
    }
    .sidebarR{
        padding: 24px;
    }
    .price_sidebar{
        padding: 20px;
    }
    .btn-b{
        width: 350px;
    margin-right: 30px;
    margin-bottom: 10px;
    
    }
    .div-secon{
        margin-top:2rem;
    }
}

    </style>
    <!-- Page Title-->
    <div class="container">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-9  ">
               <div class="sidebar_heading">
                        <h1 class="h3  mb-0 folot-left headerTitle">ADRESSES</h1>
                    </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-p btn-b float-right"  data-toggle="modal" data-target="#exampleModal">Add New Address</button>
                            </div>    
            </div>
           
        </div>
     

    </div>

    <!-- Page Content-->
    <div class="container pb-5 mb-2 mb-md-4 mt-3">
        <div class="row">
            <!-- Sidebar-->
            <div class="sidebarR col-lg-3">
                <!--Price Sidebar-->
                <div class="price_sidebar rounded-lg box-shadow-sm" id="shop-sidebar" style="margin-bottom: -10px;">
                    <div class="box-shadow-sm">
                       
                    </div>
                    <div class="pb-0" style="padding-top: 12px;">
                        <!-- Filter by price-->
                        <div class="sidebarL">
                            <h3 class="widget-title btnF" style="font-weight: 700;"><a href="{{ route('orderList') }}" style="color: #1B7FED">My Orders</a></h3>
                            <div class="divider-role"
                                 style="border: 1px solid whitesmoke; margin-bottom: 14px;  margin-top: -6px;"></div>

                        </div>
                    </div>
                       <div class="pb-0" style="padding-top: 12px;">
                        <!-- Filter by price-->
                        <div class="sidebarL ">
                            <h3 class="widget-title btnF" style="font-weight: 700;"> <a href="{{ route('wishList') }}"> Wish List </a></h3>
                            <div class="divider-role"
                                 style="border: 1px solid whitesmoke; margin-bottom: 14px;  margin-top: -6px;"></div>

                        </div>
                    </div>
                      <div class="pb-0" style="padding-top: 12px;">
                        <!-- Filter by price-->
                        <div class=" sidebarL">
                            <h3 class="widget-title btnF" style="font-weight: 700;"> <a href=""> Chat With Sellers </a></h3>
                            <div class="divider-role"
                                 style="border: 1px solid whitesmoke; margin-bottom: 14px;  margin-top: -6px;"></div>

                        </div>
                    </div>
                      <div class="pb-0" style="padding-top: 12px;">
                        <!-- Filter by price-->
                        <div class=" sidebarL">
                            <h3 class="widget-title btnF" style="font-weight: 700;"> <a href="{{ route('profile') }}"> Profile Info </a></h3>
                            <div class="divider-role"
                                 style="border: 1px solid whitesmoke; margin-bottom: 14px;  margin-top: -6px;"></div>

                        </div>
                    </div>
                      <div class="pb-0" style="padding-top: 12px;">
                        <!-- Filter by price-->
                        <div class=" sidebarL">
                            <h3 class="widget-title btnF" style="font-weight: 700;"> <a href="">Address </a></h3>
                            <div class="divider-role"
                                 style="border: 1px solid whitesmoke; margin-bottom: 14px;  margin-top: -6px;"></div>

                        </div>
                    </div>
                      <div class="pb-0" style="padding-top: 12px;">
                        <!-- Filter by price-->
                        <div class=" sidebarL">
                            <h3 class="widget-title btnF" style="font-weight: 700;"> <a href="{{ route('support-ticket') }}">Support ticket </a></h3>
                            <div class="divider-role"
                                 style="border: 1px solid whitesmoke; margin-bottom: 14px;  margin-top: -6px;"></div>

                        </div>
                    </div>
                      <div class="pb-0" style="padding-top: 12px;">
                        <!-- Filter by price-->
                        <div class="sidebarL ">
                            <h3 class="widget-title btnF" style="font-weight: 700;"><a href="">Transaction history </a></h3>
                            <div class="divider-role"
                                 style="border: 1px solid whitesmoke; margin-bottom: 14px;  margin-top: -6px;"></div>

                        </div>
                    </div>
                       <div class="pb-1" style="padding-top: 12px;">
                        <!-- Filter by price-->
                        <div class="sidebarL ">
                            <h3 class="widget-title btnF" style="font-weight: 700;"><a href="">Payment method </a></h3>
                            <div class="divider-role"
                                 style="border: 1px solid whitesmoke; margin-bottom: 14px;  margin-top: -6px;"></div>

                        </div>
                    </div>
                </div>
            </div>

            <section class="col-lg-9 mt-3">
                 
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog  modal-lg" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <div class="row">
                              
                                    <div class="col-md-12"> <h5 class="modal-title font-nameA ">Add a new address</h5></div>  
                                 
                                
                          </div>
                         
                          
                         
                       
                        </div>
                        <div class="modal-body">
                                        
                     <form class=""> 
                            <div class="col-md-12">
                                <!-- Nav pills -->
                                <ul class="donate-now">
                                    <li>
                                      <input type="radio" id="a25" name="amount" />
                                      <label for="a25">permanent</label>
                                    </li>
                                    <li>
                                      <input type="radio" id="a50" name="amount" />
                                      <label for="a50">Home</label>
                                    </li>
                                    <li>
                                      <input type="radio" id="a75" name="amount" checked="checked" />
                                      <label for="a75">Office</label>
                                    </li>
                                 
                                  </ul>
                                </div>  
                                <!-- Tab panes -->
                                
                    

                        <div class="form-row">
                            <div class="form-group col-md-6">
                              <label for="firstName">Contact person name</label>
                              <input type="text" class="form-control" id="firstName" placeholder="">
                            </div>
                            <div class="form-group col-md-6">
                              <label for="lastName">Floor,Suite</label>
                              <input type="text" class="form-control" id="lastName" placeholder="">
                            </div>
                          </div>
                          <div class="form-row">
                            <div class="form-group col-md-6">
                              <label for="firstName">City</label>
                              <input type="text" class="form-control" id="firstName" placeholder="">
                            </div>
                            <div class="form-group col-md-6">
                              <label for="lastName">Zip code</label>
                              <input type="text" class="form-control" id="lastName" placeholder="">
                            </div>
                          </div>
                          <div class="form-row">
                            <div class="form-group col-md-6">
                              <label for="firstName">State</label>
                              <input type="text" class="form-control" id="firstName" placeholder="">
                            </div>
                            <div class="form-group col-md-6">
                              <label for="lastName">Country</label>
                              <input type="text" class="form-control" id="lastName" placeholder="">
                            </div>
                          </div>
                   <div class="form-row">
                <div class="form-group col-md-12">
                  <label for="firstName">Phone</label>
                  <input type="text" class="form-control" id="firstName" placeholder="">
                </div>
              
              </div>
                 <div class="form-row">
                     <div class="form-group col-md-6">
                  
                     </div>
                 
              </div>
             

      </div>
      <div class="modal-footer">
        <button type="button" class="closeB" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-p"> Update Information</button>
      </div>
    </form>
       </div>
                              
                              
                              </div>
                       
                      </div>
                    </div>
                  </div>  
             <div class="row">
               
                 <div class="col-md-6">
                    <div class="card cardColor">
                        <div class="card-header">

                            <i class="fa fa-thumb-tack fa-2x iconHad"  aria-hidden="true"></i>
                           <span class="namHad">Permanent Address</span>
                           <span class="float-right iconSp">
                            <i class="fa fa-edit fa-lg"></i>
                            <i class="fa fa-trash fa-lg"></i>
                        </span> 
                        </div>
                        <div class="card-body">
                           <div class="font-name"><span > Abdur Rahim</span></div>
                           <div><span class="font-nameA">3rd Floor,D block</span></div>
                           <div><span class="font-nameA">Dhaka 1100</span></div>
                           <div><span class="font-nameA">Bangladsh</span></div>
                           <div><span class="font-nameA">+88 01251548524</span></div> 

                        </div>
                    </div>
                 </div>
                 
                 <div class="col-md-6 div-secon">
                    <div class="card cardColor">
                        <div class="card-header ">
                            <i class="fa fa-home fa-2x iconHad" aria-hidden="true"></i>
                            <span class="namHad">Home adress</span>
                            <span class="float-right iconSp">
                                <i class="fa fa-edit fa-lg"></i>
                                <i class="fa fa-trash fa-lg"></i>
                            </span>
                        </div>
                        <div class="card-body">
                            <div class="font-name"><span > Abdur Rahim</span></div>
                            <div><span class="font-nameA">3rd Floor,D block</span></div>
                            <div><span class="font-nameA">Dhaka 1100</span></div>
                            <div><span class="font-nameA">Bangladsh</span></div>
                            <div><span class="font-nameA">+88 01251548524</span></div> 
 
                         </div>
                    </div>
                 </div>
               
             </div>
             <br>
             <div class="row">
                <div class="col-md-6">
                   <div class="card cardColor">
                       <div class="card-header">
                        <i class="fa fa-briefcase fa-2x iconHad"></i>
                      <span class="namHad"> Office Address</span>  
                      <span class="float-right iconSp">
                            <i class="fa fa-edit fa-lg"></i>
                            <i class="fa fa-trash fa-lg"></i>
                        </span>
                       </div>
                       <div class="card-body">
                        <div class="font-name"><span > Abdur Rahim</span></div>
                        <div><span class="font-nameA">3rd Floor,D block</span></div>
                        <div><span class="font-nameA">Dhaka 1100</span></div>
                        <div><span class="font-nameA">Bangladsh</span></div>
                        <div><span class="font-nameA">+88 01251548524</span></div> 

                     </div>
                   </div>
                </div>
            
            </div>
           
            </section>

           
                </div>
     
          
        </div>
    </div>

@endsection