@extends('operations.layout.mainlayout')

@section('content')
    <div class="modal fade" id="modal-add-sample">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Samples to Rack</h3>
                    <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="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                        </div>
                    </div>
                    <section class="content">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-12">
                                    <div class="col-12 col-sm-12 col-md-12">
                                        <br />
                                        <div class="card bg-light">
                                            <div class="card-header text-muted border-bottom-0">
                                            </div>
                                            <form method="get" action="" style="width:100%;">
                                                <div class="card-body pt-0">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <span class="text-muted text-sm"><b>Collected from</b></span>
                                                                    <input id="report-date-from" class="form-control" type="date" name="date_from" value="@if(!empty($date_from)){{$date_from}}@endif" placeholder="Date From">
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <span class="text-muted text-sm"><b>Collected to</b></span>
                                                                    <input id="report-date-to" class="form-control"  type="date" name="date_to" value="@if(!empty($date_to)){{$date_to}}@endif" placeholder="Date To">
                                                                </div>
                                                                <div class="col-md-4"  @if(empty(session('is_primary')) || session('role') == 14 || session('role') == 17) style="display: none" @endif>

                                                                    <span class="text-muted text-sm"><b>Branch</b></span>
                                                                    <select class="form-control rhospital_id" id="report-hospital-id" name="hospital">
                                                                        <option value="">Select Branch</option>
                                                                        @foreach($hospitals as $ehospital)
                                                                            <option @if((!empty($hospital) && $hospital == $ehospital->ID) || (!empty(session('role'))  && session('role') == 1 && session('hospital_id') == $ehospital->ID)) selected @endif value="{{$ehospital->ID}}">{{$ehospital->NAME_EN}}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-4" @if(session('role') == 14 || session('role') == 17) style="display: none" @endif>
                                                                    @if(!empty(session('is_branch')) || session('role') == 14 || session('role') == 17)
                                                                        <span class="text-muted text-sm"><b>Client</b></span>
                                                                        <select required id="report-org-id" class="form-control rhospital_id" name="org_id">
                                                                            <option value="">Select Client</option>
                                                                            @foreach($companies as $company)
                                                                                <option @if(!empty(session('role'))  && (session('role') == 14 || session('role') == 17) && !empty(session('org_id')) && session('org_id') == $company->ID) selected @endif value="{{$company->ID}}">{{$company->COMPANY_NAME}}{{!empty($company->CLIENT_CODE)?' ('.$company->CLIENT_CODE.')':''}}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    @endif
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <span class="text-muted text-sm"><b>Select Analyzer</b></span>
                                                                    <select required class="form-control" name="analyzer-id" id="analyzer-id">
                                                                        <option value="">Select Analyzer</option>
                                                                        @foreach($analyzers as $analyzer)
                                                                            <option value="{{$analyzer->ID}}">{{$analyzer->NAME_EN}}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-4" style="">
                                                                    <span class="text-muted text-sm"><b>Select Test Type</b></span>
                                                                    <select class="form-control col-md-2 rhospital_id" multiple="multiple" id="samples-category-id" name="package_id" style="width: auto">
                                                                        @foreach($packages as $package)
                                                                            <option value="{{$package->ID}}">{{$package->NAME_EN}}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <span class="text-muted text-sm"><b>Reservation No.</b></span>
                                                                    <input type="text"  class="form-control" id="res-no" placeholder="Search by Reservation No." />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <span class="text-muted text-sm"><b>Sample ID</b></span>
                                                                    <input type="text"  class="form-control" id="sample-id" placeholder="Search by Sample ID" />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <span class="text-muted text-sm"><b>Select Unit</b></span>
                                                                    <select id="unit_id" name="unit_id" class="form-control rhospital_id">
                                                                        <option value="0">Select Unit</option>
                                                                        @foreach($units as $unit)
                                                                            <option value="{{$unit->ID}}">{{$unit->NAME_EN}}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <table id="samples-table" class="table table-bordered table-hover">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>Reservation ID</th>
                                                    <th>Sample ID</th>
                                                    <th>Tests</th>
                                                    <th>Name</th>
                                                    <th>Hospital</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="add-selected-samples">Add Selected</button>
                </div>
            </div>
        </div>
    </div>
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice__display{
            color:black;
        }
        .branch-select2 .select2-container{
            width: 80% !important;
        }

        .wh-rack-select2 .select2-container{
            width: 30% !important;
        }
        #rack-container {
            margin-left: auto;
            margin-right: auto;
            display: inline-grid;
            grid-template-columns: auto auto;
            grid-gap: 10px;
            padding: 20px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        }

        .slot {
            width:  5rem; /* Adjust size as needed */
            height: 5rem; /* Adjust size as needed */
            padding-left:10px;
            padding-right:10px;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            border-radius : 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .grey {
            background-color: #393737;
            color: white;
        }
        .green {
            background-color: #348700;
            color: white;
        }
        .disabled-qr-link {
            pointer-events: none;
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>
    <link href="/css/select2totree.css" rel="stylesheet">
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Creating Batches</h1>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">

                        <!-- /.card -->

                        <div class="card">

                            <!-- /.card-header -->
                            <div class="card-body">
                                <div class="custom-control custom-switch custom-switch-on-info" style="margin-top:7px;">
                                    <!-- Batch Creation Fields -->
                                    <div class="row mb-4">
                                        <div class="col-md-12">
                                            <div class="card">
                                                <div class="card-header">
                                                    <h3 class="card-title">Batch Information</h3>
                                                </div>
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-md-2">
                                                            <div class="form-group">
                                                                <label for="batch_number">Batch Number</label>
                                                                <input type="text" class="form-control" id="batch_number" name="batch_number" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="form-group">
                                                                <label for="kit_lot_number">Kit Lot Number</label>
                                                                <input type="text" class="form-control" id="kit_lot_number" name="kit_lot_number" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="form-group">
                                                                <label for="kit_expiry_date">Kit Expiry Date</label>
                                                                <input type="date" class="form-control" id="kit_expiry_date" name="kit_expiry_date" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="form-group">
                                                                <label for="extraction_cut_off_value">Extraction Cut-off Value</label>
                                                                <input type="number" step="0.01" class="form-control" id="extraction_cut_off_value" name="extraction_cut_off_value" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="form-group">
                                                                <label for="batch_to_letter">To Letter</label>
                                                                <select class="form-control" id="batch_to_letter" name="batch_to_letter">
                                                                    <option value="">Select To Letter</option>
                                                                    @foreach (range('A', 'Z') as $letter)
                                                                        <option value="{{ $letter }}">{{ $letter }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="form-group">
                                                                <label for="batch_columns">Number Of Columns</label>
                                                                <input type="number" class="form-control" id="batch_columns" name="batch_columns" min="1">
                                                            </div>
                                                        </div>
                                                        <input type="hidden" id="plate_size" name="plate_size">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="input-group col-md-5 mb-3 wh-rack-select2">
                                            <div class="input-group-prepend" style="height: 38px; !important;">
                                                <span class="input-group-text">Batch</span>
                                            </div>
                                            <select class="form-control" style="width:16em" id="batch-dropdown" name="batch_id">
                                                <option value="">Select Batch</option>
                                                @foreach($batches as $batch)
                                                    <option value="{{$batch->ID}}">{{$batch->BATCH_NUMBER}}</option>
                                                @endforeach
                                            </select>
                                            <a id="scan-qr-storage" class="nav-link btn btn-info" href="#" style="margin-left: 8px;height: 38px;">
                                                <i class="fas fa-qrcode"></i> QR
                                            </a>
                                            <div class="custom-control custom-switch custom-switch-on-info" style="margin-left:7px;margin-top: 7px;">
                                                <input name="active_status" type="checkbox" checked class="custom-control-input" id="customSwitch3">
                                                <label class="custom-control-label"  for="customSwitch3"> Handheld Scanner</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button id="add-store" class="btn btn-info float-right" disabled><i class="fa fa-plus"></i> Create Batch</button>
                                <button id="add-sample-manual" class="btn btn-primary float-right" style="margin-right: 10px;"><i class="fa fa-plus"></i> Add Samples Manually</button><br /><br />
                                <p id="store-created"></p>
                                <div class="row">
                                    <div class="col-md-12 text-center">
                                        <div id="rack-container" style="width: 100%;overflow: scroll"></div>
                                    </div>
                                </div>

                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <div class="modal fade" id="modal-store">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Store</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="run-form">
                    <div class="modal-body">
                        <h5>Are you sure you want to storage these samples ?</h5>
                    </div>
                    <div class="modal-footer ">
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default" data-dismiss="modal">{{trans("web.cancel")}}</button>
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" id="create-genetics-store"  type="button" class="btn btn-info">Store Genetics</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
         id="sample-retrieve">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Retrieve</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="run-form">
                    <div class="modal-body">
                        <h5>Are you sure you want to retrieve this sample ?</h5>
                        <input type="hidden" value="0" id="retrieve-sample-id" >
                    </div>
                    <div class="modal-footer ">
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button"
                                class="btn btn-default" data-dismiss="modal">{{trans("web.cancel")}}</button>
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;"
                                id="create-sample-retrieve" type="button" class="btn btn-info">Yes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('footer-scripts')
    <script src="/js/select2totree.js"></script>
    <script>
        var colorAvailable = [];
        var BatchSamples = [];
        var currentBatchId = null;

        function createRack(rows, columns, samples = null, slotColor = "green") {
            const rackContainer = document.getElementById('rack-container');
            rackContainer.innerHTML = '';
            rackContainer.style = '';
            rackContainer.style.gridTemplateColumns =  `repeat(${columns}, 1fr)`;
            let filledSlots = 0;
            for (let i = 0; i < rows * columns; i++) {
                const slot = document.createElement('div');
                slot.classList.add('slot');
                const currentRow = Math.floor(i / columns) + 1;
                const currentColumn = (i % columns) + 1;
                var foundKey = findKeyByRowColumn(samples, currentRow , currentColumn, columns);
                if (foundKey !== null) {
                    colorAvailable.push(i);
                    slot.innerHTML = "<span>"+foundKey+"</span>";
                    slot.classList.add(slotColor); // Use the provided color
                    filledSlots++;
                }
                rackContainer.appendChild(slot);
            }
            // Disable add-store if no slots are filled
            if (filledSlots === 0) {
                $('#add-store').attr('disabled', true);
            } else {
                $('#add-store').attr('disabled', false);
            }
            // After drawing, check if any slot is green (new sample)
            setTimeout(checkGreenSlots, 0);
            // Set the plate_size hidden field to rows * columns
            $('#plate_size').val(rows * columns);
        }

        function findKeyByRowColumn(data, targetRow , targetColumn, totalColumns) {
            var foundKey = null;
            if (!data) return null;
            $.each(data, function (key, notation) {
                if (typeof notation === "string") {
                    const rowLetter = notation.charAt(0).toUpperCase();
                    const columnNumber = parseInt(notation.substring(1));
                    const row = rowLetter.charCodeAt(0) - 'A'.charCodeAt(0) + 1;
                    if (row === targetRow && columnNumber === targetColumn) {
                        foundKey = key;
                        return false;
                    }
                }
            });
            return foundKey;
        }

        function colorizeSlot(position,color,sample = null) {
            const slots = document.querySelectorAll('#rack-container .slot');
            if (slots[position]) {
                slots[position].classList.add(color);
                if(sample) {
                    slots[position].innerHTML = "<span>" + sample + "</span>";
                }
            }
            // After coloring, check if any slot is green (new sample)
            checkGreenSlots();
        }

        function checkGreenSlots() {
            let hasGreen = false;
            document.querySelectorAll('#rack-container .slot.green').forEach(function(slot) {
                if (slot.innerHTML && slot.innerHTML.trim() !== "") {
                    hasGreen = true;
                }
            });
            if (hasGreen) {
                $('#add-store').attr('disabled', false);
            } else {
                $('#add-store').attr('disabled', true);
            }
        }

        function getPositionFromNotation(notation, totalColumns) {
            const rowLetter = notation.charAt(0).toUpperCase();
            const columnNumber = parseInt(notation.substring(1));
            const row = rowLetter.charCodeAt(0) - 'A'.charCodeAt(0) + 1;
            const position = (row - 1) * totalColumns + (columnNumber - 1);
            return position;
        }

        $('#batch_to_letter, #batch_columns').on('input change', function() {
            let toLetter = $('#batch_to_letter').val();
            let columns = parseInt($('#batch_columns').val());
            if (toLetter && columns > 0) {
                let rows = toLetter.charCodeAt(0) - 'A'.charCodeAt(0) + 1;
                createRack(rows, columns, [], "green");
            }
        });

        $('#batch-dropdown').on('change', function() {
            let batchId = $(this).val();
            if (batchId) {
                $.ajax({
                    url: '/operations/genetics/batches/' + batchId + '/details',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        if (data.success) {
                            // Fill batch info fields
                            if (data.batch_info) {
                                $('#batch_number').val(data.batch_info.batch_number);
                                $('#kit_lot_number').val(data.batch_info.kit_lot_number);
                                $('#kit_expiry_date').val(data.batch_info.kit_expiry_date);
                                $('#extraction_cut_off_value').val(data.batch_info.extraction_cut_off_value);
                                $('#plate_size').val(data.batch_info.plate_size);
                                $('#batch_to_letter').val(data.batch_info.to_letter);
                                $('#batch_columns').val(data.batch_info.number_of_columns);
                            }
                            let rows = data.to_letter ? (data.to_letter.charCodeAt(0) - 'A'.charCodeAt(0) + 1) : 0;
                            $('#rack-container').empty();

                            // Convert samples object to id => STORAGE_RNO for createRack
                            let rackSamples = {};
                            if (data.samples) {
                                Object.entries(data.samples).forEach(function([id, sampleObj]) {
                                    if (sampleObj && sampleObj.STORAGE_RNO) {
                                        rackSamples[id] = sampleObj.STORAGE_RNO;
                                    }
                                });
                            }
                            createRack(rows, data.columns, rackSamples, "grey");

                            // Check if any sample has DECIMAL_RESULT
                            let hasResult = false;
                            if (data.samples) {
                                Object.values(data.samples).forEach(function(sampleObj) {
                                    if (
                                        sampleObj &&
                                        sampleObj.DECIMAL_RESULT !== null &&
                                        sampleObj.DECIMAL_RESULT !== undefined &&
                                        sampleObj.DECIMAL_RESULT !== ""
                                    ) {
                                        hasResult = true;
                                    }
                                });
                            }
                            if (hasResult) {
                                $('#add-store').attr('disabled', true);
                                $('#add-sample-manual').attr('disabled', true);
                                $('#scan-qr-storage').addClass('disabled-qr-link');
                            } else {
                                $('#add-sample-manual').attr('disabled', false);
                                $('#scan-qr-storage').removeClass('disabled-qr-link');
                                setTimeout(checkGreenSlots, 0);
                            }
                        } else {
                            toastr.error('Failed to fetch batch details');
                        }
                    },
                    error: function() {
                        toastr.error('Failed to fetch batch details');
                    }
                });
            } else {
                // If no batch selected, re-enable buttons and clear batch info fields
                $('#batch_number').val('');
                $('#kit_lot_number').val('');
                $('#kit_expiry_date').val('');
                $('#extraction_cut_off_value').val('');
                $('#plate_size').val('');
                $('#batch_to_letter').val('');
                $('#batch_columns').val('');
                $('#add-sample-manual').attr('disabled', false);
                $('#scan-qr-storage').removeClass('disabled-qr-link');
                setTimeout(checkGreenSlots, 0);
            }
        });

        $(document).on('click', '#scan-qr-storage.disabled-qr-link', function(e) {
            e.preventDefault();
            return false;
        });

        $("#scan-qr-storage").qrCodeReader({
            target: "#target-input",
            audioFeedback: true,
            multiple: false,
            callback: function(code) {
                if(code != "" && code != undefined){
                    var option = $("#batch-dropdown").find("option[value='" + code.replace(/'/g, "\\'") + "']");
                    if (!option.prop('disabled')) {
                        option.prop('selected', true);
                        $("#batch-dropdown").trigger('change');
                    }
                }
            }
        });

        onScan.attachTo(document);

        document.addEventListener('scan', function(sScancode, iQuantity) {
            let code = sScancode.detail.scanCode;
            if($("#customSwitch3").is(':checked')) {
                var batchColumns = $("#batch_columns").val();
                var batchToLetter = $("#batch_to_letter").val();
                var batchId = $('#batch-dropdown').val();
                var previewData = {
                    samples: BatchSamples.concat([code]).join(",")
                };
                if (batchId) {
                    previewData.batch_id = batchId;
                } else {
                    previewData.columns = batchColumns;
                    previewData.to_letter = batchToLetter;
                }
                if (!BatchSamples.includes(code)) {
                    $.ajax({
                        type: "POST",
                        url: "/operations/genetics/samples/" + code + "/preview-store",
                        data: previewData
                    }).done(function(response) {
                        if (response.success && response.data) {
                            BatchSamples.push(code);
                            const position = getPositionFromNotation(response.data.result, response.data.totalColumn);
                            colorizeSlot(position, "green", response.data.sample);
                            toastr.success("Sample " + code + " added to rack");
                        } else {
                            toastr.error(response.message || "Failed to add sample to rack");
                        }
                    }).fail(function(jqXHR) {
                        toastr.error(jqXHR.responseJSON && jqXHR.responseJSON.message ? jqXHR.responseJSON.message : "Failed to add sample to rack");
                    });
                } else {
                    toastr.error("Sample is already in the batch");
                }
            }
        });

        $("#add-store").on("click", function() {
            if(BatchSamples.length > 0) {
                $('#modal-store').modal('show');
            } else {
                toastr.error("Please scan at least one sample before storing");
            }
        });

        $("#create-genetics-store").on("click", function() {
            if (!$("#batch_number").val() || !$("#kit_lot_number").val() || !$("#kit_expiry_date").val() || !$("#extraction_cut_off_value").val()) {
                toastr.error("Please fill in all batch information fields");
                return;
            }

            if(BatchSamples.length <= 0){
                toastr.error("Please scan at least one sample before storing");
                return;
            }

            $("#create-genetics-store").html(
                '<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Processing...'
            ).attr('disabled', true);

            var batchData = {
                genetics_extracation_data: {
                    batch_number: $("#batch_number").val(),
                    kit_lot_number: $("#kit_lot_number").val(),
                    kit_expiry_date: $("#kit_expiry_date").val(),
                    extraction_cut_off_value: $("#extraction_cut_off_value").val(),
                    plate_size: $("#plate_size").val(),
                    batch_to_letter: $("#batch_to_letter").val(),
                    batch_columns: $("#batch_columns").val()
                },
                samples: BatchSamples.join(",")
            };

            $.ajax({
                type: "POST",
                url: "/operations/genetics/stores",
                data: batchData,
                dataType: "json"
            }).done(function(response) {
                if (response.success) {
                    toastr.success("Genetics samples stored successfully with batch information.");
                    $("#batch_number").val('');
                    $("#kit_lot_number").val('');
                    $("#kit_expiry_date").val('');
                    $("#extraction_cut_off_value").val('');
                    BatchSamples = [];
                    $("#rack-container").empty();
                    $("#batch-dropdown").val('').trigger('change');
                    $("#create-genetics-store").html('Store Genetics').attr('disabled', false);
                    $('#add-store').attr('disabled', true);
                    $('#modal-store').modal('hide');
                } else {
                    toastr.error(response.message || "Failed to store genetics samples");
                    $("#create-genetics-store").html('Store Genetics').attr('disabled', false);
                }
            }).fail(function(jqXHR) {
                var errorMsg = "Failed to store genetics samples";
                if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
                    errorMsg = Object.values(jqXHR.responseJSON.errors).flat().join("<br>");
                } else if (jqXHR.responseJSON && jqXHR.responseJSON.message) {
                    errorMsg = jqXHR.responseJSON.message;
                }
                toastr.error(errorMsg);
                $("#create-genetics-store").html('Store Genetics').attr('disabled', false);
            });
        });

        $('#add-sample-manual').on('click', function() {
            $('#samples-table').DataTable().clear().destroy();
            loadSamplesTable();
            $('#modal-add-sample').modal('show');
            return false;
        });

        let samplesTable = null;
        function loadSamplesTable() {
            var samplesTable = $('#samples-table').DataTable({
            "responsive": true,
               "autoWidth": false,
               serverSide: true,
               "ordering": false,
               "searching": false,
               "processing": true,
               ajax:
               {
                    url : '/operations/manual-sample-jobs-report',
                    data: function (d) {
                                d.sample_id = $('#sample-id').val(),
                                d.unit_id = $("#unit_id").val(),
                                d.date_from = $('#report-date-from').val(),
                                d.date_to = $('#report-date-to').val(),
                                d.receiving_from = $('#report-receiving-from').val(),
                                d.receiving_to = $('#report-receiving-to').val(),
                                d.preanalytical_from = $('#report-preanalytical-from').val(),
                                d.preanalytical_to = $('#report-preanalytical-to').val(),
                                d.hospital_id = $('#report-hospital-id').val(),
                                d.status_id = $('#report-status-id').val(),
                                d.org_id = $('#report-org-id').val(),
                                d.exclude_org_id = $('#report-exclude-org-id').val(),
                                d.sample_generation_id = $('#samples-category-id').val(),
                                d.res_id = $('#res-no').val(),
                                d.sample_id = $('#sample-id').val(),
                                d.sample_mobile = $('#sample-mobile').val(),
                                d.sample_identification = $('#sample-identification').val(),
                                d.sample_name = $('#sample-name').val(),
                                d.patient_id = $('#patient-id').val(),
                                d.analyzer_id = $('#analyzer-id').val()
                    }
               },
               'columnDefs': [
                   {
                       'targets': 0,
                       'checkboxes': {
                           'selectRow': true
                       },
                   }
               ],
               'select': {
                   'style': 'multi'
               },
               "order": [[ 1, "asc" ]],
               columns: [

                    { data: "SAMPLE_ID", name: "SAMPLE_ID", render: function ( data, type, row, meta ) {

                        if(data != null) return '<input type="checkbox" class="dt-checkboxes" value="'+row['SAMPLE_ID']+'"/>';
                            else return '<input type="checkbox" class="dt-checkboxes" value="'+row['ID']+'"/>';
                        } },
                    { data: "END_USER_LAB_ORDER_ID", name: "END_USER_LAB_ORDER_ID", render: function ( data, type, row, meta ) {
                        return '<a href="/operations/reservations/'+data+'">'+data+'</a>';
                    } },
                    { data: "SAMPLE_ID", name: "SAMPLE_ID", render: function ( data, type, row, meta ) {
                        if(data != null) return '<a href="/operations/samples/'+data+'">'+data+'</a>';
                            else return '<a href="/operations/samples/'+row['ID']+'">'+row['ID']+'</a>';
                        } },
                    { data: "NAME_EN", name: "LAB_CATEGORY_PACKAGE.NAME_EN"},
                    { data: "NAME", name: "NAME" },
                    { data: "HOSPITAL_NAME_EN", name: "HOSPITAL_NAME_EN" },
                    { data: "DESC_EN", name: "LAB_ORDER_STATUS.DESC_EN" }
                ],
            });

            $('input, select').on('change', function() {
                samplesTable.draw();
            });
        }

        $('#add-selected-samples').on('click', function() {
            var rows_selected = $("#samples-table tr:not(.header) td input:checked").map(function() {
                return $(this).val()
            }).get();
            var batchId = $('#batch-dropdown').val();
            var batchColumns = $("#batch_columns").val();
            var batchToLetter = $("#batch_to_letter").val();

            rows_selected.forEach(sampleId => {
                BatchSamples.push(sampleId);

                var previewData = {
                    samples: BatchSamples.join(",")
                };
                if (batchId) {
                    previewData.batch_id = batchId;
                } else {
                    previewData.columns = batchColumns;
                    previewData.to_letter = batchToLetter;
                }

                $.ajax({
                    type: "POST",
                    url: "/operations/genetics/samples/" + sampleId + "/preview-store",
                    data: previewData
                }).done(function(response) {
                    if (response.success) {
                        if (response.data) {
                            const position = getPositionFromNotation(response.data.result, response.data.totalColumn);
                            colorizeSlot(position, "green", response.data.sample);
                            toastr.success("Sample " + sampleId + " added to rack");
                        }
                    } else {
                        toastr.error(response.message || "Failed to add sample to rack");
                    }
                }).fail(function(jqXHR) {
                    toastr.error(jqXHR.responseJSON && jqXHR.responseJSON.message ? jqXHR.responseJSON.message : "Failed to add sample to rack");
                });
            });

            setTimeout(checkGreenSlots, 300);

            $('#modal-add-sample').modal('hide');
        });
    </script>
@endsection