@extends('admin.layouts.masterlayout')

@section('title')
    Edit Post Category
@endsection

@section('head_title')
    Post Category
@endsection

@section('content')
    <div class="dashboard-body-content">
        <div class="dashboard-breadcrumb-section">
            <h2>Edit Post Category</h2>
            <p><a href="{{ route('admin.post-category.index') }}"> Post Category List </a> / Edit Post Category </p>
        </div>
        <div class="row">
            <div class="col-xxl-6 col-lg-12 mb-lg-0 ">
                <form id="editForm" method="POST" action="{{ route('admin.post-category.update', $category->id) }}">
                    @csrf
                    @method('PUT')
                    <div class="ct-admin-container mb-4">
                        <div class="card">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                                <div class="card-title mb-0">
                                    <h2>Post Category Detail</h2>
                                </div>
                                <div class="form-check form-check-toggle form-switch ps-3 ps-md-0">
                                    <input class="form-check-input" type="checkbox" name="status" id="active" role="switch" {{ old('status', $category->status) === 'active' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="active">Active</label>
                                </div>
                            </div>
                            <div class="card-body ">
                                @if ($errors->any())
                                    <div class="alert alert-danger alert-dismissible fade show mb-5 hdo-alert">
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"
                                            aria-label="btn-close"></button>
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li> <strong> {{ $error }} </strong> </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                <div class="mb-4">
                                    <label for="name">Category Name<span class="required-block">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" name="name" id="name" class="form-control" value="{{ old('name', $category->name) }}" placeholder="Enter Category Name" required>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets') }}/img/post-category-name.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex gap-3 submit-container">
                        <a href="{{ route('admin.post-category.index') }}" class="ct-outline-btn">Cancel</a>
                        <button type="submit" class="ct-btn edit_btn"> <span>Update</span> </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            var id = "{{ $category->id }}";

            jQuery.validator.addMethod("checkExistName", function(val, elem) {
                let result = false;
                $.ajax({
                    url: "{{ route('admin.post-category.check-unique-name') }}",
                    method: "POST",
                    data: {
                        "id": id,
                        "name": val
                    },
                    async: false,
                    success: function(response) {
                        result = response.result === true;
                        if (!result && response.message) {
                            jQuery.validator.messages.checkExistName = response.message;
                        }
                    }
                });
                return result;
            }, "Name already exists!");

            $('#editForm').validate({
                rules: {
                    name: {
                        required: true,
                        checkExistName: true,
                        minlength: 2,
                        maxlength: 250
                    }
                },
                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                },
                submitHandler: function(form) {
                    $('.edit_btn').attr('disabled', true);
                    $('.edit_btn').addClass('loader-active');
                    form.submit();
                }
            });
        });
    </script>
@endsection