@extends('operations.layout.mainlayout')

@section('content')
{{--    @if(session('role') != 4 && session('role') != 8)--}}
{{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
{{--    @endif--}}
    <style>
        .select2-container{
            width: 65% !important;
        }
    .jstree-node {
        font-size: 15pt;
    }
    </style>
<script src="/bower_components/admin-lte/plugins/jquery/jquery.min.js"></script>
    <script>
    $(document).ready(function () {
    $(".select-letters").select2({
    });

    var array = @json($storages);
    // Create an jstree instance
    $('#jstree_demo').jstree({ // config object start
    "core": {                    // core config object
      "mulitple": false,         // disallow multiple selection  
      "animation": 100,          // 200ms is default value
      "check_callback" : true,   // this make contextmenu plugin to work
      "themes": {
        "variant": "large",
      },

      "data": array
      
    }, // core end
    
    // Types plugin
    "types" : {
      "default" : {
        "icon" : "glyphicon glyphicon-flash"
      },
      "demo" : {
        "icon" : "glyphicon glyphicon-th-large"
      }
    },
    
    // config object for Checkbox plugin (declared below at plugins options)
    "checkbox": { 
      "keep_selected_style": true,  // default: false
      "three_state": true,           // default: true
      "whole_node": true             // default: true
    },
    
    "conditionalselect" : function (node, event) {
      return false;
    },
    
    // injecting plugins
    "plugins" : [
          // "checkbox",
          "contextmenu",
          // "dnd",
          // "massload",
          // "search",
          // "sort",
          // "state",
          "types",
          // Unique plugin has no options, it just prevents renaming and moving nodes
          // to a parent, which already contains a node with the same name.
          "unique",
          // "wholerow",
          // "conditionalselect",
          "changed"
    ],
        "contextmenu": {
            "items": function ($node) {
                var tree = $("#jstree_demo").jstree(true);
                @permission('warehouse_settings_manage_locations')
                    return {
                    "Create": {
                        "separator_before": false,
                        "separator_after": false,
                        "label": "Create",
                        "action": function (obj) {
                            $node = tree.create_node($node);
                            tree.edit($node);
                        }
                    },
                    "Rename": {
                        "separator_before": false,
                        "separator_after": false,
                        "label": "Rename",
                        "action": function (obj) {
                            tree.edit($node);
                        }
                    },
                    "Sortable": {
                        "separator_before": false,
                        "separator_after": false,
                        "label": $node.original.IS_STORABLE === 1 ? "Storable Location <i style='padding-left: 40px; color: green' class='fa fa-check'></i>" : "Storable Location <i style='padding-left: 40px; color: red' class='fa fa-times-circle'></i>",
                        "action": function (obj) {
                            if ($node.original.IS_CONSUMABLE === 1 || $node.original.IS_DISPOSABLE === 1) {
                                alert('Location cant be multiple type')
                                return;
                            }
                            $.get('/operations/storage-unit/storable/' + $node.id , {'branch_id' : $("#branch-id").val()})
                                .done(function (d) {
                                    tree.settings.core.data = d.response;
                                    tree.refresh();
                                })
                                .fail(function () {
                                    tree.refresh();
                                });
                        }
                    },
                    "QR": {
                        "separator_before": false,
                        "separator_after": false,
                        "label": "QR",
                        "action": function (obj) {
                            $.get('/operations/storage-unit/' + $node.id + '/storage-qr-generate')
                                .done(function (d) {
                                    /*if ($node.original.IS_STORABLE != 1) {
                                        alert('Cannot add size , the storable not active')
                                        return;
                                    }*/
                                    var link = document.createElement('a');
                                    link.href = 'data:image/png;base64,' + d.image;
                                    link.download = 'storage_'+$node.id+'.png';
                                    link.click();
                                })
                                .fail(function () {
                                    tree.refresh();
                                });
                        }
                    },
                        "Barcode": {
                            "separator_before": false,
                            "separator_after": false,
                            "label": "Barcode",
                            "action": function (obj) {
                                window.open('/operations/storage-unit/'+$node.id + '/storage-barcode-generate', '_blank');
                            }
                        },
                    "Size": {
                        "separator_before": false,
                        "separator_after": false,
                        "label": $node.original.IS_STORABLE === 1 ? "Size" : "Size <i style='padding-left: 40px; color: red' class='fa fa-times-circle'></i>",
                        "action": function (obj) {
                            if ($node.original.IS_STORABLE != 1) {
                                alert('Cannot add size , the storable not active')
                                return;
                            }
                            $("#storage_unit_id").val($node.id);
                            $("#storage_letter").val($node.original.TO_LETTER).trigger("change");
                            $("#storage_num_columns").val($node.original.NUMBER_OF_COLUMNS);
                            $("#modal-size-unit").modal('show');
                        }
                    },
                    "StorageTemperature": {
                        "separator_before": false,
                        "separator_after": false,
                        "label": "Storage Temperature",
                        "action": function (obj) {
                            if ($node.original.IS_STORABLE == 1) {
                                alert('Cannot add storage temperature , the storable is active')
                                return;
                            }
                            $("#storage_unit_temperature_id").val($node.id);
                            $("#storage_temperature_type_id").val($node.original.STORAGE_TEMPERATURE_TYPE_ID).trigger("change");
                            $("#modal-storage-temperature-type").modal('show');
                        }
                    },
                    "Delete": {
                        "separator_before": false,
                        "separator_after": false,
                        "label": "Remove",
                        "action": function (obj) {
                            tree.delete_node($node);
                        }
                    }
                };
                @else
                    return {};
                @endpermission
            }
        }
  }).on('create_node.jstree', function (e, data) {
        @permission('warehouse_storage_manage_units')
              $.get('/operations/storage/create', { 'parents' : data.node.parents,'text' : data.node.text , 'branch_id' : $("#branch-id").val()})
                .done(function (d) {
                  data.instance.set_id(data.node, d.response.id);
                })
                .fail(function () {
                  data.instance.refresh();
                });
              @endpermission
            }).on('rename_node.jstree', function (e, data) {
        @permission('warehouse_storage_manage_units')
              $.get('/operations/storage/rename', { 'id' : data.node.id, 'text' : data.text })
                .fail(function () {
                  data.instance.refresh();
                });
              @endpermission
            }).on('delete_node.jstree', function (e, data) {
        @permission('warehouse_storage_manage_units')
              $.post('/operations/storage/remove', { 'id' : data.node.id })
                .fail(function () {
                  data.instance.refresh();
                });
              @endpermission
            }); 
        });

    </script>
<!-- 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;">Storage Unit List</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <div class="input-group col-md-6 mb-3" 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>
                        <a id="select-branch" class="nav-link btn btn-info" href="#" style="margin-left: 5px;height: 38px;">
                            <i class="fas fa-search"></i>
                        </a>
                    </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="mx-auto" style="width:500px">

                    <!-- /.card -->

                    <div class="card">

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

                            <div class="row">
                                <div class="col" style="text-align: center;margin-top:60px;">
                                    @permission('warehouse_storage_manage_units')
                                    <button  id="create-storage"  type="button" class="btn btn-info">Create Storage Unit</button>
                                    @endpermission
                                </div>
                            </div>

                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <div class="modal fade" id="modal-size-unit">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h3 class="modal-title">Size Location</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="row" style="margin: 25px 20px 25px 20px;">
                                    <div class="col-md-5">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">To Letter</span>
                                            </div>
                                            <select name="to_letter" id="storage_letter" style="width: 70% !important;" class="form-control select-letters">
                                                <option value="">Select To Letters</option>
                                                @foreach (range('A', 'Z') as $letter)
                                                    <option value="{{ $letter }}">{{ $letter }}</option>
                                                @endforeach
                                            </select> <br />
                                        </div>
                                    </div>
                                    <input type="hidden" id="storage_unit_id">
                                    <div class="col-md-5">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">Number Of Columns</span>
                                            </div>
                                            <input required type="number" class="form-control" id="storage_num_columns"  name="num_columns" value="" /> <br />

                                        </div>
                                    </div>
                                </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-size-location"  type="button" class="btn btn-info">Store</button>
                                </div>
                            </form>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <div class="modal fade" id="modal-storage-temperature-type">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h3 class="modal-title">Storage Temperature Type</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="row" style="margin: 25px 20px 25px 20px;">
                                    <div class="col">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">Storage Temperature Type</span>
                                            </div>
                                            <select name="storage_temperature_type_id" id="storage_temperature_type_id" style="width: 70% !important;" class="form-control select-letters">
                                                <option value="">Select Storage Temperature Type</option>
                                                @foreach($storageTemperatureType as $stype)
                                                    <option value="{{$stype->ID}}">{{$stype->NAME}}</option>
                                                @endforeach
                                            </select> <br />
                                        </div>
                                    </div>
                                    <input type="hidden" id="storage_unit_temperature_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-temperature-type"  type="button" class="btn btn-info">Store</button>
                                </div>
                            </form>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<script>
    $("#create-size-location").on("click",function(){
        $("#create-size-location").html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
        var storage_id = $('#storage_unit_id').val()
        var storage_letter = $('#storage_letter').val()
        var storage_num_columns = $('#storage_num_columns').val()
        var branch_id = $('#branch-id').val()
        $.ajax({
            type: "POST",
            url: "/operations/storage/size",
            data: {
                num_columns : storage_num_columns,
                to_letter : storage_letter,
                branch_id : branch_id,
                storage_id:storage_id
            },
        }).done(function(data, textStatus, xhr ) {
            if(data.response) {
                $('#create-size-location').html('Store').attr('disabled', false);
                $('#modal-size-unit').modal('hide');
                var tree = $("#jstree_demo").jstree(true);
                tree.settings.core.data = data.response;
                tree.refresh();
            }else{
                alert("Please re-login, your session has ended");
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            $('#create-size-location').html('Store').attr('disabled', false);
            toastr.error(jqXHR.responseJSON.errorMessage);
            //$("#store-created").html(jqXHR.responseJSON.errorMessage);
        });
    });

    $("#create-temperature-type").on("click",function(){
        $("#create-temperature-type").html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
        var storage_id = $('#storage_unit_temperature_id').val()
        var storage_temperature_type_id = $('#storage_temperature_type_id').val()
        var branch_id = $('#branch-id').val()
        $.ajax({
            type: "POST",
            url: "/operations/storage/storage-temperature",
            data: {
                storage_temperature_type_id : storage_temperature_type_id,
                branch_id : branch_id,
                storage_id:storage_id
            },
        }).done(function(data, textStatus, xhr ) {
            if(data.response) {
                $('#create-temperature-type').html('Store').attr('disabled', false);
                $('#modal-storage-temperature-type').modal('hide');
                var tree = $("#jstree_demo").jstree(true);
                tree.settings.core.data = data.response;
                tree.refresh();
            }else{
                alert("Please re-login, your session has ended");
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            $('#create-temperature-type').html('Store').attr('disabled', false);
            toastr.error(jqXHR.responseJSON.errorMessage);
            //$("#store-created").html(jqXHR.responseJSON.errorMessage);
        });
    });
    $("#select-branch").click(function () {
        var selectedBranchId = $("#branch-id").val();
        if (selectedBranchId != "") {
            $.ajax({
                url: '/operations/storage/by-branch',
                type: 'GET',
                data: { branch_id: selectedBranchId },
                success: function (data) {
                    var tree = $("#jstree_demo").jstree(true);
                    tree.settings.core.data = data;
                    tree.refresh();
                },
                error: function (error) {
                    console.log(error);
                }
            });
        } else {
            // Clear the jstree when no branch is selected
            $('#jstree_demo').jstree(true).settings.core.data = [];
            $('#jstree_demo').jstree(true).refresh();
        }
    })
    $("#create-storage").on("click",function(){
        $('#create-storage').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
        $.ajax({
            type: "POST",
            url: "/operations/storage/create",
            data: { branch_id: $("#branch-id").val() },
        }).done(function(data ) {
            $('#create-storage').html('Create Storage Unit').attr('disabled', false);
            var tree = $("#jstree_demo").jstree(true);
            tree.settings.core.data = data.response;
            tree.refresh();
        }).fail(function(jqXHR, textStatus, errorThrown) {
            $('#create-storage').html('Create Storage Unit').attr('disabled', false);
        });
    });

</script>
<!-- /.content-wrapper -->
@endsection