@extends('layouts.master')
@section('title', 'Event Categories')

@section('content')
<section class="main_section">
    <div class="scroll">
        <div id="formSection" class="form_section">
            <form method="POST" action="{{ route('event.category.store') }}" class="event_category_form" id="eventCategoryForm">
                <div class="card mb-2">
                    <div class="card-header">
                        <h3 class="w-50 float-start card-title m-0">{{ __('Create Event Category') }}</h3>
                    </div>
                    <div class="card-body">
                        @csrf
                        <div class="row">
                            <div class="col-md-12">
                                <input type="hidden" id="eventCategoryId" name="id">
                                <div class="row">
                                    <div class="form-group col-12 col-md-12 mb-2">
                                        <div class="relative z-0 w-full mb-1 group">
                                        <input type="text" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 title-validation" name="name" id="name" placeholder="">
                                        <label for="name" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Name') }} <span class="text-danger">*</span></label>
                                        </div>
                                    </div>

                                    <div class="form-group col-12 col-md-12 mb-2">
                                        <div class="relative z-0 w-full mb-1 group">
                                        <input type="text" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 title-validation" name="slug" id="slug" placeholder="">
                                        <label for="slug" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Slug') }} <span class="text-danger">*</span></label>
                                        </div>
                                    </div>

                                    <div class="form-group col-12 col-md-12 mb-2">
                                        <div class="relative z-0 w-full group">
                                            <textarea name="description" id="description" rows="5" class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 form-control"></textarea>
                                            <label for="description" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Description') }} </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button class="btn btn-save btn-primary btn-save-record" type="submit">{!! renderIconHtml('save') !!}{{ __('Save') }}</button>
                        <button class="btn btn-save btn-primary btn-update-record" type="submit">{!! renderIconHtml('save') !!}{{ __('Update') }}</button>
                        <a href="javascript:void(0)" class="btn btn-secondary btn-cancel btnNewRecord">{!! renderIconHtml('cancel') !!}{{ __('Cancel') }}</a>
                    </div>
                </div>
            </form>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <!-- Search filter -->
                    <div id="custom_toolbar_user" class="select">
                        <a data-toggle="tooltip" data-placement="top" title="Add New"
                            class="btn btn-secondary text-white showArchive btnNewRecord" id="btnNewRecord"
                            href="javascript:void(0);">{!! renderIconHtml('add') !!}{{ __('Add New') }}
                        </a>
                    </a>
                    </div>
                    <table class="table table-bordered" id="bstable" data-unique-id="counter" table-for="event_category"
                        data-toolbar="#custom_toolbar_user" data-toggle="bstable" data-show-export="false"
                           data-show-button-text="true"
                        data-show-columns="true" data-show-toggle="false" data-show-columns-toggle-all="false"
                        data-ajax="ajaxRequestEventCategories" data-side-pagination="server" data-pagination="true"
                        data-total-field="count" data-sortable="true" data-data-field="items" data-filter-control="true"
                        data-icons="icons" data-icons-prefix="bi" data-show-search-clear-button="true" data-loading-template="DataTaleLoadingTemplate" data-search-on-enter-key="true">
                        <thead>
                            <tr>
                                <th data-field="counter" data-sortable="false">{{ __('#') }}</th>
                                <th data-field="name" data-align="left" data-filter-control="input" data-sortable="true" data-filter-control-placeholder="Name">{{ __('Name') }}</th>
                                <th data-field="slug" data-align="left" data-filter-control="input" data-sortable="true" data-filter-control-placeholder="Slug">{{ __('Slug') }}</th>
                                <th data-field="description" data-align="left" data-filter-control="input" data-sortable="true" data-filter-control-placeholder="Description">{{ __('Description') }}</th>
                                <th data-field="created_at" data-filter-control="input" class="created_at" data-sortable="true" data-filter-control-placeholder="Created At">{{ __('Created At') }} </th>
                                <th data-field="action" data-align="left" data-sortable="false">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- End Table Section -->
        <!-- END OF CONTENT AREA -->
    </div>
    <input type="hidden" value="{{ route('event.category.serverside') }}" id="getAllEventCategoryList">

</section>
@endsection
@push('scripts')
    <script src="{{ asset('frontend/js/page-js/event-category.js') }}"></script>
@endpush