@extends('front.layouts.app')

@section('content')

    <div class="main-content-box store-logo pb-4">
        <form id="step-form" action="{{route('front.step.six.submit')}}" method="post" enctype='multipart/form-data' @if(!empty($detail->review_pages) && !in_array(6,$detail->review_pages)) class="from-overlayer" @endif>
            @csrf
            <div class="height-counter d-flex  justify-content-between flex-column">
                <div class="d-flex  justify-content-between flex-column">
                    <div class="login-box pad-t">
                        <div class="container">
                            <div class="row">
                                @include('front.common.review-alert',['number'=>6])
                                <div class="col-sm-12  pad-x-100">
                                    <div class="login-box-des">
                                        <div class="login-title mb-3">
                                            {{__('Please upload store logo, choose design cards along')}}
                                            <br>{{__('with branding for your store.')}}
                                        </div>
                                        <div class="input-style">
                                            <label>{{__('Store Name')}}<span
                                                        class="text-danger"> * {{__('(Mandatory)')}}</span></label>
                                            <input type="text" placeholder="{{__('Store Name')}}" class="ctm-input"
                                                   name="name"
                                                   value="{{isset($store->name)? old('name', $store->name): old('name')}}"
                                                   required>
                                            @include('front.common.alert',['input' => 'name'])
                                        </div>
                                    <!-- <div class="input-style">
                                            <label>{{__('Upload Logo')}}<span class="text-danger"> * {{__('(Mandatory)')}}</span></label>
                                            <div class="login-des mb-1">
                                                {{__('Attach your company\'s logo in PNG format of size 1000*1000 px.')}}
                                            </div>
                                            <label class="image-uploader-mt-s  position-relative mb-0 d-flex align-items-center">
                                                <div id="selected_file123">{{isset($store->logo)? basename($store->logo): ""}}</div>
                                                <div class="clip-input"
                                                     id="hide-inputs" {{isset($store->logo)? 'hidden': ""}}>
                                                    <img src="{{asset('assets/front/img/clip.png')}}" alt="clip"
                                                         class="clip-icon img-fluid">
                                                    logo
                                                    <input type="file" class="ctm-input pl-3" name="image"
                                                           id="image_file" accept="image/*">
                                                    <input hidden class="ctm-input pl-3" name="image_set"
                                                           value="{{isset($store->logo)? 1 : 0}}">
                                                        <input hidden class="ctm-input pl-3" name="image_name" value="logo">
                                                </div>
                                            </label>
                                            @include('front.common.alert',['input' => 'image'])
                                            </div> -->
                                        <div class="input-style">
                                            <label class="mb-1">{{__('Upload Logo')}}<span
                                                        class="text-danger"> * {{__('(Mandatory)')}}</span></label>
                                            <div class="login-des mb-1">
                                                {{__('Attach your company\'s logo in PNG format of size 1000*1000 px.')}}
                                            </div>
                                            <div class="upload-sec d-flex align-items-center flex-wrap">
                                                <!-- image upload -->
                                                <div class="qust-filed mr-2">
                                                    <div class="form-control py-2 d-flex align-items-center justify-content-center">
                                                        <input type="file" id="choose-file" class="input-file d-none"
                                                               name="image" accept="image/png">
                                                        <label for="choose-file"
                                                               class="btn-tertiary js-labelFile d-flex align-items-center flex-column mb-0">
                                                            <i class="icon fa fa-plus-circle plus-icon"></i>
                                                            <span class="js-fileName heading Poppins-Regular">{{__('Add Image')}}</span>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="more-view-image">
                                                    <div class="uploads d-flex align-items-center justify-content-center">
                                                        <img src="{{isset($store->logo)? imageUrl($store->logo, 100, 100, 95, 1): asset('assets/front/img/lg-licence-img.jpg')}}"
                                                             id="current_image" class="img-fluid img" alt="">
                                                        <input hidden name="image_set"
                                                               value="{{isset($store->logo) ? 1 : 0}}">
                                                        <input hidden name="image_name" value="logo">
                                                    </div>
                                                    <a href="javascript:void(0)" id="remove-file"
                                                       class="placeholder-remove d-flex align-items-center justify-content-center">
                                                        <span class="line-1"></span>
                                                    </a>
                                                </div>
                                            </div>
                                            @include('front.common.alert',['input' => 'image'])
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 category-design-main pad-x-100">
                                    <div class="category-design-sec">
                                        <h3 class="title">
                                            {{__('Choose Category Card Design')}} <span
                                                    class="text-danger"> * {{__('(Mandatory)')}}</span>
                                        </h3>
                                        <div class="cat-images d-flex mb-3 flex-wrap">
                                            <div class="cat-img mr-2 img-card c_design_id {{isset($store->c_design_id)? (old('c_design_id',$store->c_design_id) == 'cat-1')? "active" : '': 'active'}}">
                                                <label>
                                                    <img src="{{asset('assets/front/img/cat-1.png')}}" alt="cat-img"
                                                         class="img-fluid">
                                                    <div class="custom-check">
                                                        <label class="terms-check m-0">
                                                            <input type="radio" class="d-none" name="c_design_id"
                                                                   value="cat-1" {{isset($store->c_design_id)? (old('c_design_id',$store->c_design_id) == 'cat-1')? "checked" : '': 'checked'}}>
                                                            <span class="checkmark"></span>
                                                        </label>
                                                    </div>
                                                </label>
                                                @include('front.common.alert',['input' => 'c_design_id'])
                                            </div>
                                            <div class="cat-img mr-2 img-card c_design_id {{isset($store->c_design_id)? (old('c_design_id',$store->c_design_id) == 'cat-2') ? "active" : '': ''}}">
                                                <label>
                                                    <img src="{{asset('assets/front/img/cat-2.png')}}" alt="cat-img"
                                                         class="img-fluid">
                                                    <div class="custom-check">
                                                        <label class="terms-check m-0">
                                                            <input type="radio" class="d-none" name="c_design_id"
                                                                   value="cat-2" {{isset($store->c_design_id)? (old('c_design_id',$store->c_design_id) == 'cat-2') ? "checked" : '': ''}}>
                                                            <span class="checkmark"></span>
                                                        </label>
                                                    </div>
                                                </label>
                                                @include('front.common.alert',['input' => 'c_design_id'])
                                            </div>
                                            <div class="cat-img img-card c_design_id {{isset($store->c_design_id)? (old('c_design_id',$store->c_design_id) == 'cat-3') ? "active" : '': ''}}">
                                                <label>
                                                    <img src="{{asset('assets/front/img/cat-3.png')}}" alt="cat-img"
                                                         class="img-fluid">
                                                    <div class="custom-check">
                                                        <label class="terms-check m-0">
                                                            <input type="radio" class="d-none" name="c_design_id"
                                                                   value="cat-3" {{isset($store->c_design_id)? (old('c_design_id',$store->c_design_id) == 'cat-3') ? "checked" : '': ''}}>
                                                            <span class="checkmark"></span>
                                                        </label>
                                                    </div>
                                                </label>
                                                @include('front.common.alert',['input' => 'c_design_id'])
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 product-card-design-main pad-x-100">
                                    <div class="card-design-sec">
                                        <h3 class="title">
                                            {{__('Choose Product Card Design')}} <span
                                                    class="text-danger"> * {{__('(Mandatory)')}}</span>
                                        </h3>
                                        <div class="card-images d-flex mb-3 flex-wrap">
                                            <div class="cat-img mr-2 img-card p_design_id {{isset($store->p_design_id)? (old('p_design_id',$store->p_design_id) == 'card-1')? "active" : '': 'active'}}">
                                                <label>
                                                    <img src="{{asset('assets/front/img/card-1.png')}}" alt="cat-img"
                                                         class="img-fluid">
                                                    <div class="custom-check">
                                                        <label class="terms-check m-0">
                                                            <input type="radio" class="d-none" name="p_design_id"
                                                                   value="card-1" {{isset($store->p_design_id)? (old('p_design_id',$store->p_design_id) == 'card-1')? "checked" : '': 'checked'}}>
                                                            <span class="checkmark"></span>
                                                        </label>
                                                    </div>
                                                </label>
                                                @include('front.common.alert',['input' => 'p_design_id'])
                                            </div>
                                            <div class="cat-img mr-2 img-card p_design_id {{isset($store->p_design_id)? (old('p_design_id',$store->p_design_id) == 'card-2')? "active" : '': ''}}">
                                                <label>
                                                    <img src="{{asset('assets/front/img/card-2.png')}}" alt="cat-img"
                                                         class="img-fluid">
                                                    <div class="custom-check">
                                                        <label class="terms-check m-0">
                                                            <input type="radio" class="d-none" name="p_design_id"
                                                                   value="card-2" {{isset($store->p_design_id)? (old('p_design_id',$store->p_design_id) == 'card-2')? "checked" : '': ''}}>
                                                            <span class="checkmark"></span>
                                                        </label>
                                                    </div>
                                                </label>
                                                @include('front.common.alert',['input' => 'p_design_id'])
                                            </div>
                                            <div class="cat-img img-card p_design_id {{isset($store->p_design_id)? (old('p_design_id',$store->p_design_id) == 'card-3')? "active" : '': ''}}">
                                                <label>
                                                    <img src="{{asset('assets/front/img/card-3.png')}}" alt="cat-img"
                                                         class="img-fluid">
                                                    <div class="custom-check">
                                                        <label class="terms-check m-0">
                                                            <input type="radio" class="d-none" name="p_design_id"
                                                                   value="card-3" {{isset($store->p_design_id)? (old('p_design_id',$store->p_design_id) == 'card-3')? "checked" : '': ''}}>
                                                            <span class="checkmark"></span>
                                                        </label>
                                                    </div>
                                                </label>
                                                @include('front.common.alert',['input' => 'p_design_id'])
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="login-btn-mt text-right">
                      <button class="site-btn-2"> Log In</button>
                    </div> -->
                </div>

                @include('front.common.step-pages')
            </div>
        </form>
    </div>

