@extends('operations.layout.mainlayout')

@section('content')
    <style>
        .select2-container{
            width: 80% !important;
        }
        .form-inline .select2-container{
            width: 40% !important;
            margin-right: 5px;
        }

        .btn-actions{

            border-bottom: 1px solid rgba(0,0,0,.1) ;
            padding: 10px;
            margin-bottom: 5px;
            cursor: pointer;
        }

    </style>
    <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>
                        </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 col-md-8">

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

                            <!-- /.card-header -->
                            <div class="card-body">
                                <table id="storage-location-datatable" class="table table-bordered table-striped sg-table">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Storage Location</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>

                                <div class="row">
                                    <div class="col" style="text-align: center">
                                        <button style="width:130px;color:#fff" data-toggle="modal" data-target="#modal-location-storage" id="add-location-modal" class="btn btn-info">Add Location</button>
                                    </div>
                                </div>

                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>

                    <div class="modal fade" id="modal-location-shelf">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <input type="hidden" id="shelf-parent" value="0">
                                    <h3 class="modal-title">Add Storage Location</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-shelf" role="alert" style="display: none;"></div>
                                        </div>
                                        <div class="col-md-12">
                                            <form class="form-inline">
                                                <input type="text" class="form-control col-md-5 mr-sm-2 col-md-5" id="shelf-name" placeholder="Name" >
                                                <select type="text" class="form-control col-md-5 mb-2 mr-sm-2 col-md-5 rhospital_id" id="shelf-temp" >
                                                    <option value=""> Select Storage Temperature Type </option>
                                                    @foreach($temperature as $temp)
                                                        <option value="{{$temp->ID}}">{{$temp->NAME}}</option>
                                                    @endforeach
                                                </select>
                                                <a id="add-shelf" style="color: #fff" class="btn btn-primary mb-2 mt-2">Add</a>
                                            </form>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <table id="shelf-location-datatable" class="table table-bordered table-striped sg-table">
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Shelf</th>
                                                    <th>Storage Temperature</th>
                                                    <th>Actions</th>
                                                </tr>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer justify-content-between">
                                    <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>


                    <div class="modal fade" id="modal-location-storage">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h3 class="modal-title">Add Storage Location</h3>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <form id="collection-form" method="post"  action="/operations/samples/">
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col" style="text-align: center;">
                                                <div class="alert alert-danger alert-danger-location" role="alert" style="display: none;"></div>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top:20px">
                                            <div class="col-md-12">
                                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Name</p>
                                                <input style="padding:15px" class="form-control" required type="text" id="location-name" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer justify-content-between">
                                        <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                        <button style="width:130px;color:#fff" id="add-new-location-storage"  type="button" class="btn btn-info">Save</button>
                                    </div>
                                </form>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
