@extends('Admin.layouts.app')
@section('pagetitle',__('messages.Products'))
@section('content')
<div class="row">
    <style>
        hr{
            color: grey;
            width: 80%;
        }
    </style>
    <form method="POST" action="{{ route('admin.product.store') }}" enctype="multipart/form-data" data-parsley-validate novalidate>
        @csrf
        <div class="form-group col-md-6">
            <label for="title_ar">@lang('dashboard.title_ar')</label>
            <input type="text" name="title_ar" id="title_ar" class="form-control" required>
        </div>
        <div class="form-group col-md-6">
            <label for="title_en">@lang('dashboard.title_en')</label>
            <input type="text" name="title_en" id="title_en" class="form-control" required>
        </div>

        <!--<div class="form-group col-md-6">-->
        <!--    <label for="desc_ar">@lang('dashboard.desc_ar')</label>-->
        <!--    <textarea type="text" name="desc_ar" id="desc_ar"  class="form-control" required/></textarea>-->
        <!--</div>-->
        <!--<div class="form-group col-md-6">-->
        <!--    <label for="desc_en">@lang('dashboard.desc_en')</label>-->
        <!--    <textarea type="text" name="desc_en" id="desc_en"  class="form-control" required></textarea>-->
        <!--</div>-->
        <div class="form-group col-md-6">
            <label for="image">@lang('dashboard.image')</label>
            <span class="file-input btn btn-block btn-primary btn-file">
                Browse&hellip;
                <input type="file" type="file" name="image" id="image" required >
            </span>
        </div>
        <div class="form-group col-md-6">
            <label for="visibility">@lang('dashboard.visibility')</label>
            <select class="form-control  select2me" required id="visibility" name="display">
                <option value="1">@lang('dashboard.visible')</option>
                <option value="0">@lang('dashboard.hidden')</option>
            </select>
        </div>
        <div class="form-group col-md-6">
            <label for="noindex">@lang('dashboard.noindex')</label>
            <select class="form-control  select2me" required id="noindex" name="noindex">
                <option value="0">@lang('dashboard.false')</option>
                <option value="1">@lang('dashboard.true')</option>
            </select>
        </div>
        <div class="form-group col-md-6">

        </div>
        
        <h2>
            -- @lang('messages.seo')
        </h2>
        
        <div class="form-group col-md-12"></div>
        
        <div class="col-sm-12 col-md-6 form-group">
            <label for="seo_title_ar">@lang('messages.title_ar')</label>
            <textarea name="seo_title_ar" required  class="mceNoEditor form-control" rows="7"></textarea>
        </div>
        <div class="col-sm-12 col-md-6 form-group">
            <label for="seo_title_en">@lang('messages.title_en')</label>
            <textarea name="seo_title_en" required  class="mceNoEditor form-control" rows="7"></textarea>
        </div>
        
        <div class="col-sm-12 col-md-6 form-group">
            <label for="seo_desc_ar">@lang('messages.desc_ar')</label>
            <textarea name="seo_desc_ar" required  class="mceNoEditor form-control" rows="7"></textarea>
        </div>
        <div class="col-sm-12 col-md-6 form-group">
            <label for="seo_desc_en">@lang('messages.desc_en')</label>
            <textarea name="seo_desc_en" required  class="mceNoEditor form-control" rows="7"></textarea>
        </div>
                        
        <div class="col-sm-12 col-md-6 form-group">
            <label for="seo_keywords_ar">@lang('messages.keywords_ar')</label>
            <textarea name="seo_keywords_ar" required  class="mceNoEditor form-control" rows="7"></textarea>
        </div>
        <div class="col-sm-12 col-md-6 form-group">
            <label for="seo_keywords_en">@lang('messages.keywords_en')</label>
            <textarea name="seo_keywords_en" required  class="mceNoEditor form-control" rows="7"></textarea>
        </div>
        
        
        <div class="col-12 text-center">
            <h4 class="my-4">@lang('dashboard.briefAboutProduct')</h4>
        </div>
        
        <div class="form-group col-md-6">
            <label for="brief_ar">@lang('dashboard.briefArabic')</label>
            <textarea type="text" name="brief_ar" id="brief_ar"  class="form-control" /></textarea>
        </div>
        
        <div class="form-group col-md-6">
            <label for="brief_en">@lang('dashboard.briefEnglish')</label>
            <textarea type="text" name="brief_en" id="brief_en"  class="form-control" /></textarea>
        </div>
        
        <div class="form-group col-md-6">
            <label for="briefImage">@lang('dashboard.briefImage')</label>
                        <span class="file-input btn btn-block btn-primary btn-file">
                Browse&hellip;
                <input type="file" type="file" name="briefImage" id="briefImage"  >
            </span>
        </div>
        
        <hr>
        
        <div class="col-12 text-center">
            <h4 class="my-4">@lang('dashboard.appAdvantages')</h4>
        </div>
        

        <div class="row">
            <div class="form-group col-md-6">
                <label for="adv_title_ar">@lang('dashboard.title_ar')</label>
                <input type="text" name="adv_title_ar[]" class="form-control" >
            </div>
            
            <div class="form-group col-md-6">
                <label for="adv_title_en">@lang('dashboard.title_en')</label>
                <input type="text" name="adv_title_en[]" class="form-control" >
            </div>
            
            <div class="form-group col-md-6">
                <label for="adv_desc_ar">@lang('dashboard.desc_ar')</label>
                <textarea type="text" name="adv_desc_ar[]" class="form-control mceNoEditor" ></textarea>
            </div>
            
            <div class="form-group col-md-6">
                <label for="adv_desc_en">@lang('dashboard.desc_en')</label>
                <textarea type="text" name="adv_desc_en[]" class="form-control mceNoEditor"></textarea>
            </div>
            
            <div class="form-group col-md-6">
                <label for="advImage">@lang('dashboard.image')</label>
                            <span class="file-input btn btn-block btn-primary btn-file">
                    Browse&hellip;
                    <input type="file" type="file" name="advImage[]" >
                </span>
            </div>
            
            <div class="form-group col-md-12 text-center">
                <button type="button" class="btn btn-danger destroy" style="width: 15%">-</button>
            </div>
        </div>
        
        <div class="form-group col-md-12 text-center">
            <button type="button" id="addAdv" class="btn btn-primary" style="width: 25%">+</button>
        </div>
        
        <hr>
        
        <div class="col-12 text-center">
            <h4 class="my-4">@lang('dashboard.whyChooseProduct')</h4>
        </div>
        
        <div class="form-group col-md-6">
            <label for="why_desc_ar">@lang('dashboard.desc_ar')</label>
            <textarea type="text" name="why_desc_ar" id="why_desc_ar"  class="form-control" /></textarea>
        </div>
        
        <div class="form-group col-md-6">
            <label for="why_desc_en">@lang('dashboard.desc_en')</label>
            <textarea type="text" name="why_desc_en" id="why_desc_en"  class="form-control" /></textarea>
        </div>
        
        <div class="form-group col-md-6">
            <label for="whyImage">@lang('dashboard.image')</label>
                        <span class="file-input btn btn-block btn-primary btn-file">
                Browse&hellip;
                <input type="file" type="file" name="whyImage" id="whyImage"  >
            </span>
        </div>
        
        <hr>
        
        <div class="col-12 text-center">
            <h4 class="my-4">@lang('dashboard.gallery')</h4>
        </div>
        
        <div class="form-group col-md-6">
            <label for="gallery">@lang('dashboard.images')</label>
                        <span class="file-input btn btn-block btn-primary btn-file">
                Browse&hellip;
                <input type="file" type="file" name="gallery[]" id="gallery" multiple >
            </span>
        </div>
        
        <hr>
        
        <div class="col-12 text-center">
            <h4 class="my-4">@lang('dashboard.videos')</h4>
        </div>
        
        <div class="form-group col-md-8">
            <label for="videos">@lang('dashboard.videos')</label>
            <input type="text" name="videos[]" class="form-control" >
        </div>
        
        <div class="form-group col-md-12 text-center">
            <button type="button" id="addVideo" class="btn btn-primary" style="width: 25%">+</button>
        </div>
        
        <hr>
        
        <div class="col-12 text-center">
            <h4 class="my-4">@lang('dashboard.faq')</h4>
        </div>
        
        <div class="form-group col-md-12 text-center">
            <button type="button" id="addFaq" class="btn btn-primary" style="width: 25%">+</button>
        </div>
        
        <div class="form-group col-md-6">
            <label for="SaPackage">@lang('dashboard.SaPackage')</label>
                        <span class="file-input btn btn-block btn-primary btn-file">
                Browse&hellip;
                <input type="file" type="file" name="SaPackage" id="SaPackage" multiple >
            </span>
        </div>
        
        <div class="form-group col-md-6">
            <label for="BhPackage">@lang('dashboard.BhPackage')</label>
                        <span class="file-input btn btn-block btn-primary btn-file">
                Browse&hellip;
                <input type="file" type="file" name="BhPackage" id="BhPackage" multiple >
            </span>
        </div>
        
        <div class="clearfix"></div>
        <div class="form-group col-12 m-b-0 text-center mx-auto ">
            <button class="btn btn-primary waves-effect waves-light" type="submit">@lang('dashboard.add')</button>
            <button type="reset" class="btn btn-default waves-effect waves-light m-l-5">@lang('dashboard.cancel')</button>
        </div>
        
    </form>
