@extends('admin.layout.app')

@section('main_title', 'Create Performer')
@section('title', 'Create Performer')
@section('sub_title', 'Control Panel')
@push('styles')

@endpush
<!-- start content -->
@section('content')

<!-- start page title -->
<form id="form" action="{{route('performer.store')}}" method="post">
    @csrf
    <div class="row">
            <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <!-- <div class="mb-3 category_div">
                                <label for="product-category" class="form-label">Category <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="category" name="category" rows="10" placeholder="Please enter category"></textarea>
                                <span class="font-13 text-muted">Note: "if you want to add multiple category then enter in new line"</span>
                            </div> -->
                            <div class="mb-3">
                                <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" id="name" name="name" value="" class="form-control" placeholder="Name">
                            </div>
                            <div class="mb-3">
                                <label for="name" class="form-label">External Id </label>
                                <input type="text" id="external_id" name="external_id" value="" class="form-control" placeholder="Name">
                            </div>
                        </div>
                        
                        <!--<div class="col-lg-6">-->
                        <!--    <div class="mb-3">-->
                        <!--        <label for="state" class="form-label">State <span class="text-danger">*</span></label>-->
                        <!--        <input type="text" id="state" name="state" value="" class="form-control" placeholder="State">-->
                        <!--    </div>-->
                            
                        <!--    <div class="mb-3">-->
                        <!--        <label for="country" class="form-label">Country <span class="text-danger">*</span></label>-->
                        <!--        <input type="text" id="country" name="country" value="" class="form-control" placeholder="country">-->
                        <!--    </div>-->
                        <!--</div>-->
                    </div> <!-- end card -->
                </div> <!-- end col -->
                <div class="row loader" style="display:none;">
                    <div class="col-12">
                        <div class="text-center mb-3">
                            <div class="spinner-border avatar-lg text-primary m-2" role="status"></div>
                        </div><!-- end col -->
                    </div><!-- end col -->
                </div><!--end row-->

                <div class="row">
                    <div class="col-12">
                        <div class="text-center mb-3">
                            <button type="submit" id="save_btn" class="btn btn-success waves-effect submit waves-light m-1"><i class="fe-check-circle me-1"></i> Save</button>
                            <a href="venue_listing.php" type="button" class="btn btn-danger waves-effect waves-light m-1"><i class="fe-x me-1"></i> Cancel</a>
                        </div>
                    </div> <!-- end col -->
                </div>
            </div> <!-- end card -->
        </div> <!-- end col -->
    </div>
    <!-- end row -->
</form>
<!-- end row -->
<!-- end row -->
<!-- end content -->
@endsection
@push('scripts')
<script>
    $(document).on('submit','form',function(e){
    e.preventDefault();
    var me = $(this);
    $(".text-danger").remove();
    var fd=new FormData($(this)[0]);
    $.ajax({
        url: me.attr('action'),
        type: me.attr('method'),
        data: fd,
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        dataType: 'json',
        contentType: false,
        processData: false,
        beforeSend: function() {
        // setting a timeout
        $(".loader").show();

        $('.submit').prop('disabled', true);
        },
        success: function(response){
            $(".loader").hide();
            $('.submit').prop('disabled', false);
            if(response.success == true){
                Swal.fire("Done",response.msg,"success");
            }
            if(response.success == false){
                Swal.fire("Error",response.msg,'error');
            }
            me[0].reset();
        },
        error:function(response){
            $(".loader").hide();
            $('.submit').prop('disabled', false);
            $.each(response.responseJSON.errors, function(key, value) {
            var element = $('#' + key);
            element.closest('div.form-group')
            .removeClass('.has-error')
            .addClass(value.length > 0 ? 'has-error':'has-success' )
            .find('.text-danger')
            .remove();
            element.after('<p class="text text-danger">'+value+'</p>');
            });
        }
    });
})
</script>
@endpush