@extends('layouts.user')
@section('page-title', 'Aifola Express Customers')
@section('page-title-body', 'Aifola Express Customers')
@section('active-link-5', 'active-link')

@section('main-theme')

<div id="dashboard-container-view">
    <h2>
        <span>Aifola Express Customers</span>

    </h2>
    <div class="block-cont"></div>
    <article class="display-block" id="staff-list">
        <div class="table-responsive">
            <table class="table table-hover align-middle" id="table-first">
                <thead class="thead-light">
                    <tr>
                        <th>Join At</th>
                        <th>Customer Name</th>
                        <th>Address</th>
                        <th>Phone Number</th>
                        <th>Relative Phone Number</th>
                        <th>Email Address</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($customer as $data)
                    <tr>
                        <td>{{ date_format(date_create($data->created_at), 'd M Y')}}</td>
                        <td>{{ $data->name }}</td>
                        <td>{{ $data->address }}</td>
                        <td>{{ $data->phone_number }}</td>
                        <td>{{ $data->relative_phone }}</td>
                        <td>{{ $data->email }}</td>
                        <td>
                            <a href="{{route('dashboard.customer-details', [$data->id])}}"><button type="button" class="btn-success-ac-v1" id=""><i class="fas fa-expand"></i></button></a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </article>
    <div class="block-cont"></div>
</div>

@endsection

<!-- js script -->
@push('scripts')
<script>
    $(function(){

        $('#table-first').DataTable({
                columnDefs: [ 
                { 
                    type: 'date',
                    'targets':[0]
                }],
                order: [[ 0, 'desc' ]]
            });

    });
</script>
@endpush