@extends('master')

@section('content')

    <!-- SECTION FOR CUSTOMIZATION -->
    <section>
        <div class="container">
            <div class="row" id="rugsart-content-wrapper">
                <!-- Bread Crumb -->
                <div class="col-md-12 col-sm-12 col-xs-12 bread-crumb">Customize Your Rug</div>

                <div class="col-md-12 col-sm-12 col-xs-12 customize-container">
                    {{--<div class="row cutomize-container-outer hidden-sm hidden-xs">--}}
                        {{--<div class="col-md-3">Select Colors from the palette below</div>--}}
                        {{--<div class="col-md-6 text-center">You can make her any size, any shape, any color of your choice</div>--}}
                        {{--<div class="col-md-3 text-right">Pick colors by using palette below</div>--}}
                    {{--</div>--}}
                    <div class="row">
                        <div class="col-md-5 col-sm-8 col-xs-9 design-image">
                            <div class="design-title">Design: {{$product->product_name}} <a  onclick="resetColors();return false;"><i class="fa fa-refresh pull-right"></i></a></div>
                            <div class="design-images-container" >


                                @foreach($images as $key=>$img)
                                {{--<img src="{{url('/imagecache/customize/'.$img->image)}}" id="{{$img->id}}" alt="{{$img->id}}"  class="img-responsive {{$img->is_texture==1?'texture':''}}"/>--}}
                                    <img src="{{url('images/products/customizedimage/'.$img->image)}}" id="{{$img->id}}" alt="{{$img->id}}" {{$key==0?'style=position:relative':''}}  class="img-responsive  {{$img->is_texture==1?'texture':''}}"/>
                                @endforeach
                                    @if($texture==false)

                                    <img src="{{url('imagecache/customize/texture.png')}}" alt="design title" class="texture"/>
                                        @endif

                            </div>
                        </div>
                        <div class="col-md-1 col-sm-4 col-xs-3 design-color-list">
                            <ul>
                                @foreach($images as $img)
                                <li>
                                    <a  onclick="chooseImg('{{$img->id}}');return false;">
                                        <span class="design-color" id="img_color_{{$img->id}}" style="border:2px solid transparent;background-color: rgb({{$img->rgb}});">{{$img->color_code}}</span>
                                        {{--<em id="img_color_code_{{$img->id}}">{{$img->color_code}}</em>--}}
                                    </a>
                                </li>
                                @endforeach

                            </ul>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12 color-palette">
                            <div class="row">
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <!-- Nav tabs -->
                                    <ul class="nav nav-tabs" role="tablist">
                                        @foreach($colors as $key=>$pom)
                                        <li role="presentation" class=" {{$key==2?'active':''}}"><a href="#{{str_slug($pom->title)}}" aria-controls="{{str_slug($pom->title)}}" role="tab" data-toggle="tab">{{$pom->title}}</a></li>
                                        @endforeach

                                    </ul>
                                    <!-- Tab panes -->
                                    <div class="tab-content palatte">
                                        @foreach($colors as $key=>$pom)
                                        <div role="tabpanel" class="tab-pane {{$key==2?'active':''}}" id="{{str_slug($pom->title)}}" style="padding: 0; margin: 0;">
                                            <ul class="col-md-12 col-sm-12 col-xs-12">
                                                @foreach($pom->Colors as $palt)
                                                <li style="background-color: rgb({{$palt->r}} ,{{$palt->g}},{{$palt->b}})" title="{{$palt->Name}}" r="{{$palt->r}}" g='{{$palt->g}}' b='{{$palt->b}}' class="pcolor col-md-1 col-sm-1 col-xs-1">&nbsp;</li>
                                                    @endforeach
                                            </ul>
                                        </div>
                                        @endforeach

                                    </div>
                                </div>
                            </div>

                            <!-- Inquiry Form -->
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            {!! Form::open(['name'=>'frm2','route' => 'cart.store','class'=>'form-horizontal inquiry-form custom-inquiry-form']) !!}
                                            {!!Form::hidden('product_id',$product->id,['class'=>'form-control'])!!}
                                            {!!Form::hidden('product_code',$product->product_code,['class'=>'form-control'])!!}
                                            {!! Form::hidden('color_codes',$product->colorCodes,['class'=>'form-control']) !!}
                                            <div class="form-group">
                                                <label for="" class="col-md-4 col-sm-4 control-label">Design</label>
                                                <div class="col-md-7 col-sm-8">
                                                    {!!Form::text('product_name',$product->product_name,['class'=>'form-control', 'readonly'])!!}
                                                </div>
                                            </div>
                                            {!!Form::hidden('price','0',['class'=>'form-control'])!!}
                                            <div class="form-group">
                                                <label for="" class="col-md-4 col-sm-4 control-label">Custom Size</label>
                                                <div class="col-md-7 col-sm-8">
                                                    {!! Form::text('size',$product->size,['class'=>'form-control']) !!}
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="" class="col-md-4 col-sm-4 control-label">Quality</label>
                                                <div class="col-md-7 col-sm-8">
                                                    {!!Form::select('quality',$qualitySelect,$product->quality,['class'=>'form-control'])!!}
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="" class="col-md-4 col-sm-4 control-label">Fringe</label>
                                                <div class="col-md-7 col-sm-8">

                                                    {!! Form::select('fringe',['1'=>'Yes','0'=>'No'],$product->fringe,['class'=>'form-control']) !!}

                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="" class="col-md-4 col-sm-4 control-label">Thickness</label>
                                                <div class="col-md-7 col-sm-8">
                                                    {!!Form::select('thickness',$thicknessSelect,$product->thickness,['class'=>'form-control'])!!}
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="" class="col-md-4 col-sm-4 control-label">Materials</label>
                                                <div class="col-md-7 col-sm-8">
                                                    {!! Form::text('material',$product->material,['class'=>'form-control']) !!}
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label for="" class="col-md-4 col-sm-4 control-label">Quantity</label>
                                                <div class="col-md-7 col-sm-8">
                                                    {!! Form::text('quantity',1,['class'=>'form-control']) !!}
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="" class="col-md-4 col-sm-4 control-label">Message</label>
                                                <div class="col-md-7 col-sm-8">
                                                    {!! Form::textarea('notes',null,['class'=>'form-control','rows'=>'3']) !!}
                                                </div>
                                            </div>
                                            <div class="text-center"><a onclick="frm2.submit();return false;" class="btn btn-request">INQUIRY</a></div>
                                            {{--<div class="text-center"><a href="" class="btn btn-request">INQUIRY</a></div>--}}
                                            {!! Form::close() !!}

                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@stop

