@extends('operations.layout.mainlayout')

@section('content')
    <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;
        }
    </style>
    <link href="/css/select2totree.css" rel="stylesheet">
    {{--    @if(session('role') != 4 && session('role') != 2 && session('role') != 3 && session('role') != 9 && session('role') != 7)--}}
    {{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
    {{--    @endif--}}
    <!-- 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;">Sample Storage</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <div class="input-group col-md-6 mb-3 branch-select2" style="position: absolute;right: 15px;padding-top: 20px">
                            <div class="input-group-prepend" style="height: 38px; !important;">
                                <span class="input-group-text">Branch</span>
                            </div>
                            <select id="branch-id" class="form-control rhospital_id branch-select" style=""   name="wh_storage_location">
                                @foreach($hospitals as $hospital)
                                    <option value="{{$hospital->ID}}" @if($hospital_id == $hospital->ID) selected @endif>{{$hospital->NAME_EN}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </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;">
                                    <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">Rack</span>
                                            </div>
                                            <select class="form-control " style="width:16em"  id="wh-storage-location" name="wh_storage_location">
                                                <option value="">Select Rack</option>
                                            </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 disabled="disabled" id="add-store" class="btn btn-info float-right"><i class="fa fa-plus"></i> Store</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 class="col-4" style="text-align: center">
                                        <div class="row" style="height:100%">

                                            <div class="col" style="background-color: #162427;overflow-y: scroll">
                                                <div class="row">
                                                    <div class="col" style="padding-top:5px;">
                                                        <h4 style="color:white !important;">Store Samples ( <span id="batch-count">0</span> )</h4>
                                                        <div id="extracted-codes"></div>
                                                        <div id="rack-container"></div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>--}}
                                    {{--<div class="col-8">
                                        <div id="scandit-barcode-picker"></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-store"  type="button" class="btn btn-info">Store</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 = [];
        function addRacks() {
            var data = {
                branch_id: $("#branch-id").val()
            };
            $.ajax({
                type: "POST",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                url: "/operations/operations/get-rack-by-branch",
            }).done(function (data) {
                var $whLocations = $("#wh-storage-location");
                $whLocations.empty();
                $whLocations.append('<option value="">Select Rack</option>');
                $.each(data, function (index, value) {
                    $whLocations.append('<option value="' + value.id + '">' + value.text + '</option>');
                });
                $whLocations.trigger('change');
            });
        }
        addRacks();
        $("#branch-id").change(function(){
            addRacks();
        });

        function checkAllOptions(data, $select) {
            data.forEach(function (item) {
                if (item.IS_SIZE != 1) {
                    var option = $select.find("option[value='" + item.id + "']");
                    option.prop("disabled", true);
                }

                if (item.inc && item.inc.length > 0) {
                    checkAllOptions(item.inc, $select);
                }
            });
        }

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



        function createRack(rows, columns , samples = null) {
            const rackContainer = document.getElementById('rack-container');
            rackContainer.style.gridTemplateColumns =  `repeat(${columns}, 1fr)`;
            for (let i = 0; i < rows * columns; i++) {
                const slot = document.createElement('div');
                slot.classList.add('slot');
                // Calculate the row and column for the current slot
                const currentRow = Math.floor(i / columns) + 1;
                const currentColumn = (i % columns) + 1;
                var foundKey = findKeyByRowColumn(samples, currentRow , currentColumn);
                if (foundKey !== null) {
                    colorAvailable.push(i);
                    slot.innerHTML = "<span>"+foundKey+"</span>";
                }
                rackContainer.appendChild(slot);
            }
        }

        function findKeyByRowColumn(data, targetRow , targetColumn) {
            var foundKey = null;

            $.each(data, function (key, value) {
                if (value.row === targetRow && value.column === targetColumn) {
                    foundKey = key;
                    return false; // Exit the loop since we found the key
                }
            });

            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>";
                }
            }
        }

        function getPositionFromNotation(notation, totalColumns) {
            const rowLetter = notation.charAt(0).toUpperCase();
            const columnNumber = parseInt(notation.substring(1));

            // Convert row letter to numerical value (e.g., A=1, B=2, C=3, etc.)
            const row = rowLetter.charCodeAt(0) - 'A'.charCodeAt(0) + 1;

            // Calculate the position index
            const position = (row - 1) * totalColumns + (columnNumber - 1);

            return position;
        }



        $("#wh-storage-location").change(function (){
            colorAvailable = [];
            BatchSamples = [];
            if($("#wh-storage-location").val()){
                $("#rack-container").empty();
                $("#rack-container").removeAttr('style')
                rack_id = $("#wh-storage-location").val();
                $.ajax({
                    type: "GET",
                    url: "/operations/storage/get-rack-details/"+rack_id,
                }).done(function (data) {
                    createRack(data.rows,data.columns,data.samples);
                    if (colorAvailable.length > 0) {
                        // Assuming you want to apply the color to all available slots
                        colorAvailable.forEach(function (index) {
                            colorizeSlot(index, "grey");
                        });
                    }

                });
            }else{
                $("#rack-container").empty();
                $("#rack-container").removeAttr('style')
                createRack(10,10);
            }
        });


        /*
        document.addEventListener('scan', function(sScancode, iQuantity) {
             let code = sScancode.detail.scanCode;
             if($("#customSwitch3").is(':checked')) {
                 if (code != "" && code != undefined) {
                     var option = $("#wh-storage-location").find("option[value='" + code + "']");
                     if (!option.prop('disabled')) {
                         option.prop('selected', true);
                         $("#wh-storage-location").trigger('change');
                     }
                 }
             }
         });*/



        // Enable scan events for the entire document
        onScan.attachTo(document);
        // Register event listener
        document.addEventListener('scan', function(sScancode, iQuantity) {
            let code = sScancode.detail.scanCode;
            if($("#customSwitch3").is(':checked')) {
                var unit_id = $('#wh-storage-location').val();
                var dataToSend = {
                    samples: BatchSamples,
                    unit_id: unit_id,
                };
                if (BatchSamples.length < 94) {
                    if (!BatchSamples.includes(code)) {
                        $.ajax({
                            type: "POST",
                            url: "/operations/samples/" + code + "/sstores",
                            data: dataToSend
                        }).done(function (data, textStatus, xhr) {
                            if (data.response) {
                                if (!BatchSamples.includes(code)) {
                                    BatchSamples.push(code);
                                    const position = getPositionFromNotation(data.response.result, data.response.totalColumn);
                                    colorizeSlot(position, "green",data.response.sample);
                                    $("#extracted-codes").prepend("<p style='color:#4cffb5'>" + data.response + "</p>");
                                    $('#add-store').prop("disabled", false);
                                    $("#batch-count").html(BatchSamples.length);
                                } else {
                                    toastr.error("Sample is already in the batch");
                                }
                            } else {
                                toastr.error("Please re-login, your session has ended");
                            }
                        }).fail(function (jqXHR, textStatus, errorThrown) {
                            if(jqXHR.responseJSON.is_retrieve){
                                if(jqXHR.responseJSON.action_id){
                                    toastr.error(jqXHR.responseJSON.errorMessage+' click buton to  <button style="max-width:230px;margin-top: 10px;" id="customButton" class="btn btn-primary" data-toggle="modal" data-target="#sample-retrieve"  sample_id="'+jqXHR.responseJSON.action_id+'">Retrieve Samples</button>', 'Error', {
                                        closeButton: true,
                                        timeOut: 5000,
                                        extendedTimeOut: 0,
                                        onclick: function() {
                                        }
                                    });
                                    document.getElementById('customButton').addEventListener('click', function() {
                                        var sample_id = $("#customButton").attr('sample_id');
                                        $("#retrieve-sample-id").val(sample_id);
                                    });
                                }else{
                                    toastr.error(jqXHR.responseJSON.errorMessage);
                                }
                            }else {
                                toastr.error(jqXHR.responseJSON.errorMessage);
                            }
                        });
                    } else {
                        toastr.error("Sample is already in the batch");
                    }
                } else {
                    toastr.error("Batch cannot contain more than 94 samples");
                }
            }
        });
        $("#create-sample-retrieve").on("click", function() {
            $("#create-sample-retrieve").html(
                '<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...'
            ).attr('disabled', true);
            var storage_id = $('#retrieve-sample-id').val();
            $.ajax({
                type: "POST",
                url: "/operations/samples/"+storage_id+"/retrieve-storage",
            }).done(function(data, textStatus, xhr) {
                if (data.response) {
                    onScan.simulate(document, storage_id);
                    $('#create-sample-retrieve').html('Store').attr('disabled', false);
                    $('#sample-retrieve').modal('hide');
                } else {
                    alert("Please re-login, your session has ended");
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                $('#create-sample-retrieve').html('Store').attr('disabled', false);
                toastr.error(jqXHR.responseJSON.errorMessage);
            });
        });


    </script>
@endsection