@extends('backend.master')
@section('title')
    {{ ___('common.Add Product Category') }}
@endsection
@section('content')
    <div class="page-content">
        <!-- Add Category Start  -->

        {{-- bradecrumb Area S t a r t --}}
        <div class="page-header">
            <div class="row">
                <div class="col-sm-6">
                    <h4 class="bradecrumb-title mb-1">{{ ___('common.add_product_category') }}</h1>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ ___('common.home') }}</a></li>
                            <li class="breadcrumb-item">{{ ___('common.add_product') }}</li>
                        </ol>
                </div>
                <div class="col-sm-6">
                    <!-- Bookmark Start-->
                    <div class="bookmark">
                        <ul>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-inbox">
                                        <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
                                        <path
                                            d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z">
                                        </path>
                                    </svg></a></li>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-message-square">
                                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                                    </svg></a></li>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-command">
                                        <path
                                            d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z">
                                        </path>
                                    </svg></a></li>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-layers">
                                        <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                                        <polyline points="2 17 12 22 22 17"></polyline>
                                        <polyline points="2 12 12 17 22 12"></polyline>
                                    </svg></a></li>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-star bookmark-search">
                                        <polygon
                                            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                                        </polygon>
                                    </svg></a></li>
                        </ul>
                    </div>
                    <!-- Bookmark Ends-->
                </div>
            </div>
        </div>
        {{-- bradecrumb Area E n d --}}


        <div class="row">
            <div class="col-12 col-lg-8 col-xl-6 m-auto">
                <div class="card ot-card mb-24">
                    <div class="card-header">
                        <h3>{{ ___('common.add_product_category') }}</h3>
                    </div>

                    <div class="card-body">
                        <div class="p-4 border rounded">
                            <form class="row g-3 needs-validation" novalidate="">
                                <div class="col-12">
                                    <label for="validationCustom01" class="form-label">{{ ___('common.name') }}</label>
                                    <input type="text" class="form-control ot-input" id="validationCustom01"
                                        placeholder="{{ ___('common.catgeory_name') }}" required="" />
                                    <div class="valid-feedback">{{ ___('common.looks_good') }}</div>
                                </div>
                                <div class="col-12">
                                    <label for="validationCustom01" class="form-label">{{ ___('common.slug') }}</label>
                                    <input type="text" class="form-control ot-input is-invalid" id="validationCustom02"
                                        placeholder="{{ ___('common.slug') }}" required="" />
                                    <div class="invalid-feedback">{{ ___('common.unique_slug_required') }}</div>
                                </div>
                                <div class="col-md-12">
                                    <label for="validationCustom04"
                                        class="form-label">{{ ___('common.parent_category') }}</label>
                                    <select class="form-select ot-input" id="validationCustom04" required="">
                                        <option selected="" disabled="" value="">
                                            Choose...
                                        </option>
                                        <option>Lifestyle</option>
                                        <option>Fruit</option>
                                        <option>Gadgets</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please select a valid state.
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label
                                            for="exampleFormControlTextarea1">{{ ___('common.decription') }}</label>
                                        <textarea class="form-control ot-input" id="exampleFormControlTextarea1" rows="3"></textarea>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-primary ot-btn-primary" type="submit">
                                        {{ ___('common.add_category') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add Category End  -->
    </div>
@endsection