@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="" id="search">

                <div class="row">
                    <div class="col-md-2">
                        <label class="" for="from_date">
                            Search By
                        </label>
                    </div>
                    <div class="col-md-4">
                        <select name="type" class="form-control" required>

                            <option value="id">ID</option>
                            <option value="userid" selected>User Name</option>
                            <option value="contact_no">Contact No</option>

                        </select>
                    </div>
                    <div class="col-md-4">
                        <input class="form-control" name="value" type="text" placeholder="" required>

                    </div>
                </div>

                <div class="form-group float-right mt-2">
                    <button @click="search" class="btn btn-primary" type="submit" id="searchBtn"><i
                            class="fa fa-search"></i> Search</button>
                    <button class="btn btn-info" type="reset" id="reset">Reset</button>

                </div>

            </form>

            <div id="result">
                {{-- list will show in this box --}}
            </div>


            <div class="py-10" id="show_hide" style="display: none">


                <ul class="nav nav-tabs tabs-nav btn-group bg-gray mt-2">
                    <li>
                        <a class="m-1 btn btn-success nav-item nav-link active" href="#summary">Summary</a>
                    </li>
                    <li>
                        <a class="m-1 btn btn-success nav-item nav-link" href="#contact">Contact Details</a>
                    </li>
                    <li class="dropdown">
                        <button class="m-1 btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Techical Information
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="nav-item nav-link" href="#technical-details">Technical Details</a>

                            <a class="nav-item nav-link" href="#log-details">Log History</a>

                            <a class="nav-item nav-link" href="#login-attempts">Login Attempts</a>
                        </div>
                    </li>
                    <li class="dropdown">
                        <button class="m-1 btn btn-success dropdown-toggle" type="button" id="connectionPanel"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Connection Panel
                        </button>
                        <div aria-labelledby='connectionPanel' class="dropdown-menu">

                            <a class="m-1 btn btn-success nav-item nav-link" href="#connection-history">Connection
                                History</a>
                            @hasrole('Admin|Support Executive|Support Manager|Accounts Manager')
                                <a class="m-1 btn btn-success nav-item nav-link" href="#client_edit_log">Client Edit Log</a>
                            @endhasrole
                            <button type="button" id="manage-connection-btn" class="btn btn-primary float-right" data-toggle="modal"
                                data-target="#manage-connection">
                                Manage Connection
                            </button>
                            {{-- <a class="m-1 btn btn-info nav-item nav-link" href="#connection-management">Manage Connection</a> --}}

                        </div>
                    </li>

                    <li>
                        <a class="m-1 btn btn-success nav-item nav-link" href="#token">Pending Token</a>
                    </li>

                    <li>
                        <a class="m-1 btn btn-success nav-item nav-link" href="#previous_token">Previous Token</a>
                    </li>

                    <li class="ml-auto d-flex align-items-center">
                        <span id="nav-online-badge" class="m-1 btn btn-secondary nav-item" style="cursor:default;min-width:110px">
                            <span id="nav-online-dot"
                                  style="display:inline-block;width:9px;height:9px;border-radius:50%;background:#6c757d;vertical-align:middle;margin-right:5px;transition:.2s"></span>
                            <span id="nav-online-text">—</span>
                        </span>
                    </li>

                </ul>
                <div class="tabs-content" id="myTabContent">

                    <div id="summary">

                        {{-- The client show page itself, in embed mode (no sidebar,
                             navbar or footer). An iframe rather than injected HTML
                             because that page bakes the client id into 1,800 lines of
                             JS: delivered by AJAX, its delegated handlers would
                             re-register on every Details click and fire a payment or
                             package change once per click.

                             Fixed height, scrolling inside, on purpose. Sized to its
                             content the frame never scrolls, so it has no viewport of
                             its own and every position:fixed modal in there centred on
                             the middle of the whole tall document instead of on screen.
                             A real viewport puts the modals back where they belong. --}}
                        <iframe id="summary_panel" title="Client details"
                            style="width:100%;height:calc(100vh - 160px);min-height:560px;border:0;display:block;background:#fff"></iframe>

                    </div>
                    <div id="contact">


                        <table class="table">
                            <tr>
                                <td>
                                    <label for="name" class="text-right d-block">
                                        Customer Name
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="name" id="c_name" value=""
                                        class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="name" class="text-right d-block">
                                        Contact Number
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="name" id="c_contact_no" value=""
                                        class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="name" class="text-right d-block">
                                        Email
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="name" id="c_email" value=""
                                        class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="name" class="text-right d-block">
                                        Reseller
                                    </label>
                                </td>

                                <td>
                                    <input readonly type="text" name="pop_id" id="pop_name" value=""
                                        class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="area" class="text-right d-block">
                                        Address
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="area" id="area" value=""
                                        class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="name" class="text-right d-block">
                                        Father
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="father_name" id="father_name" value=""
                                        class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="name" class="text-right d-block">
                                        Mother
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="name" id="mother_name" value=""
                                        class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="name" class="text-right d-block">
                                        NID
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="name" id="national_id" value=""
                                        class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="password" class="text-right d-block">
                                        Passport
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="name" id="passport_no" value=""
                                        class="form-control">
                                </td>
                            </tr>
                        </table>

                    </div>
                    <div id="technical-details">
                        <table class="table">
                            <tr>
                                <td>
                                    <label for="userid" class="text-right">
                                        User Id
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="userid" id="userid" value=""
                                        class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="password" class="text-right">
                                        Password
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="password" id="password" value=""
                                        class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="name" class="text-right">
                                        IP Address
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="ip_address" id="ip_address" value=""
                                        class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="mac" class="text-right">
                                        MAC Address
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="mac" id="mac" value=""
                                        class="form-control">
                                    <span id="mac-bind-badge" class="badge badge-danger mt-1 d-none">
                                        <i class="fa fa-lock"></i> MAC Bind Enabled
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="name" class="text-right">
                                        POP Name
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="pop_id" id="pop_id" value=""
                                        class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="name" class="text-right">
                                        Package
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="package_name" id="package_name" value=""
                                        class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="name" class="text-right">
                                        Expired Date
                                    </label>
                                </td>
                                <td>
                                    <input readonly type="text" name="expire_date" id="expire_date" value=""
                                        class="form-control">
                                </td>
                            </tr>

                        </table>



                    </div>

                    <div id="log-details">

                        <table class="table table-responsive table-bordered">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col">
                                        Action Date
                                    </th>
                                    <th scope="col">
                                        Activity
                                    </th>
                                    <th scope="col">
                                        Remarks
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200" id="log_activities">

                            </tbody>
                        </table>
                    </div>

                    <div id="login-attempts">
                        <table class="table table-responsive table-bordered">
                            <thead class="bg-gray-50">
                                @if (checkAPI())
                                    <tr>
                                        <th scope="col">
                                            Time
                                        </th>
                                        <th scope="col">
                                            Message
                                        </th>
                                    @else
                                    <tr>
                                        <th scope="col">
                                            DateTime
                                        </th>
                                        <th scope="col">
                                            User Name
                                        </th>

                                        <th scope="col">
                                            Password
                                        </th>
                                        <th scope="col">
                                            MAC Address
                                        </th>
                                        <th scope="col">
                                            Remarks
                                        </th>
                                        <th scope="col">
                                            Mikrotik
                                        </th>
                                    </tr>
                                @endif

                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200" id="login_attempts">

                            </tbody>
                        </table>

                    </div>

                    <div id="connection-history">


                        <table class="table table-responsive table-bordered">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col">
                                        Action date
                                    </th>

                                    <th scope="col">
                                        Action Name
                                    </th>
                                    <th scope="col">
                                        Remarks
                                    </th>
                                    <th scope="col">
                                        Action Taken By
                                    </th>

                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200" id="connection_history">

                            </tbody>
                        </table>

                    </div>

                    <div id="client_edit_log">

                        {{-- <a class="m-1 btn btn-success " href="{{route('all-client-edit-log',$id)}}">View All Client Edit Log</a> --}}

                        <table class="table table-responsive table-bordered">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col">
                                        Edit By
                                    </th>

                                    <th scope="col">
                                        Old Data
                                    </th>
                                    <th scope="col">
                                        New Data
                                    </th>


                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200" id="edit_log_history">

                            </tbody>
                        </table>

                    </div>

                    <div id="token">
                        <table class="table">
                            <thead>
                                <tr>
                                    <td>Date</td>
                                    <td>Token</td>
                                    <td>Category</td>
                                    <td>Code</td>
                                    <td>Reporter</td>
                                    <td>Reporter Contact</td>
                                    <td>Description</td>
                                    <td>Status</td>
                                </tr>
                            </thead>

                            <tbody class="bg-white divide-y divide-gray-200" id="token_output">

                            </tbody>
                        </table>
                    </div>

                    <div id="previous_token">
                        <table class="table">
                            <thead>
                                <tr>
                                    <td>Date</td>
                                    <td>Token</td>
                                    <td>Category</td>
                                    <td>Code</td>
                                    <td>Reporter</td>
                                    <td>Reporter Contact</td>
                                    <td>Description</td>
                                    <td>Status</td>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200" id="previous_token_output"></tbody>
                        </table>
                    </div>

                </div>
            </div>


        </div>
    </div>

    <div class="modal fade" id="manage-connection">
        <div class="modal-dialog">
            <form action="{{ route('enableDisable') }}" method="POST">
                @csrf
                @method('post')
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="text-center">Connection Management</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="text-center" id="modalAlert"></div>

                        <div class="row">

                            <div class="col-md-4">Customer ID</div>
                            <div class="col-md-8 mb-2">
                                <p id="customerIDShow"></p>
                                <input type="hidden" name="id" id="customerID" value=""
                                    class="form-control disable">
                            </div>

                            <div class="col-md-4">Activity Name</div>
                            <div class="col-md-8 mb-2">
                                <select name="activity_name" id="activity_name" class="form-control">
                                    <option value="">Select Type</option>
                                    <option value="active">Enable</option>
                                    <option value="disable">Disable</option>
                                    <option value="deactive">Deactive</option>
                                </select>
                            </div>

                            <div class="col-md-4">Remark</div>
                            <div class="col-md-8 mb-2">

                                <textarea name="details" id="details" class="form-control"></textarea>
                            </div>


                        </div>


                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary" type="submit" id="modalSave">Change</button>
                    </div>

                </div>
                <!-- /.modal-content -->
            </form>
        </div>
        <!-- /.modal-dialog -->
    </div>

    <style>
        /* Direct children only — the tab panes. As a descendant selector this
           hid every nested div in a pane too, which blanked out the Summary
           tab's card grid. */
        .tabs-content > div:not(:first-child) {
            display: none;
        }

        #online {
            height: 39px;
            font-size: 17px;
            text-align: center;
            padding: 10px;
        }

        .processing {
            position: fixed;
            height: 100vh;
            width: 100vw;
            background: rgba(0, 0, 0, .5);
            z-index: 999;
            color: #fff;
            text-align: center;
            padding-top: 10%;
        }
    </style>
