@section('title','Edit Product Sub Category')
@include('layout.header')
@include('layout.sidebar')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
    .error{
        color: red;
    }
    .input-group-append {
    position: relative;
}
.input-group-append .input-group-text-start {
    position: absolute;    right: 10px;
    top: 11px;
}
</style>

<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Edit Product Sub Category</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
                <a href="{{ url('/dashboard') }}" class="text-muted text-hover-primary">Dashboard</a>
            </li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">Edit Product Sub Category</li>
        </ul>
    </div>

</div>
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5 mb-xl-8">
            <div class="card-body py-3">
                    <form action="{{ route('edit-product-sub-category',[$productSubCategory->id])}}" method="POST" id="product_sub_category_form" enctype="multipart/form-data">
                    @method('PUT')
                        @csrf
                            <div class="mt-5">
                                <div class="row mt-6">
                                    <div class="col-md-6 mt-3">
                                        <label  for="productSubCategory" class="form-label">Product Sub Category Name<span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="sub_category_title" name="sub_category_title" value="{{ old('sub_category_title', $productSubCategory->sub_category_title) }}" placeholder="Product Sub Category Name" autocomplete="off">
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="product_category_id" class="form-label">Product Category <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <select class="form-select" value="{{ old('category_id',$productSubCategory->category_id)}}" name="product_category_id[]" data-control="select2" data-placeholder="Select Product Category" multiple>
                                                <option value=""> Select Product Category </option>
                                                @php $arr1 = explode(',',$productSubCategory->category_id); @endphp
                                                @foreach(@$productCategory as $productCategory)
                                                    <option value="{{$productCategory->id}}" {{ in_array($productCategory->id, $arr1) ? 'selected' : "" }}> {{ $productCategory->category_name_en }} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div> 

                                    <div class="col-md-6 mt-3">
                                        <label  for="status" class="form-label">Status <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <select class="form-select" name="status" data-control="select2" data-placeholder="Select Status">
                                                <option value=""> Select Status </option>
                                                <option value="Active" {{ old('status', $productSubCategory->status) == "Active" ? 'selected' : ''}}> Active </option>
                                                <option value="In-Active" {{ old('status', $productSubCategory->status) == "In-Active" ? 'selected' : ''}}> InActive </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-9 mt-3">
                                        <label  for="sub_category_image" class="form-label">Product Sub Category Image <span class="error"> * </span></label>
                                        <div class="form-group mb-5 mt-5">
                                            <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                                <div class="image-input-wrapper w-125px h-125px"></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" aria-label="Change sub category image" data-bs-original-title="Change sub category image" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-pencil fs-7">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span></i>
                                                    <input type="file"  name="sub_category_image" id="sub_category_image" accept=".png, .jpg, .jpeg">
                                                    <input type="hidden" name="sub_category_image_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" aria-label="Cancel sub category image" data-bs-original-title="Cancel sub category image" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i> 
                                                </span>
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" id="imgpriview2" data-kt-image-input-action="remove" data-bs-toggle="tooltip" aria-label="Remove sub category image" data-bs-original-title="Remove sub category image" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>                
                                                </span>
                                            </div>    
                                        </div>
                                    </div>
                                    <div class="col-md-3 mt-3">
                                        <label  for="sub_category_image" class="form-label"></label>
                                        <div class="form-group mb-5 mt-5">
                                            @php
                                                $imagePath = $productSubCategory->sub_category_image;
                                            @endphp
                                            <img src="{{$imagePath}}" style="max-width:120px;max-height:200px">
                                        </div>
                                    </div>

                                    <div class="col-md-9 mt-3">
                                        <label  for="sub_category_image_mobile" class="form-label">Category Image (Mobile) <span class="error"> * </span></label>
                                        <div class="form-group mb-5 mt-5">
                                            <div class="image-input image-input-empty image-input-outline image-input-placeholder" data-kt-image-input="true">
                                                <div class="image-input-wrapper w-125px h-125px"></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" aria-label="Change sub category image mobile" data-bs-original-title="Change sub category image mobile" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-pencil fs-7">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span></i>
                                                    <input type="file"  name="sub_category_image_mobile" id="sub_category_image_mobile" accept=".png, .jpg, .jpeg">
                                                    <input type="hidden" name="sub_category_image_mobile_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" aria-label="Cancel sub category image mobile" data-bs-original-title="Cancel sub category image mobile" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i> 
                                                </span>
                                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" id="imgpriview2" data-kt-image-input-action="remove" data-bs-toggle="tooltip" aria-label="Remove sub category image mobile" data-bs-original-title="Remove sub category image mobile" data-kt-initialized="1">
                                                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>                
                                                </span>
                                            </div>    
                                        </div>
                                    </div>
                                    <div class="col-md-3 mt-3">
                                        <label  for="sub_category_image_mobile" class="form-label"></label>
                                        <div class="form-group mb-5 mt-5">
                                            @php
                                                $subImagePath = $productSubCategory->sub_category_image_mobile;
                                            @endphp
                                            <img src="{{$subImagePath}}" style="max-width:120px;max-height:200px">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group mb-5 col-md-2">
                                        <button type="submit" class="form-control btn btn-primary">Submit</button>
                                    </div>
                                    <div class="form-group mb-5 col-md-2">
                                        <a  href="{{ url('/ProductSubCategory')}}"  class="form-control btn btn-secondary">Back</a>
                                    </div>
                                </div>
                            </div>
                    </form>
            </div>
        </div>
    </div>
</div>


@include('layout.footer')
<script>
    $("#product_sub_category_form").validate({
    debug: true,
    rules: {
        sub_category_title: {required: true},
        status:{required: true},
    },
    messages: {
            sub_category_title: {
                required: 'Product Sub Category Required.'
            },

            status: {
                required: 'Status is Required.',
            },
          
    },
    errorPlacement: function (error, element) {
        error.insertAfter(element);
    },
    submitHandler: function(form) {
        $(".submit").attr("disabled", true);
        form.submit();
    }
});
</script>