@extends("admin.template.layout")

@section('content')
        <div class="container-xxl flex-grow-1 container-p-y">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{$mode ?? $page_heading}}</h5>   
                    <a href="{{route('venues.types.import')}}" class="main-btn primary-btn btn-hover btn-sm"><i class='bx bx-plus'></i> Import</a>                                     
                </div>
                <div class="row">
                    <div class="col-md-7">
                        <div class="card-body">
                            <div class="card-datatable text-nowrap">
                                <div class="table-responsive">
                                <table class="datatables-ajax table table table-condensed" data-role="ui-datatable" data-src="{{route('venues.getVenueTypes')}}" >
                                    <thead>
                                        <tr>
                                            <th class="pt-0" data-colname="id">#</th>
                                            <th class="pt-0" data-searchable="true" data-colname="name">Name</th>
                                            <th class="pt-0" data-colname="created_at">Created on</th>
                                            <th class="pt-0" data-colname="action">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                </div>
                            </div>
                        </div>                        
                    </div>
                    <div class="col-md-5">
                        <div class="card-body">
                            <h3>Create Venue Type</h3>
                            @if(session('error'))
                                <div class="alert alert-danger">
                                    {{ session('error') }}
                                </div>
                            @endif 
                            @if(session('success'))
                                <div class="alert alert-success">
                                    {{ session('success') }}
                                </div>
                            @endif                             
                            <form id="admin_form" action="{{route('venues.venue_types.create')}}" method="post">
                                @csrf
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label for="name" class="form-label">Name <span class="text text-danger">*</span></label>
                                        <input type="text" name="name" class="form-control">
                                    </div>
                                </div>
                                <div class="row mb-3" style="float:right">
                                    <button class="main-btn primary-btn btn-hover btn-smr" type="submit">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@stop
@section('script')
<script>
  jQuery(document).ready(function(){
    $('.form-control').on('input', function () {
        $(this).siblings('.error').hide();
    });
      App.initTreeView();
        let form_in_progress = 0;

        $('body').off('submit', '#admin_form');
        $('body').on('submit', '#admin_form', function (e) {
            e.preventDefault();
            var validation = $.Deferred();
            var $form = $(this);
            var formData = new FormData(this);

            $form.validate({
                rules: {},
                errorElement: 'div',
                errorPlacement: function (error, element) {
                    element.addClass('is-invalid');
                    error.addClass('error');
                    error.insertAfter(element);
                }
            });

            // Bind extra rules. This must be called after .validate()
            App.setJQueryValidationRules('#admin_form');

            if ($form.valid()) {
                validation.resolve();
            } else {
                var error = $form.find('.is-invalid').eq(0);
                $('html, body').animate({
                    scrollTop: (error.offset().top - 100),
                }, 500);
                validation.reject();
            }

            validation.done(function () {
                $form.find('.is-invalid').removeClass('is-invalid');
                $form.find('div.error').remove();


                App.button_loading(true);


                form_in_progress = 1;
                $.ajax({
                    type: "POST",
                    enctype: 'multipart/form-data',
                    url: $form.attr('action'),
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    timeout: 600000,
                    dataType: 'html',
                    success: function (res) {
                        res = JSON.parse(res);
                        console.log(res['status']);
                        form_in_progress = 0;
                        App.button_loading(false);
                        if (res['status'] == 0) {
                            if (typeof res['errors'] !== 'undefined') {
                                var error_def = $.Deferred();
                                var error_index = 0;
                                jQuery.each(res['errors'], function (e_field, e_message) {
                                    if (e_message != '') {
                                        var $input = $('[name="' + e_field + '"]').eq(0);
                                        $input.addClass('is-invalid');
                                        var $errorDiv = $('<div class="error">' + e_message + '</div>');
                                        if ($input.hasClass('select2')) {
                                            $input.next('.select2-container').after($errorDiv);
                                        } else {
                                            $errorDiv.insertAfter($input);
                                        }
                                        if (error_index == 0) {
                                            error_def.resolve();
                                        }
                                        error_index++;
                                    }
                                });
                                error_def.done(function () {
                                    var error = $form.find('.is-invalid').eq(0);
                                    $('html, body').animate({
                                        scrollTop: (error.offset().top - 100),
                                    }, 500);
                                });

                            } else {
                                var m = res['message'] || 'Unable to save variation. Please try again later.';
                                App.alert(m, 'Oops!', 'error');
                            }
                        } else {
                            App.alert(res['message'] || 'Record saved successfully', 'Success!', 'success');
                            setTimeout(function () {
                                window.location.href = res['oData']['redirect'];
                            }, 2500);

                        }

                    },
                    error: function (e) {
                        form_in_progress = 0;
                        App.button_loading(false);
                        console.log(e);
                        App.alert("Network error please try again", 'Oops!', 'error');
                    }
                });
            });
        });
  });  
</script>
@stop