@extends('layout.app')

@section('head')
    <style>
        /* The scroll box the sticky header pins against. Deliberately NOT
           .table-responsive: that wrapper scrolls at auto height, so a sticky
           header has nothing to pin within and silently stays put. */
        .notconnected-table-scroll {
            max-height: 65vh;
            overflow: auto;
        }

        .notconnected-table-scroll table {
            margin-bottom: 0;
        }

        .notconnected-table-scroll thead th {
            position: sticky;
            top: 0;
            z-index: 3;
            /* Opaque: rows scroll underneath these cells. */
            background-color: #343a40 !important;
            color: #fff !important;
            /* border-collapse drops a sticky cell's borders once it detaches,
               so they are drawn as insets instead. */
            box-shadow: inset 0 1px 0 #454d55, inset 0 -1px 0 #454d55;
        }

        /* Reboot gives every ul a 1rem bottom margin; the top pager sits right
           above the table, so it does not need that much room. */
        .notconnected-pager-top .pagination {
            margin-bottom: .5rem;
        }

        /* Printing has no viewport to scroll, so let the table run its full length. */
        @media print {
            .notconnected-table-scroll {
                max-height: none;
                overflow: visible;
            }
        }
    </style>
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <h4 class="p-2 border-l">{{ $page_title }}</h4>

            <form action="" id="search">
                <div class="row">
                    {{-- A sub reseller has no manager to choose between, so the
                         dropdown is left out for them entirely. --}}
                    @if ($showManager)
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class='block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2'>
                                    Select Manager
                                </label>
                                <select name="reseller" id="reseller" class="select2 form-control form-control-sm">
                                    {{-- Resellers search inside their own manager only. --}}
                                    @if ($allManager)
                                        <option value="">All Manager</option>
                                    @endif
                                    @foreach ($reseller as $r)
                                        <option value="{{ $r->id }}"
                                            {{ request()->input('reseller') == $r->id ? 'selected' : '' }}>
                                            {{ $r->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class='block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2'>
                                Select POP
                            </label>
                            @if ($showManager)
                                <select name="pop" id="pop" class="select2 form-control form-control-sm" disabled>
                                    <option value="all">Select Manager First</option>
                                </select>
                            @else
                                {{-- Without a manager dropdown to drive it, the POP list is
                                     rendered here from the user's own POPs. --}}
                                <select name="pop" id="pop" class="select2 form-control form-control-sm">
                                    <option value="all">All</option>
                                    @foreach ($pops as $p)
                                        <option value="{{ $p->id }}"
                                            {{ request()->input('pop') == $p->id ? 'selected' : '' }}>
                                            {{ $p->popname }}</option>
                                    @endforeach
                                </select>
                            @endif
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class='block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2'>
                                Status
                            </label>
                            <select name="status" id="status" class="form-control form-control-sm">
                                @php($statuses = [
                                    '' => 'All Not Connected',
                                    'offline' => 'Active, No Session',
                                    'expired' => 'Expired',
                                    'disable' => 'Disable',
                                    'deactive' => 'Deactive',
                                    'pending' => 'Pending',
                                ])
                                @foreach ($statuses as $value => $text)
                                    <option value="{{ $value }}" {{ request()->input('status') == $value ? 'selected' : '' }}>
                                        {{ $text }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class='block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2'>
                                Rows Per Page
                            </label>
                            <select name="per_page" id="per_page" class="form-control form-control-sm">
                                @foreach ($perPageOptions as $option)
                                    <option value="{{ $option }}"
                                        {{ $perPageChoice === $option ? 'selected' : '' }}>
                                        {{ number_format($option) }}</option>
                                @endforeach
                                {{-- One page holding the whole filtered list. Handy for
                                     printing; slow and memory-hungry on a wide filter. --}}
                                <option value="{{ $perPageAll }}"
                                    {{ $perPageChoice === $perPageAll ? 'selected' : '' }}>
                                    All</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group float-right">
                            <button class="btn btn-primary" type="submit" id="searchBtn">
                                <i class="fa fa-search"></i> Search
                            </button>
                            @if (checkSettings('enforce-download-permission') != 'enable' || auth()->user()->can('not-connected-client-export'))
                                <button class="btn btn-success" type="button" id="exportBtn">
                                    <i class="fa fa-file-excel"></i> Excel
                                </button>
                            @endif
                            <a class="btn btn-info" href="{{ route('notConnectedClient') }}">Reset</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="mt-2 card">
        <div class="card-body">
            <div id="processing">
                <div>Processing.....</div>
            </div>

            <div id="result">
                @include('clients.notConnected.result')
            </div>
        </div>
    </div>

    <style>
        div#processing {
            display: none;
        }

        div#processing div {
            background: rgba(0, 0, 0, .5);
            position: fixed;
            width: 100vw;
            height: 100vh;
            color: #fff;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 0;
            left: 0;
            z-index: 1060;
        }

        @media print {
            .noprint {
                display: none !important;
            }

            th,
            td {
                font-size: 10px !important;
                padding: 2px !important;
            }

            table {
                width: 100%;
            }
        }
    </style>
@endsection

@section('ajax')
    <script type="text/javascript">
        $(function() {
            $('#reseller, #pop').select2();

            // POP list is only selectable after a manager is chosen, and always
            // belongs to that manager.
            function loadPops(managerId, selectPop) {
                if (!managerId) {
                    $('#pop').prop('disabled', true)
                        .html('<option value="all">Select Manager First</option>')
                        .trigger('change');
                    return;
                }

                $('#processing').show();

                $.ajax({
                    type: 'get',
                    url: '{{ route('getResellerPopList') }}',
                    data: {
                        id: managerId
                    },
                    success: function(result) {
                        $('#pop').prop('disabled', false).html(result);

                        if (selectPop) {
                            $('#pop').val(selectPop);
                        }

                        $('#pop').trigger('change');
                        $('#processing').hide();
                    },
                    error: function() {
                        $('#processing').hide();
                        toastr.error('POP list could not be loaded.');
                    }
                });
            }

            // No manager dropdown (sub reseller): the POP list is already rendered
            // server side, so there is nothing to wire up.
            if ($('#reseller').length) {
                $('#reseller').on('change', function() {
                    loadPops($(this).val(), null);
                });

                // Load the POPs of whatever manager the page opens on - the one in
                // the URL (a pagination link on the first, server-rendered page),
                // or, for a reseller with no "All Manager" choice, their own.
                loadPops($('#reseller').val(), '{{ request()->input('pop') }}');
            }

            function loadResult(url, data) {
                $('#processing').show();

                $.ajax({
                    type: 'get',
                    url: url,
                    data: data,
                    success: function(result) {
                        $('#result').html(result);
                        $('#processing').hide();
                    },
                    error: function() {
                        $('#processing').hide();
                        toastr.error('Search failed. Please try again.');
                    }
                });
            }

            $('#searchBtn').on('click', function(e) {
                e.preventDefault();
                loadResult('{{ route('notConnectedClientSearch') }}', $('#search').serialize());
            });

            // Download exactly what the filters currently say, not the whole list.
            $('#exportBtn').on('click', function(e) {
                e.preventDefault();
                window.location = '{{ route('notConnectedClientExport') }}?' + $('#search').serialize();
            });

            // Search results are paginated, so walk their pagination links through
            // ajax. The first, server-rendered page links to the full page route
            // instead, and those are left to the browser.
            var searchUrl = '{{ route('notConnectedClientSearch') }}';

            $('#result').on('click', '.pagination a', function(e) {
                var url = $(this).attr('href');

                if (!url || url.indexOf(searchUrl) !== 0) {
                    return;
                }

                e.preventDefault();
                loadResult(url, null);
            });
        });
    </script>
@endsection