@extends('wallet.layouts.master')
@section('title','Clocker')
@section('description', 'Clocker - Traffic filtering and blocking configuration')
@section('page-css')
    <style>
        .country-labl {
            display: block;
        }
        .country-labl ~ .bootstrap-select .dropdown-menu.show {
            max-height: 350px !important;
        }
    </style>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">
@endsection
@section('content')
    <div class="heading d-flex justify-content-between align-items-center gap-3 mt-5 px-1">
            <h2 class='fw-bold fs-2'>Clocker</h2>
            @if($clockerExists)
                <div class="form-check form-switch" title="Enable/Disable Clocker">
                    <input style="cursor:pointer;" class="form-check-input"
                           {{$clocker->status ? 'checked' : ''}} type="checkbox"
                           id="clocker_status">
                </div>
            @endif
        </div>
        <div class="bg-line-dark rounded-4 shadow p-3 mt-32">
            <ul class="nav nav-pills mb-3 gap-2" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-condition-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-condition" type="button" role="tab"
                            aria-controls="pills-condition"
                            aria-selected="true">Conditions
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button title="Filter" class="nav-link" id="pills-filters-tab"
                            data-bs-toggle="pill"
                            data-bs-target="#pills-filters" type="button" role="tab"
                            aria-controls="pills-filters" aria-selected="false"> Filters
                    </button>
                </li>
            </ul>
            <form id="save_clocker">
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-condition" role="tabpanel"
                         aria-labelledby="pills-condition-tab">
                        <div class="row">
                            <div class="mb-4 col-md-12">
                                <label class="form-label country-labl" for="country">Country</label>
                                <select id="country" multiple data-live-search="true"
                                        class="selectpicker w-100">
                                    @foreach($countries as $country)
                                        <option
                                            value="{{$country->name}}" {{ in_array($country->name, $selectedCountries) ? 'selected' : '' }}>{{$country->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-4 col-md-4">
                                <label class="form-label d-block" for="os">OS</label>
                                <select id="os" multiple data-live-search="true" class="selectpicker w-100">
                                    <option value="Windows" {{ in_array('Windows', $selectedOS) ? 'selected' : '' }}>Windows</option>
                                    <option value="Mac OS X" {{ in_array('Mac OS', $selectedOS) ? 'selected' : '' }}>Mac OS X</option>
                                    <option value="Linux" {{ in_array('Linux', $selectedOS) ? 'selected' : '' }}>Linux</option>
                                    <option value="Ubuntu" {{ in_array('Ubuntu', $selectedOS) ? 'selected' : '' }}>Ubuntu</option>
                                    <option value="iPhone" {{ in_array('iPhone', $selectedOS) ? 'selected' : '' }}>iPhone</option>
                                    <option value="iPod" {{ in_array('iPod', $selectedOS) ? 'selected' : '' }}>iPod</option>
                                    <option value="Android" {{ in_array('Android', $selectedOS) ? 'selected' : '' }}>Android</option>
                                    <option value="BlackBerry" {{ in_array('BlackBerry', $selectedOS) ? 'selected' : '' }}>BlackBerry</option>
                                </select>
                            </div>
                            <div class="mb-4 col-md-4">
                                <label class="form-label d-block" for="device">Device</label>
                                <select id="device" multiple data-live-search="true" class="selectpicker w-100">
                                    <option value="Desktop" {{ in_array('Desktop', $selectedDevices) ? 'selected' : '' }}>Desktop</option>
                                    <option value="Mobile" {{ in_array('Mobile', $selectedDevices) ? 'selected' : '' }}>Mobile</option>
                                    <option value="Tablet" {{ in_array('Tablet', $selectedDevices) ? 'selected' : '' }}>Tablet</option>
                                </select>
                            </div>
                            <div class="mb-4 col-md-4">
                                <label class="form-label d-block" for="browser">Browser</label>
                                <select id="browser" multiple data-live-search="true" class="selectpicker w-100">
                                    <option value="IE" {{ in_array('IE', $selectedBrowsers) ? 'selected' : '' }}>Internet Explorer</option>
                                    <option value="Edge" {{ in_array('Edge', $selectedBrowsers) ? 'selected' : '' }}>Microsoft Edge</option>
                                    <option value="Firefox" {{ in_array('Firefox', $selectedBrowsers) ? 'selected' : '' }}>Firefox</option>
                                    <option value="Chrome" {{ in_array('Chrome', $selectedBrowsers) ? 'selected' : '' }}>Google Chrome</option>
                                    <option value="Opera" {{ in_array('Opera', $selectedBrowsers) ? 'selected' : '' }}>Opera</option>
                                    <option value="MiniOpera" {{ in_array('MiniOpera', $selectedBrowsers) ? 'selected' : '' }}>MiniOpera</option>
                                    <option value="Safari" {{ in_array('Safari', $selectedBrowsers) ? 'selected' : '' }}>Apple Safari</option>
                                </select>
                            </div>

                            <div class="mb-3 col-md-12">
                                <label class="form-label" for="whitelist_ips">Whitelist IPs<sub> (Comma separated IPs that bypass all blocking)</sub></label>
                                <textarea id="whitelist_ips" rows="3"
                                          class="form-control">{{$clocker->whitelist_ips ?? ''}}</textarea>
                            </div>

                            <div class="mb-3 col-md-6">
                                <label class="form-label" for="ips">IPs<sub> (Please enter comma seperated IPs)</sub></label>
                                <textarea id="ips" rows="4"
                                          class="form-control">{{$clocker->ips ?? ''}}</textarea>
                            </div>

                            <div class="mb-3 col-md-6">
                                <label class="form-label" for="ua">User Agent<sub> (Please enter comma seperated User Agent)</sub></label>
                                <textarea id="ua" rows="4"
                                          class="form-control">{{$clocker->ua ?? ''}}</textarea>
                            </div>

                            <div class="mb-3 col-md-6">
                                <label class="form-label" for="refferer">Refferer<sub> (Please enter comma seperated Refferer)</sub></label>
                                <textarea id="refferer" rows="4"
                                          class="form-control">{{$clocker->refferer ?? ''}}</textarea>
                            </div>

                            <div class="mb-3 col-md-6">
                                <label class="form-label" for="isp">ISP<sub> (Please enter comma seperated ISP)</sub></label>
                                <textarea id="isp" rows="4"
                                          class="form-control">{{$clocker->isp ?? ''}}</textarea>
                            </div>
                            <div class="">
                                <label class="form-label" for="asn">ASN<sub> (Please enter comma seperated ASN)</sub></label>
                                <textarea id="asn" rows="4"
                                          class="form-control">{{$clocker->asn ?? ''}}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade pt-5" id="pills-filters" role="tabpanel"
                         aria-labelledby="pills-filters-tab">
                        <div class="row align-items-end gap-1 justify-content-center">
                            <div class="col-md-5">
                                <label class="form-label d-block" for="filters">Filters</label>
                                <select id="filters" multiple data-live-search="true"
                                        class="selectpicker w-100">
                                    <option value="Bot" {{ in_array('Bot', $selectedFilters) ? 'selected' : '' }}>Bot</option>
                                    <option value="Black List IPs" {{ in_array('Black List IPs', $selectedFilters) ? 'selected' : '' }}>Black List IPs</option>
                                    <option value="Proxy" {{ in_array('Proxy', $selectedFilters) ? 'selected' : '' }}>Proxy</option>
                                    <option value="VPN" {{ in_array('VPN', $selectedFilters) ? 'selected' : '' }}>VPN</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="text-center my-2">
                        <button type="submit" class="btn btn-primary" id="submit_btn">Save</button>
                    </div>
                </div>
            </form>
        </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#clocker-page").addClass('active');
            $('.selectpicker').selectpicker();
        });
    </script>
@endsection