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

@section('page-header')
    <div class="page-header">
        <div class="row">
            <div class="col-6">
                <h4 class="header-title">Billing Companies</h4>
            </div>
            <div class="col-6">
                <div class="action-section">
                    <a class="btn btn-success load-modal" href="javascript:void(0)"
                        data-url="{{ route('billing-companies.create') }}">
                        <i class="anticon anticon-plus"></i> Add Billing Company
                    </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">Billing Companies</a>
            </nav>
        </div>
    </div>
@endsection

@section('body')
    <div class="card">
        <div class="card-body">
            <div class="m-t-50 ">
                <table id="company-table" class="table" data-url="{{ route('billing-companies.list') }}">
                    <thead>
                        <tr>
                            <th>Company Name</th>
                            <th>Company Number</th>
                            <th>Email</th>
                            <th>Telephone</th>
                            {{-- <th>Address Line 1</th>
                        <th>Address Line 2</th> --}}
                            <th>City</th>
                            <th>Country</th>
                            {{-- <th>VAT Number</th> --}}
                            {{-- <th>Bank Name</th> --}}
                            {{-- <th>Bank Short Code</th>
                        <th>Bank Account Number</th>
                        <th>Company Logo URL</th> --}}
                            <th class="text-center">Tracking <br> Verifcation</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(async function() {
            let columns = [{
                    data: 'company_name'
                },
                {
                    data: 'company_number'
                },
                {
                    data: 'email'
                },
                {
                    data: 'phone'
                },
                // {data: 'address_line_1'},
                // {data: 'address_line_2'},
                {
                    data: 'city'
                },
                {
                    data: 'country'
                },
                // {data: 'vat_number'},
                // {data: 'bank_name'},
                {
                    data: 'tracking_verification'
                },
                {
                    data: 'actions',
                    sortable: false,
                    searchable: false
                },
            ];

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