@extends('layouts.app')
@section('title', 'Stock List')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="fw-bold text-dark mb-0">បញ្ចីរការទិញចូល</h2>
        <a href="{{ route('stock.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i> បន្ថែមស្តុក
        </a>
    </div>
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    <div class="card shadow-sm border-0">
        <div class="card-body">
            <table class="table table-striped align-middle">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>ថ្ងៃចេញវិក័យបត្រ</th>
                        <th>លេខវិក័យប័ត្រ</th>
                        <th>អ្នកផ្គត់ផ្គង់</th>
                        <th>តម្លៃសរុប</th>
                        <th>ស្ថានភាពស្តុក</th>
                        <th>ការទូទាត់</th>
                        <th>លុយអាប់</th>
                        <th>បញ្ចុះតម្លៃ</th>
                        <th>ស្ថានភាពនៃការទូទាត់</th>
                        <th class="text-center">សកម្មភាព</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($stocks as $key => $stock)
                    <tr>
                        <td>{{ $key + 1 }}</td>
                        <td>{{ $stock->created_at ?? 'N/A' }}</td>
                        <td>{{ $stock->reference_no ?? 'N/A' }}</td>
                        <td>{{ $stock->supplier_name ?? 'N/A' }}</td>
                        <td>${{ number_format($stock->grandtotal, 2) }}</td>
                        <td> @if($stock->purchase_status == 'Recived') <span class="badge bg-success">Recived</span> @elseif($stock->purchase_status == 'Pending') <span class="badge bg-warning">Pending</span> @elseif($stock->purchase_status == 'Order') <span class="badge bg-primary">Order</span> @endif </td>
                        <td>${{ number_format($stock->amount, 2) }}</td>
                        <td>${{ number_format($stock->balance ?? 0, 2) }}</td>
                        <td>${{ number_format($stock->discount ?? 0, 2) }}</td>
                        <td> <span class="badge @if($stock->payments_type == 'Paid') bg-success @elseif($stock->payments_type == 'Due') bg-danger @elseif($stock->payments_type == 'Partial') bg-primary @elseif($stock->payments_type == 'Pending') bg-warning @endif payment-status-btn" data-bs-toggle="modal" data-bs-target="#paymentModal" data-status="{{ $stock->payments_type }}" data-id="{{ $stock->id }}" style="cursor:pointer;" > {{ $stock->payments_type }} </span> </td>
                        <td class="text-center">
                            <a href="{{ route('stocks.edit', $stock->id) }}" class="btn btn-warning btn-sm">
                                <i class="bi bi-pencil-square"></i> កែប្រែ
                            </a>
                            <button class="btn btn-info btn-sm view-stock-items"
                                data-id="{{ $stock->id }}">
                                <i class="bi bi-eye"></i> មើលវិក័យបត្រ
                            </button>
                            <form action="{{ route('stocks.destroy', $stock->id) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-danger btn-sm" onclick="return confirm('Delete this stock?');">
                                    <i class="bi bi-trash"></i> លុប
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="11" class="text-center text-muted">No stock records found.</td>
                    </tr>
                    @endforelse
                </tbody>

            </table>
        </div>
    </div>
</div>
<!-- PAYMENT MODAL -->
<div class="modal fade" id="paymentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Payment Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="statusText" class="fw-bold"></p>

                <div id="paymentFormContainer" style="display: none;">
                    <hr>
                    <form method="POST" id="paymentFormElement">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Amount to Pay</label>
                            <input type="number" name="amount" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Note (Optional)</label>
                            <textarea name="note" class="form-control"></textarea>
                        </div>
                        <button class="btn btn-primary w-100">Submit Payment</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- STOCK ITEMS MODAL -->
<div class="modal fade" id="stockItemsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Stock Items</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <table class="table table-bordered" id="stockItemsTable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Product</th>
                            <th>Code</th>
                            <th>Qty</th>
                            <th>Cost</th>
                            <th>Subtotal</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
$(document).ready(function () {

    // Load stock items
    $('.view-stock-items').click(function () {
        let stockId = $(this).data('id');

        $.ajax({
            url: '/stocks/' + stockId + '/items',
            type: 'GET',
            dataType: 'json',

            success: function (response) {
                let tbody = $('#stockItemsTable tbody');
                tbody.empty();

                if (response.items.length > 0) {
                    $.each(response.items, function (index, item) {
                        tbody.append(`
                            <tr>
                                <td>${index + 1}</td>
                                <td>${item.products_name}</td>
                                <td>${item.products_code}</td>
                                <td>${item.quantity}</td>
                                <td>$${item.cost}</td>
                                <td>$${item.subtotal_item}</td>
                            </tr>
                        `);
                    });

                } else {
                    tbody.append(`<tr><td colspan="6" class="text-center">No items found</td></tr>`);
                }

                $('#stockItemsModal').modal('show');
            },

            error: function () {
                alert('Failed to fetch stock items.');
            }
        });
    });
});
// PAYMENT MODAL JS
$(document).ready(function () {

    $('#paymentModal').on('show.bs.modal', function (event) {
        let button = $(event.relatedTarget);
        let status = button.data('status');
        let stockId = button.data('id');

        $('#statusText').html("Current Status: <strong>" + status + "</strong>");

        if (status === 'Paid') {
            $('#paymentFormContainer').hide();
        } else {
            $('#paymentFormContainer').show();
            $('#paymentFormElement').attr('action', '/stocks/' + stockId + '/add-payment');
        }
    });

});


</script>
@endsection