@extends('layouts.master')

@section('title', 'Address Book')

@section('style')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<style>
    /* Add any custom styles here */
</style>
@endsection

@section('content')
<main id="main" class="main">
    <section class="section dashboard">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">Address Book</div>

                        <div class="card-body">
                            <table class="table" id="addresses-table">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Customer Name</th>
                                        <th>Email</th>
                                        <th>Phone</th>
                                        <th>Postal Code</th>
                                        <th>City</th>
                                        <th>Country</th>
                                        <th>Address 1</th>
                                        <th>Address 2</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($addressBook as $address )
                                    <tr>
                                        <td>{{ $address->name }}</td>
                                        <td>{{ $address->company_name }}</td>
                                        <td>{{ $address->email }}</td>
                                        <td>{{ $address->phone }}</td>
                                        <td>{{ $address->postal_code }}</td>
                                        <td>{{ $address->city }}</td>
                                        <td>{{ $address->country }}</td>
                                        <td>{{ $address->full_address_1 }}</td>
                                        <td>{{ $address->full_address_2 }}</td>
                                  
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function() {
        $('#addresses-table').DataTable({
            searching: true, // Enable search functionality
            ordering: true // Enable sorting functionality
        });
    });
</script>
@endsection