@extends('layouts.backendTemplate')

 @section('content')

     <!--begin::Main-->
     <div class="app-main flex-column flex-row-fluid" id="kt_app_main">

         <div class="d-flex flex-column flex-column-fluid">


             @include('uc.admin.breadcrumb', [
                 'title' => 'Category Add',
                 'pageName' => 'Add',
                 'pageParent' => 'Category Management',
                 'pageParentLink' => url('category'),
             ])

             <div id="kt_app_content" class="app-content flex-column-fluid">
                 <div id="kt_app_content_container" class="app-container container-xxl">


                     <form class="form d-flex flex-column flex-lg-row" action="{{ url('category/insert') }}" method="post"
                         enctype="multipart/form-data">

                         <input type="hidden" name="_method" value="POST">
                         <input type="hidden" name="_token" value="{{ csrf_token() }}">


                         <div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7 me-lg-10">

                             <div class="card card-flush py-4">

                                 <div class="card-body text-center pt-0">

                                     <style>
                                         .image-input-placeholder {
                                             background-image: url('{{ url('assets/media/svg/files/blank-image.svg') }}');
                                         }

                                         [data-bs-theme="dark"] .image-input-placeholder {
                                             background-image: url('../media/svg/files/blank-image-dark.svg');
                                         }
                                     </style>

                                     <div class="image-input image-input-empty image-input-outline image-input-placeholder mb-3"
                                         data-kt-image-input="true">

                                         <div class="image-input-wrapper w-150px h-150px"></div>

                                         <label
                                             class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                             data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                             title="Change avatar">

                                             <i class="bi bi-pencil-fill fs-7"></i>

                                             <input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
                                             <input type="hidden" name="avatar_remove" />

                                         </label>

                                         <span
                                             class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                             data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                                             title="Cancel avatar">
                                             <i class="bi bi-x fs-2"></i>
                                         </span>

                                         <span
                                             class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                             data-kt-image-input-action="remove" data-bs-toggle="tooltip"
                                             title="Remove avatar">
                                             <i class="bi bi-x fs-2"></i>
                                         </span>

                                     </div>

                                     <div class="text-muted fs-7">Set the profile picture. Only *.png, *.jpg and *.jpeg
                                         image
                                         files are accepted</div>

                                 </div>

                                 {{-- Active --}}
                                 <div class="card-header" style="border: unset;">
                                     <div class="required card-title">
                                         <h2>Active</h2>
                                     </div>
                                 </div>
                                 <div class="card-body pt-0">

                                     <label class="form-check form-switch form-check-custom form-check-solid">
                                         <input class="form-check-input" disabled readonly name="active" type="checkbox"
                                             value="1" checked />
                                     </label>
                                 </div>


                             </div>

                         </div>

                         <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">

                             <div class="card card-flush py-4">


                                 @if (Session::has('messageSuccess'))
                                     <div class="card-body">
                                         @include('uc/messageSuccess')
                                     </div>
                                 @endif

                                 @if (Session::has('messageFail'))
                                     <div class="card-body">
                                         @include('uc/messageFail')
                                     </div>
                                 @endif

                                 <div class="card-header">
                                     <div class="card-title">
                                         <h2>Overview</h2>
                                     </div>
                                 </div>

                                 <div class="card-body pt-0">

                                     <div class="mb-10 fv-row">
                                         <label class="required form-label">Name</label>
                                         <input type="text" name="name" class="form-control mb-2 col-6"
                                             value="{{ old('name') }}" />
                                     </div>


                                     <div class="mb-10 fv-row">
                                         <label class="required form-label">Name (EN)</label>
                                         <input type="text" name="name_en" class="form-control mb-2 col-6"
                                             value="{{ old('name_en') }}" />
                                     </div>

                                 </div>

                             </div>

                             <div class="d-flex justify-content-end">

                                 <a href="{{ url('category') }}" id="kt_ecommerce_add_product_cancel"
                                     class="btn btn-light me-5">Cancel</a>

                                 <button type="submit" class="btn btn-primary">
                                     <span class="indicator-label">Save Changes</span>
                                 </button>

                             </div>

                         </div>


                     </form>
                 </div>

             </div>

         </div>

     </div>


 @stop


 @section('script')

     <script type="text/javascript">
         $(function() {});
     </script>

 @endsection