@section('title', 'Manage Sub-Admin')
@extends('admin.layouts.app')
<!-- Parsley CSS -->
@push('style')
<link rel="stylesheet" href="{{asset('assets/css/main.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/color_skins.css')}}">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
    .app-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        background-color: #FFF;
        margin: -30px -30px 30px;
        padding: 23.7px 30px;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .app-title h1,
    .app-title .h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 400;
    }

    .app-title p {
        margin-bottom: 0;
        font-style: italic;
    }

    .app-title a {
        color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    }

    .block-header h2 {
        margin-top: 10px !important;
        font-size: 20px;
    }
</style>
@endpush


@section('content')
<section class="content home">

    <div class="block-header">
        <div class="row app-title">
            <div class="col-lg-7 col-md-6 col-sm-12">
                <h2 class="mt-3"></i>
                    Add Category
                    <small class="text-muted"></small>
                </h2>
            </div>
            <div class="col-lg-5 col-md-6 col-sm-12">
                <ul class="breadcrumb float-md-right mt-3">
                    <li class="breadcrumb-item"><a href="{{route('admin-dashboard')}}"><i class="zmdi zmdi-home"></i></a></li>
                    <li class="breadcrumb-item"><a href="{{route('admin-manage_category')}}">Manage Categories</a></li>
                    <li class="breadcrumb-item active">Add Category</li>
                </ul>
            </div>
        </div>
    </div>



    <div class="container-fluid">

        <div class="body">

            <div class="row">
                <div class="col-12">
                    <div class="card">

                        <a class="btn btn-white float-left ml-3 mt-2 mb-1" href="{{ route('admin-manage_category') }}">
                            <i class="material-icons text-muted">arrow_back</i>
                        </a>

                        <div class="card-body mt-4">

                            @if(empty($categoryDetails))
                            <form class="form" name="createCategory" id="createCategory" method="post" action="{{route('admin-store_category')}}" enctype="multipart/form-data">
                                @else
                                <form class="form" name="updateCategory" id="updateCategory" method="post" enctype="multipart/form-data">
                                    @method('PUT')
                                    @endif

                                    @csrf

                                    <input type="hidden" name="category_id" id="category_id">

                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input type="text" id="category_name" name="category_name" class="form-control" value="{{ old('category_name')}}">
                                            <label class="form-label">Category Name</label>
                                        </div>
                                    </div>


                                    <div>
                                        @if(empty($categoryDetails))
                                        <input type="submit" class="btn btn-success" class="add_category" value="Add">
                                        @else
                                        <input type="submit" class="btn btn-success" class="update_category" value="Update">
                                        @endif

                                    </div>
                                </form>
                            </form>

                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    </div>
</section>
@endsection

@push('script')
<script src="{{asset('assets/bundles/libscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->
<script src="{{asset('assets/bundles/vendorscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->
<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.js')}}"></script> <!-- Jquery Validation Plugin Css -->
<script src="{{asset('assets/plugins/jquery-steps/jquery.steps.js')}}"></script> <!-- JQuery Steps Plugin Js -->
<script src="{{asset('assets/bundles/mainscripts.bundle.js')}}"></script><!-- Custom Js -->
<script src="{{asset('assets/js/pages/forms/form-validation.js')}}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
    $('#createCategory,#updateCategory').validate({

        rules: {
            category_name: {
                required: true
            },
        },

        messages: {
            category_name: {
                required: "Please enter category name."
            },
        },

        highlight: function(input) {
            $(input).parents('.form-line').addClass('error');
        },
        unhighlight: function(input) {
            $(input).parents('.form-line').removeClass('error');
        },
        errorPlacement: function(error, element) {
            $(element).parents('.form-group').append(error);
        }
    });

    //WHEN EDIT FORM WILL OPEN
    document.addEventListener('DOMContentLoaded', function() {
        const formInputs = document.querySelectorAll('.form-control');

        formInputs.forEach(function(input) {
            // Check if the input has a predefined value
            if (input.value !== '') {
                input.parentElement.classList.add('focused');
            }

            // Add event listener for input focus
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('focused');
            });

            input.addEventListener('blur', function() {
                // Check if the input value is empty
                if (this.value === '') {
                    this.parentElement.classList.remove('focused');
                }
            });
        });
    });
</script>
@endpush