@section('scriptBlock')
    <script>

        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var originalPixels = null;
        var currentPixels = null;
        var colors_json = null;
        var choosed_img = null;

        var defaultColors = null;
        function getPixels(img)
        {

            canvas.width = img.width;
            canvas.height = img.height;

            ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
            originalPixels = ctx.getImageData(0, 0, img.width, img.height);
            currentPixels = ctx.getImageData(0, 0, img.width, img.height);

            img.onload = null;


        }

        //function hexToRGB(hex)
        //{
        //    var long = parseInt(hex.replace(/^#/, ""), 16);
        //    return {
        //        R: (long >>> 16) & 0xff,
        //        G: (long >>> 8) & 0xff,
        //        B: long & 0xff
        //    };
        //}

//        function getColors(colorName){
//            r=0;g=0;b=0;
//            $.each(colors_json.colorSet, function(i, v) {
//                $.each(v.Colors, function(ii,vv){
//                    if (vv.Name == colorName) {
//                        r =  vv.r; g = vv.g;b= vv.b;
//                        return false;
//                   }
//                })
//            });
//
//            return {R:r,G:g,B:b};
//        }

//        function getPalatte(){
//            r=0;g=0;b=0;
//            child = "";
//            $.each(colors_json.colorSet, function(i, v) {
//                $.each(v.Colors, function(ii,vv){
//
//                    color =  "{R : "+ vv.r +", G : "+ vv.g +",B: "+ vv.b +"}";
//
//                    //child += "<li style='background-color:rgb("+ vv.r +','+vv.g+','+vv.b+")' onclick='changeColor("+color+")'>&nbsp</li>"
//                    child += "<li style='background-color: rgb("+ vv.r +','+vv.g+','+vv.b+")' class='col-md-1 col-sm-1 col-xs-1'>&nbsp;</li>";
//
//
//
//                })
//                child += "</ul><hr><ul>"
//            });
//
//            $('#palatte').html(child);
//        }
        function chooseImg(img){
            oldChoosed = choosed_img;
            choosed_img = img;
            $('#img_color_'+oldChoosed).css('border-color','transparent');
            $('#img_color_'+choosed_img).css( 'border-color', '#ccc');
           // -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
            //box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
        }

        function changeColor(newColor)
        {
            if(choosed_img!=null) {
                img = document.getElementById(choosed_img);
                getPixels(img);

                if (!originalPixels) return; // Check if image has loaded


                for (var I = 0, L = originalPixels.data.length; I < L; I += 4) {
                    if (currentPixels.data[I + 3] > 0) // If it's not a transparent pixel
                    {
                        currentPixels.data[I] = newColor.R;
                        currentPixels.data[I + 1] = newColor.G;
                        currentPixels.data[I + 2] = newColor.B;
                    }
                }

                ctx.putImageData(currentPixels, 0, 0);
                //console.log(canvas.toDataURL("image/png"));
                img.src = canvas.toDataURL("image/png");
            }
            //choosed_img = null;
        }

        function resetColors(){
            $.each(defaultColors, function(k, v) {
                chooseImg(v.id);
                $data = {R: v.R,G: v.G,B: v.B};
                changeColor($data);
                $('#img_color_'+choosed_img).css('background-color','rgb('+ v.rgb+')');
                $('#img_color_'+choosed_img).text(v.color_code);
            });
                    choosed_img = null;
        }


    </script>

    <script>
        $().ready(function(){
            {{--$.getJSON( "{{url('json/colors.json')}}", function( data ) {--}}
                {{--colors_json = data;--}}
                {{--getPalatte();--}}
            {{--});--}}
            $(".palatte").on('click','.pcolor',function(){
                rr = $(this).attr('r');
                gg = $(this).attr('g');
                bb = $(this).attr('b');
                title = $(this).attr('title');

                $data = {R:rr,G:gg,B:bb};
                changeColor($data);

                $('#img_color_'+choosed_img).css('background-color','rgb('+rr+','+gg+','+bb+')');
                $('#img_color_'+choosed_img).text(title);

                defaultColors = {!!$defaultColor!!};



            })



        })

    </script>

@endsection