<div class="modal fade" id="modalFilterAccount">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Search Account</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="row p-2">
                    <div class="col-12 mb-3">
                        <div class="form-group">
                            <label for="filterCategory">Category</label>
                            <select class="form-control" id="filterCategory">
                                @foreach ($vps_category as $item)
                                    <option value="{{ Str::lower($item->name) }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 mb-3">
                        <div class="form-group">
                            <label for="filterCountry">Country/Region</label>
                            <select class="form-control" id="filterCountry">
                                @foreach ($vps_country as $item)
                                    <option value="{{ Str::lower($item->code) }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 mb-3">
                        <div class="form-group">
                            <label for="filterProxies">Services</label>
                            <select class="form-control" id="filterProxies">
                                @foreach ($vps_proxies as $item)
                                    <option value="{{ Str::lower($item->name) }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 mb-3">
                        <a id="searchAccountFilter" href="javascript:void(0);" class="btn form-control btn-dark"> <i
                                class="fa fa-search"> </i>
                            Filter</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="modalDetailAccount">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Detail Account</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="row">
                    <div class="col-6 text-left text-sm">
                        <strong>
                            Status</strong>
                    </div>
                    <div class="col-6 text-right text-sm">
                        <span id="modalDetailAccountStatus"><strong class="text-success">active</strong></span>
                    </div>
                    <div class="col-6 text-left text-sm">
                        <strong>
                            Max Session</strong>
                    </div>
                    <div class="col-6 text-right text-sm">
                        <span id="modalDetailAccountMaxSession">3 IP</span>
                    </div>
                    <div class="col-6 text-left text-sm">
                        <strong>
                            Server Name</strong>
                    </div>
                    <div class="col-6 text-right text-sm">
                        <span id="modalDetailAccountServerName">PRO VMESS BN ID 01</span>
                    </div>
                    <div class="col-6 text-left text-sm">
                        <strong>
                            Proxy</strong>
                    </div>
                    <div class="col-6 text-right text-sm">
                        <span id="modalDetailAccountProxy">Vless</span>
                    </div>
                    <div class="col-6 text-left text-sm">
                        <strong>
                            City</strong>
                    </div>
                    <div class="col-6 text-right text-sm">
                        <span id="modalDetailAccountCity">Jakarta</span>
                    </div>
                    <div class="col-6 text-left text-sm">
                        <strong>
                            IP Address</strong>
                    </div>
                    <div class="col-6 text-right text-sm">
                        <div class="row">
                            <div class="col-10 text-truncate">
                                <span id="modalDetailAccountIP">
                                    ***************
                                </span>
                            </div>
                            <div class="col-2">
                                <a href="#" class="text-dark btn-ip" data-target="modalDetailAccountIP"> <i
                                        class="me-1 md far fa-copy" role="img" aria-label="help circle outline"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 text-left text-sm">
                        <strong>
                            Server Host</strong>
                    </div>
                    <div class="col-6 text-right text-sm">
                        <div class="row">
                            <div class="col-10 text-truncate">
                                <span id="modalDetailAccountServerHost">
                                    idbn01.lingvpn.id
                                </span>
                            </div>
                            <div class="col-2">
                                <a href="javascript:void(0);" class="text-dark copy-btn"
                                    data-target="modalDetailAccountServerHost">
                                    <i class="me-1 md far fa-copy" role="img" aria-label="help circle outline"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 text-left text-sm">
                        <strong>
                            Username</strong>
                    </div>
                    <div class="col-6 text-right text-sm">
                        <div class="row">
                            <div class="col-10 text-truncate">
                                <span id="modalDetailAccountUsername">
                                    text123456
                                </span>
                            </div>
                            <div class="col-2">
                                <a href="javascript:void(0);" class="text-dark copy-btn"
                                    data-target="modalDetailAccountUsername">
                                    <i class="me-1 md far fa-copy" role="img" aria-label="help circle outline"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 text-left text-sm">
                        <strong>
                            UUID</strong>
                    </div>
                    <div class="col-6 text-right text-sm">
                        <div class="row">
                            <div class="col-10 text-truncate">
                                <span id="modalDetailAccountUUID">
                                    0123-12345-433223-3434344-34343
                                </span>
                            </div>
                            <div class="col-2">
                                <a href="javascript:void(0);" class="text-dark copy-btn"
                                    data-target="modalDetailAccountUUID"> <i class="me-1 md far fa-copy"
                                        role="img" aria-label="help circle outline"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 text-left text-sm">
                        <strong>
                            Charge Credit</strong>
                    </div>
                    <div class="col-6 text-right text-sm">
                        <span id="modalDetailAccountChargeCredit">IDR 20.00</span>
                    </div>
                    <div class="col-6 text-left text-sm">
                        <strong>
                            Charge Point</strong>
                    </div>
                    <div class="col-6 text-right text-sm">
                        <span id="modalDetailAccountChargePoint">IDR 27.78</span>
                    </div>
                    <div class="col-6 text-left text-sm">
                        <strong>
                            Bandwidth usage</strong>
                    </div>
                    <div class="col-6 text-right text-sm">
                        <span id="modalDetailAccountBandwidthUsage">0 GB</span>
                    </div>
                    <div class="col-12 my-1">
                        <button class="btn-block btn btn-sm btn-warning text-sm generate-uuid">
                            <i class="fa fa-sync"></i>
                            Re-Generate UUID
                        </button>
                    </div>
                    <div class="col-12 my-1">
                        <div class="dropdown">
                            <button class="btn-block btn btn-sm btn-default dropdown-toggle" type="button"
                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">
                                <i class="fa fa-cog"></i>
                                My Config
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"
                                id="modalDetailAccountConfig">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
