@extends('layouts.app')

@section('title', 'Current Stock - Raw Materials')

@section('content')
<div class="accordion mb-3" id="grnFilterAccordion">
	<div class="accordion-item">
		<h2 class="accordion-header" id="grnFilterHeading">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#grnFilterCollapse" aria-expanded="false" aria-controls="grnFilterCollapse">
				Filters
			</button>
		</h2>
		<div id="grnFilterCollapse" class="accordion-collapse collapse" aria-labelledby="grnFilterHeading" data-bs-parent="#grnFilterAccordion">
			<div class="accordion-body">
                <div class="row mb-3">
                        <div class="col-md-3">
                            <label for="warehouse_filter">Warehouse</label>
                            <select id="warehouse_filter" class="form-select">
                                <option value="">All Warehouses</option>
                                @foreach($warehouses ?? [] as $warehouse)
                                    <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="item_search">Item Search</label>
                            <input type="text" id="item_search" class="form-control" placeholder="Search by item name or code">
                        </div>
                        <div class="col-md-3">
                            <label for="min_qty">Min Quantity</label>
                            <input type="number" id="min_qty" class="form-control" placeholder="Min Qty" step="0.01">
                        </div>
                        <div class="col-md-3">
                            <label for="max_qty">Max Quantity</label>
                            <input type="number" id="max_qty" class="form-control" placeholder="Max Qty" step="0.01">
                        </div>
                    </div>
                <div class="mt-3">
                    <button type="button" class="btn btn-primary" id="apply_Filters">
                        <i class="fas fa-search me-2"></i>
                        Apply
                    </button>
                    <button type="button" class="btn btn-outline-secondary" id="clear_Filters">
                        <i class="fas fa-times me-2"></i>
                        Clear
                    </button>
                </div>
            </div>
		</div>
	</div>
</div>
@if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>
            {{ $errors->first() }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    <div class="row">
        <div class="col-12">
            <div class="card">
                {{-- <div class="card-header">
                    <h4 class="card-title">Current Stock - Raw Materials</h4>
                </div> --}}
                <div class="card-body">
                    		<div class="d-flex justify-content-between align-items-center mb-3">
			<h6 class="card-title mb-0">Current Stock - Raw Materials</h6>
                            </div>
                    <!-- Filters -->

                    <!-- DataTable -->
                    <div class="table-responsive">
                        <table id="currentStockTable" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Item Name</th>
                                    <th>Item Code</th>
                                    <th>Warehouse</th>
                                    <th>Available Quantity</th>
                                    <th>Size</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('plugin-styles')
<link rel="stylesheet" href="{{ asset('theme/vendors/datatables/dataTables.bootstrap5.min.css') }}">
@endpush

@push('plugin-scripts')
<script src="{{ asset('theme/vendors/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('theme/vendors/datatables/dataTables.bootstrap5.min.js') }}"></script>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#currentStockTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("warehouses.current-stock-raw-materials.data") }}',
            data: function(d) {
                d.warehouse_id = $('#warehouse_filter').val();
                d.item_search = $('#item_search').val();
                d.min_qty = $('#min_qty').val();
                d.max_qty = $('#max_qty').val();
            }
        },
        columns: [
            // {data: 'id', name: 'id', visible: false},
            {data: 'item_name', name: 'item_name'},
            {data: 'item_code', name: 'item_code'},
            {data: 'warehouse_name', name: 'warehouse_name'},
            // {data: 'quantity', name: 'quantity'},
            {data: 'available_qty',  name: 'available_qty'},
            {data: 'size', name: 'size'},
            {data: 'actions', name: 'actions', orderable: false, searchable: false}
        ],
        order: [[0, 'desc']],
        pageLength: 25,
        responsive: true
    });

    // Apply filters
    $('#apply_Filters').click(function() {
        table.draw();
    });

    // Clear filters
    $('#clear_Filters').click(function() {
        $('#warehouse_filter').val('');
        $('#item_search').val('');
        $('#min_qty').val('');
        $('#max_qty').val('');
        table.draw();
    });

    // Auto-apply filters on enter
    $('#item_search, #min_qty, #max_qty').keypress(function(e) {
        if (e.which == 13) {
            table.draw();
        }
    });

    // Auto-apply filters on select change
    // $('#warehouse_filter').change(function() {
    //     table.draw();
    // });
});
</script>
@endpush
