@extends('layouts.app')

@section('title', 'Stock History')

@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_filter">Item</label>
                            @include('common.item-select', [
                                'name' => 'item_filter',
                                'id' => 'item_filter',
                                'label' => 'Item',
                                'class' => 'form-select',
                                'placeholder' => 'All Items',
                                'allowClear' => true
                            ])
                        </div>
                        <div class="col-md-3">
                            {{-- <label for="txn_type_filter">Transaction Type</label>
                            <select id="txn_type_filter" class="form-select">
                                <option value="">All Types</option>
                                <option value="qc">QC</option>
                                <option value="qc_rejected">QC Rejected</option>
                                {{-- <option value="grn">GRN</option> --}
                                <option value="transfer">Transfer</option>
                                <option value="adjustment">Adjustment</option>
                            </select> --}}

                            <label for="txn_type_filter">Type</label>
                            <select id="txn_type_filter" class="form-select">
                                <option value="">All Types</option>
                                <option value="inward">Inward</option>
                                <option value="outward">Outward</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Date Range</label>
                            <input type="text" id="dateRange" class="form-control flatpickr" placeholder="Select date range">
                        </div>
                        {{-- <div class="col-md-2">
                            <label>&nbsp;</label>
                            <div>
                            </div>
                        </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-body">
                    <!-- Filters -->
<div class="d-flex justify-content-between align-items-center mb-3">
			<h6 class="card-title mb-0">Stock Ledger</h6>
</div>

                    <!-- DataTable -->
                    <div class="table-responsive">
                        <table id="stockHistoryTable" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Item Name</th>
                                    <th>Item Type</th>
                                    <th>PO Number</th>
                                    <th>PO Quantity</th>
                                    <th>IGP Number</th>
                                    <th>QC Number</th>
                                    <th>AC Quantity</th>
                                    <th>Ledger Quantity</th>
                                    <th>Warehouse</th>
                                    {{-- <th>Transaction Type</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') }}">
<link rel="stylesheet" href="{{ asset('theme/vendors/flatpickr/flatpickr.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>
<script src="{{ asset('theme/vendors/flatpickr/flatpickr.min.js') }}"></script>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize Flatpickr
    flatpickr('#dateRange', {
        mode: 'range',
        dateFormat: 'Y-m-d',
        placeholder: 'Select date range'
    });

    // Initialize DataTable
    var table = $('#stockHistoryTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("warehouses.stock-history.data") }}',
            data: function(d) {
                d.warehouse_id = $('#warehouse_filter').val();
                d.item_id = $('#item_filter').val();
                d.txn_type = $('#txn_type_filter').val();

                const dateRange = $('#dateRange').val();
                if (dateRange) {
                    const [start, end] = dateRange.split(' to ');
                    d.date_from = start;
                    d.date_to = end;
                }
            }
        },
        columns: [
            {data: 'date', name: 'created_at'},
            {data: 'item_name', name: 'item_name'},
            {data: 'item_type', name: 'item_type'},
            {data: 'po_number', name: 'po_number'},
            {data: 'po_qty', name: 'po_qty'},
            {data: 'igp_number', name: 'igp_number'},
            {data: 'qc_number', name: 'qc_number'},
            {data: 'ac_qty', name: 'ac_qty'},
            {data: 'ledger_qty', name: 'ledger_qty'},
            {data: 'warehouse_name', name: 'warehouse_name'},
            // {data: 'transaction_type', name: 'transaction_type'}
        ],
        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_filter').val('');
        $('#txn_type_filter').val('');
        $('#dateRange').val('');
        const fp = document.querySelector("#dateRange")._flatpickr;
        if (fp) {
            fp.clear();
        }
        table.draw();
    });
});
</script>
@endpush
