@extends('operations.layout.mainlayout')

@section('content')
    {{--    @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 -->
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice__display{
            color:black;
        }
        .branch-select2 .select2-container{
            width: 70% !important;
        }
    </style>
    <link href="/css/select2totree.css" rel="stylesheet">
    <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;">Rack Movement</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 " 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-4"></div>
                    <div class="col-4">

                        <!-- /.card -->

                        <div class="card">

                            <!-- /.card-header -->
                            <div class="card-body">

                                <div class="row mb-3" id="move-success" style="display: none">
                                    <div class="col-md-12 alert alert-success" role="alert">Success move the rack</div>
                                </div>
                                <div class="row mb-3">
                                    <div id="scandit-barcode-picker"></div>
                                    <div class="col">
                                        <select class="form-control rhospital_id" style="width:16em"  id="wh-storage-location" name="wh_storage_location">
                                            <option value="">Select Rack</option>
                                        </select>
                                    </div>
                                    <div class="col-4">

                                        <a id="scan-qr-storage" class="nav-link btn btn-info" href="#" style="margin-right: 8px;height: 38px;">
                                            <i class="fas fa-qrcode"></i> QR
                                        </a>
                                    </div>
                                    <div class="col-12">

                                        <div class="custom-control custom-switch custom-switch-on-info" style="margin-top:7px;">
                                            <input name="active_status" type="checkbox" class="custom-control-input" id="customSwitch3">
                                            <label class="custom-control-label" for="customSwitch3"> Handheld Scanner</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <select class="form-control rhospital_id" style="width:16em"  id="wh-storage-location2" name="wh_storage_location">
                                            <option value="">Select Location</option>
                                        </select>
                                    </div>
                                </div>
                                @permission('warehouse_storage_manage_move_rack')
                                <div class="row" style="text-align: center">
                                    <div class="col" style="text-align: center;margin-top:10px;">

                                        <button disabled="disabled" id="move-rack-store" class="form-control btn btn-info float-right"> Move the Rack </button>
                                    </div>
                                </div>
                                @endpermission
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <div class="modal fade" id="modal-move-rack">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Move the rack</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 move the rack ?</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-move-rack"  type="button" class="btn btn-info">Yes</button>
                    </div>
                </form>
            </div>
        </div>

    </div>

@endsection
@section('footer-scripts')
    <script src="/js/select2totree.js"></script>
    <script>
        function addRacks() {
            var data = {
                branch_id: $("#branch-id").val(),
                storage_id : "{{$storage_id}}",
                move_type : "{{$move_type}}",
                storage_type : "{{$storage_type}}",
            };
            $.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) {
                    var selectRack = '';
                    var rackValue = 0;
                    @if($select_rack)
                        rackValue = "{{$storage_id}}";
                    if(rackValue == value.id){
                        selectRack = 'selected="selected"';
                    }
                    @endif
                    $whLocations.append('<option value="' + value.id + '" ' + selectRack + '>' + value.text + '</option>');
                });
                $whLocations.trigger('change');
            });
        }
        function addShelf() {
            var data = {
                branch_id: $("#branch-id").val(),
                storage_id : "{{$storage_id}}",
                move_type : "{{$move_type}}",
                storage_type : "{{$storage_type}}",
            };
            $.ajax({
                type: "POST",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                url: "/operations/operations/get-shelf-by-branch",
            }).done(function (data) {
                var $whLocations2 = $("#wh-storage-location2");
                $whLocations2.empty();
                $whLocations2.append('<option value="">Select Location</option>');
                @if($storage_type == 'rack' && $move_type == 'out')
                $whLocations2.append('<option value="-1">Move outside</option>');
                @endif
                $.each(data, function (index, value) {
                    var selectShelf = '';
                    var shelfValue = 0;
                    @if($select_shelf)
                        shelfValue = "{{$storage_id}}";
                    if(shelfValue == value.id){
                        selectShelf = 'selected="selected"';
                    }
                    @endif
                    $whLocations2.append('<option value="' + value.id + '" ' + selectShelf + '>' + value.text + '</option>');
                });
                $whLocations2.trigger('change');
            });
        }
        addRacks();
        addShelf();
        $("#branch-id").change(function(){
            addRacks();
            addShelf();
            if (window.location.search) {
                // Remove the query string and reload the page
                window.history.replaceState({}, document.title, window.location.pathname);
                location.reload();
            }
        });

        $("#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');
                    }
                }
            }
        });
        $('#wh-storage-location').change(function (){
            var selectedValue = $(this).val();
            var selectLocation = $('#wh-storage-location2').val();
            if (selectedValue && selectLocation) {
                $("#move-rack-store").prop('disabled', false);
            } else {
                $("#move-rack-store").prop('disabled', true);
            }
        })
        $('#wh-storage-location2').change(function (){
            var selectedValue = $(this).val();
            var selectRack = $('#wh-storage-location').val();
            if (selectedValue && selectRack) {
                $("#move-rack-store").prop('disabled', false);
            } else {
                $("#move-rack-store").prop('disabled', true);
            }
        })

        $("#move-rack-store").on("click",function(){
            $('#modal-move-rack').modal('show');
        });
        function resetSelectOptions() {
            $("#wh-storage-location").empty(); // Clear options
            $("#wh-storage-location2").empty(); // Clear options
            addRacks();
            addShelf();
        }

        $("#create-move-rack").on("click",function(){
            $("#create-move-rack").html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
            var storage_id = $('#wh-storage-location').val();
            var location = $('#wh-storage-location2').val();
            $.ajax({
                type: "POST",
                url: "/operations/stores/move-rack-location",
                data: {
                    storage_id : storage_id,
                    location : location,
                },
            }).done(function(data, textStatus, xhr ) {
                if(data.response) {
                    $('#create-move-rack').html('Store').attr('disabled', false);
                    $('#modal-move-rack').modal('hide');
                    $('#move-success').show();
                    resetSelectOptions();
                }else{
                    alert("Please re-login, your session has ended");
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                $('#create-move-rack').html('Store').attr('disabled', false);
                toastr.error(jqXHR.responseJSON.errorMessage);
            });
        });

        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');
                    }
                }
            }
        });


    </script>
@endsection