@extends('layouts.app')
@section('title','Label')
@section('style')
    <style>
        @foreach($fonts as $font)
        @font-face {
            font-family: {{$font->name}};
            src: url('{{$font->file}}');
        }
        @endforeach
    </style>
@endsection
@section('content')
    {!! Form::open(['method'=>'POST','action' => 'LabelController@customiseContinue']) !!}
    <section id="main-label">
        <div class="container">
            <h1>CUSTOMIZE YOUR LABEL</h1>
            <div class="box">
                <div class="box-header">
                    <div class="canvas-container text-center">
                        <canvas id="c" height="290" width="675"></canvas>
                        <em>You can drag and move the text above to your desired position.</em>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label for="usr "><strong>Label:</strong></label>
                                <select id="changeBg" class="form-control" id="selectlabel">
                                    @foreach($yourName as $label)
                                        <option {!! $label->id == $selected->id? 'selected' : ''!!} value="{{$label->photo->file}}">
                                            {{$label->name}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="form-group">
                                <label for="usr"><strong>Customer Name:</strong></label>
                                <input id="cname" type="text" class="form-control" name="customer_name"
                                       value="Customer Name">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label for="usr"><strong>Font:</strong></label>
                                <select class="form-control" id="selectFont" name="font">
                                    @foreach($fonts as $font)
                                        <option value="{{$font->name}}">
                                            {{$font->name}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="form-group">
                                <label for="usr"><strong>Contact Information</strong> (Enter any 2 combinations of
                                    Address, Phone, or Website)</label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <input id="ci1" type="text" class="form-control" name="contactinfo1"
                                               value="contact1">
                                    </div>
                                    <div class="col-md-6">
                                        <input id="ci2" type="text" class="form-control" name="contactinfo2"
                                               value="contact2">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h6><em>Please Note: These are not actual proofs, but simply a means to preview what your labels
                            might look like.</em></h6>

                    <input id="label" type="hidden" name="label">
                    <textarea id="myTextArea" name="canvas" cols="30" rows="10" hidden></textarea>
                    <button id="continue" type="submit" hidden>Save&amp;Continue</button>

                    <div class="container text-right">
                        <a class="btn btn-warning" style="cursor:pointer" href="{{ route('label.back') }}">Back</a>
                        <button onclick="relie()" class="btn btn-warning" style="cursor:pointer">
                            Save and Continue
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="gutter-bottom"></div>
    </section>
    {!! Form::close() !!}
@endsection
@section('footer')
    <script src="{{url('/')}}/js/fabric.min.js"></script>
    <script>
        $(document).ready(function () {
            document.getElementById("label").value =  $("#changeBg option:selected").text();
        });
    </script>
    <script>

        var text;
        var canvas = new fabric.Canvas('c');
        var img = new Image();

        img.onload = function () {
            var f_img = new fabric.Image(img);
            canvas.setBackgroundImage(f_img);
            canvas.renderAll();
        };
        img.src = document.getElementById('changeBg').value;

        document.getElementById('changeBg').addEventListener('change', function () {
            img.src = document.getElementById('changeBg').value;
            document.getElementById("label").value =  $("#changeBg option:selected").text();
            canvas.renderAll();
        });

        var textOptions1 = {
            fontSize: 48,
            fontFamily: 'Arial',
            left: 120,
            top: 20,
            radius: 10,
            borderRadius: '25px'
        };

        var textObject1 = new fabric.IText('Customer Name', textOptions1);

        canvas.add(textObject1).setActiveObject(textObject1);
        canvas.renderAll();

        document.getElementById('cname').addEventListener('keyup', function () {
            textObject1.text = document.getElementById('cname').value;
            canvas.renderAll();
        });

        document.getElementById('selectFont').addEventListener('change', function () {
            textObject1.fontFamily = document.getElementById('selectFont').value;
            canvas.renderAll();
        });


        var textOptions2 = {
            fontSize: 15,
            fontWeight: 700,
            left: 150,
            top: 245,
            radius: 10,
            borderRadius: '25px'
        };

        var textObject2 = new fabric.IText('Made Especially for Customer Name', textOptions2);
        textObject2.setControlsVisibility({
            mt: false,
            mb: false,
            ml: false,
            mr: false,
            bl: false,
            br: false,
            tl: false,
            tr: false,
            mtr: false
        });
        canvas.add(textObject2).setActiveObject(textObject2);
        canvas.renderAll();

        document.getElementById('cname').addEventListener('keyup', function () {
            textObject2.text = 'Made Especially for ' + document.getElementById('cname').value;
            canvas.renderAll();
        });


        var textOptions3 = {
            fontSize: 15,
            fontWeight: 700,
            left: 190,
            top: 265,
            radius: 10,
            borderRadius: '25px'
        };

        var textObject3 = new fabric.IText('contact1', textOptions3);

        canvas.add(textObject3).setActiveObject(textObject3);
        canvas.renderAll();
        textObject3.setControlsVisibility({
            mt: false,
            mb: false,
            ml: false,
            mr: false,
            bl: false,
            br: false,
            tl: false,
            tr: false,
            mtr: false
        });
        document.getElementById('ci1').addEventListener('keyup', function () {
            textObject3.text = document.getElementById('ci1').value;
            canvas.renderAll();
        });

        var textOptions4 = {
            fontSize: 15,
            fontWeight: 700,
            left: 270,
            top: 265,
            radius: 10,
            borderRadius: '25px'
        };

        var textObject4 = new fabric.IText('contact2', textOptions4);
        textObject4.setControlsVisibility({
            mt: false,
            mb: false,
            ml: false,
            mr: false,
            bl: false,
            br: false,
            tl: false,
            tr: false,
            mtr: false
        });
        canvas.add(textObject4).setActiveObject(textObject4);
        canvas.renderAll();

        document.getElementById('ci2').addEventListener('keyup', function () {
            textObject4.text = document.getElementById('ci2').value;
            canvas.renderAll();
        });

    </script>
    <script>
        function relie() {
            var dataURL2 = canvas.toDataURL();
            document.getElementById("myTextArea").value = dataURL2;

            var myInput = document.getElementById("myTextArea");

            if (myInput && myInput.value) {
                document.getElementById("continue").click();
            }
        }
    </script>
@endsection