@extends('layouts.main')
@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
@endpush


<!-- Edit Stock Brick Modal -->
<div class="modal fade" id="editStockBrickModal" tabindex="-1" aria-labelledby="editStockBrickModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" id="editStockBrickForm">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="modal-header  text-white">
                    <h5 class="modal-title" id="editStockBrickModalLabel">
                        <i class="material-icons me-2"></i> Edit Brick Output
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="mb-3">
                        <label>Brick Type</label>
                        <input type="text" class="form-control" id="modal_brick_type" readonly>
                    </div>

                    <div class="mb-3">
                        <label>Expected Output</label>
                        <input type="number" class="form-control" id="modal_expected_output" readonly>
                    </div>

                    <div class="mb-3">
                        <label for="modal_actual_output">Actual Output</label>
                        <input type="number" class="form-control" name="actual_output" id="modal_actual_output" required>
                    </div>

                    <div class="form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="has_fault_checkbox">
                        <label class="form-check-label" for="has_fault_checkbox">Does this production have fault bricks?</label>
                    </div>

                    <div class="mb-3 fault-section" style="display: none;">
                        <label for="modal_fault_bricks">Number of Fault Bricks</label>
                        <input type="number" class="form-control" name="fault_bricks" id="modal_fault_bricks">
                    </div>

                    <div class="mb-3 fault-section" style="display: none;">
                        <label for="modal_fault_reason">Fault Reason <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="fault_reason" id="modal_fault_reason" rows="2" placeholder="e.g. under-fired, broken, over-burned..."></textarea>
                    </div>

                </div>


                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Update</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Rollback Confirmation Modal -->
<div class="modal fade" id="rollbackModal" tabindex="-1" aria-labelledby="rollbackModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="rollbackForm" method="POST">
            @csrf
            @method('PATCH')
            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title" id="rollbackModalLabel">
                        <i class="material-icons me-2"></i> Confirm Rollback
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to rollback this brick stock entry? This will reopen the stock and remove the actual output.
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger">Yes, Rollback</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>


@section('content')
<div class="container-fluid">
    <h1 class="h4 mb-4">Bricks Stock Records</h1>

    <div class="card">
        <div class="card-header">
            <div class="alert alert-warning alert-dismissible fade show d-flex align-items-center" role="alert">
                <i class="material-icons me-2"></i>
                <div>
                    Bricks selling is only allowed after the production output is finalized and the stock entry is marked as closed.
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>

        </div>
        <div class="card-body">
            <table id="bricks-stock-table" class="table table-bordered table-striped w-100">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Brick Type</th>
                        <th>Stock Number</th>
                        <th>Expected Output</th>
                        <th>Actual Output</th>
                        <th>Fault Bricks</th>
                        <th>Fault Reason</th>
                        <th>Recorded By</th>
                        <th>Status</th>
                        <th>Created At</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </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>
    $(function () {
        $('#bricks-stock-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ route("stock.index") }}',
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'brick_type', name: 'brickType.name' },
                { data: 'stock_id', name: 'stock_id' },
                { data: 'expected_output', name: 'expected_output' },
                { data: 'actual_output', name: 'actual_output' },
                { data: 'fault_bricks', name: 'fault_bricks' }, // New
                { data: 'fault_reason', name: 'fault_reason' }, // Hoverable tooltip
                { data: 'user', name: 'user.name' },
                { data: 'status', name: 'status' },
                { data: 'created_at', name: 'created_at' },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ]
        });
    });


    function editStockBrick(button) {
        const id = $(button).data('id');
        const type = $(button).data('type');
        const expected = $(button).data('expected');
        const actual = $(button).data('actual');
        const fault = $(button).data('fault'); // <-- NEW
        const status = $(button).data('status');

        $('#editStockBrickForm').attr('action', '/stock-bricks/' + id);
        $('#modal_brick_type').val(type);
        $('#modal_expected_output').val(expected);
        $('#modal_actual_output').val(actual ?? '');
        $('#modal_fault_bricks').val(fault ?? ''); // <-- NEW
        $('#modal_status').val(status ?? 'open');

        $('#editStockBrickModal').modal('show');
    }

    function triggerRollbackModal(stockBrickId) {
        const form = document.getElementById('rollbackForm');
        form.action = `/stock-bricks/${stockBrickId}/rollback`;
        const rollbackModal = new bootstrap.Modal(document.getElementById('rollbackModal'));
        rollbackModal.show();
    }

    $(document).ready(function () {
        $('#has_fault_checkbox').on('change', function () {
            if ($(this).is(':checked')) {
                $('.fault-section').slideDown();
                $('#modal_fault_bricks').attr('required', true);
            } else {
                $('.fault-section').slideUp();
                $('#modal_fault_bricks').removeAttr('required');
                $('#modal_fault_bricks').val('');
                $('#modal_fault_reason').val('');
            }
        });
    });

    $('#has_fault_checkbox').on('change', function () {
        if ($(this).is(':checked')) {
            $('.fault-section').slideDown();
            $('#modal_fault_bricks').attr('required', true);
            $('#modal_fault_reason').attr('required', true); // Make reason compulsory
        } else {
            $('.fault-section').slideUp();
            $('#modal_fault_bricks').removeAttr('required').val('');
            $('#modal_fault_reason').removeAttr('required').val('');
        }
    });





</script>


@endpush