@extends('layouts.app')
@section('title', 'Stock History - ' . $product->name)

@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4 class="card-title">Stock History - {{ $product->name }}</h4>
                        <a href="{{ route('stock-products.index') }}" class="btn btn-secondary btn-sm">
                            <i class="mdi mdi-arrow-left"></i> Back
                        </a>
                    </div>

                    <div class="table-responsive">
                        <table class="table" id="history-table">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Date</th>
                                    <th>Type</th>
                                    <th>Quantity</th>
                                    <th>Notes</th>
                                    <th>Created By</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">Edit Stock Movement</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="editForm">
                <div class="modal-body">
                    <input type="hidden" id="stock_id">
                    <div class="form-group">
                        <label>Stock Type</label>
                        <select name="stock_type" id="edit_stock_type" class="form-control">
                            <option value="in">Stock In</option>
                            <option value="out">Stock Out</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Quantity</label>
                        <input type="number" class="form-control" id="edit_stock" name="stock">
                    </div>
                    <div class="form-group">
                        <label>Notes</label>
                        <textarea class="form-control" id="edit_notes" name="notes" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="updateBtn">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@stop

@section('footer')
<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    var historyTable = $('#history-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("stock-products.history", $product->id) }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'created_at', name: 'created_at' },
            { data: 'stock_type', name: 'stock_type' },
            { data: 'stock', name: 'stock' },
            { data: 'notes', name: 'notes' },
            { data: 'created_by', name: 'created_by' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ],
        order: [[1, 'desc']]
    });

    function editData(id) {
        $.ajax({
            url: '{{ url("stock-products") }}/' + id + '/edit',
            type: 'GET',
            success: function(response) {
                if (response) {
                    $('#stock_id').val(response.id);
                    $('#edit_stock_type').val(response.stock_type);
                    $('#edit_stock').val(response.stock);
                    $('#edit_notes').val(response.notes);
                    $('#editModal').modal('show');
                } else {
                    Swal.fire('Error!', 'Data not found', 'error');
                }
            },
            error: function(xhr) {
                Swal.fire('Error!', 'Failed to fetch data', 'error');
            }
        });
    }

    $('#updateBtn').click(function() {
        var id = $('#stock_id').val();
        var data = {
            stock_type: $('#edit_stock_type').val(),
            stock: $('#edit_stock').val(),
            notes: $('#edit_notes').val(),
            _method: 'PATCH', // Add this line
            _token: '{{ csrf_token() }}'
        };

        $.ajax({
            url: '{{ url("stock-products") }}/' + id,
            method: 'POST', // Change to POST
            data: data,
            success: function(response) {
                if(response.success) {
                    $('#editModal').modal('hide');
                    historyTable.ajax.reload();
                    Swal.fire('Success!', response.message, 'success');
                } else {
                    Swal.fire('Error!', response.message, 'error');
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    let errorMessage = '';
                    for (let field in errors) {
                        errorMessage += errors[field][0] + '\n';
                    }
                    Swal.fire('Validation Error!', errorMessage, 'error');
                } else {
                    Swal.fire('Error!', 'Something went wrong!', 'error');
                }
            }
        });
    });

    function deleteData(id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ url("stock-products") }}/' + id,
                    type: 'DELETE',
                    success: function(response) {
                        if(response.code == 200) {
                            Swal.fire('Deleted!', response.message, 'success');
                            historyTable.ajax.reload();
                        } else {
                            Swal.fire('Error!', response.message, 'error');
                        }
                    },
                    error: function(xhr) {
                        Swal.fire('Error!', 'Something went wrong!', 'error');
                    }
                });
            }
        });
    }
</script>
@stop