@extends('admin.layouts.masterlayout')

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

@section('head_title')
    Post Category
@endsection

@section('content')
    <div class="dashboard-body-content">
        <div class="dashboard-breadcrumb-section">
            <h2>Add Post Category</h2>
            <p><a href="{{ route('admin.post-category.index') }}"> Post Category List </a> / Add Post Category </p>
        </div>
        <div class="row">
            <div class="col-xxl-6 col-lg-12 mb-lg-0 ">
                <form id="addCatForm" method="POST" action="{{ route('admin.post-category.store') }}">
                    @csrf
                    <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('active') ? 'checked' : '' }} 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') }}" 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 add_btn"> <span>Save</span> </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {

            // Check Unique Mail:
            jQuery.validator.addMethod("checkExistName", function(val, elem) {
                    var id = '';
                    $.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) ? true : false;
                            if (response.result == false && response.message != "") {
                                jQuery.validator.messages.checkExistName = response.message;
                            }
                        }
                    })
                    return result;
                },
                function(params, element) {
                    return jQuery.validator.messages.checkExist;
                }
            );

            $('#addCatForm').validate({
                rules: {
                    name: {
                        required: true,
                        checkExistName: true,
                        maxlength: 250,
                        minlength: 2
                    }
                },
                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                },
                submitHandler: function(form) {
                    $('.add_btn').attr('disabled', true);
                    $('.add_btn').addClass('loader-active');
                    form.submit();
                }
            });

        });
    </script>
@endsection