@extends('admin.layouts.app')

@section('page-title')
Category :: Add
@endsection

@section('content')
<div class="container-xxl">
    <div class="row">
        <div class="col-xl-9 col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Add Category Image <span class="text-danger" id="uploaderror"></span></h4>
                    <div class="danger text-danger" id="errorupload"></div>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.upload.store', ['storefolder' => 'categories']) }}" enctype="multipart/form-data" method="post" class="dropzone" id="my-dropzone">
                        @csrf
                        <div class="dz-message needsclick">
                            <i class="bx bx-cloud-upload fs-48 text-primary"></i>
                            <h3 class="mt-4">Drop your images here, or <span class="text-primary">click to browse</span></h3>
                            <span class="text-muted fs-13">
                                1600 x 1200 (4:3) recommended. PNG, JPG and GIF files are allowed
                            </span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card">
                <form method="post" action="{{ route('admin.category.store') }}">
                    @csrf
                    <div class="card-header">
                        <h4 class="card-title">General Information</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label for="parent_id" class="form-label">Parent category (optional)</label>
                                    <select class="form-control" id="parent_id" name="parent_id" data-choices data-choices-groups data-choices-search-false data-choices-sorting-false data-placeholder="Categories">
                                    <option value="">Select category</option>

                                    @foreach($categories as $id => $fullPath)
                                        <option value="{{ $id }}" 
                                            {{ (isset($category) && $category->category_id == $id) ? 'selected' : '' }}
                                        >
                                            {{ $fullPath }}
                                        </option>
                                    @endforeach
                                    </select>
                                </div>
                            </div>

                            @foreach (config('translatable.locales') as $locale)
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label for="name_{{ $locale }}" class="form-label"><strong class="text-primary">{{ Str::upper($locale) }}</strong> - Category Name</label>
                                    <input type="text" id="name_{{ $locale }}" name="{{ $locale }}[name]" class="form-control" placeholder="Enter Category Name">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label for="description_{{ $locale }}" class="form-label"><strong class="text-primary">{{ Str::upper($locale) }}</strong> - Description</label>
                                    <textarea name="{{$locale}}[description]" id="description_{{ $locale }}" class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label for="slug_{{ $locale }}" class="form-label"><strong class="text-primary">{{ Str::upper($locale) }}</strong> - Slug</label>
                                    <input type="text" id="slug_{{ $locale }}" name="{{ $locale }}[slug]" class="form-control" placeholder="Enter Category Slug">
                                </div>
                            </div>
                            <div class="my-2">
                                @if (!$loop->last)
                                    <hr style="border-top:1px solid lightgrey;" />
                                @endif
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="card-footer border-top">
                        <div class="row g-2">
                            <div class="col-lg-6">
                                <button type="submit" class="btn btn-primary w-100">Create Category</button>
                            </div>
                            <div class="col-lg-6">
                                <a href="{{ route('admin.category.index') }}" class="btn btn-outline-secondary w-100">Cancel</a>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="image" id="image" value="" />
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('admin/assets/js/pages/category.js') }}"></script>
@endsection