@extends('layouts.admin')

@section('ext_css')
    <link rel="stylesheet" href="{{ asset('NepaliDatepicker/nepali.datepicker.v2.2.min.css') }}"/>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style type="text/css">
        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

        .sort-data {
            cursor: pointer;
        }

        .modal-header {
            padding: 15px;
        }

        code {
            word-wrap: break-word;
        }
    </style>
    <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, button.multiselect-option.dropdown-item {
            width: 100%;
        }
        span.form-check {
            float: left;
        }
        pre {
            background-color: #ffffff!important;
            border: 0px!important;
        }
    </style>
@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><a href="{{ route('admin.api-settings.report') }}">Reports </a></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="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Reports</h3>
            </div>

            <div class="panel-body">
                <div class="row">
                    <form method="get" class="form-horizontal form-padding">
                        <input type="hidden" name="search" id="search" value="search">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="form-group">
                                <div class="col-md-4">
                                    <label class="control-label" for="demo-address-input" 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>
                                </div>
                                <div class="col-md-4">
                                    <label class="control-label" for="demo-address-input" style="margin-bottom: 10px;">
                                        Sub category
                                    </label>
                                    <select name="sub_category[]" id="sub_category" class="form-control">
                                        <option disabled="true" selected="true" value="">--All--</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="control-label" for="demo-address-input" style="margin-bottom: 10px;">
                                        Merchant
                                    </label>
                                    <select name="merchant[]" id="merchant" class="form-control">
                                        <option disabled="true" selected="true" value="">--All--</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="control-label" for="demo-address-input" style="margin-bottom: 10px;">
                                        API Endpoint
                                    </label>
                                    <select name="api[]" id="api" class="form-control" multiple>
                                        @foreach($apis as $api)
                                            <option value="{{$api->code}}" @if(in_array($api->code, request()->api ?? [])) selected @endif>
                                                {{$api->name}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label class="control-label" for="demo-address-input" style="margin-bottom: 10px;">
                                        Status
                                    </label>
                                    <select name="type[]" id="type" class="form-control" multiple>
                                        <option value="1" @if(in_array(1, request()->type ?? [])) selected @endif>Enable</option>
                                        <option value="0" @if(in_array(0, request()->type ?? [])) selected @endif>Disable</option>
                                    </select>
                                </div>
                                
                            </div>
                            <div class="form-group">
                                <div class="col-md-12 text-center">
                                    <button class="btn btn-primary">Filter</button>
                                    @if (request()->search)
                                        <a href="{{ route('admin.api-settings.report') }}" class="btn btn-primary">Reset</a>
                                        @php
                                            $export = '';
                                            foreach (request()->category ?? [] as $key => $category) {
                                                $export.='category['.$key.']='.$category.'&';
                                            }
                                        @endphp
                                        @php
                                            foreach (request()->sub_category ?? [] as $key => $sub_category) {
                                                $export.='sub_category['.$key.']='.$sub_category.'&';
                                            }
                                        @endphp
                                        @php
                                            foreach (request()->merchant ?? [] as $key => $merchant) {
                                                $export.='merchant['.$key.']='.$merchant.'&';
                                            }
                                        @endphp
                                        @php
                                            foreach (request()->api ?? [] as $key => $api) {
                                                $export.='api['.$key.']='.$api.'&';
                                            }
                                        @endphp
                                        @php
                                            foreach (request()->type ?? [] as $key => $type) {
                                                $export.='type['.$key.']='.$type.'&';
                                            }
                                        @endphp
                                        <a href="{{ route('admin.api-settings.export') }}?{{$export}}" class="btn btn-primary">Export</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <br>
                @if (request()->search)
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th class="text-center">S.N</th>
                                    <th class="text-center">
                                        Merchant
                                    </th>
                                    <th class="text-center">
                                        API
                                    </th>
                                    <th class="text-center">
                                        Status
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $i=1; @endphp
                                @foreach($reports as $key => $report)
                                    @foreach($report->apis as $key1 => $api)
                                        <tr>
                                            <td>{{ $i++ }}</td>
                                            <td>{{$report->name}}</td>
                                            <td>{{$api->name}}</td>
                                            <td>{{$api->status ? 'Enable' : 'Disable'}}</td>
                                        </tr>
                                    @endforeach
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('ext_js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.1/js/bootstrap-multiselect.min.js" ></script>
    <script>
        $('#category').multiselect({
            includeSelectAllOption: true
        })
        
        $('#api').multiselect({
            includeSelectAllOption: true
        })

        $('#type').multiselect({
            includeSelectAllOption: true
        })

        $(document).on('change', '#category', function () {
            var category_id = $("#category").val();
            $('#sub_category').html('<option value="" selected="true">--All--</option>');
            $('#merchant').html('<option value="" selected="true">--All--</option>');
            $('#sub_category').removeAttr('multiple');
            $("#sub_category").multiselect('destroy');
            $('#merchant').removeAttr('multiple');
            $("#merchant").multiselect('destroy');
            $('.reset').hide()
            if (category_id) {
                $('.reset').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 (data.merchantHtml) {
                                $('#merchant').attr('multiple','multiple');
                                $('#merchant').html(data.merchantHtml);
                                $('#merchant').multiselect({
                                    includeSelectAllOption: true
                                })
                                setTimeout(function() {
                                    $('#merchant').multiselect("refresh");
                                }, 1000)
                            }
                            
                        } else if (data.data == 'merchant') {
                            $('#merchant').attr('multiple','multiple');
                            $('#merchant').html(data.html);
                            $('#merchant').multiselect({
                                includeSelectAllOption: true
                            })
                            setTimeout(function() {
                                $('#merchant').multiselect("refresh");
                            }, 1000)
                        }
                    }
                });
            }
        });

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

                $.ajax({
                    url: '{{ url("admin/mult_merchant_list") }}/' + sub_category_id + '/' + category_id,
                    success: function (data) {
                        $('#merchant').html(data.html);
                        $('#merchant').multiselect({
                            includeSelectAllOption: true
                        })
                        setTimeout(function() {
                            $('#merchant').multiselect("refresh");
                        }, 1000)
                    }
                });
            } else if (category_id) {
                $.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)

                            $('#merchant').attr('multiple','multiple');
                            $('#merchant').html(data.merchantHtml);
                            $('#merchant').multiselect({
                                includeSelectAllOption: true
                            })
                            setTimeout(function() {
                                $('#merchant').multiselect("refresh");
                            }, 1000)
                        } else {
                            $('#merchant').attr('multiple','multiple');
                            $('#merchant').html(data.html);
                            $('#merchant').multiselect({
                                includeSelectAllOption: true
                            })
                            setTimeout(function() {
                                $('#merchant').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);
                    }
                    @if (count(request()->sub_category  ?? []) > 0) 
                        var selectedMerchant = [];
                        @foreach (request()->merchant ?? [] as $merchant)
                            selectedMerchant.push('{{$merchant}}');
                        @endforeach
                        $.ajax({
                            url: '{{ url("admin/mult_merchant_sub_cat") }}',
                            method: 'post',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                "Content-Type": "application/json"
                            },
                            data: JSON.stringify({selectedSubCategory: selectedSubCategory, selectedMerchant : selectedMerchant}),
                            success: function (data) {
                                $('#merchant').attr('multiple','multiple');
                                $('#merchant').html(data.html);
                                $('#merchant').multiselect({
                                    includeSelectAllOption: true
                                })
                                setTimeout(function() {
                                    $('#merchant').multiselect("refresh");
                                }, 1000)
                            }
                        });
                    @endif
                }
            });
        @endif

    </script>

@endsection