@extends('layouts.adminLayout.backendLayout')
@section('content')
<style type="text/css">
    .red{
        color: red;
    }
</style>
<style>
    #cke_editor1{
        margin-left:10px!important;
        margin-right: 10px!important;
    }
</style>

<script type="text/javascript" src="{!!asset('js/backend_js/ckeditor/ckeditor.js')!!}"></script>
<script type="text/javascript" src="{!!asset('js/backend_js/ckeditor/adapters/jquery.js')!!}"></script>


		
<div class="page-content-wrapper">
    <div class="page-content">
        <div class="page-head">
            <div class="page-title">
                <h1>Color Family Management </h1>
            </div>
        </div>
        <ul class="page-breadcrumb breadcrumb">
            <li>
                <a href="{{ url('admin/dashboard') }}">Dashboard</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="{{ action('Admin\AdminController@colorfamilies') }}">Color Families </a>
            </li>
        </ul>
        @if(Session::has('flash_message_error'))
            <div role="alert" class="alert alert-danger alert-dismissible fade in"> <button aria-label="Close" data-dismiss="alert" style="text-indent: 0;" class="close" type="button"><span aria-hidden="true">×</span></button> <strong>Error!</strong> {!! session('flash_message_error') !!} </div>
        @endif
        @if(Session::has('flash_message_success'))
            <div role="alert" class="alert alert-success alert-dismissible fade in"> <button aria-label="Close" data-dismiss="alert" style="text-indent: 0;" class="close" type="button"><span aria-hidden="true">×</span></button> <strong>Success!</strong> {!! session('flash_message_success') !!} </div>
        @endif
        <div class="row">
            <div class="col-md-12 ">
                <div class="portlet blue-hoki box ">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-gift"></i>{{ $title }}
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <form id="addEditProduct" role="form" class="form-horizontal" method="post" @if(!empty($family['id'])) action="{{ url('admin/add-edit-colorfamily/'.$family['id']) }}" @else action="{{ url('admin/add-edit-colorfamily') }}" @endif enctype="multipart/form-data"> 
                            <input type="hidden" name="_token" value="{{{ csrf_token() }}}"  autocomplete="off" />
                             <div class="form-body">
							 
									<div class="form-group">
									<br><br>
										<label class="col-md-3 control-label">Color Families Name:<span class="red">*</span></label>
										<div class="col-md-4">
											<input autocomplete="off" type="text" placeholder="Color Families Name" name="product_color" style="color:gray" class="form-control" value="{{(!empty($family['product_color']))?$family['product_color']: '' }}" required/>
										</div>
									 </div>
                                <div class="form-group ">
                                    <label class="col-md-3 control-label">Select Image : </label>
                                    <div class="col-md-4">
                                        <div data-provides="fileinput" class="fileinput fileinput-new">
                                            <div style="" class="fileinput-new thumbnail">
                                                @if(!empty($family['image']))
                                                                                                        @if(file_exists($path))
                                                        <img style="height:100px;" class="img-responsive"  src="{{ asset('images/colors/'.$family['image'])}}">
                                                    @endif
                                                @else
                                                    <img style="height:100px;" class="img-responsive"  src="{{ asset('images/default.png') }}">
                                                @endif
                                            </div>
                                            <div style="max-width: 200px; max-height: 150px; line-height: 10px;" class="fileinput-preview fileinput-exists thumbnail"></div>
                                            <div>
                                                <div class="form-group">
                                                    <span class="btn default btn-file">
                                                    <span class="fileinput-new">
                                                    Select Image </span>
                                                    <span class="fileinput-exists">
                                                    Select Image </span>
                                                    <input type="file" name="image">
                                                    </span>
                                                    <a data-dismiss="fileinput" class="btn default fileinput-exists" href="javascript:;">
                                                    Remove </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
								</div>
<div class="form-actions right1 text-center">
                                <button  id="ProductSubmitBtn" class="btn green" type="submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Append Table Rows -->
<table class="table table-hover table-bordered table-striped imagesamplerow" style="display:none;">
    <tbody>
        <tr class="appenderTr blockIdWrap">
            <td>
                <input type="file" class="form-control" name="image[]">
            </td>
            <td>
                <input type="number" placeholder="Image Sort" name="image_sort[]" style="color:gray" autocomplete="off" class="form-control" required/>
            </td>
            <td>
                <a title="Remove" class="btn btn-sm red imageRowRemove" href="javascript:;"> <i class="fa fa-times"></i></a>
            </td>
        </tr>
    </tbody>
</table>
<!-- Append Table Rows -->
<script type="text/javascript">
    $(document).on('click','.updateImageSort',function(){
        var imageid = $(this).data('imageid');
        var imagesort = $('#ImageSort-'+imageid).val();
        $.ajax({
            data : {imageid:imageid,imagesort:imagesort},
            url : "/admin/update-image-sort",
            type : "get",
            success:function(resp){
                alert('Sort updated successfully');
            },
            error:function(){

            }
        })
    })
</script>
<script type="text/javascript">
    var rowid = 1;
    jQuery("#addrow").click(function() {        
        var row = jQuery('.samplerow tr').clone(true);
        row.appendTo('#dynamicTable1');        
    });
    $('.remove').on("click", function() {
        $(this).parents("tr").remove();
    });
</script>
<script type="text/javascript">
    var rowid = 1;
    jQuery("#addImageRow").click(function() {        
        var row = jQuery('.imagesamplerow tr').clone(true);
        row.appendTo('#ImageTable');        
    });
    $('.imageRowRemove').on("click", function() {
        $(this).parents("tr").remove();
    });
</script>
<script>
    $(document).on('change','.changeStatus',function(){
        var attrid = $(this).data('attrid');
        var status = $(this).val();
        $.ajax({
            data : {status:status,attrid:attrid},
            url : '/admin/change-attr-status',
            type : 'post',
            success:function(resp){

            },
            error:function(){
                alert('error');
            }
        })
    })
</script>
<script type="text/javascript">
    $('.MultipleSelect option').mousedown(function(e) {
        e.preventDefault();
        $('#addEditProduct').formValidation('revalidateField', 'cats[]');
        var originalScrollTop = $(this).parent().scrollTop();
        console.log(originalScrollTop);
        $(this).prop('selected', $(this).prop('selected') ? false : true);
        var self = this;
        $(this).parent().focus();
        setTimeout(function() {
            $(self).parent().scrollTop(originalScrollTop);
        }, 0);
        
        return false;
    });
</script>
<script>

  $(function () {
    //Initialize Select2 Elements
    $('.select2').select2()

    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })
  })
</script>
@endsection