@endsection

@section('ajax')
    <script type="text/javascript">
        $(document).ready(function() {

            $('.tabs-nav a').click(function() {

                // Check for active
                $('.tabs-nav li').removeClass('active');
                $('.tabs-nav li a').removeClass('active');
                $(this).parent().addClass('active');

                // Display active tab
                let currentTab = $(this).attr('href');
                $('.tabs-content > div').hide();
                $(currentTab).show();

                return false;
            });

        });

        $(function() {
            $('#reset').click(function() {
                $('#result').html('');
                $('#show_hide').hide();

            });
            $('#searchBtn').on('click', function(e) {
                e.preventDefault();
                $.ajax({
                    type: 'get',
                    url: '{{ route('getClientInfo') }}',
                    data: $('#search').serialize(),
                    success: function(result) {
                        $('#result').html(result);

                    }
                });
            });

            $('#details').on('click', function(e) {
                $('#search').append('<p class="processing">Processing....</p>');
                e.preventDefault();
                $.ajax({
                    type: 'get',
                    url: '{{ route('getClientInfo') }}',
                    data: $('#search').serialize(),
                    success: function(result) {
                        $('.processing').remove();
                        $('#result').html(result);

                    }
                });
            });

            $(document).on('click', '.clickDetails', function() {
                id = $(this).data('id');
                 $('#show_hide').hide();
                 $('#search').append('<p class="processing">Processing....</p>');
                details(id);
                loadSummaryPanel(id);

            });



        });




        // Summary tab: the client show page in embed mode. The frame keeps a
        // fixed height and scrolls internally so its modals have a viewport to
        // centre on — see the note on the iframe itself.
        function loadSummaryPanel(id) {
            var frame = document.getElementById('summary_panel');
            if (!frame) return;

            frame.src = '{{ url('admin/clients') }}/' + id + '?embed=1';

            // Bring the frame fully into view, otherwise a modal centred inside
            // it can still open off the bottom of the window.
            frame.onload = function() {
                frame.scrollIntoView({ behavior: 'smooth', block: 'start' });
            };
        }

        function details(id) {

            $.ajax({
                type: 'get',
                url: '{{ route('getClientById') }}',
                data: {
                    id: id
                },
                success: function(result) {
                    // console.log('result', result.r);

                    $('.processing').remove();
                    $("body #show_hide").show();

                    $('body #c_name').val(result.r.clientsinfo.clients_name);
//token
                    // $('body #c_token').val(result.r.customer_token.token);

                    if (result.r.customer_token == null) {
                        $('body #token_output').html('');
                        $('body #previous_token_output').html('');
                    }

                    $('body #c_email').val(result.r.clientsinfo.email);
                    $('body #c_contact_no').val(result.r.clientsinfo.contact_no);
                    $('body #national_id').val(result.r.clientsinfo.national_id);
                    $('body #passport_no').val(result.r.clientsinfo.passport_no);
                    $('body #father_name').val(result.r.clientsinfo.father_name);
                    $('body #mother_name').val(result.r.clientsinfo.mother_name);
                    $('body #area').val(result.r.clientsinfo.area);


                    // Live online status check in nav badge
                    (function (clientId) {
                        var dot   = document.getElementById('nav-online-dot');
                        var text  = document.getElementById('nav-online-text');
                        var badge = document.getElementById('nav-online-badge');
                        dot.style.background  = '#94A3B8';
                        dot.style.boxShadow   = 'none';
                        text.textContent      = 'Checking…';
                        badge.className       = 'm-1 btn btn-secondary nav-item';

                        var url = '{{ route("client.online.check", ":id") }}'.replace(':id', clientId);
                        $.getJSON(url)
                            .done(function (res) {
                                if (res.isOnline) {
                                    dot.style.background = '#10B981';
                                    dot.style.boxShadow  = '0 0 0 3px rgba(16,185,129,.25)';
                                    var label = res.ip ? 'Online · ' + res.ip : 'Online';
                                    if (res.acctupdatetime) {
                                        label += ' · upd ' + res.acctupdatetime;
                                    }
                                    text.textContent     = label;
                                    badge.className      = 'm-1 btn btn-success nav-item';
                                } else {
                                    dot.style.background = '#EF4444';
                                    dot.style.boxShadow  = '0 0 0 3px rgba(239,68,68,.25)';
                                    text.textContent     = 'Offline';
                                    badge.className      = 'm-1 btn btn-danger nav-item';
                                }
                            })
                            .fail(function () {
                                dot.style.background = '#EF4444';
                                text.textContent     = 'Offline';
                                badge.className      = 'm-1 btn btn-danger nav-item';
                            });
                    })(result.r.clientsinfo.client_id);
                    $('body #activity_name').val(result.r.clients_status).change();

                    $('body #customerID').val(result.r.id);
                    $('body #customerIDShow').text(result.r.id);

                    $('body #login_attempts').html(result.login_attempts);
                    $('body #log_activities').html(result.log_activities);
                    $('body #connection_history').html(result.connection_history);
                    $('body #edit_log_history').html(result.edit_log);

                    $('body #token_output').html(result.token_output);
                    $('body #previous_token_output').html(result.previous_token_output);

                    $('body #password').val(result.r.password);
                    $('body #userid').val(result.r.userid);
                    $('body #mac').val(result.r.mac);
                    if (result.mac_bind_enabled) {
                        $('body #mac-bind-badge').removeClass('d-none');
                    } else {
                        $('body #mac-bind-badge').addClass('d-none');
                    }
                    $('body #pop_id').val(result.r.pop.popname);
                    // console.log(result);
                    let package_name = result.r.packages.package_name;
                    if(result.pool_name_show_permission){
                        package_name += ' (Pool Name: '+result.r.packages.pool_name+')';
                    }

                    if(result.auth_user_id == 1){
                        package_name += ' (Package ID: '+result.r.packages.id+')';
                        if(result.r.radusergroup){
                            package_name += ' (radusergroup ID: '+result.r.radusergroup.groupname+')';

                            if(result.r.packages.id == result.r.radusergroup.groupname){
                                package_name += ' (Package ID and radusergroup ID are same)';
                            }else{
                                package_name += ' (Package ID and radusergroup ID are different)';
                            }
                        }

                    }


                    $('body #package_name').val(package_name);
                    //  $('#pop_name').val(result.r.pop.popname);
                    $('body #ip_address').val(result.r.ip_address);
                    $('body #expire_date').val(result.r.expire_date.toString('YYYY-MM-DD'));

                    if (result.r.deleted_at) {
                        $('body #manage-connection-btn').hide();
                    } else {
                        $('body #manage-connection-btn').show();
                    }
                    // console.log(result.login_attempts);
                }
            });
        }
    </script>
@endsection