@extends('layouts.app')

@push('css')
    @include('components.dataTable-style-links')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        thead tr {
            background-color: #0c1a32;
            color: white;
        }
        .date-column {
            direction: ltr;
            font-weight: 500;
        }
        .view-btn {
            cursor: pointer;
        }
        .select2-container {
            width: 100% !important;
        }
        .dataTables_paginate {
            margin-top: 15px;
            text-align: center !important;
        }
        .paginate_button {
            padding: 5px 10px;
            margin: 0 3px;
            border: 1px solid #ddd;
            cursor: pointer;
            border-radius: 3px;
        }
        .paginate_button.current {
            background-color: #0c1a32;
            color: white;
            border-color: #0c1a32;
        }
        .dataTables_length {
            margin-bottom: 15px;
        }
    </style> 
@endpush

@section('content')
<div class="content-wrapper">
    <div class="page-header">
        <h3 class="page-title">
            <span class="page-title-icon bg-gradient-primary text-white me-2">
                <i class="mdi mdi-package-variant menu-icon"></i>
            </span> {{ __('Inventory Items') }}
        </h3>
    </div>
    <div class="mb-3 col-md-5">
        <label>{{__('invoice type')}}</label>
        <select id="invoice_type" class="form-control w-100">
            <option value="">{{__('all')}}</option>
            @foreach($purchases2 as $purchase)
                <option value="{{ $purchase->value }}">{{ $purchase->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="table-responsive customscroll p-2 shadow-sm">
        <table id="inventory-table" class="table dataTable text-center">
            <thead>
                <tr>
                    <th>{{ __('Definition number') }}</th>
                    <th>{{ __('Item Name') }}</th>
                    <th>{{ __('Type') }}</th>
                    <th>{{ __('Warehouse') }}</th>
                    <th>{{ __('User Name') }}</th>
                    <th>{{ __('Quantity') }}</th>
                    <th>{{ __('Avg Price') }}</th>
                    <th>{{ __('Total Price') }}</th>
                    <th>{{ __('Actions') }}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>


@endsection

@section('scripts')
    @include('components.dataTable-script-links')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(function() {
            // Initialize Select2
            
        });
    </script>
@endsection