@extends('admin.layout.layout')

@section('title') Create State @endsection

@section('content')

<div class="page-content">
                    <div class="container-fluid">

                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                    <h4 class="mb-sm-0 font-size-18">Add State</h4>

                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                                            <li class="breadcrumb-item active">Add State</li>
                                        </ol>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- end page title -->
						
						<div class="row">
                            <div class="col-xl-6">
                                <div class="card">
                                    <div class="card-body">
                                       
                                       <form id="formToProcess" method="POST" action="{{ route('admin.states.store') }}">
    @csrf
                                          <div class="mb-3">
        <label for="name" class="form-label">Name</label>
        <input type="text" class="form-control" id="name" name="name" 
               placeholder="Enter Name">
        <span class="text-danger error-message" id="name-error"></span>
    </div>
	
	 <div class="mb-3">
        <label for="slug" class="form-label">Slug</label>
        <input type="text" class="form-control" id="slug" name="slug" 
               placeholder="Enter Slug" onkeypress="return /[0-9a-zA-Z_-]/i.test(event.key)">
        <span class="text-danger error-message" id="name-error"></span>
    </div>
											
											 <div class="mb-3">
        <label for="status" class="form-label">Select Status</label>
        <select id="status" class="form-select" name="status">
            <option value="">Choose...</option>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
        </select>
        <span class="text-danger error-message" id="status-error"></span>
    </div>

                                           
										   <div>
                                                <button id="submitButton" type="submit" class="btn btn-primary w-md">Submit</button>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- end card body -->
                                </div>
                                <!-- end card -->
                            </div>
                            <!-- end col -->

 </div>
                        
                        
                    </div> <!-- container-fluid -->
                </div>

@endsection
@section('script')
<script>
$(document).ready(function() {
    $('#formToProcess').validate({
        rules: {
            name: {
                required: true,
                maxlength: 191
            },
			slug: {
                required: true,
                maxlength: 191
            },
            status: {
                required: true,
            }
        },
        messages: {
            name: {
                required: "Please enter exam name",
                maxlength: "exam name should not exceed 191 characters"
            },
			slug: {
                required: "Please enter exam slug",
                maxlength: "exam slug should not exceed 191 characters"
            },
            status: "Please select a valid status"
        },
        errorPlacement: function(error, element) {
            const errorContainer = $('#' + element.attr('id') + '-error');
            if (errorContainer.length) {
                error.appendTo(errorContainer);
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            let formData = new FormData(form);
			let submitButton = $('#submitButton');
			submitButton.prop('disabled', true).text('Loading Request...');

            $.ajax({
                url: $(form).attr('action'),
                method: $(form).attr('method'),
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $('.error-message').html('');
                },
                success: function(response) {
                    if (!response.error) {
                        toastr.success(response.message, 'Success');
                        $('#formToProcess')[0].reset(); 
						setTimeout(function() {
						window.location.href = "{{ route('admin.states.index') }}";
					}, 1500);
                    } else {
                        toastr.error(response.message, 'Error');
                    }
                },
                error: function(xhr) {
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        toastr.error(xhr.responseJSON.message, 'Server Error');
                    }
                    
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(key, value) {
                            $('#' + key + '-error').html(value[0]);
                        });
                    }
                },
                complete: function() {
                    // Re-enable the button and restore text
                    submitButton.prop('disabled', false).text('Submit');
                }
            });
        }
    });
});
</script>
@endsection