@extends('layouts.app', ['pageSlug' => 'customerSetup'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>RelationShip</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            Categories
        </div>
    </div>
    <br>
    <div class="col-lg-12">
        <h3>Category Type</h3>
        <div class="col-lg-4 panel panel-default">
            <div class="panel-body p-3">        
                <h5>Add Category Type</h5>
                <form id="save_category_type_form" class="form-horizontal" role="form" action="" method="POST">
                    @csrf
                    <input type="hidden" name="index" value="type">
                    <fieldset>
                    
                    <div class="form-group">
                        <label class="control-label col-lg-4 col-md-3">
                            Cash Category
                        </label>

                        <div class="col-lg-8 col-md-9">
                            <select name="cash_category" id="cash_category" class="select2 form-control">
                                <option value="in">Cash In</option>
                                <option value="out">Cash OUT</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4 col-md-3">
                            Type Name
                        </label>

                        <div class="col-lg-8 col-md-9">
                            <input class="form-control" name="category_type" id="category_type">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="col-lg-12 col-md-12">
                            <input type="button" value="Save" class="btn btn-primary btn-sm pull-right" id="save_category_type_btn">
                        </div>
                    </div>

                </fieldset>

                </form>
            </div>
        </div>
        <div class="col-lg-8 panel-default">
            <div class="panel-body p-3">
                <h5>Category Table</h5>
                <div id="category_type_db">
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <h3>Payment Method</h3>
        <div class="col-lg-4 panel panel-default">
            <div class="panel-body p-3">        
                <h5>Add PaymentMethod</h5>
                <form id="add_paymethod_form" class="form-horizontal" role="form" action="" method="POST">
                    @csrf
                    <input type="hidden" name="index" value="paymethod">
                    <fieldset>

                    <div class="form-group">
                        <label class="control-label col-lg-4 col-md-3">
                            Paymethod Name
                        </label>

                        <div class="col-lg-8 col-md-9">
                            <input type="text" name="paymethod" id="paymethod" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-lg-12 col-md-12">
                            <input type="button" value="Save" class="btn btn-primary btn-sm pull-right" id="save_paymethod_btn">
                        </div>
                    </div>

                </fieldset>

                </form>
            </div>
        </div>
        <div class="col-lg-8 panel-default">
            <div class="panel-body p-3">
                <h5>Paymethod Table</h5>
                <div id="paymethod_db">
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')

<style>
</style>
    <script>

            $(function() {
                $('.select2').select2();
                getCategories('type');
                getCategories('paymethod');             
            
            });

            function getCategories(category){

                let uri = '{{route('customer.categories.get')}}';

                axios.post(uri, {index:category}).then(res => {
                    var html = [];
                    if (category == 'type') {
                        $('#category_type_db').html(res.data);
                    } else if (category == 'paymethod') {
                        $('#paymethod_db').html(res.data);
                    }
                });
            }

            $('#save_paymethod_btn').click(function(){
                let data = $('#add_paymethod_form').serialize();
                let uri = '{{route('customer.categories.store')}}';
                axios.post(uri, data).then(res => {
                    toastr.success('successfully updated');
                    getCategories('paymethod');
                });
            });

            $('#save_category_type_btn').click(function(){
                let data = $('#save_category_type_form').serialize();
                let uri = '{{route('customer.categories.store')}}';
                axios.post(uri, data).then(res => {
                    toastr.success('successfully updated');
                    getCategories('type');
                });
            })

            function confirmDelete(id, category) {
                var result = confirm( "Do you want to delete this?" );
                if (result) {
                    let uri = '{{route('customer.categories.delete')}}';
                    let data = {
                        id: id,
                        index: category
                    };
                    axios.post(uri, data).then(res => {
                        toastr.success('successfully deleted');
                        getCategories(category);
                    });
                }
            }
    </script>
@endpush