@extends('layouts.master')

@section('title', (request()->get('parent')) ? config('category.sub_create') : config('category.create'))

@section('content')
<div class="page-wrapper">
            <!-- ============================================================== -->
            <!-- Container fluid  -->
            <!-- ============================================================== -->
            <div class="container-fluid">
                <!-- ============================================================== -->
                <!-- Bread crumb and right sidebar toggle -->
                <!-- ============================================================== -->
                <div class="row page-titles">
                    <div class="col-md-5 align-self-center">
                        <h4 class="text-themecolor">@if(request()->get('parent')) {!! config('category.sub_create') !!} @else {!! config('category.create') !!} @endif</h4>
                    </div>
                    <div class="col-md-7 align-self-center text-end">
                        <div class="d-flex justify-content-end align-items-center">
                            <ol class="breadcrumb justify-content-end">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                                <li class="breadcrumb-item"><a href="{{ route('categories.index') }}">{!! config('category.name') !!}</a></li>
                                @if(request()->get('parent'))
                                <li class="breadcrumb-item"><a href="{{ route('categories.show',['category' => $firstData->id]) }}">{!! config('category.sub_name') !!} For {{ $firstData->title ?? '' }}</a></li>
                                @endif
                                <li class="breadcrumb-item active">@if(request()->get('parent')) {!! config('category.sub_create') !!} @else {!! config('category.create') !!} @endif</li>
                            </ol>
                        </div>
                    </div>
                </div>
           
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <!-- <h4 class="card-title">Basic Form</h4> -->
                                <ul class="nav nav-tabs" role="tablist">
                                  @foreach(config('translatable.locales') as $locale)
                                    <li class="nav-item"> <a class="nav-link {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab" href="#{{ $locale }}" role="tab" aria-selected="true"><span class="hidden-sm-up"><i class="ti-text"></i></span> <span class="hidden-xs-down">{{ trans('messages.'.$locale) }}</span></a> </li>
                                    @endforeach
                                </ul>
                                <form method="POST" enctype="multipart/form-data" action="{{ route('categories.store') }}">
                                    @method('POST')
                                    @csrf

                                   <div class="tab-content tabcontent-border">
                                      @foreach(config('translatable.locales') as $locale)
                                        <div class="tab-pane {{ $loop->first ? 'active' : '' }}" id="{{ $locale }}" role="tabpanel">
                                            <div class="p-20 mt-3">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-floating mb-3">
                                                            <input type="text" class="form-control" id="tb-fname" name="{{ $locale }}[title]"
                                                                placeholder="Enter title here" value="{{ old("$locale.title") }}" onload="convertToSlug(this.value, 'slug_input_{{ $locale }}')"
                                                                   onkeyup="convertToSlug(this.value, 'slug_input_{{ $locale }}')">
                                                            <label for="tb-fname">Title {{ $locale }} <span class="text-danger">*</span></label>
                                                        </div>
                                                        @error("$locale.title")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-floating mb-3">
                                                            <input type="text" class="form-control" id="slug_input_{{ $locale }}" name="{{ $locale }}[slug]"
                                                                placeholder="Enter slug here" value="{{ old("$locale.slug") }}">
                                                            <label for="slug_input_{{ $locale }}">Slug {{ $locale }} <span class="text-danger">*</span></label>
                                                        </div>
                                                        @error("$locale.slug")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    @if(request()->get('parent') && $locale == 'en')
                                                    <div class="col-md-6 mt-2 @error('classification_id') has-danger @enderror">
                                                        <!-- <label class="form-label">Classifications</label> -->
                                                        <select class="form-select form-control mb-2" id="inlineFormCustomSelect" name="classification_id">
                                                            <option value="">Choose Classification...</option>
                                                            @if(!empty($classifications))
                                                            @foreach($classifications as $classification)
                                                            <option value="{{ $classification->id }}">{{ $classification->title }}</option>
                                                            @endforeach
                                                            @endif
                                                        </select>
                                                        @error("classification_id")
                                                        <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    @endif
                                                    <div class="card-header bg-info mt-3 mb-3">
                                                        <h3 class="mb-0 text-white">SEO Details</h3>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-floating mb-3">
                                                            <input type="text" class="form-control" id="tb-meta_title" name="{{ $locale }}[meta_title]"
                                                                placeholder="Enter meta title here" value="{{ old("$locale.meta_title") }}">
                                                            <label for="tb-meta_title">Meta Title {{ $locale }}</label>
                                                        </div>
                                                        @error("$locale.meta_title")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-floating mb-3">
                                                            <input type="text" class="form-control" id="tb-alt_image" name="{{ $locale }}[alt_image]"
                                                                placeholder="Enter alt image here" value="{{ old("$locale.alt_image") }}">
                                                            <label for="tb-alt_image">Alt Image {{ $locale }}</label>
                                                        </div>
                                                        @error("$locale.alt_image")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="form-floating mb-3">
                                                            <input type="text" class="form-control" id="tb-canonical_url" name="{{ $locale }}[canonical_url]"
                                                                placeholder="Enter canonical here" value="{{ old("$locale.canonical_url") }}">
                                                            <label for="tb-canonical_url">Canonical Url {{ $locale }}</label>
                                                        </div>
                                                        @error("$locale.canonical_url")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <textarea class="form-control" id="tb-meta_description" name="{{ $locale }}[meta_description]"
                                                                placeholder="Enter meta description here" rows="5"> {{ old("$locale.meta_description") }} </textarea>
                                                            <!-- <label for="tb-meta_description">Meta Description {{ $locale }}</label> -->
                                                        </div>
                                                        @error("$locale.meta_description")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <textarea class="form-control" id="tb-meta_keywords" name="{{ $locale }}[meta_keywords]"
                                                                placeholder="Enter meta keywords here" rows="5"> {{ old("$locale.meta_keywords") }} </textarea>
                                                            <!-- <label for="tb-meta_keywords">Meta Keywords {{ $locale }}</label> -->
                                                        </div>
                                                        @error("$locale.meta_keywords")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                        @if(request()->get('parent'))
                                        <div class="card-header bg-info mt-3 mb-3">
                                            <h3 class="mb-0 text-white">Images Required</h3>
                                        </div>
                                        <input type="hidden" name="parent_id" value="{{ request()->get('parent') ?? ''}}">
                                        <div class="row">
                                            <div class="col-md-6 mt-3">
                                                <div class="mb-3">
                                                    <label class="mb-2">Main Image (202 × 61 px) <span class="text-danger">*</span></label>
                                                    <input type="file" name="image" class="dropify" data-height="200" data-default-file=""/>
                                                    @if($errors->has('image'))
                                                        <span class="text-danger">{{ $errors->first('image') }}</span>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="col-md-6 mt-3">
                                                <div class="mb-3">
                                                    <label class="mb-2">Background Image (1465 × 803 px) <span class="text-danger">*</span></label>
                                                    <input type="file" name="back_image" class="dropify" data-height="200" data-default-file=""/>
                                                    @if($errors->has('back_image'))
                                                        <span class="text-danger">{{ $errors->first('back_image') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        <div class="col-12">
                                            <div class="d-md-flex align-items-center mt-3">
                                                <button type="button" onclick="parent.history.back();" class="btn btn-outline-danger">Back</button>
                                                <div class="ms-auto mt-3 mt-md-0">
                                                    <button type="submit"
                                                        class="btn btn-outline-info">Submit</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
</div>
@endsection

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>
    <script>
        $('.dropify').dropify();

        /* Encode string to slug */
        function convertToSlug( str, element ) {

            //replace all special characters | symbols with a space
            str = str.replace(/[`~!@#$%^&*()_\-+=\[\]{};:'"\\|\/,.<>?\s]/g, ' ')
                .toLowerCase();

            // trim spaces at start and end of string
            str = str.replace(/^\s+|\s+$/gm,'');

            // replace space with dash/hyphen
            str = str.replace(/\s+/g, '-');

            $('#' + element).val(str);
        }
    </script>
@endpush