@extends('admin.layout.master')
@section('title', 'Sub Category Manager')
@section('content')
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <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">
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('admin_dashboard') }}" class="text-muted text-hover-primary">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('sub-category-list') }}" class="text-muted text-hover-primary">Sub Category
                                Manager</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">Edit Sub Category</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="kt_app_content_container" class="app-container container-xxl index-container">
            <div class="card mb-5 mb-xl-8">
                <div class="card-header mb-4">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold fs-3">Edit Sub Category</span>
                    </h3>
                </div>
                <div class="card-body pt-0">
                    <form action="{{ route('sub-category-update', $data->id) }}" method="post" id="updateForm"  enctype="multipart/form-data">
                        <div class="row">
                            @csrf
                            <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">Select Category</label>
                                <select class="form-select mb-2" name="category_id" data-control="select2" data-hide-search="true" data-placeholder="Select Category" data-error="#category_id_error">
                                    <option value=""></option>
                                    @forelse($category as $cs)
                                        <option value="{{$cs->id}}" @if($data->parent_id == $cs->id) selected @endif>{{$cs->name}}</option>
                                    @empty
                                        <option value="">No Category found</option>
                                    @endforelse
                                </select>
                                <span class="error" id="category_id_error"></span>
                                @if ($errors->has('category_id'))
                                    <span class="text-danger">{{ $errors->first('category_id') }}</span>
                                @endif
                            </div>
                            <div class="col-md-12 fv-row mb-5">
                                <label class="required form-label">Name</label>
                                <input type="text" autocomplete="off" name="name" value="{{ $data->name }}"
                                    class="form-control stop_first_space" placeholder="Name" data-error="#name_error" />
                                <span class="error" id="name_error"></span>
                                @if ($errors->has('name'))
                                    <span class="text-danger">{{ $errors->first('name') }}</span>
                                @endif
                            </div>
                            <div class="col-md-12 fv-row mb-5">
                                <label class="form-label">Image</label>
                            </div>
                            <div class="col-md-12 fv-row mb-5">
                                <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" data-image_type="profile_image_"
                                        style="background-repeat: no-repeat; background-size: 140px; background-position: center;
                                                    @if ($data->image) background-image: url({{ asset($data->image) }}) @endif">
                                    </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="Upload">
                                        <i class="bi bi-pencil-fill fs-7"></i>
                                        <input type="file" name="image" id="profile_image"
                                            data-name="profile_image_" onChange="image_validation(this,event);" />
                                        <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">
                                        <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">
                                        <i class="bi bi-x fs-2"></i>
                                    </span>
                                </div>
                                @if ($errors->has('profile_image'))
                                    <p class="text-danger">{{ $errors->first('profile_image') }}</p>
                                @endif
                                <div class="text-muted fs-7">Only *.png, *.jpg and *.jpeg image files are accepted</div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" id="kt_modal_new_address_submit" class="btn btn-primary me-3">
                                <span class="indicator-label">Submit</span>
                            </button>
                            <a href="{{ route('sub-category-list') }}" class="btn btn-light">Back</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        function image_validation(tag, event) {
            const fileTypeAccepted = ['image/png', 'image/jpeg', 'image/jpg'];

            const fileSize = tag.files[0].size / 1024 / 1024;
            const fileType = tag.files[0].type;

            let image_name = $(tag).attr("data-name");
            if (fileSize > 5) {
                $("#profile_image").val('');
                $(`div[data-image_type="${image_name}"]`).css('background-image', '');
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Image size should not be greater than 5MB.',
                });
            } else if (!fileTypeAccepted.includes(fileType)) {
                $("#profile_image").val('');
                $(`div[data-image_type="${image_name}"]`).css('background-image', '');
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Only .png .jpeg .jpg file format accepted.',
                });
            } else {
                return true;
            }
        }

        $(document).ready(function() {
            $("#updateForm").validate({
                errorPlacement: function(error, element) {
                    var placement = $(element).data("error");
                    if (placement) {
                        $(placement).append(error)
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    category_id: {
                        required: true,
                    },
                    name: {
                        required: true,
                        maxlength: 50,
                    },
                },
                messages: {
                    category_id: {
                        required: "Category field is required.",
                    },
                    name: {
                        required: "Name field is required.",
                        maxlength: 'Name must not be greater than 50 characters.',
                    },
                },
                submitHandler: function(form) {
                    document.getElementById('kt_modal_new_address_submit').disabled = true;
                    setTimeout(() => {
                        form.submit();
                    }, 200);
                }
            });
        });
    </script>
@endpush