@extends('layouts.header')

@section('content')

<h2 class="page-title my-4">Add My Service Request</h2>
	 
     <div class="row">
         <div class="col-md-8">
             <P><a onClick="goBack();" class="text-primary mb-3" style="cursor:pointer;"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Back</a></P>
             <div class="card form-style bg-light p-md-5 p-3 ">
                
                <form id="myServiceRequestForm" method="POST" action="javascript:void(0)">
                 @csrf

                 <div class="row">
                     
                     <div class="col-md-12 mb-3">
                         <label>Title<span class="text-danger">*</span></label>
                         <input type="text" class="form-control" name="title" id="title" value="{{ old('title')}}" placeholder="Enter title">
                     </div>

                     <div class="col-md-12 mb-3">
                         <label>Type<span class="text-danger">*</span></label>
                         <div class="selectParent mr-3">
                             <select class="select-option" name="type" id="type">
                                 <option value="" selected="">Select Type</option>
                                 @foreach($responsibilities as $resp)
                                    <option value="{{ $resp->id }}">{{ $resp->responsibility}}</option>
                                 @endforeach
                             </select>
                         </div>
                     </div>

                     <!-- <div class="col-lg-12 mb-3">
                        <label>Attachment</label>
                        <div class="input-group mb-3">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" name="attachment" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
                            <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                        </div>
                        </div>
                    </div> -->
                      
                     <div class="col-12 text- ">
                         <button type="button" class="btn btn-outline-primary mr-3" onClick="goBack();">Cancel</button>
                         <button type="submit" class="btn btn-primary" id="btnAdd" onclick="submitForm()">Save</button>
                     </div>
                 </div>
                 
                 </form>

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

@endsection

@section('append')
<script src="/assets/js/jquery.dataTables.min.js"></script>
	<script src="/assets/js/dataTables.bootstrap4.min.js"></script>
<script>
       $(".mySelect").select2({
            placeholder: "select users",
            allowClear: false,
       });


function submitForm(){

    $("#myServiceRequestForm").validate({
    errorElement:'div',
    rules: {
        title:{
            required: true,
        },
        type:{
            required: true,
        }
    
    },

    messages: {
        title:{
            required: "Please enter title",
        },
        type:{
            required: "Please select type",
        }
    
    },

    errorPlacement: function(error, element) {
        if (element.hasClass('select-option')) {
            error.insertAfter(element.parent());
            }
            else{
            error.appendTo( element.parent() );
            }
    },
    submitHandler: function(form) {
        //form.submit();
        
        $('#btnAdd').attr('disabled',true);

        var form = $('#myServiceRequestForm')[0];
        var formData = new FormData(form);
        $.ajax({
            url: '/add/my-service-request' ,
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function(){
                $('#btnAdd').addClass('btn-disabled');
                $('#btnAdd').html("<span class='spinner-border spinner-border' id='loader' style='width:20px;height:20px;'></span> Please wait...");
            },
            success: function( data ) {
            if(data.success != undefined){
                toastr.success(data.success); 
                $('#myServiceRequestForm')[0].reset();
                setTimeout(() => {
                    window.location.href="/manage/my-service-request";
                }, 2000); 
                }else{
                toastr.error(data.error); 
                }
                
            },
            complete: function(){
            setTimeout(function(){
                $('#btnAdd').removeClass('btn-disabled');
                $('#btnAdd').html('Save');
                },1000);
            },
            error: function(error){
            toastr.error("Something went wrong !");
            },
        });

    },

    });

}


</script>

@endsection