@extends('operations.layout.mainlayout')

@section('content')
    <style>
        .branch-select2 .select2-container{
            width: 80% !important;
        }
        .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;">Racks</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="mx-auto col-md-8">

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

                            <!-- /.card-header -->
                            <div class="card-body">
                                <table id="rack-storage-datatable" class="table table-bordered table-striped sg-table">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Rack</th>
                                        <th>Location</th>
                                        <th>Shelf</th>
                                        <th>Number Of Column</th>
                                        <th>Rows</th>
                                        <th>Process Unit</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"  class="btn btn-info create-rack">Add Rack</button>
                                    </div>
                                </div>

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




                    <div class="modal fade" id="modal-edit-rack">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h3 class="modal-title modal-title-rack">Edit Rack</h3>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="row">
                                    <div class="col" style="text-align: center;">
                                        <div class="alert alert-danger alert-danger-rack" role="alert" style="display: none;"></div>
                                    </div>
                                </div>
                                <div class="modal-body">

                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>

                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
@endsection
@section('warehouse_scripts')
<script>
    $('#add-new-storage-rack').click(function(){
        $("#storage-rack-name").val("");
        $("#storage-rack-columns").val("");
        $("#storage-rack-rows").val("");
        $("#storage-rack-unit").val('').trigger('change');
        $(this).prop("disabled",false);
    });



    var rackLocation =
        $("#rack-storage-datatable").DataTable({
            "responsive": true,
            "autoWidth": false,
            "searching": true,
            "paging": true,
            "lengthChange": false,
            "language": {
                "emptyTable": "There are no locations yet"
            },
            serverSide: true,
            "processing": true,
            ajax: {
                url :'/operations/storage/racks-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="Select processing unti" data-value="'+data+'">'+data+'</span>'
                }},
                {data: "location", name: "location"},
                {data: "shelf", name: "shelf"},
                {data: "NUMBER_OF_COLUMNS", name: "NUMBER_OF_COLUMNS"},
                {data: "number_rows", name: "number_rows"},
                {data: "unit_names", name: "unit_names"},
                { 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>';
                    if(row['exist_location'] == 1){
                        actions += '<a href="/operations/move-rack?storage_id=' + row["id"] + '&move_type=out&storage_type=rack" target="_blank" class="dropdown-item btn-actions " ><i class="fa fa-arrow-circle-left" aria-hidden="true"></i> Move Out</a>';
                    }else{
                        actions += '<a href="/operations/move-rack?storage_id=' + row["id"] + '&move_type=in&storage_type=rack" 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>';
                    }
                        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 edit-rack" id="'+row["id"]+'" ><i class="fa fa-edit" aria-hidden="true"></i> Edit </a></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",
                })
            }
        });



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

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

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




    $("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");
        });
    });

    $("body").on("click", ".edit-rack",function (e) {
        e.preventDefault();
        let id = $(this).attr('id');
        $.ajax({
            type: "GET",
            url:  '/operations/storage/rack/'+id+'/edit',
            data: {
                branch_id : $("#branch-id").val()
            },
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                $('.modal-body').html(response)
                $('.modal-title-rack').html("Edit Rack")
                $(".alert-danger-rack").hide();
                $('#modal-edit-rack').modal('show');
                $(".unit-select2").select2();
                $('#rack-form').submit(function (e) {
                    e.preventDefault();
                    $(".alert-danger-rack").slideUp( "slow", function() {});
                    $('#edit-form-rack').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);

                    var form = $(this).serializeArray();
                    $.ajax({
                        type: "POST",
                        url: "/operations/storage/rack/create",
                        dataType: "json",
                        data: $.param(form),
                        context: this,
                    }).done(function(data ) {
                        $('#edit-form-rack').prop("disabled",false);
                        $('#rack-storage-datatable').DataTable().clear();
                        rackLocation.draw();
                        $('#modal-edit-rack').modal('hide');
                        $('#edit-form-rack').html('Save').attr('disabled', false);
                    }).fail(function(jqXHR, textStatus, errorThrown) {
                        $('#edit-form-rack').prop("disabled",false);
                        $(".alert-danger-rack").html(jqXHR.responseJSON.errorMessage);
                        $(".alert-danger-rack").slideDown( "slow", function() {});
                    });
                })

            }
        })
    });

    $("body").on("click", ".create-rack",function (e) {
        e.preventDefault();
        $.ajax({
            type: "GET",
            url:  '/operations/storage/rack/create',
            data: {
                branch_id : $("#branch-id").val()
            },
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                $('.modal-body').html(response)
                $('.modal-title-rack').html("Add Rack")
                $(".alert-danger-rack").hide();
                $('#modal-edit-rack').modal('show');
                $(".unit-select2").select2();
                $('#rack-form').submit(function (e) {
                    e.preventDefault();
                    $(".alert-danger-rack-create").slideUp( "slow", function() {});
                    $('#edit-form-rack').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);

                    var form = $(this).serializeArray();
                    $.ajax({
                        type: "POST",
                        url: "/operations/storage/rack/create",
                        dataType: "json",
                        data: $.param(form),
                        context: this,
                    }).done(function(data ) {
                        $('#edit-form-rack').prop("disabled",false);
                        $('#rack-storage-datatable').DataTable().clear();
                        rackLocation.draw();
                        $('#modal-edit-rack').modal('hide');
                        $('#edit-form-rack').html('Save').attr('disabled', false);
                    }).fail(function(jqXHR, textStatus, errorThrown) {
                        $('#edit-form-rack').prop("disabled",false);
                        $(".alert-danger-rack").html(jqXHR.responseJSON.errorMessage);
                        $(".alert-danger-rack").slideDown( "slow", function() {});
                    });
                })

            }
        })
    });
</script>
@endsection