@extends('dashboard.layouts.master')
@section('title', 'Category Management| Admin Panel')
@include('sweetalert::alert')
@push('after-styles')
    @if (Helper::checkPermission('categories', 'create'))
        <style type="text/css">
            #blah {
                height: 50% !important;
                width: 25% !important;
            }

            #blah1 {
                height: 50% !important;
                width: 25% !important;
            }

            input[type="time"] {
                cursor: pointer;
            }

            .product-single-variant {
                margin: 30px 0 10px 0;
                padding: 20px 0px 0 0;
            }

            .product-single-variant:not(:first-child) {
                border-top: 1px solid gray;
            }

            .error {
                text-align: left;
                display: block;
                color: red;
            }

            .newColoradded .form-check-input {
                margin-left: 0;
            }
        </style>
        <link href="{{ asset('assets/dashboard/js/iconpicker/fontawesome-iconpicker.min.css') }}" rel="stylesheet">
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />

        <style type="text/css">
            .error {
                color: red;
                margin-left: 5px;
            }
        </style>
    @endif
@endpush

@section('content')
    @if (Helper::checkPermission('categories', 'create'))
        <div class="padding edit-package">
            <div class="box">
                <div class="box-header m-b-2">
                    <div class="box-header-left">
                        <h3 class="d-block">Create Category</h3>
                        <small class="d-inline-block">
                            <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> / <a
                                href="{{ route('category') }}">Category Management</a>/
                            <span>Create Category</span>
                        </small>
                    </div>
                    <div class="box-header-right">
                        <div class="box-tool">
                            <ul class="nav">
                                <li class="nav-item inline">
                                    <a class="nav-link" href="{{ route('category') }}">
                                        <i class="material-icons md-18">×</i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="loader"></div>
                <div class="box-body">
                    {{ Form::open(['method' => 'POST', 'files' => true, 'enctype' => 'multipart/form-data', 'id' => 'storeForm']) }}
                    <div class="personal_informations">
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="form-control-label">Name<span class="valid_field">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control" maxlength="30"
                                        placeholder="Name" value="{{ old('name') }}">

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12">
                                <div class="form-group m-t-md">
                                    <button type="submit" class="solid-button m-r-1" id="submitDetail">
                                        {!! __('backend.add') !!}</button>
                                    <a href="{{ route('category') }}" class="border-btn"> {!! __('backend.cancel') !!} </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    @else
        <input type="hidden" value="{{ route('adminHome') }}" id="redirect_url">
        <script type="text/javascript">
            var redirect_url = $('#redirect_url').val();
            window.location.replace(redirect_url);
        </script>
    @endif

@push('after-scripts')
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
    <script src="{{ asset('assets/dashboard/js/iconpicker/fontawesome-iconpicker.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/summernote/dist/summernote.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

    <script type="text/javascript">
        // english  speacial character validation
        $.validator.addMethod(
            "noSpecialChars",
            function(value, element) {
                return this.optional(element) || /^[a-zA-Z\s]+$/.test(value);
            },
            "Special characters are not allowed."
        );
        var test = $("#storeForm").validate({
            rules: {
                name: {
                    required: true,
                    maxlength: 30,
                    noSpecialChars: true,
                    remote: {
                        url: "{{ route('checkCategoryExist') }}",
                        type: "POST",
                        data: {
                            name: function() {
                                return $("#name").val();
                            },
                            _token: function() {
                                return $('meta[name="csrf-token"]').attr('content');
                            }
                        }

                    },
                },

            },
            messages: {
                name: {
                    required: "Name field is required.",
                    maxlength: "Name field cannot exceed {0} characters.",
                    remote: "This name is already registered"
                },

            },
            submitHandler: function(form) {
                var form_data = new FormData($('#storeForm')[0]);
                var action_url = "{{ route('category.store') }}";
                var csrf = "{{ csrf_token() }}";


                $.ajax({
                    url: action_url,
                    data: form_data,
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    },
                    processData: false,
                    contentType: false,
                    type: "POST",
                    dataType: 'json',
                    beforeSend: function() {
                        $('.loader').css("visibility", "visible");
                    },
                    success: function(data) {
                        $(".loader").fadeOut(function() {
                            $(this).css("visibility", "hidden");
                        });
                        if (data.success) {

                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: data.msg ?? 'Category saved successfully',
                                confirmButtonText: 'OK'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    window.location.href = "{{ route('category') }}";
                                }
                            });
                        }
                    },
                    error: function() {
                        $(".loader").fadeOut(function() {
                            $(this).css("visibility", "hidden");
                        });
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Something went wrong. Please try again.'
                        });
                    }

                });
            }
        });
    </script>
@endpush
@endsection