@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-warning">
                    <div class="card-header">
                        <div class="d-flex flex-wrap align-items-center">
                            @include('layouts.partials.excel_upload_buttons', ['module' => 'item_conversions'])
                            <a href="{{ route('item_conversions.create') }}" class="btn btn-sm btn-warning mb-2 mb-md-0">
                                <i class="fas fa-plus"></i><span class="d-none d-sm-inline ml-1">Tambah</span>
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                       <div class="row mb-3">
                            <div class="col-md-6 col-12 mb-2">
                                <div class="d-flex align-items-center">
                                    <label class="mr-2 mb-0">Filter DC :</label>
                                    <select id="filter-dc"
                                        class="form-control select2 select2-warning"
                                        data-dropdown-css-class="select2-warning"
                                        style="width:60%;">
                                        <option value="">Semua DC</option>
                                        @foreach($dcs as $dc)
                                            <option value="{{ $dc->id }}">
                                                {{ $dc->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table id="convTable" class="table table-hover table-sm">
                                <thead class="bg-warning">
                                    <tr>
                                        <th width="4%">No</th>
                                        <th>Item</th>
                                        <th width="15%">DC</th>
                                        <th width="8%">UOM Utuh</th>
                                        <th width="10%">Utuh→Pakai</th>
                                        <th width="8%">UOM Kirim</th>
                                        <th width="10%">Kirim→Utuh</th>
                                        <th width="8%">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(function() {  
    var table = $('#convTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("item_conversions.index") }}',
            data: function(d) {
                d.dc_filter = $('#filter-dc').val();
            }
        },
        columns: [
            { data: 0, orderable: false, searchable: false },
            { data: 1 },
            { data: 2 },
            { data: 3 },
            { data: 4 },
            { data: 5 },
            { data: 6 },
            { data: 7, orderable: false },
        ],
        responsive: false,
        lengthChange: true,
        autoWidth: false,
        language: {
            processing: "Memuat...", search: "Cari:",
            lengthMenu: "Tampilkan _MENU_ data",
            info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
            emptyTable: "Tidak ada data", zeroRecords: "Tidak ada data yang cocok"
        }
    });

    $('#filter-dc').on('change', function() { table.ajax.reload(); });
});
</script>

@include('layouts.partials.excel_upload_modal', [
    'module'        => 'item_conversions',
    'title'         => 'Item Conversion',
    'uploadRoute'   => route('item_conversions.upload'),
    'downloadRoute' => route('item_conversions.download_template'),
    'exportRoute' => route('item_conversions.export_excel')
])
@endsection