</div>
@endsection

@section('js')
    <script>
        $(document).on('click', '#addAdv', function(){
            $('<div class="row"><div class="form-group col-md-6"><label for="adv_title_ar">@lang("dashboard.title_ar")</label><input type="text" name="adv_title_ar[]" class="form-control" ></div><div class="form-group col-md-6"><label for="adv_title_en">@lang("dashboard.title_en")</label><input type="text" name="adv_title_en[]" class="form-control" ></div><div class="form-group col-md-6"><label for="adv_desc_ar">@lang("dashboard.desc_ar")</label><textarea type="text" name="adv_desc_ar[]" class="form-control mceNoEditor" ></textarea></div><div class="form-group col-md-6"><label for="adv_desc_en">@lang("dashboard.desc_en")</label><textarea type="text" name="adv_desc_en[]" class="form-control mceNoEditor"></textarea></div><div class="form-group col-md-6"><label for="briefImage">@lang("dashboard.briefImage")</label><span class="file-input btn btn-block btn-primary btn-file">Browse&hellip;<input type="file" type="file" name="advImage[]" ></span></div><div class="form-group col-md-12 text-center"><button type="button" class="btn btn-danger destroy" style="width: 15%">-</button></div></div>')
            .insertBefore('#addAdv');
        });
        
        $(document).on('click', '#addFaq', function(){
            $('<div class="row"><div class="form-group col-md-6"><label for="question_ar">@lang("dashboard.question_ar")</label><input type="text" name="question_ar[]" class="form-control" ></div><div class="form-group col-md-6"><label for="question_en">@lang("dashboard.question_en")</label><input type="text" name="question_en[]" class="form-control" ></div><div class="form-group col-md-6"><label for="answer_ar">@lang("dashboard.answer_ar")</label><textarea type="text" name="answer_ar[]" class="form-control mceNoEditor" ></textarea></div><div class="form-group col-md-6"><label for="answer_en">@lang("dashboard.answer_en")</label><textarea type="text" name="answer_en[]" class="form-control mceNoEditor"></textarea></div><div class="form-group col-md-12 text-center"><button type="button" class="btn btn-danger destroy" style="width: 15%">-</button></div></div>')
            .insertBefore('#addFaq');
        });
        
        $(document).on('click', '#addVideo', function(){
            $('<div class="row"><div class="form-group col-md-8"><label for="videos">@lang("dashboard.videos")</label><input type="text" name="videos[]" class="form-control" ></div><div class="form-group col-md-12 text-center"><button type="button" class="btn btn-danger destroy" style="width: 15%">-</button></div></div>')
            .insertBefore('#addVideo');
        });
        
        $(document).on('click', '.destroy', function(){
            $(this).parent().parent().remove(); 
        });
    </script>
@endsection