@extends('layouts.backapp')

@section('content')
<div class="kt-portlet kt-portlet--mobile">
    <div class="kt-portlet__head kt-portlet__head--lg">
        <div class="kt-portlet__head-label">
            <span class="kt-portlet__head-icon">
                <i class="kt-font-brand flaticon2-box"></i>
            </span>
            <h3 class="kt-portlet__head-title">Manajemen Stok</h3>
        </div>
        <div class="kt-portlet__head-toolbar">
            <div class="kt-portlet__head-actions">
                <a href="{{ route('opnames.create') }}" class="btn btn-primary">
                    <i class="la la-plus"></i> Buat Opname
                </a>
            </div>
        </div>
    </div>

    <div class="kt-portlet__body">
        <!-- Filter -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="dealer_filter">Filter Dealer</label>
                    <select class="form-control" id="dealer_filter">
                        <option value="">Semua Dealer</option>
                        @foreach($dealers as $dealer)
                            <option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="product_filter">Filter Produk</label>
                    <select class="form-control" id="product_filter">
                        <option value="">Semua Produk</option>
                        @foreach($products as $product)
                            <option value="{{ $product->id }}">{{ $product->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <!-- Tabel Stok -->
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="stocks-table">
                <thead class="thead-light">
                    <tr>
                        <th>Dealer</th>
                        <th>Produk</th>
                        <th>Stok</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!-- Modal Adjust Stock -->
<div class="modal fade" id="adjustStockModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Adjust Stok</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="adjustStockForm">
                <div class="modal-body">
                    <input type="hidden" id="stock_id" name="stock_id">
                    <input type="hidden" id="adjust_type" name="type">
                    
                    <div class="form-group">
                        <label>Jumlah</label>
                        <div class="input-group">
                            <input type="number" class="form-control" name="quantity" 
                                   step="0.01" min="0.01" required>
                            <div class="input-group-append">
                                <span class="input-group-text">pcs</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>Catatan</label>
                        <textarea class="form-control" name="note" rows="3" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Stock History -->
<div class="modal fade" id="stockHistoryModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Riwayat Stok</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="history-table">
                        <thead class="thead-light">
                            <tr>
                                <th>Tanggal</th>
                                <th>User</th>
                                <th>Perubahan</th>
                                <th>Stok Lama</th>
                                <th>Stok Baru</th>
                                <th>Catatan</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascripts')
<script>
$(document).ready(function() {
    // Inisialisasi DataTable
    var table = $('#stocks-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("stocks.index") }}',
            data: function(d) {
                d.dealer_id = $('#dealer_filter').val();
                d.product_id = $('#product_filter').val();
            }
        },
        columns: [
            {data: 'dealer_name', name: 'dealer_name'},
            {data: 'product_name', name: 'product_name'},
            {data: 'quantity', name: 'quantity'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ]
    });

    // Filter change handler
    $('#dealer_filter, #product_filter').change(function() {
        table.ajax.reload();
    });

    // Show adjust stock modal
    window.showAdjustStockModal = function(stockId, type) {
        $('#stock_id').val(stockId);
        $('#adjust_type').val(type);
        $('#adjustStockModal').modal('show');
    };

    // Handle adjust stock form submit
    $('#adjustStockForm').submit(function(e) {
        e.preventDefault();
        
        $.ajax({
            url: '{{ route("stocks.adjust") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                stock_id: $('#stock_id').val(),
                type: $('#adjust_type').val(),
                quantity: $('input[name="quantity"]').val(),
                note: $('textarea[name="note"]').val()
            },
            success: function(response) {
                if (response.success) {
                    $('#adjustStockModal').modal('hide');
                    table.ajax.reload();
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                toastr.error(xhr.responseJSON?.message || 'Terjadi kesalahan');
            }
        });
    });

    // Show stock history
    window.showStockHistory = function(stockId) {
        $.get('{{ route("stocks.history") }}', {
            stock_id: stockId
        })
        .done(function(response) {
            var tbody = $('#history-table tbody');
            tbody.empty();
            
            response.logs.forEach(function(log) {
                tbody.append(`
                    <tr>
                        <td>${log.date}</td>
                        <td>${log.user}</td>
                        <td>${log.change}</td>
                        <td>${log.old_quantity}</td>
                        <td>${log.new_quantity}</td>
                        <td>${log.note}</td>
                    </tr>
                `);
            });
            
            $('#stockHistoryModal').modal('show');
        })
        .fail(function(xhr) {
            toastr.error('Gagal memuat riwayat stok');
        });
    };

    // Reset form when modal is closed
    $('#adjustStockModal').on('hidden.bs.modal', function() {
        $('#adjustStockForm')[0].reset();
    });
});
</script>
@endsection