@extends('app')
@section('content')
<div class="content-page">
    <div class="content">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
                            <li class="breadcrumb-item active">Form Wizard</li>
                        </ol>
                    </div>
                    <h4 class="page-title">Form Wizard</h4>
                </div>
            </div>
        </div>
        <!-- end page title -->
        {{-- Start Category --}}
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <button type="button" class="btn btn-danger mb-2" onclick="$('#category-modal').toggleClass('d-block show');
                                $('body').toggleClass('modal-open');"><i class="mdi mdi-plus-circle me-2"></i> {{__('Add New Category')}}</button>
                            </div>
                        </div>
                        <table class="table table-bordered table-centered mb-0">
                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Category</th>
                                    <th>Created At</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td class="table-user">
                                        Risa D. Pearson
                                    </td>
                                    <td>July 24, 1950</td>
                                    <td>
                                        <div>
                                            <input type="checkbox" id="switch29" checked data-switch="success" />
                                            <label for="switch29" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                        </div>
                                    </td>
                                    <td class="table-action">
                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
                                        <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- End CAtegory --}}



        <!-- end modal-->
        <!-- Popup Add Country end -->
    </div> <!-- end col -->

    <div class=" modal fade task-modal-content" id="category-modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form class="needs-validation" name="event-form" id="form-event" novalidate method="POST">
                     <input type="text" hidden value="{{decrypt(session()->get('userroleidentity'))}}" id="authName" name="auth_name">
                    <div class="modal-header py-3 px-4 border-bottom-0">
                        <h5 class="modal-title" id="modal-title">
                            {{__('Add Category')}}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="$('#category-modal').toggleClass('d-block show');
                        $('body').toggleClass('modal-open');"></button>
                    </div>
                    <div class="modal-body px-4 pb-4 pt-0">
                        <div class="row">
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="categoryName" class="control-label form-label">{{__('Category Name')}}</label>
                                    <input class="form-control" placeholder="Insert Event Name" type="text" name="categoryName" id="categoryName" required />
                                    <div class="invalid-feedback">Please provide a valid event name</div>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-6">
                                {{-- <button type="button" class="btn btn-danger" id="btn-delete-event">Delete</button> --}}
                            </div>
                            <div class="col-6 text-end">
                                <button type="button" class="btn btn-light me-1" data-bs-dismiss="modal" onclick="$('#category-modal').toggleClass('d-block show');
                                $('body').toggleClass('modal-open');">Close</button>
                                <button type="submit" class="btn btn-success" id="saveBtn" >Save</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div> <!-- end modal-content-->
        </div> <!-- end modal dialog-->
    </div>
    @if(isset($categoryData))
    <div class="modal fade show d-block show" id="country-modal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form class="needs-validation" name="event-form" id="form-event" novalidate method="GET" action="#">
                        @csrf
                        @method('get')
                        <!-- <input type="text" hidden value="{{decrypt(session()->get('roleIdentity'))}}" id="authName"> -->
                        <div class="modal-header py-3 px-4 border-bottom-0">
                            <h5 class="modal-title" id="modal-title">
                                Update Category
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="modelAction()"></button>
                        </div>
                        <div class="modal-body px-4 pb-4 pt-0">
                            <div class="row">
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label class="control-label form-label">{{asset('Country Name')}}:</label>
                                        <input class="form-control" placeholder="Insert Event Name" type="text" name="countryName" id="countryName" required value="{{$countryData->country}}"/>
                                        <div class="invalid-feedback">Please provide a valid event name</div>
                                    </div>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <button type="button" class="btn btn-danger" id="btn-delete-event">{{asset('Delete')}}</button>
                                </div>
                                <div class="col-6 text-end">
                                    <button type="button" class="btn btn-light me-1" data-bs-dismiss="modal" onclick="modelAction()">{{asset('Close')}}</button>
                                    <button type="submit" class="btn btn-success" id="" >{{asset('Save')}}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div> <!-- end modal-content-->
            </div> <!-- end modal dialog-->
        </div>
        @endif
        </div>
    </div>
</div>

@endsection


@push('scripts')

<script>
    $(document).ready(function () {

        function modelAction(country=false) {
        $('#category-modal').toggleClass('d-block show');
        $('body').toggleClass('modal-open');
        console.log(country);
    }

    $('form').on('submit',(e) => {
        e.preventDefault();
        let categoryName = $('#categoryName').val();
        let authName = $('#authName').val();
        const data = {
            categoryName,
        }
        // console.log(decrypt(session()->get('roleIdentity')));
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="_token"]').attr('content')
            }
        });


        $.post({
            // autoFocus:true,
                url: "{{route('admin.categories.store')}}",
                dataType: 'json',
                data,
                success: function(res){
                    console.log(res);
                    // var result;
                    // result = [{label: 'No Records Found ',value: ''}];
                    // if (res.length) {
                    //     result = $.map(res, function(el){
                    //         return {
                    //             label: el.bar_code+'-'+el.product_name +'-'+el.price+' ('+el.qty+')',
                    //             value: '',
                    //             id: el.id,
                    //             item_name: el.product_name
                    //         };
                    //     });
                    // }

                    // cb(result);
                },error: function(e){
                    console.log(e);
                }
            });
    })
});


</script>


@endpush