@extends('layouts.main', ['title' => 'Inventories | LOGISTICS'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Inventory Items</li>
    </ul>
@stop
@section('title', 'Inventories Items')
@section('msghead_menu')
    <li class="right btn-group">
        @if(auth()->user()->can('CREATE STORE'))
            {{--<button class="btn" style="margin-right: 2px" onclick="create('{!! route('store.item_variants.item_variant_create') !!}')"><span--}}
                    {{--class="iconsweets-create"></span> Create Item Variant--}}
            {{--</button>--}}
        @endif
    </li>
@endsection
@section('contentinner')

    @include('errors.errors-list')

    @include('stores.inventories.items.includes.tabs')
    
    <style>
	
	    table#variant_table.dataTable tbody tr:hover {
		    background-color: #c9c9c9;
	    }
	    
    </style>

    <div class="row-fluid">
        <div class="span12">
            <table class="table table-bordered table-condensed" id="variant_table">
                <thead>
                <tr>
                    <th style="width: 84%" class="head1">Variant</th>
                    <th class="head1">Variant</th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--span6-->
    <!--tabbable-->

    <style>
	    body {font-family: Arial, Helvetica, sans-serif;}
	
	    .image {
		    border-radius: 5px;
		    cursor: pointer;
		    transition: 0.3s;
	    }
	
	    #previewImg:hover {opacity: 0.7;}
	
	    /* The Modal (background) */
	 
	
	    /* Modal Content (image) */
	    .modal-content {
		    margin: auto;
		    display: block;
		    width: 80%;
		    max-width: 700px;
	    }
	
	    /* Caption of Modal Image */
	    .caption {
		    margin: auto;
		    display: block;
		    width: 80%;
		    max-width: 700px;
		    text-align: center;
		    color: #ccc;
		    padding: 10px 0;
		    height: 150px;
	    }
	
	    /* Add Animation */
	    .modal-content, #caption {
		    -webkit-animation-name: zoom;
		    -webkit-animation-duration: 0.6s;
		    animation-name: zoom;
		    animation-duration: 0.6s;
	    }
	
	    @-webkit-keyframes zoom {
		    from {-webkit-transform:scale(0)}
		    to {-webkit-transform:scale(1)}
	    }
	
	    @keyframes zoom {
		    from {transform:scale(0)}
		    to {transform:scale(1)}
	    }
	
	    /* The Close Button */
	    .close {
		    position: absolute;
		    top: 15px;
		    right: 35px;
		    color: #f1f1f1;
		    font-size: 40px;
		    font-weight: bold;
		    transition: 0.3s;
	    }
	
	    .close:hover,
	    .close:focus {
		    color: #bbb;
		    text-decoration: none;
		    cursor: pointer;
	    }
	
	    /* 100% Image Width on Smaller Screens */
	    @media only screen and (max-width: 700px){
		    .modal-content {
			    width: 100%;
		    }
	    }
    </style>
    
    <!-- The Modal -->
    <div id="previewModal" class="modal" style=" background-color: rgba(0,0,0,.8);display: none;position: absolute;z-index: 1;padding-top: 100px;top: 0;overflow: auto;">
	    <span class="close">&times;</span>
	    <img class="modal-content" id="img01">
	    <div style="font-weight: bold" class="caption" id="caption"></div>
    </div>
    
    <form method="post" id="attachment_form" enctype="multipart/form-data" style="display:none">
        <input type="file" name="file">
    </form>
    <script>
	    
	    function previewImage(id){
		    
	    	var old_modal = jQuery('#previewModal');
	    	var old_modalImg = jQuery('#img01');
	    	var old_captionText = jQuery('#caption');
	    	
		    old_modal.attr('id', 'previewModal_'+id).trigger('change');
		    old_modalImg.attr('id', 'img01_'+id).trigger('change');
		    old_captionText.attr('id', 'caption_'+id).trigger('change');
		    
		    var modal = document.getElementById("previewModal_"+id);
		    var img = document.getElementById("previewImg_"+id);
		    var modalImg = document.getElementById("img01_"+id);
		    var captionText = document.getElementById("caption_"+id);
	    	
		    modal.style.display = "block";
		    modalImg.src = img.src;
		    captionText.innerHTML = img.alt;
		
		    // Get the <span> element that closes the modal
		    var span = document.getElementsByClassName("close")[0];
		
		    // When the user clicks on <span> (x), close the modal
		    span.onclick = function() {
		    	modal.style.display = "none";
			
			    var old_modal = jQuery('#previewModal_'+id);
			    var old_modalImg = jQuery('#img01_'+id);
			    var old_captionText = jQuery('#caption_'+id);
			
			    old_modal.attr('id', 'previewModal').trigger('change');
			    old_modalImg.attr('id', 'img01').trigger('change');
			    old_captionText.attr('id', 'caption').trigger('change');
			
			
		    }
	    }
	
	    
	    var attachment_form = $('#attachment_form');
	    var file_field = attachment_form.find('input:file');
	    function uploadItemVariantPicture(url) {
		    attachment_form.attr('action', url);
		    file_field.trigger('click');
		    file_field.change(function () {
		    	
			    if (file_field.val()) {
				    stopSpinner();
				    $.ajax({
					    url: attachment_form.attr('action'),
					    data: new FormData($("#attachment_form")[0]),
					    dataType: 'json',
					    async: false,
					    type: 'post',
					    processData: false,
					    contentType: false,
					    beforeSend: function () {
						    stopSpinner();
					    },
					    success: function (data) {
						    onAjaxSuccess(data);
						    if (data.state == 'Done') oTable.draw();
					    },
					    error: function (xhr, textStatus, error) {
						    onAjaxError(xhr, textStatus, error)
					    },
					    complete: function () {
						    stopSpinner();
						    file_field.val(null)
					    }
				    });
			    }
		    });
	    }
	    
        var oTable = jQuery('#variant_table').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No store records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{ route("store.item_variants.item_variant_datatables") }}',
                    data: function (d) {}
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[0,'asc']],
                "columns": [
                    {"class": "link", data: 'variant'},
                    {"class": "link", data: 'action'},
                ],
                "bStateSave": true
            });
	    
    </script>
@endsection