@endsection

@push('script-page-level')
    <script>
        $('#image_file').change(function () {
            var filename = $('#image_file').val().split('\\').pop();
            $('#selected_file123').text(filename);
            $('#hide-inputs').hide();
        });
    </script>
    <script>
        $(document).ready(function () {
            //Image file input change event
            $("#choose-file").change(function () {
                readImageData(this);//Call image read and render function
            });
            $("#remove-file").on('click', function () {
                $("#choose-file").val("");
                $('#current_image').attr('src', "{{asset('assets/front/img/lg-licence-img.jpg')}}");
            });

        });

        function readImageData(imgData) {
            if (imgData.files && imgData.files[0]) {
                var readerObj = new FileReader();
                readerObj.onload = function (element) {
                    $('#current_image').attr('src', element.target.result);

                }
                readerObj.readAsDataURL(imgData.files[0]);
            }
        }

        $('input[type="radio"]').on('change', function (){
            // console.log($(this).attr('name'))
            if ($(this).prop('checked') == true){
                if ( $(this).attr('name') == 'p_design_id'){
                    // console.log('product')
                    $('.p_design_id').removeClass('active')
                }else {
                    // console.log('category')
                    $('.c_design_id').removeClass('active')
                }
                $(this).parent().parent().parent().parent().toggleClass('active')
            }
        })
    </script>

@endpush