@extends('layouts.master')

@section('title', config('overview.name'))

@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">{!! config('overview.name') !!} For <span class="text-info">{{ $category->title ?? ''}}</span></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>
                                <li class="breadcrumb-item"><a href="{{ route('categories.show',['category' => $category->parent_id]) }}">{!! config('category.sub_name') !!} For {{ $category->parent->title ?? '' }}</a></li>
                                <li class="breadcrumb-item active">{!! config('overview.name') !!} For {{ $category->title ?? '' }}</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('overviews.update',['category' => $category->id]) }}">
                                    @method('PUT')
                                    @csrf
                                   <input type="hidden" name="category_id" value = "{{ $category->id ?? ''}}"/>
                                   <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="{{ $overview ? $overview->translate($locale)->title : old("$locale.title") }}">
                                                            <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="mb-3">
                                                            <textarea class="form-control" id="tb-description" name="{{ $locale }}[description]"
                                                                placeholder="Enter description here" rows="5"> {{ $overview ? $overview->translate($locale)->description : old("$locale.description") }} </textarea>
                                                            <!-- <label for="tb-description">Meta Keywords {{ $locale }}</label> -->
                                                        </div>
                                                        @error("$locale.description")
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                        <div class="card-header bg-info mt-3 mb-3">
                                            <h3 class="mb-0 text-white">Images Required</h3>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mt-3">
                                                <div class="mb-3">
                                                    <label class="mb-2">Main Image (490 × 275 px) <span class="text-danger">*</span></label>
                                                    <input type="file" name="image" class="dropify" data-height="200" data-default-file="{{ $overview ? $overview->image : ''}}"/>
                                                    <input type="hidden" name="val_image" value = "{{ $overview ? $overview->image : ''}}"/>
                                                    @if($errors->has('image'))
                                                        <span class="text-danger">{{ $errors->first('image') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <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