@extends('layouts.master')

@section('content')
<div class="content container-fluid">

    <!-- Page Header -->
    <x-page-header title="Articles">
        <div class="col-auto float-right ml-auto">
            <a href="javascript:void(0)" onclick="Livewire.emit('openModal')" class="btn btn-success add-btn"><i class="fa fa-plus"></i> Add Article</a>
            <a href="#" class="btn add-btn" style="background-color: #28a745; color: #fff, border-color: #28a745 !important;"><i class="fa fa-file-excel"></i> Import from Excel</a>
        </div>
    </x-page-header>
    <!-- /Page Header -->

    <div class="row">
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table table-striped custom-table mb-0 w-100 datatable">
                    <thead>
                        <tr>
                            <th>Article Name</th>
                            <th>Article Id</th>
                            <th>Purchase Date</th>
                            <th>Warranty</th>
                            <th>Type</th>
                            <th>Amount</th>
                            <th class="text-center">Status</th>
                            <th class="text-right"></th>
                            <th>Barcode</th>
                        </tr>
                        <tr> <!-- Search row -->
                            <th>Article Name</th>
                            <th>Article Id</th>
                            <th>Purchase Date</th>
                            <th>Warranty</th>
                            <th>Type</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th></th> <!-- Empty cell for action column -->
                            <th>Barcode</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
@endsection

@push('modals')
@livewire('asset-component')
@endpush

@push('page-scripts')
    <script>
        $(document).ready(function(){
            // Setup - add a text input to each header cell on the second row
            $('.datatable thead tr:eq(1) th').each(function(i) {
                var title = $(this).text();
                if (title !== '') { // Skip adding input for empty header
                    $(this).html('<input type="text" class="form-control form-control-sm" placeholder="Search ' + title + '" />');

                    $('input', this).on('keyup change', function() {
                        if (table.column(i).search() !== this.value) {
                            table
                                .column(i)
                                .search(this.value)
                                .draw();
                        }
                    });
                }
            });

            var table = $('.datatable').DataTable({
                processing: true,
                serverSide: true,
                destroy: true,
                ajax: "{{ route('assets') }}",
                columns: [
                    {data: 'name', name: 'name', orderable: false},
                    {data: 'ast_id', name: 'ast_id', orderable: false},
                    {data: 'purchase_date', name: 'purchase_date', orderable: false},
                    {data: 'warranty', name: 'warranty', orderable: false},
                    {data: 'purchase_from', name: 'purchase_from', orderable: false},
                    {data: 'amount', name: 'amount', orderable: false},
                    {data: 'status', name: 'status', orderable: false},
                    {data: 'barcode', name: 'barcode', orderable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                initComplete: function(){
                    $('tr>td:last-child').addClass('text-right');
                }
            });
        });
    </script>
@endpush