@extends ('layouts/template')

@section('content')
    <style>
    .table.v-middle td, .table th {
        vertical-align: middle;
    }
    .table.v-middle td {
        padding: 1px;
    }
    </style>
    <div class="p-3 mcp-theme-1">

        <div class="d-flex align-items-center mb-3">
            <h4 class="font-weight-bold m-0 font-size-16">
                Log in as
            </h4>
        </div>

        <div class="row">
            <div class="col-12 col-md-7">

                <div class="mb-2">
                    Total records: <b>{{ $logInAsPros->total() }}</b>&nbsp;&nbsp;@if($logInAsPros->lastPage() > 1) ({{ $logInAsPros->perPage() }} per page) @endif
                </div>

                <div class="d-flex align-items-center">
                    {{ $logInAsPros->withQueryString()->links() }}
                    <form class="ml-auto width-200px mb-3 log-in-as-form" method="GET" action="/log_in_as" target="_top">
                        <input type="text" placeholder="Name/email/phone" class="form-control form-control-sm" name="q"
                               value="{{request()->input('q')}}">
                    </form>
                </div>

                <div class="card">
                    @if(session('message'))
                        <div class="alert alert-info">{{session('message')}}</div>
                    @endif
                    <table class="table table-sm table-striped mb-0 v-middle">
                        <thead>
                        <tr>
                            <th class="font-weight-normal border-0 pl-2">{{sortColumnHead('/log_in_as', 'Name', 'name_last')}}</th>
                            <th class="font-weight-normal border-0">{{sortColumnHead('/log_in_as', 'Cell Number', 'cell_number')}}</th>
                            <th class="font-weight-normal border-0">{{sortColumnHead('/log_in_as', 'Email', 'email_address')}}</th>
                            <th class="font-weight-normal border-0"></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($logInAsPros as $laPro)
                            <tr>
                                <td class="pl-2">{{$laPro->displayName()}}</td>
                                <td>{{$laPro->cell_number}}</td>
                                <td>{{$laPro->email_address}}</td>
                                <td class="text-right pr-2">
                                    <form action="{{route('process-log-in-as')}}" onsubmit="saveProUid('{{$laPro->uid}}')" method="POST" target="_top">
                                        @csrf
                                        <input type="hidden" name="proUid" value="{{$laPro->uid}}">
                                        <button class="btn btn-sm btn-primary font-weight-bold px-4 py-1">Login</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="d-flex align-items-center mt-3">
            {{ $logInAsPros->withQueryString()->links() }}
            <span class="{{ $logInAsPros->lastPage() > 1 ? 'ml-3' : '' }} mb-3">
                Total records: <b>{{ $logInAsPros->total() }}</b>&nbsp;&nbsp;@if($logInAsPros->lastPage() > 1) ({{ $logInAsPros->perPage() }} per page) @endif
            </span>
        </div>

    </div>

    <script>
    function saveProUid(_uid) {
        window.top.localStorage.currentProUid = _uid;
        return true;
    }
    (function() {
        function init() {
            $('.log-in-as-form').on('submit', function() {
                let q = $.trim($('[name="q"]').val());
                fastLoad('/log_in_as?q=' + encodeURIComponent(q));
                return false;
            });
        }
        addMCInitializer('log-in-as', init, '.log-in-as-form');
    }).call(window);
    </script>

@endsection