@extends('template.master')

@section('title', 'Add/Edit Category')

@section('content')
<div class=" mt-4">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card card-secondary">
                <div class="card-header" style="background: #000000;color: #f0ac63 !important;">
                    <h4 class="card-title" style="color: #f0ac63 !important;"><strong>Add/Edit Category</strong></h4>
                    <a href="{{ route('category.list') }}" class="btn float-right" style="background: #f0ac63;color: #000000 !important;">Back</a>
                </div>
                <div class="card-body">
                    <form class="form" id="taxo-form" action="{{ route('category.add') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" class="form-control" id="category_id" name="category_id" value="{{ @$category->category_id }}">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="exampleInputName1" class="mt-2">Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="category_name" name="category_name" placeholder="Name" value="{{ @$category->category_name }}">
                                    @if($errors->has('category_name'))
                                        <div class="error">{{ $errors->first('category_name') }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="category_status" class="mt-2">Status</label>
                                <div class="form-group clearfix">
                                    <div class="icheck-success d-inline">
                                        <input type="radio" name="category_status" value="1" id="radioSuccess1" {{ (isset($category->category_status)) && @$category->category_status==1 || request()->route('id')==0? "checked" : "" }}>
                                        <label for="radioSuccess1">
                                            Active
                                        </label>
                                    </div>
                                    <div class="icheck-danger d-inline">
                                        <input type="radio" name="category_status" value="0" id="radioDanger2" {{ (isset($category->category_status)) && @$category->category_status==0? "checked" : "" }}>
                                        <label for="radioDanger2">
                                            Inactive
                                        </label>
                                    </div>
                                </div>
                                @if($errors->has('category_status'))
                                    <div class="error">{{ $errors->first('category_status') }}</div>
                                @endif
                            </div>
                        </div>
                        <button type="submit" class="btn mr-2 mt-5" id="submitTaxo" style="background: #000000;color: #f0ac63 !important;">Submit</button>
                        <a href="{{ route('category.list') }}" class="btn btn-light mt-5">Cancel</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('child-scripts')
<script>
    $(document).ready(function() {
        $("#taxo-form").validate({
            errorElement: "span",
            errorClass: "error",
            rules: {
                category_name: {
                    required: true,
                    maxlength: 255
                }
            },
            messages: {
                category_name: {
                    required: 'Category name required.',
                }
            },
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            }
        });
    });
</script>
@endpush