@extends('dashboard.layouts.master')
@section('title', 'State Management| Admin Panel')
@include('sweetalert::alert')
@push('after-styles')
    @if (Helper::checkPermission('state', '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('state', '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 State</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> / <a
                        href="{{ route('state') }}">State Management</a>/
                    <span>Create State</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('state') }}">
                                <i class="material-icons md-18">×</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="loader"></div>

        <div class="box-body">
            {{ Form::open(['route' => ['state.store'], '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">Country<span class="valid_field">*</span></label>
                            <select name="country_id" id="country_id" class="form-control"
                            value="{{ old('country') }}">
                            <option value="">Select Country</option>
                            @foreach ($country as $key => $value)
                            <option value="{{ $value->id }}"
                                {{ old('country' ?: '') == $value->id ? 'selected' : '' }}>
                                {{ ucfirst($value->name) }}
                            </option>
                            @endforeach
                        </select>
                        </div>

                    </div>

                    <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('state') }}" 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">
function isNumberKey(evt) {
    var charCode = evt.which ? evt.which : evt.keyCode;

    if (charCode >= 48 && charCode <= 57) {
        return true;
    }
    return false;
}

var test = $("#storeForm").validate({
    rules: {
        name: {
            required: true,
            maxlength: 30,
            remote: {
                url: "{{ route('checkStateExist') }}",
                type: "POST",
                data: {
                    name: function() {
                        return $("#name").val();
                    },
                    _token: function() {
                        return $('meta[name="csrf-token"]').attr('content');
                    }
                }

            },
        },
        short_name: {
            required: true,
            maxlength: 30,
        },
        country_id: {
            required: true,
        }


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

        },
        country_id: {
            required: "Select Country",
        },


    },
    submitHandler: function(form) {


        var form_data = new FormData($('#storeForm')[0]);
        var action_url = "{{ route('state.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 ?? 'state saved successfully',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "{{ route('state') }}";
                        }
                    });
                }
            },
            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