@extends('layouts.app')
@section('page-title', 'Customers')

@section('page-header')
    <div class="page-header">
        <div class="row">
            <div class="col-6">
                <h4 class="header-title">Customers</h4>
            </div>
            <div class="col-6">
                <div class="action-section">
                    <a class="btn btn-success load-modal" href="javascript:void(0)"
                        data-url="{{ route('customers.create') }}">
                        <i class="anticon anticon-plus"></i> Add Customer
                    </a>
                </div>
            </div>
        </div>

        <div class="header-sub-title mt-1">
            <nav class="breadcrumb breadcrumb-dash">
                <a href="{{ route('home') }}" class="breadcrumb-item">Dashboard</a>
                <a href="" class="breadcrumb-item">Customers</a>
            </nav>
        </div>
    </div>
@endsection

@section('body')
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table id="customer-table" class="table" data-url="{{ route('customers.list') }}">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Company Name</th>
                            <th>Company ID</th>
                            <th>Billing Period</th>
                            <th>Billing Company</th>
                            {{-- <th>Email</th>
                            <th>Telephone</th> --}}
                            <th>Address Line 1</th>
                            <th>Address Line 2</th>
                            <th>City</th>
                            <th>County</th>
                            <th>Postcode</th>
                            <th>Country</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(async function() {
            let columns = [
                {
                    data: 'id'
                },
                {
                    data: 'company_name'
                },
                {
                    data: 'company_id'
                },
                {
                    data: 'billing_period'
                },
                {
                    data: 'billing_company'
                },
                // {data: 'email'},
                // {data: 'phone'},
                {
                    data: 'address_line_1'
                },
                {
                    data: 'address_line_2'
                },
                {
                    data: 'city'
                },
                {
                    data: 'county'
                },
                {
                    data: 'postcode'
                },
                {
                    data: 'country'
                },
                {
                    data: 'reseller'
                },
                {
                    data: 'actions',
                    sortable: false,
                    searchable: false
                },
            ];

            await initDataTable($('#customer-table'), columns);
        });
    </script>
@endpush