@extends('backend.layouts.app')
@section('content')
<div class="aiz-titlebar text-left mt-2 mb-3">
	<div class="row align-items-center">
		<div class="col">
			<h1 class="h3">{{ translate('Add New Page') }}</h1>
		</div>
	</div>
</div>
<div class="card">
	<form action="{{ route('custom-pages.store') }}" method="POST" enctype="multipart/form-data">
		@csrf
		<div class="card-header">
			<h6 class="fw-600 mb-0">{{ translate('Page Content') }}</h6>
		</div>
		<div class="card-body">

            <div class="card">
                <div class="card-body">
                    <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">

                    @foreach(get_languages() as $language)
                            <li class="nav-item">

                                <a class="nav-item nav-link  @if($loop->first ) active @endif" id="nav-home-tab"
                                   data-toggle="tab"
                                   href="#nav-{{$language->code}}" role="tab" aria-controls="nav-home"
                                   aria-selected="true">
                                    <img src="{{ static_asset('assets/img/flags/'.$language->code.'.png') }}"
                                         height="11" class="mr-1">

                                    {{$language->name}}</a>

                            </li>
                        @endforeach
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        @foreach(get_languages() as $language)
                            <div class="tab-pane fade  @if($loop->first ) show active @endif"
                                 id="nav-{{$language->code}}" role="tabpanel"
                                 aria-labelledby="nav-{{$language->code}}">

                                <div class="form-group row mt-1">

                                    <label class="col-lg-3 col-from-label"
                                           for="name_{{$language->code}}">{{translate(' Title').' '.$language->code}}
                                        <i
                                            class="las la-language text-danger"
                                            title="{{translate('Translatable')}}"></i></label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" name="name_{{$language->code}}"
                                               id="name_{{$language->code}}"
                                               placeholder="{{translate(' Title')}}"
                                               value="{{ old("name_".$language->code) }}"
                                               @if($loop->first )   required @endif>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-lg-3 col-from-label"
                                           for="content_{{$language->code}}">{{translate('Add content').' '.$language->code}}
                                        <i
                                            class="las la-language text-danger"
                                            title="{{translate('Translatable')}}"></i></label>
                                    <div class="col-lg-9">
                                            <textarea class="aiz-text-editor"
                                                      name="content_{{$language->code}}"
                                                      id="content_{{$language->code}}">{{ old("content_".$language->code) }}</textarea>
                                    </div>
                                </div>



                                <div class="form-group row">
                                    <label class="col-md-3 col-form-label" for="meta_img_{{$language->code}}">
                                        {{translate('Meta Image')}}
                                        <small>(200x200)+</small>
                                    </label>
                                    <div class="col-md-9">
                                        <div class="input-group" data-toggle="aizuploader" data-type="image">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text bg-soft-secondary font-weight-medium">
                                                    {{ translate('Browse')}}
                                                </div>
                                            </div>
                                            <div
                                                class="form-control file-amount">{{ translate('Choose File') }}</div>
                                            <input type="hidden" name="meta_img_{{$language->code}}"
                                                   class="selected-files">
                                        </div>
                                        <div class="file-preview box sm">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-3 col-form-label"
                                           for="meta_description_{{$language->code}}">{{translate('Meta Description').' '.$language->code}}</label>
                                    <div class="col-md-9">
                                            <textarea  rows="5" class="form-control"
                                                       name="meta_description_{{$language->code}}"
                                                       placeholder="{{translate('Meta Description')}}">
                                            </textarea>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-lg-3 col-from-label"
                                           for="meta_keywords_{{$language->code}}">{{translate('Meta Keywords').' '.$language->code}}
                                        <i
                                            class="las la-language text-danger"
                                            title="{{translate('Translatable')}}"></i></label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" name="meta_keywords_{{$language->code}}"
                                               id="meta_keywords_{{$language->code}}"
                                               placeholder="{{translate('Meta Keywords')}}"
                                               value="{{ old("meta_keywords_".$language->code) }}">
                                    </div>
                                </div>

                            </div>

                        @endforeach

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



		<div class="card-header">
			<h6 class="fw-600 mb-0">{{ translate('Slug') }}</h6>
		</div>
		<div class="card-body">

            <div class="form-group row">
                <label class="col-sm-2 col-from-label" for="name">{{translate('Link')}} <span class="text-danger">*</span></label>
                <div class="col-sm-10">
                    <div class="input-group d-block d-md-flex">
                        <div class="input-group-prepend "><span class="input-group-text flex-grow-1">{{ route('home') }}/</span></div>
                        <input type="text" class="form-control w-100 w-md-auto" placeholder="{{ translate('Slug') }}" name="slug" required>
                    </div>
                    <small class="form-text text-muted">{{ translate('Use character, number, hypen only') }}</small>
                </div>
            </div>


			<div class="text-right">
				<button type="submit" class="btn btn-primary">{{ translate('Save Page') }}</button>
			</div>
		</div>
	</form>
</div>
@endsection