@extends('Admin.master_layout.master')

@section('title', getTitleInPage())

@section('header_menu')
@parent
@endsection
 
@section('sidebar_menu')
@parent
@endsection

@section('content')
<script src="{{ asset('admin/camJs/jquery-1.12.4.min.js') }}"></script>
<script src="{{ asset('admin/camJs/bootstrap.min.js') }}"></script>
<div id="content">
    <div id="content-header">
        <div id="breadcrumb"> 
            <a href="{{ url('/') }}" title="Go to Home" class="tip-bottom">
                <i class="icon-home"></i> Home
            </a> 
            <a href="{{ url('merchant-Item') }}" title="Go to {{ getTitleInPage() }}" class="tip-bottom">
                {{ getTitleInPage() }}
            </a> 
            <a href="" class="current">
                Add
            </a> 
        </div>
        <h1>{{ getTitleInPage() }} - Add</h1>
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                @foreach ($errors->all() as $error)
                <p class="alert alert-warning">{{ $error }}</p>
                @endforeach
                <div class="widget-box">
                    <div class="widget-title"> <span class="icon"> <i class="icon-align-justify"></i> </span>
                        <h5>{{ getTitleInPage() }} - Add</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <form action="{{ url('merchant-Item/store') }}" method="post" class="form-horizontal" enctype="multipart/form-data">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="image" id="img_base" value="">
                            <div class="widget-box span11">
                                <div class="widget-title"> 
                                    <h5>General Details</h5>
                                </div>
                                <div class="control-group" id="enterprise">
                                    <label class="control-label">Enterprise* :</label>
                                    <div class="controls">
                                        <select class="span11" name="enterprise_id" id="enterprise_id">
                                            @if(!getMechantIds())
                                            <option value="">Select Enterprise</option>
                                            @endif
                                            @foreach($enterprises as $enterprise)
                                            <option value="{{ $enterprise->id }}" {{ (Input::old('enterprise_id')==$enterprise->id)?'selected':'' }}>{{ $enterprise->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">Merchant Ho:</label>
                                    <div class="controls">
                                        <select class="span11" name="merchant_id" id="merchant_id">
                                            @if(!getMechantIds())
                                            <option value="">Select Merchant Ho</option>
                                            @endif
                                            @foreach($merchants as $merchant)
                                                <option value="{{ $merchant->id }}" >{{ $merchant->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">Merchant Item Group* :</label>
                                    <div class="controls">
                                        <select class="span11" name="item_group_id" id="item_group_id" required>
                                            <option value="">Select Merchant Item Group</option>
                                            @foreach($itemGroup as $list)
                                            <option value="{{$list->id}}" style="font-weight: bold;">{{$list->name}}
                                                @if(count(getSubItemGroupById($list->id)) > 0)
                                                    @foreach(getSubItemGroupById($list->id) as $subItemData)
                                                        <option value="{{ $subItemData->id }}">--- {{ $subItemData->name }}</option>
                                                    @endforeach
                                                @endif
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">Item* :</label>
                                    <div class="controls">
                                        <input class="span11" placeholder="Title" type="text" name="title" value="{{ Input::old('title') }}" required="">
                                    </div>
                                </div>
                                {{-- <div class="control-group">
                                    <label class="control-label">Image :</label>
                                    <div class="controls">
                                        <input type="file" name="image" class="span11" accept="image/*"/>
                                    </div>
                                </div> --}}
                                <div class="control-group">
                                    <label class="control-label">UOM:</label>
                                    <div class="controls">
                                        <select class="span11" name="uom_id" id="uom_id">
                                            @if(count($uom) > 0)
                                            @foreach($uom as $key => $uom)
                                            <option value="{{ $uom->id }}" @if(Input::old('uom') == $uom->id) selected @endif>{{ $uom->name }}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-box span11">
                                <div class="widget-title"> 
                                    <h5>Upload Details</h5>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" style="padding: 10px;">Choose Image* :</label>
                                    <div class="controls" >
                                        <div style="display:flex;" id="choose_img">
                                            <input type="radio" id="gallary" name="choose_image" value="gallary" checked>
                                            <label>Gallary</label>
                                            <input type="radio" id="take_camera" name="choose_image" value="camera">
                                            <label>Take Camera</label>
                                          </div>
                                    </div>
                                </div>
                                <div style="display:flex">
                                    <div class="control-group" id="img_show">
                                        <label class="control-label">Image:</label>
                                        <div class="controls">
                                            <input type="file" name="image" class="span11" accept="image/*"/>
                                        </div>
                                    </div>
                                    <div class="avatararea">
                                        <div class="row">
                                            <div class="imagearea">
                                                <div class="avatarimage" id="drop-area"> 
                                                    <img src="" alt="avatar" id="avatarimage" name="image" class="ava_hide hide">
                                                </div>
                                                <div class="buttonarea">
                                                    <button class="btn camera" data-backdrop="static" data-toggle="modal" data-target="#cameraModal"><i class="fa fa-camera"></i> &nbsp; Take Photo</button>
                                                </div>
                                                <div class="alert" role="alert"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-box span11">
                                <div class="widget-title select3mm"> 
                                    <h5>Account Details</h5>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">Merchant Account Group* :</label>
                                    <div class="controls">
                                        <select class="span11" name="merchant_account_group_id" id="merchant_account_group_id" required>
                                            <option value="">Select Merchant Account Group</option>
                                            @foreach($parentAccountGroup as $AccountGroups)
                                                <optgroup label="{{ $AccountGroups->name }}">
                                                @if(count(getParentSubAccountGroupByMerchanr($AccountGroups->id)) > 0)
                                                    @foreach(getParentSubAccountGroupByMerchanr($AccountGroups->id) as $subData)
                                                        <option value="{{ $subData->id }}">{{ $subData->name }}</option>
                                                    @endforeach
                                                @endif
                                                </optgroup>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">Ledger* :</label>
                                    <div class="controls">
                                        <select class="span11" name="merchant_ledger_id" id="merchant_ledger_id" required>
                                            <option value="">Ledger Name</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <!--<div class="control-group">
                                <label class="control-label">Is Ledger Update? :</label>
                                <div class="controls">
                                    <input type="checkbox" name="is_ledger_update" value="1" id="is_ledger_update" @if(Input::old('is_ledger_update') == 1) checked @endif>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Is Serial Number? :</label>
                                <div class="controls">
                                    <input type="checkbox" name="is_serial_number" value="1" id="is_serial_number" @if(Input::old('is_serial_number') == 1) checked @endif>
                                </div>
                            </div>-->

                            {{-- <div class="control-group">
                                <div class="span4">
                                    <label class="control-label">UOM:</label>
                                    <div class="controls">
                                        <select class="span11" name="uom_id" id="uom_id">
                                            @if(count($uom) > 0)
                                            @foreach($uom as $key => $uom)
                                            <option value="{{ $uom->id }}" @if(Input::old('uom') == $uom->id) selected @endif>{{ $uom->name }}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="span4 itemRate">
                                    <div class="control-group itemRatefloat">
                                        <label class="control-label itemRatelabel">Rate :</label>
                                        <div class="controls itemRatePaddingLeft">
                                            <input class="span11" placeholder="Rate" type="text" name="rate" value="{{ Input::old('rate') }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="span4 itemRate">
                                    <div class="control-group itemRatefloat">
                                        <label class="control-label itemCurrencylabel">Currency :</label>
                                        <div class="controls itemCurrencyMarging">
                                            <select class="span11" name="currency_id" id="currency_id">
                                                <option value="">Select Currency</option>
                                                @if(count($currency) > 0)
                                                @foreach($currency as $key => $currencys)
                                                <option value="{{ $currencys->id }}" @if(Input::old('currency_id') == $currencys->id) selected @endif>{{ $currencys->symbol }}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}

                            <div class="control-group">
                                <label class="control-label" style="padding-top:2px;">Status :</label>
                                <div class="controls">
                                    <select class="span11" name="status">
                                        <option value="1">Active</option>
                                        <option value="2">Inactive</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-actions">
                                <button type="submit" class="btn btn-success">Save</button>
                                <a href="{{ url('merchant-Item') }}" class="btn btn-default rightClnBtn">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- The Make Selection Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Make a selection</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <div id="cropimage">
                    <img id="imageprev" src="{{asset('admin/images/bg.png')}}">
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                </div>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">
                <div class="btngroup">
                    <button type="button" class="btn upload1 float-left" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btnsmall" id="rotateL" title="Rotate Left"><i class="fa fa-undo"></i></button>
                    <button type="button" class="btn btnsmall" id="rotateR" title="Rotate Right"><i class="fa fa-repeat"></i></button>
                    <button type="button" class="btn btnsmall" id="scaleX" title="Flip Horizontal"><i class="fa fa-arrows-h"></i></button>
                    <button type="button" class="btn btnsmall" id="scaleY" title="Flip Vertical"><i class="fa fa-arrows-v"></i></button>  
                    <button type="button" class="btn btnsmall" id="reset" title="Reset"><i class="fa fa-refresh"></i></button> 
                    <button type="button" class="btn camera1 float-right" id="saveAvatar">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- The Camera Modal -->
<div class="modal" id="cameraModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Take a picture</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <div id="my_camera"></div>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn upload" data-dismiss="modal">Close</button>
                <button type="button" class="btn camera" onclick="take_snapshot()">Take a picture</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
@parent
@endsection
<style>
    .modal {
        max-width: 710px !important;
        width: unset !important;
    }
</style>
@section('extraa_script_and_js')
<script type="text/javascript">
    // $('#item_group_id').on('change', function () {
    //     var item_group_id = $(this).val();
    //     var token = $('input[name="_token"]').val();

    //     if (item_group_id) {
    //         // Get currency list
    //         $.ajax({
    //             url: "{{url('/item-list/get-currency')}}/" + item_group_id,
    //             type: "GET",
    //             dataType: "json",
    //             success: function (data) {
    //                 $('select[name="currency_id"]').empty();
    //                 $('select[name="currency_id"]').append('<option value="">Select Currency</option>');
    //                 $.each(data, function (key, value) {
    //                     $('select[name="currency_id"]').append('<option value="' + value.id + '">' + value.symbol + '</option>');
    //                 });
    //             }
    //         });


    //     } else {
    //         //$('select[name="currency_id"]').empty();
    //     }
    // });
    $('#enterprise_id').on('change', function () {
        var enterprise_id = $(this).val();
        var token = $('input[name="_token"]').val();

        $.ajax({
            url: "{{ url('/merchant/get-ho-branch/')}}/" + enterprise_id,
            type: "GET",
            dataType: "json",
            success: function (data) {
                $('#merchant_id').empty();
                $('#merchant_id').append('<option value="">Select Merchant Ho</option>');
                $.each(data, function (key, value) {
                    $('#merchant_id').append('<option value="' + value.id + '">' + value.name + '</option>');
                });
            }
        });
    });
    $('#merchant_id').on('change', function () {
        var merchant_id = $(this).val();
        var token = $('input[name="_token"]').val();

        $.ajax({
            url: "{{ url('merchant-item-group-by-mer-id')}}/" + merchant_id,
            type: "GET",
            dataType: "json",
            success: function (data) {
                $('#item_group_id').empty();
                $('#item_group_id').append('<option value="">Select Merchant Item Group</option>');
                $.each(data, function (key, value) {
                    $('#item_group_id').append('<option value="' + value.id + '" style="font-weight: bold;">' + value.name + '</option>');
                    $.each(value.mIgroupData, function (subkey, subvalue) {
                        $('#item_group_id').append('<option value="' + subvalue.id + '"> ---' + subvalue.name + '</option>');
                    });
                });
            }
        });
    });

    $(document).ready(function () {
        $('select[name="merchant_account_group_id"]').on('change', function () {
            var id = $(this).val();
            $.ajax({
                url: "{{ url('get/merchant-account-head-data') }}/" + id,
                type: "GET",
                dataType: "json",
                data: {
                        id: id,
                },
                success: function (data) {
                    $('#merchant_ledger_id').empty();
                    $('#merchant_ledger_id').append('<option value="">Select Ladger</option>');
                    $.each(data.accountHead, function (key, value) {
                        $('#merchant_ledger_id').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                }
            });
        });
        $(".imagearea").hide();
        $('#choose_img').on("click", function () {
            var val = $('input[name="choose_image"]:checked').val();
            if (val == "camera") {
                $("#img_show").hide();
                $(".imagearea").show();
            } else {
                $(".imagearea").hide();
                $("#img_show").show();
            }
            console.log(val);
        });
    });
</script>
<script>
        //$(".ava_hide").hide();
        // Configure a few settings and attach camera
        function configure(){
            Webcam.set({
                width: 640,
                height: 480,
                image_format: 'jpeg',
                jpeg_quality: 100
            });
            Webcam.attach('#my_camera');
        }
        
        // A button for taking snaps
        function take_snapshot() {
            // take snapshot and get image data
            Webcam.snap( function(data_uri) {
                console.log(data_uri);
                // display results in page
                $("#cameraModal").modal('hide');
                $("#myModal").modal({backdrop: "static"});
                $("#cropimage").html('<img id="imageprev" src="'+data_uri+'"/>');
                cropImage();
            } );
            Webcam.reset();
        }

        function saveSnap(){
            // Get base64 value from <img id='imageprev'> source
            var base64image =  document.getElementById("imageprev").src;
             Webcam.upload( base64image, '{{url('add-web-cam-image')}}', function(code, text) {
                 console.log('Save successfully');
            });
        }
    
        $('#cameraModal').on('show.bs.modal', function () {
            configure();
        })

        $('#cameraModal').on('hide.bs.modal', function () {
            Webcam.reset();
            $("#cropimage").html("");
        })

        $('#myModal').on('hide.bs.modal', function () {
            $("#cropimage").html('<img id="imageprev" src="{{asset('admin/images/bg.png')}}"/>');
        })

        /* UPLOAD Image */  
        var input = document.getElementById('input');
        var $alert = $('.alert');

        /* DRAG and DROP File */
        $("#drop-area").on('dragenter', function (e){
            e.preventDefault();
        });

        $("#drop-area").on('dragover', function (e){
            e.preventDefault();
        });

        $("#drop-area").on('drop', function (e){
            var image = document.querySelector('#imageprev');
            var files = e.originalEvent.dataTransfer.files;
            
            var done = function (url) {
                  input.value = '';
                  image.src = url;
                  $alert.hide();
                  $("#myModal").modal({backdrop: "static"});
                  cropImage();
                };
            var reader;
            var file;
            var url;
            if (files && files.length > 0) {
                file = files[0];
                if (URL) {
                    done(URL.createObjectURL(file));
                } else if (FileReader) {
                    reader = new FileReader();
                    reader.onload = function (e) {
                      done(reader.result);
                    };
                    reader.readAsDataURL(file);
                }
            }   
            e.preventDefault();  
        });

        /* INPUT UPLOAD FILE */
        input.addEventListener('change', function (e) {
            var image = document.querySelector('#imageprev');
            var files = e.target.files;
            var done = function (url) {
                  input.value = '';
                  image.src = url;
                  $alert.hide();
                  $("#myModal").modal({backdrop: "static"});
                  cropImage();  
                };
            var reader;
            var file;
            var url;

            if (files && files.length > 0) {
                file = files[0];

                if (URL) {
                    done(URL.createObjectURL(file));
                } else if (FileReader) {
                    reader = new FileReader();
                    reader.onload = function (e) {
                      done(reader.result);
                    };
                    reader.readAsDataURL(file);
                }
            }
        });

        /* CROP IMAGE AFTER UPLOAD */   
        function cropImage() {
            var image = document.querySelector('#imageprev');
            var minAspectRatio = 0.5;
            var maxAspectRatio = 1.5;
              
            var cropper = new Cropper(image, {
                aspectRatio: 11 /12,  
                minCropBoxWidth: 220,
                minCropBoxHeight: 240,

                ready: function () {
                    var cropper = this.cropper;
                    var containerData = cropper.getContainerData();
                    var cropBoxData = cropper.getCropBoxData();
                    var aspectRatio = cropBoxData.width / cropBoxData.height;
                    //var aspectRatio = 4 / 3;
                    var newCropBoxWidth;
                    cropper.setDragMode("move");
                    if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) {
                        newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio) / 2);
                        cropper.setCropBoxData({
                            left: (containerData.width - newCropBoxWidth) / 2,
                            width: newCropBoxWidth
                        });
                    }
                },

                cropmove: function () {
                    var cropper = this.cropper;
                    var cropBoxData = cropper.getCropBoxData();
                    var aspectRatio = cropBoxData.width / cropBoxData.height;

                    if (aspectRatio < minAspectRatio) {
                        cropper.setCropBoxData({
                            width: cropBoxData.height * minAspectRatio
                        });
                    } else if (aspectRatio > maxAspectRatio) {
                        cropper.setCropBoxData({
                            width: cropBoxData.height * maxAspectRatio
                        });
                    }
                },
            });
              
            $("#scaleY").click(function(){ 
                var Yscale = cropper.imageData.scaleY;
                if(Yscale==1){ cropper.scaleY(-1); } else {cropper.scaleY(1);};
            });
              
            $("#scaleX").click( function(){ 
                var Xscale = cropper.imageData.scaleX;
                if(Xscale==1){ cropper.scaleX(-1); } else {cropper.scaleX(1);};
            });
              
            $("#rotateR").click(function(){ cropper.rotate(45); });
            $("#rotateL").click(function(){ cropper.rotate(-45); });
            $("#reset").click(function(){ cropper.reset(); });
              
            $("#saveAvatar").click(function(){
                var $progress = $('.progress');
                var $progressBar = $('.progress-bar');
                var avatar = document.getElementById('avatarimage');
                var $alert = $('.alert');  
                canvas = cropper.getCroppedCanvas({
                    width: 220,
                    height: 240,
                });
                  
                $progress.show();
                $alert.removeClass('alert-success alert-warning');
                canvas.toBlob(function (blob) {
                    var image =  document.getElementById("imageprev").src;
                    console.log(image);
                    $('#img_base').val(image);
                    var form = $("#form_id");
                    var formData = new FormData(form[0]);
                    $('#avatarimage').show();
                    $.ajax({
                        url: "{{url('add-web-cam-image')}}",
                        method: 'GET',
                        data: formData,
                        processData: false,
                        contentType: false,

                        xhr: function () {
                            var xhr = new XMLHttpRequest();
                            console.log(xhr);
                            xhr.upload.onprogress = function (e) {
                                var percent = '0';
                                var percentage = '50%';

                                if (e.lengthComputable) {
                                    percent = Math.round((e.loaded / e.total) * 100);
                                    percentage = percent + '%';
                                    $progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage);
                                }
                            };
                            return xhr;
                        },

                        success: function () {
                            //$alert.show().addClass('alert-success').text('Upload success');
                        },

                        error: function () {
                            avatar.src = initialAvatarURL;
                            $alert.show().addClass('alert-warning').text('Upload error');
                        },

                        complete: function () {
                            $("#myModal").modal('hide');  
                            $progress.hide();
                            initialAvatarURL = avatar.src;
                            avatar.src = canvas.toDataURL();
                        },
                    });
                });
            });
        };
    </script>
@parent
@endsection