@use('App\Models\Company')
@extends('layouts.main')
@include('layouts.datatables')
@include('layouts.components.confirm-delete')
@section('content')
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    {{ $title }}
                </div>
                <div class="d-none">
                    @can('create', Company::class)
                        <x-buttons.create-small name="company" :route="route('company.create')" />
                    @endcan
                    <x-buttons.refresh-small name="company" />
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover table-striped align-middle" id="table-company">

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="module">
        $(document).ready(function () {
            const tableEmployee = $('#table-company').DataTable({
                ajax: {
                    url: @json(route('datatable.company-index')),
                },
                serverSide: true,
                order: [[0, 'desc']],
                columns: [
                    {
                        data: 'id',
                        className: 'text-center',
                    },
                    {
                        title: '{{ __('validation.attributes.code') }}',
                        data: 'code',
                        className: 'text-center',
                    },  {
                        title: '{{ __('validation.attributes.action') }}',
                        data: 'action',
                        searchable: false,
                        orderable: false,
                        className: 'text-nowrap',
                    },  {
                        title: '{{ __('validation.attributes.name') }}',
                        data: 'name',
                        className: 'text-nowrap',
                    }, {
                        title: '{{ __('validation.attributes.address') }}',
                        data: 'address',
                        className: 'text-nowrap',
                        render: (data) => data ? data.substr(0,20)+"..." : ''
                    }, {
                        title: '{{ __('validation.attributes.phone') }}',
                        data: 'phone',
                        className: 'text-nowrap',
                    },
                    {
                        title: '{{ __('validation.attributes.director_name') }}',
                        data: 'director_name',
                        className: 'text-nowrap',
                    }, {
                        title: '{{ __('validation.attributes.created_by') }}',
                        data: 'created_at',
                        className: 'text-nowrap',
                    }, {
                        title: '{{ __('validation.attributes.updated_by') }}',
                        data: 'updated_at',
                        className: 'text-nowrap',
                    }
                ],
                drawCallback: function () {
                    $('button[data-delete-confirm="1"]').on('click', function () {
                        deleteConfirm($(this).data('delete-route'), $(this).data('delete-id'), tableEmployee)
                    })
                },
                initComplete: function () {
                    $('#datatable-toolbar2').prepend($('#btn-create-company'));
                    $('#datatable-toolbar3').prepend($('#btn-refresh-company'));
                },
            })

            $('#btn-refresh-company').on('click', function () {
                tableEmployee.draw();
            })
        })
    </script>
@endpush