@extends('layouts.master')

@section('title', ($category->parent_id) ? config('category.sub_edit') : config('category.edit'))

@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($category->parent_id) {!! config('category.sub_edit') !!} @else {!! config('category.edit') !!} @endif<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>
                        @if($category->parent_id)
                        <li class="breadcrumb-item"><a href="{{ route('categories.show',['category' => $category->parent_id]) }}">{!! config('category.sub_name') !!} For {{ $category->parent->title ?? '' }}</a></li>
                        @endif
                        <li class="breadcrumb-item active">{!! config('category.edit') !!} {{ $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('categories.update',['category' => $category->id]) }}">
                            @method('PUT')
                            @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="{{ $category->translate($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="form-floating mb-3">
                                                    <input type="text" class="form-control" id="slug_input_{{ $locale }}"
                                                        name="{{ $locale }}[slug]" placeholder="Enter Slug here"
                                                        value="{{ $category->translate($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($category->parent_id && $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 }}" {{ $category->classification_id == $classification->id ? 'selected' : '' }}>{{ $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="{{ $category->translate($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="{{ $category->translate($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="{{ $category->translate($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"> {{ $category->translate($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"> {{ $category->translate($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($category->parent_id)
                                <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="{{ $category->parent_id ?? ''}}">
                                    <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="{{ $category->image ?? ''}}"/>
                                                @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="{{ $category->back_image ?? ''}}"/>
                                                @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();
    </script>
@endpush