@extends('layouts.frontend.app')
@section('content')

<style>
.dataTables_wrapper {
    width: 100%;
    overflow-x: auto;

}


thead th:nth-child(1) { width: 200px !important;     min-width: 111px;  } 
thead th:nth-child(2) { width: 200px !important;     min-width: 111px; } 
thead th:nth-child(3) { width: 200px !important;     min-width: 111px; } 
thead th:nth-child(4) { width: 200px !important;     min-width: 111px; } /* Address Line 2 */
thead th:nth-child(5) { width: 200px !important;     min-width: 111px; } /* Country */
thead th:nth-child(6) { width: 200px !important;    min-width: 111px; } /* State */
thead th:nth-child(7) { width: 200px !important;     min-width: 111px; } /* City */
thead th:nth-child(8) { width: 200px !important;     min-width: 111px; } /* Postal Code */
thead th:nth-child(9) { width: 200px !important;     min-width: 111px; } /* Action */

</style>
<section class="about-section">
    <div class="container">
        <div class="row">
            <div class="col-md-6 about-frist-row">
                <a href="/" class="back-btn">
                    <span class="svg-ic">
                       <i class="bi bi-arrow-left-circle"></i>
                    </span>
                    Back to Home
                </a>
               <h2> Address</h2>
            </div>
        </div>
    </div>
</section>
      
<section class='account setion-cform'>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4">
                @include('layouts.frontend.sidebar')
            </div>
            <div class="col-lg-9 col-md-8">
                <div class="leftsiderbar-account">
                 
                        <!-- Add Button -->
                        <div class="d-flex justify-content-between align-item-center mb-3">
                            <a href="{{ route('user.address.addEdit') }}" class="btn btn-success btn-sm rounded-pill shadow">
                                <i class="bi bi-plus-circle me-1"></i> Add
                            </a>
                     
                            <a href="{{ route('checkout') }}" class="back-btn">
                                  <span class="svg-ic">
                                    <i class="bi bi-arrow-left-circle"></i>
                                        Back to Checkout
                                    </span>
                            </a>
                        </div>
                        <div class="personal-info-form">
                            <div class="orders-table table-responsive">
                                   <table id="addressTable" class="table table-bordered table-striped">

                                    <thead class="">
                                        <tr>
                                            <th>Name #</th>
                                            <th>Last Name</th>
                                            <th>Address Line 1</th>
                                            <th>Address Line 2</th>
                                            <th>Country</th>
                                            <th>State</th>
                                            <th>City</th>
                                            <th>Postal Code</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                   
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>



</script>
@endsection