@endsection
@section('footer-scripts')
    <script>
        $('#add-location-modal').click(function(){
            $("#location-name").val("");
            $(this).prop("disabled",false);
        });



        var storageLocation =
            $("#storage-location-datatable").DataTable({
                "responsive": true,
                "autoWidth": false,
                "searching": true,
                "lengthChange": true,
                serverSide: true,
                "processing": true,
                ajax: {
                    url :'/operations/storage/locations-datatable',
                    data: function (d) {
                        d.branch_id = $('#branch-id').val()
                    }
                },
                "order": [[0, "desc"]],
                columns: [
                    {data: "id", name: "id"},
                    { data: "text", name: "text",render: function ( data, type, row,meta ) {
                            return '<span class="text-primary xedit-storage-location-name"  data-pk="'+row["id"]+'" data-title="Storage Name" data-value="'+data+'">'+data+'</span>'
                        }},
                    { data: "id", name: "id",render: function ( data, type, row ) {

                            var actions = '';
                        @permission('warehouse_storage_manage_units')
                            actions += '<a class="dropdown-item remove-storage-location btn-actions"  location-id="'+row["id"]+'"><i class="fa fa-trash"></i> Remove</a>';
                            actions += '<a target="_blank" href="/operations/storage-unit/'+row['id'] + '/storage-barcode-generate" class="dropdown-item btn-actions "><i class="fa fa-barcode"></i> Barcode</a>';
                            actions += '<a  class="dropdown-item generate-qr-code btn-actions "  location-id="'+row["id"]+'"><i class="fa fa-qrcode" aria-hidden="true"></i> QR </a>';
                            actions += '<a  class="dropdown-item btn-actions shelf-storage" parent-id="' + row["id"] + '"><i class="fa fa-list-alt" aria-hidden="true"></i> Shelf</a>';
                        @endpermission
                            if(actions){
                                var dropdown_button = `
                            <div class="dropdown">
                              <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Actions</button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">`;
                                dropdown_button += actions;
                                dropdown_button += `</div></div>`;
                                return dropdown_button;
                            }
                            return actions;
                        }
                    },
                ],
                "drawCallback": function( settings ) {
                    $(".xedit-storage-location-name").editable({
                        type: 'text',
                        url: "/operations/storage/rename-location",
                    })
                }
            });
        var shelfTable;
        function shelfLocation() {
            shelfTable = $("#shelf-location-datatable").DataTable({
                "responsive": true,
                "autoWidth": false,
                "searching": true,
                "lengthChange": true,
                serverSide: true,
                "processing": true,
                ajax: {
                    url: '/operations/storage/locations-datatable',
                    data: function (d) {
                        d.branch_id = $('#branch-id').val();
                        d.parent_id = $('#shelf-parent').val();
                    }
                },
                "order": [[0, "desc"]],
                columns: [
                    {data: "id", name: "id"},
                    {
                        data: "text", name: "text", render: function (data, type, row, meta) {
                            return '<span class="text-primary xedit-storage-location-name"  data-pk="' + row["id"] + '" data-title="Storage Name" data-value="' + data + '">' + data + '</span>'
                        }
                    },
                    {data: "temp_name", name: "temp_name", render: function (data, type, row, meta) {
                            return '<span class="text-primary xedit-temp-type"  data-pk="' + row["id"] + '" data-title="select storage temperature" data-value="' + row["temp_id"] + '">' + data + '</span>'
                        }},
                    { data: "id", name: "id",render: function ( data, type, row ) {
                            var actions = '';
                        @permission('warehouse_storage_manage_units')
                            actions += '<a class="dropdown-item remove-shelf btn-actions"  location-id="'+row["id"]+'"><i class="fa fa-trash"></i> Remove</a>';
                            actions += '<a class=" dropdown-item racks-location  btn-actions "  location-id="'+row["id"]+'"><i class="fa fa-list-alt"></i> Racks</a>';
                            actions += '<a href="/operations/move-rack?storage_id=' + row["id"] + '&move_type=out&storage_type=shelf" target="_blank" class="dropdown-item btn-actions " ><i class="fa fa-arrow-circle-left" aria-hidden="true"></i> Move Out</a>';
                            actions += '<a href="/operations/move-rack?storage_id=' + row["id"] + '&move_type=in&storage_type=shelf" target="_blank" class="dropdown-item btn-actions " location-id="' + row["id"] + '"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Move In</a>';
                        @endpermission

                            if(actions){
                                var dropdown_button = `
                            <div class="dropdown">
                              <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Actions</button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">`;
                                dropdown_button += actions;
                                dropdown_button += `</div></div>`;
                                return dropdown_button;
                            }
                            return actions;
                        }
                    }
                ],
                "drawCallback": function (settings) {
                    $(".xedit-storage-location-name").editable({
                        type: 'text',
                        url: "/operations/storage/rename-location",
                    })

                    $(".xedit-temp-type").editable({
                        type: 'select',
                        url: "/operations/storage/change-temp",
                        source: [
                                @if(!empty($temperature))
                                @foreach($temperature as $temp)
                            {value: {{$temp->ID}}, text: "{{$temp->NAME}}"},
                            @endforeach
                            @endif
                        ],
                    })
                }
            });
        }

        $("body").on("click", ".racks-location",function(){
            var tr = $(this).closest('tr');
            var row = shelfTable.row(tr);
            if (row.child.isShown()) {
                row.child.hide();
                tr.removeClass('shown');
            } else {
                row.child(formatChildRow(row.data())).show();
                tr.addClass('shown');
            }
        });


        function formatChildRow(data) {
            var childContent = '<div class="child-row-content">';
            if (data.children && data.children.length > 0) {
                data.children.forEach(function (child) {
                    childContent += '<p>' + child.text + '</p>';
                });
            } else {
                childContent += '<p>Not found racks</p>';
            }
            childContent += '</div>';
            return childContent;
        }

        $("#branch-id").change(function(){
            storageLocation.draw();
        });

        //add location
        $('#add-new-location-storage').click(function(){
            $(".alert-danger-location").slideUp( "slow", function() {});
            $('#add-new-location-storage').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
            let text = $("#location-name").val();

            let data = {
                text: text,
                branch_id : $("#branch-id").val()
            }
            $.ajax({
                type: "POST",
                url: "/operations/storage/create",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
                $('#add-new-location-storage').prop("disabled",false);
                $('#storage-location-datatable').DataTable().clear();
                storageLocation.draw();
                $('#modal-location-storage').modal('hide');
                $('#add-new-location-storage').html('Save').attr('disabled', false);
            }).fail(function(jqXHR, textStatus, errorThrown) {
                $('#add-new-location-storage').prop("disabled",false);
                $(".alert-danger-location").html(jqXHR.responseJSON.errorMessage);
                $(".alert-danger-location").slideDown( "slow", function() {});
                $('#add-new-location-storage').html('Save').attr('disabled', false);
            });
            return false;
        });



        //remove storage location
        $("body").on("click", ".remove-storage-location",function(){
            var result = confirm("Want to delete?");
            if (result) {
                $.ajax({
                    type: "POST",
                    url: "/operations/storage/remove",
                    data: {
                        id: $(this).attr("location-id")
                    },
                    contentType: "application/json; charset=utf-8",
                }).done(function (data) {
                    $('#storage-location-datatable').DataTable().clear();
                    storageLocation.draw();
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    toastr.error(jqXHR.responseJSON.errorMessage)
                });
                return false;
            }
        });
        $("body").on("click", ".remove-shelf",function(){
            var result = confirm("Want to delete?");
            if (result) {
                $.ajax({
                    type: "POST",
                    url: "/operations/storage/remove",
                    data: {
                        id: $(this).attr("location-id")
                    },
                    contentType: "application/json; charset=utf-8",
                }).done(function (data) {
                    $('#shelf-location-datatable').DataTable().destroy();
                    shelfLocation();
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    toastr.error(jqXHR.responseJSON.errorMessage)
                });
                return false;
            }
        });

        $("body").on("click", ".shelf-storage",function(){
            $(".alert-danger-shelf").hide();
            $("#shelf-name").val('');
            var parent_id = $(this).attr("parent-id");
            $("#shelf-parent").val(parent_id);
            $('#modal-location-shelf').modal('show');
            $('#shelf-location-datatable').DataTable().destroy();
            shelfLocation();
        });

        $("body").on("click", ".generate-qr-code",function(){
            var storageId = $(this).attr("location-id");
            $.ajax({
                type: "GET",
                url: '/operations/storage-unit/' + storageId + '/storage-qr-generate',
                contentType: "application/json; charset=utf-8",
            }).done(function (data) {
                var link = document.createElement('a');
                link.href = 'data:image/png;base64,' + data.image;
                link.download = 'storage_'+storageId+'.png';
                link.click();
            }).fail(function (jqXHR, textStatus, errorThrown) {
                alert("Error while generate qr");
            });
        });


        //add shelf
        $('#add-shelf').click(function(){
            $(".alert-danger-shelf").slideUp( "slow", function() {});
            $('#add-shelf').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
            let text = $("#shelf-name").val();
            let data = {
                text: text,
                parent_id: $("#shelf-parent").val(),
                temp: $("#shelf-temp").val(),
                branch_id : $("#branch-id").val()
            }
            $.ajax({
                type: "POST",
                url: "/operations/storage/create",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
                $('#add-shelf').prop("disabled",false);
                $('#shelf-location-datatable').DataTable().destroy();
                shelfLocation();
                $('#shelf-name').val('');
                $('#add-shelf').html('Add').attr('disabled', false);
            }).fail(function(jqXHR, textStatus, errorThrown) {
                $('#add-shelf').prop("disabled",false);
                $(".alert-danger-shelf").html(jqXHR.responseJSON.errorMessage);
                $(".alert-danger-shelf").slideDown( "slow", function() {});
                $('#add-shelf').html('Add').attr('disabled', false);
            });
            return false;
        });



    </script>
@endsection