@extends('admin.layout.app')

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

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

<!-- start page title -->
<form id="form" action="{{route('venue.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="city" class="form-label">City <span class="text-danger">*</span></label>
                                <input type="text" id="city" name="city" value="" class="form-control" placeholder="City">
                            </div>
                            <!--<div class="mb-3">-->
                            <!--    <label for="postcode" class="form-label">postcode <span class="text-danger">*</span></label>-->
                            <!--    <input type="text" id="postcode" name="postcode" value="" class="form-control" placeholder="postcode">-->
                            <!--</div>-->
                            
                            <!--<div class="mb-3">-->
                            <!--    <label for="address" class="form-label">Address <span class="text-danger">*</span></label>-->
                            <!--    <textarea class="form-control" id="address" name="address" rows="3" placeholder="Please enter Address"></textarea>-->
                            <!--</div>-->
                        </div>
                        
                        <div class="col-lg-6">
                            <!-- <div class="mb-3 section_div">
                                <label for="product-section" class="form-label">Section <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="section" name="section" rows="10" placeholder="Please enter section"></textarea>
                                <span class="font-13 text-muted">Note: "if you want to add multiple section then enter in new line"</span>
                            </div> -->
                            

                            <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);
            Swal.fire("Done",response.msg,"success");
            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