@extends('adminlte::page')
@section('title', 'Stok Hareketleri')
@section('css')
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('build/assets/datatable-B_fUXaNs.css') }}">
@endsection

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

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center gap-3">
            <a href="{{ route('stocks.index') }}" class="btn btn-outline-secondary mr-3">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h2 class="fw-bold mb-0">Stok Hareketleri</h2>
        </div>
        <button type="button" id="filterButton" class="btn btn-info shadow-sm"
                data-bs-toggle="modal" data-bs-target="#filterModal">
            <i class="fas fa-filter me-1"></i> Filtrele
        </button>
    </div>

    <div class="card shadow-sm">
        <div class="card-body table-responsive p-0">
            <table class="table table-striped table-hover mb-0 datatable">
                <thead class="table-success">
                    <tr>
                        <th>Tarih</th>
                        <th>Ürün</th>
                        <th>Şube</th>
                        <th>Tip</th>
                        <th>Miktar</th>
                        <th>Lot</th>
                        <th>Maliyet</th>
                        <th>Kullanıcı</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- Filtre Modal --}}
<div class="modal fade" id="filterModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title"><i class="fas fa-filter me-2"></i> Filtrele</h5>
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <form id="filterForm">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Şube</label>
                        <select name="branch_id" class="form-select form-control">
                            <option value="">Tümü</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}">{{ $branch->name }} ({{ $branch->type }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Ürün</label>
                        <select name="product_id" class="form-select form-control">
                            <option value="">Tümü</option>
                            @foreach($products as $product)
                                <option value="{{ $product->id }}">{{ $product->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">İşlem Tipi</label>
                        <select name="type" class="form-select form-control">
                            <option value="">Tümü</option>
                            @foreach($types as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <label class="form-label fw-bold">Başlangıç</label>
                            <input type="date" name="start_date" class="form-control">
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-bold">Bitiş</label>
                            <input type="date" name="end_date" class="form-control">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" id="clearFilterBtn" class="btn btn-outline-secondary">
                    <i class="fas fa-times me-1"></i> Temizle
                </button>
                <button type="button" id="applyFilterBtn" class="btn btn-info text-white">
                    <i class="fas fa-check me-1"></i> Uygula
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
    <script>
        const FILTER_KEY    = 'stock_transaction_filters';
        const FILTER_FIELDS = ['branch_id', 'product_id', 'type', 'start_date', 'end_date'];
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="{{ asset('build/assets/datatable_config-ChXcoJCI.js') }}"></script>
    <script src="{{ asset('js/filter.js') }}"></script>
    <script>
        $(document).ready(function () {
            // URL parametrelerini filtreye yansıt
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.get('product_id') || urlParams.get('branch_id')) {
                const existing = JSON.parse(sessionStorage.getItem('stock_transaction_filters') || '{}');
                if (urlParams.get('product_id')) existing.product_id = urlParams.get('product_id');
                if (urlParams.get('branch_id'))  existing.branch_id  = urlParams.get('branch_id');
                sessionStorage.setItem('stock_transaction_filters', JSON.stringify(existing));
            }

            const config = {
                ajaxUrl: "{{ route('stock-transactions.get_data') }}",
                defaultOrders: { 'default': [[0, 'desc']] },
                filterModalId:  '#filterModal',
                filterButtonId: '#filterButton',
                columns: [
                    { data: 'created_at',      name: 'created_at' },
                    { data: 'product_name',    name: 'product.name',   orderable: false },
                    { data: 'branch_name',     name: 'branch.name',    orderable: false },
                    { data: 'type',            name: 'type',           searchable: false },
                    { data: 'quantity',        name: 'quantity',       searchable: false },
                    { data: 'lot_number',      name: 'lot.lot_number', orderable: false },
                    { data: 'calculated_cost', name: 'calculated_cost',searchable: false },
                    { data: 'user_name',       name: 'user.name',      orderable: false },
                ],
            };
            const table = initializeServerSideDatatable(config);
            FilterManager.init(table);
        });
    </script>
@endsection