@extends('layouts.admin')

@section('ext_css')
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.1/css/bootstrap-multiselect.css" />
    <style type="text/css">
        .btn-group {
            width: 100%;
        }

        button.multiselect.dropdown-toggle.custom-select.text-center {
            width: 100%;
            padding: 5px;
        }

        button.dropdown-item.multiselect-all {
            width: 100%;
        }

        button.multiselect-option.dropdown-item {
            width: 100%;
        }

        span.form-check {
            float: left;
        }

        .expand-header {
            color: black;
            font-size: 14px;
            font-weight: bold;
        }
        .l3 .expander {
            display: none;
        }
    </style>
    <link rel="stylesheet" href="{{asset('css/tabelizer.min.css')}}" />
@endsection

@section('content')
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li class="active"> Billing Configure </li>
        </ol>
    </div>

    @if (session('success'))
        <div class="alert alert-success alert-dismissable">
            <button class="close" data-dismiss="alert"><i class="fa fa-times-circle"></i></button>
            <strong>Success !</strong>
            {!! Session::get('success') !!}
        </div>
    @elseif(session('failure'))
        <div class="alert alert-danger alert-dismissable">
            <button class="close" data-dismiss="alert"><i class="fa fa-times-circle"></i></button>
            <strong>Failed !</strong> {{ Session::get('failure') }}
        </div>
    @endif

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"> Billing Configure </h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12 text-right">
                    <a href="{{ route('admin.billing.config.create') }}" class="btn btn-success">ADD NEW <i
                            class="fa fa-plus"></i></a>
                    <a href="{{ route('admin.billing.config.export') }}" class="btn btn-primary">EXPORT</a>
                </div>
                <form id="billing-form" action="" method="get" class="form-horizontal form-padding">
                    <input type="hidden" name="page" id="page">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="form-group">
                            <div class="col-md-3">
                                <label class="control-label" for="category" style="margin-bottom: 10px;">Category </label>
                                <select name="category[]" id="category" class="form-control" multiple>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}"
                                            @if (in_array($category->id, request()->category ?? [])) selected @endif>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                <small class="help-block text-danger">{{ $errors->first('category') }}</small>
                            </div>

                            <div class="col-md-3">
                                <label class="control-label" for="sub_category" style="margin-bottom: 10px;">Sub Category
                                </label>
                                <select name="sub_category[]" id="sub_category" class="form-control">
                                    <option value="" selected="true">--All--</option>
                                </select>
                                <small class="help-block text-danger">{{ $errors->first('sub_category') }}</small>
                            </div>

                            <div class="col-md-2">
                                <label class="control-label" for="pricing" style="margin-bottom: 10px;">Pricing</label>
                                <select class="form-control" name="pricing" id="pricing">
                                    <option value="" selected="true" hidden>--Select--</option>
                                    <option value="subject_pricing" @if (request()->pricing == 'subject_pricing') selected @endif>
                                        Subject Pricing</option>
                                    <option value="flat_pricing" @if (request()->pricing == 'flat_pricing') selected @endif>Flat
                                        Pricing</option>
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label class="control-label" for="status" style="margin-bottom: 10px;">Status</label>
                                <select class="form-control" name="status" id="status">
                                    <option value="" selected="true" hidden>--All--</option>
                                    <option value="1" @if (request()->status == '1') selected @endif>Active</option>
                                    <option value="3" @if (request()->status == '3') selected @endif>Inactive
                                    </option>
                                    <option value="2" @if (request()->status == '2') selected @endif>Deleted
                                    </option>
                                </select>
                            </div>

                            {{-- <div class="col-md-1" style="margin-top: 17px;">
                                <label></label>
                                <select class="form-control" name="per_page" id="per_page">
                                    <option value="20" @if (request()->per_page == 20) selected @endif>20</option>
                                    <option value="40" @if (request()->per_page == 40) selected @endif>40</option>
                                    <option value="60" @if (request()->per_page == 60) selected @endif>60</option>
                                    <option value="80" @if (request()->per_page == 80) selected @endif>80</option>
                                    <option value="100" @if (request()->per_page == 100) selected @endif>100</option>
                                </select>
                            </div> --}}
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="form-group">
                            <div class="col-md-2">
                                <label></label>
                                <button type="submit" name="search" value="Search" class="btn btn-block btn-primary">
                                    FILTER &nbsp;&nbsp;&nbsp;<i class="pe-7s-filter"></i>
                                </button>
                            </div>

                            <div class="col-md-2 clear-button"
                                @if (!request()->search || !request()->per_page > 20) style="display:none;" @endif>
                                <label></label>
                                <button type="button" name="search" value="Search"
                                    class="btn btn-block btn-primary clear-filters">
                                    CLEAR &nbsp;&nbsp;&nbsp;<i class="pe-7s-close-circle"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <br>
            <div class="table-responsive">
                <table id="table1" class="controller table table-bordered table-striped" style="width:100%">
                    @foreach($configs as $key => $config)
                        <tr data-child="1" data-level="1" id="level_{{$key}}">
                            <td colspan="8">{{$config[0]->category?->name ?? 'All'}}</td>
                        </tr>
                        @foreach($config->groupBy('sub_category_id') as $key1 => $con)
                            <tr data-level="2" id="level_{{$key}}_{{$key1}}">
                                <td colspan="8">{{$con[0]->subCategory?->name ?? 'All'}}</td>
                            </tr>
                            <tr data-level="3" id="level_{{$key}}_{{$key1}}_a">
                                <td></td>
                                <td class="expand-header">Pricing</td>
                                <td class="expand-header">API</td>
                                <td class="expand-header">Product</td>
                                <td class="expand-header">DURATION</td>
                                <td class="expand-header">RATE</td>
                                <td class="expand-header">STATUS</td>
                                <td class="expand-header">ACTION</td>
                            </tr>
                            @foreach($con as $key2 => $c)
                                <tr data-level="3" id="level_{{$key}}_{{$key1}}_{{$key2}}">
                                    <td class="text-center"></td>
                                    <td>{{ $c->pricing() }}</td>
                                    <td>{{ $c->api?->name }}</td>
                                    <td>{{ $c->productsName() }}</td>
                                    <td>{{ strtoupper($c->duration) }}</td>
                                    <td>{{ $c->rate }}</td>
                                    <td>
                                        @if ($c->status == 1)
                                            <span class="label label-success">Active</span>
                                        @elseif($c->status == 2)
                                            <span class="label label-danger">Deleted</span>
                                        @else
                                            <span class="label label-warning">In-Active</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($c->status == 2)
                                            <button title="Restore Billing Configure" data-toggle="modal"
                                                data-target="#restore-modal"
                                                data-url="{{ route('admin.billing.config.restore', $c->id) }}"
                                                class="btn btn-primary restore" style="margin-left: 5px;">
                                                <i class="fa fa-undo"></i>
                                            </button>
                                        @else
                                            <a href="{{ route('admin.billing.config.show', [$c->id]) }}"
                                                class="btn btn-info" title="View Billing Configure">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            <button title="Delete Billing Configure" data-toggle="modal"
                                                data-target="#delete-modal"
                                                data-url="{{ route('admin.billing.config.destroy', $c->id) }}"
                                                class="btn btn-danger delete" style="margin-left: 5px;">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        @endforeach
                    @endforeach
                </table>
            </div>
        </div>
    </div>

    <div class="modal" id="delete-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <strong>If you delete this item you won't be able to undo in the future, do you want to
                        continue?</strong>
                </div>
                <div class="modal-footer">
                    <form action="" id="delete-form" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-danger" id="modal-submit">Yes</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="restore-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <strong>Are you sure you want to restore this item ?</strong>
                </div>
                <div class="modal-footer">
                    <form action="" id="restore-form" method="POST">
                        @csrf
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-danger" id="restore-submit">Yes</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('ext_js')
    <script src="{{ asset('js/jquery.tabelizer.js') }}"></script>
    <script>
        $(document).ready(function(){
            var table1 = $('#table1').tabelize({
                /*onRowClick : function(){
                    alert('test');
                }*/
                fullRowClickable : true,
                onReady : function(){
                    console.log('ready');
                },
                onBeforeRowClick :  function(){
                    console.log('onBeforeRowClick');
                },
                onAfterRowClick :  function(){
                    console.log('onAfterRowClick');
                },
            });
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.1/js/bootstrap-multiselect.min.js"></script>
    <script>
        $('#category').multiselect({
            includeSelectAllOption: true
        })
        $(document).on('click', '.delete', function() {
            var actionUrl = $(this).attr('data-url');
            $('#delete-form').attr('action', actionUrl);
            $('#modal-submit').click(function(e) {
                $(this).attr('disabled', true);
                $(this).html('<i class="fa fa-spinner fa-spin" style=""></i> Please Wait...');
                $('#delete-form').submit();
            })
        });

        $(document).on('click', '.restore', function() {
            var actionUrl = $(this).attr('data-url');
            $('#restore-form').attr('action', actionUrl);
            $('#restore-submit').click(function(e) {
                $(this).attr('disabled', true);
                $(this).html('<i class="fa fa-spinner fa-spin" style=""></i> Please Wait...');
                $('#restore-form').submit();
            })
        });

        $(document).on('click', '.clear-filters', function(e) {
            e.preventDefault();
            $('#category').val('');
            $('#sub_category').val('');
            $('#search_key').val('');
            $('#pricing').val('');
            $('#page').val(1);
            $('#per_page').val(20);
            $('#status').val('');
            $('#billing-form').submit()
        });

        $(document).on('change', '#per_page', function(e) {
            e.preventDefault()
            $('#billing-form').submit()
        });

        var delay = (function() {
            var timer = 0;
            return function(callback, ms) {
                clearTimeout(timer);
                timer = setTimeout(callback, ms);
            };
        })()

        let $filter = $('#filter-page');
        $filter.on('keydown', function() {
            delay(function() {
                $('#page').val($('#filter-page').val());
                $('#billing-form').submit();
            }, 1000);
        });


        $(document).on('change', '#category', function() {
            var category_id = $("#category").val();
            $('#sub_category').html('<option value="" selected="true">--All--</option>');
            $('#sub_category').removeAttr('multiple');
            $("#sub_category").multiselect('destroy');
            $('.clear-button').hide()
            if (category_id) {
                $('.clear-button').show()
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: '{{ url('admin/sub_category_mult_merchants') }}/' + category_id,
                    success: function(data) {
                        if (data.data == 'sub') {
                            $('#sub_category').attr('multiple', 'multiple');
                            $('#sub_category').html(data.html);
                            $('#sub_category').multiselect({
                                includeSelectAllOption: true
                            })
                            setTimeout(function() {
                                $('#sub_category').multiselect("refresh");
                            }, 1000)
                        }
                    }
                });
            }
        });


        @if (count(request()->category ?? []) > 0)
            var selectedCategory = [];
            @foreach (request()->category ?? [] as $category)
                selectedCategory.push('{{ $category }}');
            @endforeach
            var selectedSubCategory = [];
            @foreach (request()->sub_category ?? [] as $sub_category)
                selectedSubCategory.push('{{ $sub_category }}');
            @endforeach
            $.ajax({
                url: '{{ url('admin/mult_cat_sub_cat') }}',
                method: 'post',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    "Content-Type": "application/json"
                },
                data: JSON.stringify({
                    selectedCategory: selectedCategory,
                    selectedSubCategory: selectedSubCategory
                }),
                success: function(data) {
                    if (data.count > 0) {
                        $('#sub_category').attr('multiple', 'multiple');
                        $('#sub_category').html(data.html);
                        $('#sub_category').multiselect({
                            includeSelectAllOption: true
                        })
                    } else {
                        $('#sub_category').html(data.html);
                    }
                }
            });
        @endif
    </script>
@endsection