@extends('admin.layouts.master')
@section('title', 'Add Sub Categories')
@section('content')

    <div class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">{{ __('Add New Sub Category') }} </h1>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card card-primary card-outline">
                        <div class="card-body">
                            <form class="form-horizontal" action="{{ route('admin.subcategory.store') }}"
                                method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="name">Sub-Category Name <span
                                                    class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
                                                <input type="text" class="form-control" name="sub_category_name"
                                                    id="sub_category_name" placeholder="Enter Sub Category Name"
                                                    value="{{ old('sub_category_name') }}">
                                            </div>
                                            @if ($errors->has('sub_category_name'))
                                                <p class="text-danger">{{ $errors->first('sub_category_name') }}</p>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="slug">Slug <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="bi bi-link-45deg"></i></span>
                                                <input type="text" class="form-control" name="slug" id="slug"
                                                    placeholder="Enter Slug" value="{{ old('slug') }}">
                                            </div>
                                            @if ($errors->has('slug'))
                                                <p class="text-danger">{{ $errors->first('slug') }}</p>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="status">Category</label><span class="text-danger">*</span>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="bi bi-tags-fill"></i>
                                                </span>
                                                <select name="category_id" id="category_id" class="form-control">
                                                    @foreach ($categories as $category)
                                                        <option value="{{ $category->id }}">{{ $category->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            @if ($errors->has('category_id'))
                                                <p class="text-danger">{{ $errors->first('category_id') }}</p>
                                            @endif

                                        </div>
                                    </div>

                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="order_no">Order No <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i
                                                        class="bi bi-sort-numeric-down"></i></span>
                                                <input type="number" class="form-control" name="order_no" id="order_no"
                                                    placeholder="Enter Order No" value="{{ old('order_no') }}">
                                            </div>
                                            @if ($errors->has('order_no'))
                                                <p class="text-danger">{{ $errors->first('order_no') }}</p>
                                            @endif
                                        </div>
                                    </div>


                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="status">Status</label><span class="text-danger">*</span>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="bi bi-toggle-on"></i></span>
                                                <select class="form-control" name="status" id="status">
                                                    <option value="active"
                                                        {{ old('status') == 'active' ? 'selected' : '' }}>
                                                        Active</option>
                                                    <option value="inactive"
                                                        {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive
                                                    </option>
                                                </select>
                                                @if ($errors->has('status'))
                                                    <p class="text-danger">{{ $errors->first('status') }}</p>
                                                @endif
                                            </div>

                                        </div>
                                    </div>


                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="is_featured">Featured</label><span class="text-danger">*</span>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="bi bi-star-fill"></i></span>
                                                <select class="form-control" name="is_featured" id="is_featured">
                                                    <option value="0" {{ old('is_featured') == 0 ? 'selected' : '' }}>
                                                        No</option>
                                                    <option value="1" {{ old('is_featured') == 1 ? 'selected' : '' }}>
                                                        Yes</option>
                                                </select>
                                                @if ($errors->has('is_featured'))
                                                    <p class="text-danger">{{ $errors->first('is_featured') }}</p>
                                                @endif
                                            </div>

                                        </div>
                                    </div>


                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="label_text">Label </label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
                                                <input type="text" class="form-control" name="label_text"
                                                    id="label_text" placeholder="Enter Label"
                                                    value="{{ old('label_text') }}">
                                            </div>
                                            @if ($errors->has('label_text'))
                                                <p class="text-danger">{{ $errors->first('label_text') }}</p>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label for="label_color">Label Color</label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="bi bi-palette"></i></span>
                                                <input type="color" class="form-control form-control-color"
                                                    name="label_color" id="label_color"
                                                    value="{{ old('label_color', '#000000') }}">
                                            </div>
                                            @if ($errors->has('label_color'))
                                                <p class="text-danger">{{ $errors->first('label_color') }}</p>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label for="label_bg_color">Label Background Color</label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="bi bi-palette-fill"></i></span>
                                                <input type="color" class="form-control form-control-color"
                                                    name="label_bg_color" id="label_bg_color"
                                                    value="{{ old('label_bg_color', '#87CEEB') }}">
                                            </div>
                                            @if ($errors->has('label_bg_color'))
                                                <p class="text-danger">{{ $errors->first('label_bg_color') }}</p>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="meta_title">Meta Title</label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="bi bi-type"></i></span>
                                                <input type="text" class="form-control" name="meta_title" id="meta_title"
                                                    placeholder="Enter Meta Title" value="{{ old('meta_title') }}">
                                            </div>
                                            @if ($errors->has('meta_title'))
                                                <p class="text-danger">{{ $errors->first('meta_title') }}</p>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="short_description">Short Description</label>
                                            <textarea class="form-control" name="short_description" id="short_description" rows="3"
                                                placeholder="Enter Short Description">{{ old('short_description') }}</textarea>
                                        </div>
                                        @if ($errors->has('short_description'))
                                            <p class="text-danger">{{ $errors->first('short_description') }}</p>
                                        @endif
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="meta_description">Meta Description</label>
                                            <textarea class="form-control" name="meta_description" id="meta_description" rows="3"
                                                placeholder="Enter Meta Description">{{ old('meta_description') }}</textarea>
                                        </div>
                                        @if ($errors->has('meta_description'))
                                            <p class="text-danger">{{ $errors->first('meta_description') }}</p>
                                        @endif
                                    </div>


                                    <div class="col-lg-4">
                                        <label for="image" class="control-label">
                                            {{ __('Image') }}
                                        </label>

                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="bi bi-file-earmark-image"></i>
                                            </span>
                                            <input type="file" class="form-control up-img" name="image"
                                                id="image" accept="image/png, image/jpeg, image/jpg">
                                        </div>

                                        <br>
                                        <img class="mw-400 mb-3 show-img img-demo"
                                            src="{{ asset('assets/admin/img/img-demo.jpg/') }}" alt="Preview Image">

                                        @if ($errors->has('image'))
                                            <p class="text-danger"> {{ $errors->first('image') }} </p>
                                        @endif
                                    </div>


                                    <div class="col-lg-4">
                                        <label for="banner_image" class="control-label">
                                            {{ __('Banner Image') }}
                                        </label>

                                        <div class="input-group">
                                            <span class="input-group-text">
                                                <i class="bi bi-card-image"></i>
                                            </span>
                                            <input type="file" class="form-control up-img" name="banner_image"
                                                id="banner_image" accept="image/png, image/jpeg, image/jpg">
                                        </div>

                                        <br>
                                        <img class="mw-400 mb-3 show-img img-demo"
                                            src="{{ asset('assets/admin/img/img-demo.jpg/') }}"
                                            alt="Preview Banner Image">

                                        @if ($errors->has('banner_image'))
                                            <p class="text-danger"> {{ $errors->first('banner_image') }} </p>
                                        @endif
                                    </div>

                                    <div class="col-lg-4">
                                        <label for="meta_image" class="control-label">{{ __('Meta Image') }}</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-image"></i></span>
                                            <input type="file" class="form-control up-img" name="meta_image"
                                                id="meta_image" accept="image/png, image/jpeg, image/jpg">
                                        </div>
                                        <br>
                                        <img class="mw-400 mb-3 show-img img-demo"
                                            src="{{ asset('assets/admin/img/img-demo.jpg/') }}" alt="Preview Meta Image">
                                        @if ($errors->has('meta_image'))
                                            <p class="text-danger">{{ $errors->first('meta_image') }}</p>
                                        @endif
                                    </div>

                                    <div class="col-lg-12">
                                        <button type="submit" class="btn btn-primary float-right">{{ __('Add Sub Category') }}</button>
                                    </div>
                                  

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

        </div>
    </section>

@endsection
@section('js')
    <script>
        document.getElementById("sub_category_name").addEventListener("keyup", function() {
            let slug = this.value.toLowerCase().trim().replace(/ /g, '-').replace(/[^\w-]+/g, '');
            document.getElementById("slug").value = slug;
        });
    </script>
@endsection