@extends('layouts.main')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<style>
    .stock-out-toggle .btn {
        width: 50%;
    }
    .is-invalid {
        border-color: #dc3545;
    }
    .invalid-feedback {
        display: none;
        width: 100%;
        margin-top: 0.25rem;
        font-size: 0.875em;
        color: #dc3545;
    }
    .is-invalid ~ .invalid-feedback {
        display: block;
    }
    .action-btn {
        padding: 2px 6px !important; /* Smaller height */
        font-size: 12px !important;  /* Smaller text */
        line-height: 1 !important;
        display: inline-flex;
        align-items: center;
    }
    .action-btn i {
        font-size: 14px !important; /* Small icon */
    }
</style>
@endpush

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid p-0">
            <h1 class="h3 mb-3">Cement Stock Management</h1>
        </div>
    </div>

    <div class="container-fluid">
        <!-- Optional: Stock Summary Cards -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card border-left-primary shadow-sm">
                    <div class="card-body">
                        <h6 class="text-muted">Total Stock Received (In)</h6>
                        <h4 class="mb-0">{{ number_format($totalInStock) }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-left-danger shadow-sm">
                    <div class="card-body">
                        <h6 class="text-muted">Total Stock Issued (Out)</h6>
                        <h4 class="mb-0">{{ number_format($totalOutStock) }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-left-success shadow-sm">
                    <div class="card-body">
                        <h6 class="text-muted">Current Stock Balance</h6>
                        <h4 class="mb-0">{{ number_format($totalInStock - $totalOutStock) }}</h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stock Table -->
        <div class="row">
            <div class="col-md-12 col-xl-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Stock Entries</h5>
                        <button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#stockOutModal">
                            <i class="fa fa-minus me-1"></i> Stock Out Cement
                        </button>
                    </div>
                    <div class="card-body">
                        <table class="yajra-datatable table table-striped" style="width:100%" id="stock-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Supplier</th>
                                    <th>Cement Type</th>
                                    <th>Transaction Type</th>
                                    <th>Total</th>
                                    <th>Transaction Description</th>
                                    <th>Remarks</th>
                                    <th>User</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            {{-- ajax rows --}}
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- View Stock Modal -->
<div class="modal fade" id="viewStockModal" tabindex="-1" aria-labelledby="viewStockModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header text-white">
                <h5 class="modal-title" id="viewStockModalLabel">
                    <i class="material-icons me-1"></i> View Stock Details
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <dl class="row">
                    <dt class="col-sm-4">Supplier Name</dt>
                    <dd class="col-sm-8" id="view_supplier_id"></dd>

                    <dt class="col-sm-4">Cement Type</dt>
                    <dd class="col-sm-8" id="view_cement_type"></dd>

                    <dt class="col-sm-4">Transaction Type</dt>
                    <dd class="col-sm-8" id="view_transaction_type"></dd>

                    <dt class="col-sm-4">Total Quantity</dt>
                    <dd class="col-sm-8" id="view_total"></dd>

                    <dt class="col-sm-4">Remarks</dt>
                    <dd class="col-sm-8" id="view_remarks"></dd>

                    <dt class="col-sm-4">User ID</dt>
                    <dd class="col-sm-8" id="view_user_id"></dd>

                    <dt class="col-sm-4">Created At</dt>
                    <dd class="col-sm-8" id="view_created_at"></dd>
                </dl>
            </div>
        </div>
    </div>
</div>

<!-- Stock Out Modal -->
<div class="modal fade" id="stockOutModal" tabindex="-1" aria-labelledby="stockOutModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form action="{{ route('stock.store') }}" method="POST" id="stockOutForm">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="stockOutModalLabel">
                        <i class="material-icons me-1"></i> Stock Out Cement
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <!-- Cement Supplier -->
                    <div class="mb-3">
                        <label for="supplier_id" class="form-label">Cement Supplier <span class="text-danger">*</span></label>
                        <select class="form-control" name="supplier_id" id="supplier_id" required>
                            <option value="">Select Cement Supplier</option>
                            @foreach ($cement_suppliers as $supplier)
                                <option value="{{ $supplier->id }}" data-cement_balance="{{ $supplier->cement_balance ?? 0 }}">
                                    {{ $supplier->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Cement Type -->
                    <div class="mb-3">
                        <label for="cement_type" class="form-label">Cement Type <span class="text-danger">*</span></label>
                        <select name="cement_type" id="cement_type" class="form-control" required>
                            <option value="">Select Cement Type</option>
                        </select>
                    </div>

                    <!-- Quantity -->
                    <div class="mb-3">
                        <label for="quantity" class="form-label">Cement Quantity <span class="text-danger">*</span></label>
                        <input type="number" name="quantity" id="quantity" class="form-control" min="1" required>
                        <div class="invalid-feedback">Quantity exceeds available stock</div>
                    </div>

                    <!-- Stock Out Toggle Section -->
                    <div class="mb-3">
                        <label class="form-label">Stock Out To: <span class="text-danger">*</span></label>
                        <div class="btn-group w-100 stock-out-toggle" role="group">
                            <input type="radio" class="btn-check" name="stock_out_type" id="toProduction" value="production" autocomplete="off" checked>
                            <label class="btn btn-outline-primary" for="toProduction">
                                <i class="fas fa-industry me-1"></i> Production
                            </label>

                            <input type="radio" class="btn-check" name="stock_out_type" id="toCustomer" value="customer" autocomplete="off">
                            <label class="btn btn-outline-primary" for="toCustomer">
                                <i class="fas fa-user-tie me-1"></i> Customer
                            </label>
                        </div>
                    </div>

                    {{-- Payment Mode: Cash / Creditor / Loan (only when Customer is selected) --}}
                    <div class="mb-3" id="paymentModeWrapper" style="display:none;">
                        <label class="form-label">Payment Mode <span class="text-danger">*</span></label>
                        <div class="btn-group w-100" role="group">
                            <input type="radio" class="btn-check" name="payment_mode" id="payCash" value="cash" autocomplete="off" checked>
                            <label class="btn btn-outline-success" for="payCash">
                                <i class="fas fa-money-bill-wave me-1"></i> Cash / Normal
                            </label>

                            <input type="radio" class="btn-check" name="payment_mode" id="payCreditor" value="creditor" autocomplete="off">
                            <label class="btn btn-outline-warning" for="payCreditor">
                                <i class="fas fa-user-tag me-1"></i> Creditor
                            </label>

                            <input type="radio" class="btn-check" name="payment_mode" id="payLoan" value="loan" autocomplete="off">
                            <label class="btn btn-outline-info" for="payLoan">
                                <i class="fas fa-file-invoice-dollar me-1"></i> Loan
                            </label>
                        </div>
                    </div>

                    <!-- Customer Section (Hidden by default) -->
                    <div id="customerSection" style="display: none;">
                        <div class="mb-3" id="customerWrapper">
                            <label for="customer_id" class="form-label">Customer <span class="text-danger">*</span></label>
                            <select name="customer_id" id="customer_id" class="form-control">
                                <option value="">Select Customer</option>
                                @foreach ($customers as $customer)
                                    <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="buying_price" class="form-label">Buying Price (per unit) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">Tsh</span>
                                    <input type="number" name="buying_price" id="buying_price" class="form-control" min="0" step="0.01">
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="selling_price" class="form-label">Selling Price (per unit) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">Tsh</span>
                                    <input type="number" name="selling_price" id="selling_price" class="form-control" min="0" step="0.01">
                                </div>
                            </div>
                        </div>

                        {{-- Creditor Tab/Block --}}
                        <div id="creditorBlock" style="display: none;">
                            <div class="mb-2">
                                <label for="creditor_id" class="form-label">Select Creditor <span class="text-danger">*</span></label>
                                <select name="creditor_id" id="creditor_id" class="form-control">
                                    <option value="">Select Creditor</option>
                                    @foreach($creditors as $cr)
                                        <option value="{{ $cr->id }}">
                                            {{ $cr->account_number }} - {{ $cr->first_name }} {{ $cr->last_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-1">
                                <small id="creditor_balance_text" class="form-text text-muted">
                                    Available Balance: 0 Tsh
                                </small>
                                <input type="hidden" id="creditor_balance" value="0">
                            </div>
                            <div class="mb-1">
                                <small id="creditor_sale_info" class="form-text text-muted">
                                    Sale amount will be validated against creditor balance.
                                </small>
                            </div>
                            <div id="creditor_error" class="text-danger d-none">
                                Sale amount exceeds creditor available balance.
                            </div>
                        </div>
                    </div>

                    <!-- Production Section (Visible by default) -->
                    <div id="productionSection">
                        <div class="mb-3">
                            <label class="form-label">Bricks Output Details <span class="text-danger">*</span></label>
                            <div id="brick-output-container">
                                <div class="row g-2 brick-output-row">
                                    <div class="col-md-6">
                                        <select name="brick_outputs[0][brick_type_id]" class="form-control brick-type-select" required>
                                            <option value="">Select Brick Type</option>
                                            @foreach ($brick_types as $brick)
                                                <option value="{{ $brick->id }}">{{ $brick->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="number" name="brick_outputs[0][expected_output]" class="form-control brick-quantity" placeholder="Expected Bricks" min="0" required>
                                    </div>
                                    <div class="col-md-1">
                                        <button type="button" class="btn btn-outline-danger btn-sm remove-brick-row">
                                            <i class="material-icons md-delete"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="add-brick-row">
                                <i class="fa fa-plus me-1"></i> Add More
                            </button>
                        </div>
                    </div>

                    <!-- Cement Balance Display -->
                    <div class="mb-3">
                        <label for="supplier_balance" class="form-label">Available Cement from Supplier</label>
                        <div class="input-group">
                            <span class="input-group-text">Bags</span>
                            <input type="text" id="supplier_balance" class="form-control bg-light" readonly value="0">
                        </div>
                    </div>

                    <!-- Remarks -->
                    <div class="mb-3">
                        <label for="remarks" class="form-label">Remarks</label>
                        <textarea name="remarks" id="remarks" class="form-control" rows="2"></textarea>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger" id="submitBtn">
                        <i class="fas fa-check-circle me-1"></i> Confirm Stock Out
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Revert Stock Modal (WITH RELATIONSHIP TABLE + REMARKS) -->
<div class="modal fade" id="revertStockModal" tabindex="-1" aria-labelledby="revertStockModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form method="POST" id="revertStockForm">
            @csrf
            {{-- POST via AJAX to revert.stock --}}
            <input type="hidden" name="stock_id" id="revert_stock_id">

            <div class="modal-content">
                <div class="modal-header bg-warning text-dark">
                    <h5 class="modal-title" id="revertStockModalLabel">
                        <i class="material-icons me-1">warning</i>
                        Confirm Revert Stock
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <p class="mb-3">
                        Are you sure you want to <strong>delete/revert</strong> this stock entry?
                    </p>

                    <dl class="row mb-3">
                        <dt class="col-sm-4">Supplier</dt>
                        <dd class="col-sm-8" id="rev_supplier">—</dd>

                        <dt class="col-sm-4">Cement Type</dt>
                        <dd class="col-sm-8" id="rev_cement_type">—</dd>

                        <dt class="col-sm-4">Transaction</dt>
                        <dd class="col-sm-8" id="rev_transaction_type">—</dd>

                        <dt class="col-sm-4">Total</dt>
                        <dd class="col-sm-8" id="rev_total">—</dd>

                        <dt class="col-sm-4">Remarks</dt>
                        <dd class="col-sm-8" id="rev_remarks">—</dd>

                        <dt class="col-sm-4">User</dt>
                        <dd class="col-sm-8" id="rev_user">—</dd>

                        <dt class="col-sm-4">Created At</dt>
                        <dd class="col-sm-8" id="rev_created_at">—</dd>
                    </dl>

                    <div class="mb-3">
                        <label for="reverted_remarks" class="form-label">Revert Remarks (optional)</label>
                        <textarea name="reverted_remarks" id="reverted_remarks" class="form-control" rows="2"></textarea>
                    </div>

                    <hr>

                    <h6 class="mb-2">Brick Outputs</h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered mb-0" id="rev_bricks_table">
                            <thead>
                            <tr>
                                <th>Brick Type</th>
                                <th>Expected</th>
                                <th>Actual</th>
                                <th>Fault</th>
                                <th>Good Bricks</th>
                                <th>Status</th>
                            </tr>
                            </thead>
                            <tbody>
                            {{-- Filled by JS --}}
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="modal-footer">
                    <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal"
                        id="revertCancelBtn"
                    >
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-danger">
                        <i class="material-icons md-delete_forever me-1"></i>
                        Yes, Revert Stock
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.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="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

<script>
    function parseNumber(val) {
        if (val === null || val === undefined) return 0;
        return parseFloat(String(val).replace(/,/g, '')) || 0;
    }

    let stockTable = null;

    $(function () {
        // DataTable
        stockTable = $('#stock-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ route('cements.stock') }}',
            columns: [
                { data: 'id', name: 'id' },
                { data: 'supplier_name', name: 'supplier_name' },
                { data: 'cement_type', name: 'cement_type' },
                { data: 'transaction_type', name: 'transaction_type' },
                { data: 'total', name: 'total' },
                { data: 'transaction_type_description', name: 'transaction_type_description' },
                { data: 'remarks', name: 'remarks' },
                { data: 'user', name: 'user.name' },
                { data: 'record_created', name: 'record_created' },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ]
        });
    });

    // View
    $(document).on('click', '.viewStockBtn', function () {
        $('#view_supplier_id').text($(this).data('supplier_id'));
        $('#view_cement_type').text($(this).data('cement_type'));
        $('#view_transaction_type').text($(this).data('transaction_type'));
        $('#view_total').text($(this).data('total'));
        $('#view_created_at').text($(this).data('created_at'));
        $('#view_remarks').text($(this).data('remarks') || '—');
        $('#view_user_id').text($(this).data('user_id'));
    });

    // --- Helper: check if selected customer has unfinished loan when in LOAN mode ---
    function checkCustomerLoan(customerId) {
        const stockOutType = $('input[name="stock_out_type"]:checked').val();
        const paymentMode  = $('input[name="payment_mode"]:checked').val();

        if (stockOutType !== 'customer' || paymentMode !== 'loan' || !customerId) {
            return;
        }

        $.ajax({
            url: '/check-customer-loan/' + customerId,
            type: 'GET',
            success: function (data) {
                if (data && data.has_active_loan) {
                    const balanceFormatted = data.balance_formatted || data.balance || 0;

                    const proceed = confirm(
                        'This customer has an unfinished cement loan.\n' +
                        'Remaining balance: ' + balanceFormatted + ' Tsh.\n\n' +
                        'Do you still want to proceed and create another loan sale for this customer?'
                    );

                    if (!proceed) {
                        $('#customer_id').val('');
                        $('#payCash').prop('checked', true).trigger('change');
                    }
                }
            },
            error: function () {
                console.error('Failed to check customer loan status.');
            }
        });
    }

    // Payment Mode: show/hide creditor block & customer (cash / creditor / loan)
    $('input[name="payment_mode"]').change(function () {
        const stockOutType = $('input[name="stock_out_type"]:checked').val();
        const paymentMode  = $('input[name="payment_mode"]:checked').val();
        const customerId   = $('#customer_id').val();

        if (stockOutType !== 'customer') {
            $('#creditorBlock').hide();
            $('#creditor_id').prop('required', false).val('');
            $('#customerWrapper').show();
            $('#customer_id').prop('required', false);
            $('#creditor_error').addClass('d-none');
            validateCreditorAmount();
            return;
        }

        if (paymentMode === 'creditor') {
            $('#creditorBlock').show();
            $('#creditor_id').prop('required', true);

            $('#customerWrapper').hide();
            $('#customer_id').prop('required', false).val('');
        } else {
            $('#creditorBlock').hide();
            $('#creditor_id').prop('required', false).val('');
            $('#customerWrapper').show();
            $('#customer_id').prop('required', true);
        }

        if (paymentMode === 'loan' && customerId) {
            checkCustomerLoan(customerId);
        }

        validateCreditorAmount();
    });

    // Toggle between production and customer sections
    $('input[name="stock_out_type"]').change(function() {
        if ($('#toProduction').is(':checked')) {
            $('#productionSection').show();
            $('#customerSection').hide();
            $('#paymentModeWrapper').hide();

            $('.brick-type-select, .brick-quantity').prop('required', true);

            $('#customer_id').prop('required', false).val('');
            $('#buying_price, #selling_price').prop('required', false).val('');
            $('#creditor_id').prop('required', false).val('');

            $('#payCash').prop('checked', true);
            $('#creditorBlock').hide();
            $('#creditor_error').addClass('d-none');
            $('#customerWrapper').show();

        } else {
            $('#productionSection').hide();
            $('#customerSection').show();
            $('#paymentModeWrapper').show();

            $('#buying_price, #selling_price').prop('required', true);
            $('.brick-type-select, .brick-quantity').prop('required', false);

            const paymentMode = $('input[name="payment_mode"]:checked').val();
            if (paymentMode === 'creditor') {
                $('#creditorBlock').show();
                $('#creditor_id').prop('required', true);

                $('#customerWrapper').hide();
                $('#customer_id').prop('required', false).val('');
            } else {
                $('#creditorBlock').hide();
                $('#creditor_id').prop('required', false).val('');

                $('#customerWrapper').show();
                $('#customer_id').prop('required', true);
            }
        }

        validateCreditorAmount();
    });

    // When customer changes, and we are in LOAN mode, check unfinished loan
    $('#customer_id').change(function () {
        const customerId = $(this).val();
        checkCustomerLoan(customerId);
    });

    // Handle supplier change
    $('#supplier_id').change(function () {
        const supplierId = $(this).val();
        const selectedOption = $(this).find('option:selected');
        const balance = parseNumber(selectedOption.data('cement_balance') || 0);

        $('#quantity').val('').removeClass('is-invalid');
        $('#submitBtn').prop('disabled', false);

        $('#supplier_balance').val(balance.toLocaleString() + ' bags');

        $('#cement_type').empty().append('<option value="">Loading...</option>');
        $('#buying_price').val(0);

        if (supplierId) {
            $.ajax({
                url: '/get-cement-type/' + supplierId,
                type: 'GET',
                success: function (data) {
                    const cementBalance = data.cement_balance || 0;
                    $('#supplier_balance').val(cementBalance.toLocaleString() + ' bags');

                    $('#supplier_id').find('option:selected').attr('data-cement_balance', cementBalance);

                    $('#buying_price').val(data.cement_price ?? 0);

                    $('#cement_type').empty();
                    if (Array.isArray(data.cement_types) && data.cement_types.length > 0) {
                        $('#cement_type').append('<option value="">Select Cement Type</option>');
                        data.cement_types.forEach(function (type) {
                            $('#cement_type').append(`<option value="${type}">${type}</option>`);
                        });
                    } else {
                        $('#cement_type').append('<option value="">No cement types available</option>');
                    }
                },
                error: function () {
                    $('#cement_type').empty().append('<option value="">Error loading types</option>');
                }
            });
        } else {
            $('#cement_type').empty().append('<option value="">Select Cement Type</option>');
            $('#supplier_balance').val('0 bags');
            $('#buying_price').val(0);
        }
    });

    // Validate quantity against available stock
    $('#quantity').on('input', function () {
        const quantity = parseInt($(this).val()) || 0;
        const selectedOption = $('#supplier_id').find('option:selected');
        const available = parseInt(selectedOption.attr('data-cement_balance')) || 0;

        if (quantity > available) {
            $(this).addClass('is-invalid');
            $('#submitBtn').prop('disabled', true);
        } else {
            $(this).removeClass('is-invalid');
            $('#submitBtn').prop('disabled', false);
        }

        validateCreditorAmount();
    });

    // --- Creditor logic: load balance + validate sale amount ---
    $('#creditor_id').change(function () {
        const creditorId = $(this).val();
        $('#creditor_balance').val(0);
        $('#creditor_balance_text').text('Available Balance: 0 Tsh');
        $('#creditor_error').addClass('d-none');

        if (!creditorId) {
            validateCreditorAmount();
            return;
        }

        $.ajax({
            url: '/get-creditor-info/' + creditorId,
            type: 'GET',
            success: function (data) {
                const balance = parseNumber(data.balance || 0);
                $('#creditor_balance').val(balance);
                $('#creditor_balance_text').text('Available Balance: ' + balance.toLocaleString() + ' Tsh');
                validateCreditorAmount();
            },
            error: function () {
                $('#creditor_balance_text').text('Failed to load creditor balance');
                $('#creditor_balance').val(0);
                validateCreditorAmount();
            }
        });
    });

    $('#selling_price').on('input', validateCreditorAmount);

    function validateCreditorAmount() {
        const stockOutType = $('input[name="stock_out_type"]:checked').val();
        const paymentMode  = $('input[name="payment_mode"]:checked').val();

        if (stockOutType !== 'customer' || paymentMode !== 'creditor') {
            $('#creditor_error').addClass('d-none');
            $('#submitBtn').prop('disabled', false);
            return;
        }

        const qty   = parseNumber($('#quantity').val());
        const price = parseNumber($('#selling_price').val());
        const saleAmount = qty * price;
        const creditorBalance = parseNumber($('#creditor_balance').val());

        if (!qty || !price || !creditorBalance) {
            $('#creditor_error').addClass('d-none');
            $('#submitBtn').prop('disabled', false);
            return;
        }

        if (saleAmount > creditorBalance) {
            $('#creditor_error')
                .removeClass('d-none')
                .text(
                    'Sale amount (' +
                    saleAmount.toLocaleString() +
                    ' Tsh) exceeds creditor available balance (' +
                    creditorBalance.toLocaleString() +
                    ' Tsh).'
                );
            $('#submitBtn').prop('disabled', true);
        } else {
            $('#creditor_error').addClass('d-none');
            $('#submitBtn').prop('disabled', false);
        }

        $('#creditor_sale_info').text(
            'Sale amount: ' + saleAmount.toLocaleString() +
            ' Tsh; Creditor balance: ' + creditorBalance.toLocaleString() + ' Tsh.'
        );
    }

    // Form submission handling (stock out)
    $('#stockOutForm').submit(function(e) {
        const stockOutType = $('input[name="stock_out_type"]:checked').val();
        const paymentMode  = $('input[name="payment_mode"]:checked').val();
        let isValid = true;

        if (stockOutType === 'production') {
            $('.brick-output-row').each(function() {
                const brickType = $(this).find('.brick-type-select').val();
                const quantity  = $(this).find('.brick-quantity').val();
                if (!brickType || !quantity) {
                    isValid = false;
                    return false;
                }
            });
        } else {
            const sellingPrice = $('#selling_price').val();
            const buyingPrice  = $('#buying_price').val();

            if (!sellingPrice || !buyingPrice) {
                isValid = false;
            }

            if (paymentMode === 'cash' || paymentMode === 'loan') {
                if (!$('#customer_id').val()) {
                    isValid = false;
                }
            }

            if (paymentMode === 'creditor') {
                if (!$('#creditor_id').val()) {
                    isValid = false;
                }
                if (!$('#creditor_error').hasClass('d-none')) {
                    isValid = false;
                }
            }
        }

        if (!isValid) {
            e.preventDefault();
            alert('Please fill all required fields correctly for the selected stock out type and payment mode.');
        }
    });

    // Brick output rows functionality
    let brickRowIndex = 1;

    $('#add-brick-row').on('click', function () {
        const newRow = `
            <div class="row g-2 brick-output-row mt-2">
                <div class="col-md-6">
                    <select name="brick_outputs[${brickRowIndex}][brick_type_id]" class="form-control brick-type-select" required>
                        <option value="">Select Brick Type</option>
                        @foreach ($brick_types as $brick)
                            <option value="{{ $brick->id }}">{{ $brick->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-5">
                    <input type="number" name="brick_outputs[${brickRowIndex}][expected_output]" class="form-control brick-quantity" placeholder="Expected Bricks" min="0" required>
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-outline-danger btn-sm remove-brick-row">
                        <i class="material-icons md-delete"></i>
                    </button>
                </div>
            </div>`;
        $('#brick-output-container').append(newRow);
        brickRowIndex++;
    });

    $(document).on('click', '.remove-brick-row', function () {
        if ($('.brick-output-row').length > 1) {
            $(this).closest('.brick-output-row').remove();
        } else {
            alert('You must have at least one brick output row.');
        }
    });

    // REVERT Stock (open confirmation modal with data + relationship)
    $(document).on('click', '.revertStockBtn', function () {
        const btn = $(this);

        // Main stock info
        $('#rev_supplier').text(btn.data('supplier'));
        $('#rev_cement_type').text(btn.data('cement_type'));
        $('#rev_transaction_type').text(btn.data('transaction_type'));
        $('#rev_total').text(btn.data('total'));
        $('#rev_remarks').text(btn.data('remarks') || '—');
        $('#rev_user').text(btn.data('user'));
        $('#rev_created_at').text(btn.data('created_at'));

        // Set stock_id + clear remarks
        $('#revert_stock_id').val(btn.data('id'));
        $('#reverted_remarks').val('');

        // Relationship: bricks JSON
        let bricks = [];
        const rawBricks = btn.attr('data-bricks');

        if (rawBricks) {
            try {
                bricks = JSON.parse(rawBricks);
            } catch (e) {
                console.error('Invalid bricks JSON:', e, rawBricks);
            }
        }

        const $tbody = $('#rev_bricks_table tbody');
        $tbody.empty();

        if (!bricks || bricks.length === 0) {
            $tbody.append(`
                <tr>
                    <td colspan="6" class="text-center text-muted">
                        No brick outputs recorded for this stock.
                    </td>
                </tr>
            `);
        } else {
            bricks.forEach(function (b) {
                $tbody.append(`
                    <tr>
                        <td>${b.brick_type ?? '-'}</td>
                        <td>${b.expected_output ?? '-'}</td>
                        <td>${b.actual_output ?? '-'}</td>
                        <td>${b.fault_bricks ?? '-'}</td>
                        <td>${b.total_bricks_without_fault ?? '-'}</td>
                        <td>${b.status ?? '-'}</td>
                    </tr>
                `);
            });
        }

        // Show modal via JS ONLY (no data-bs-toggle on button)
        const revertModalEl = document.getElementById('revertStockModal');
        const revertModal = new bootstrap.Modal(revertModalEl);
        revertModal.show();
    });

    // Submit revert form via AJAX
    $('#revertStockForm').on('submit', function (e) {
        e.preventDefault();

        const form = $(this);
        $.ajax({
            url: "{{ route('revert.stock') }}",
            type: 'POST',
            data: form.serialize(),
            success: function (response) {
                if (stockTable) {
                    stockTable.ajax.reload(null, false);
                }

                const modalEl = document.getElementById('revertStockModal');
                const modalInstance = bootstrap.Modal.getInstance(modalEl);
                if (modalInstance) {
                    modalInstance.hide();
                }

                // extra cleanup for backdrops
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open').css('padding-right', '');

                alert(response.message || 'Stock reverted successfully.');
            },
            error: function (xhr) {
                console.error(xhr.responseText);
                alert('Failed to revert stock. Please try again.');
            }
        });
    });

    // 🔥 Global cleanup when revert modal is hidden (Cancel, X, or programmatic)
    $('#revertStockModal').on('hidden.bs.modal', function () {
        $('.modal-backdrop').remove();
        $('body').removeClass('modal-open').css('padding-right', '');
    });
</script>
@endpush