@extends('admin.template')

@push('scripts')
   <script>
        $(function() {
            $('#status').on('click', function() {
                if ($(this).prop('checked') == true) {
                    $(this).attr('checked', true);
                    $('#status_text').text("Enabled");
                } else {
                    $(this).attr('checked', false);
                    $('#status_text').text("Disabled");
                }
            })

            $('#use_default').on('click', function() {
                $('#ovpn_file').attr('required', false);
            });

            $('#use_file').on('click', function() {
                $('#ovpn_file').attr('required', true);
            });

            var countryOption = $('#country_code option[value="{{strtoupper($server->country_code)}}"]');
            countryOption.attr('selected', 'selected');
            var country = countryOption.text();
            $('button[data-id="country_code"]').attr('title', country);
            $('button[data-id="country_code"] .filter-option').text(country);
            $('.form-line').each(function () {$(this).removeClass('focused')});
        });
   </script>
   @if($showSuccess ?? '')
        <script>
            toastr.options = {
                tapToDismiss: true,
                toastClass: 'toast',
                containerId: 'toast-container',
                debug: false,
                fadeIn: 300,
                fadeOut: 500,
                extendedTimeOut: 1000,
                iconClass: 'toast-info',
                positionClass: 'toast-top-right',
                timeOut: 3000,
                titleClass: 'toast-title',
                messageClass: 'toast-message'
            }

            toastr.success('Server added successfully');
        </script>
   @endif
@endpush

@section('content')
<div class="row clearfix card">
    <form class="p-20" method="post" action="{{$action}}" enctype='multipart/form-data'>
        @csrf
        @if($server->id != -1)
            <input type="hidden" name="id" value="{{$server->id}}">
        @endif

        <div class="header">
            <h2 class="card-inside-title" style="display: inline-block;">General Info</h2>
            <div class="col-md-2 pull-right">
                <div class="switch">
                    <label>
                        <span id="status_text">{{$server->is_enabled == 1 ? 'Enabled' : 'Disabled'}}</span>
                        <input type="hidden" name="is_enabled" value="0">
                        <input id="status" name="is_enabled" type="checkbox" {{$server->is_enabled == 1 ? 'checked' : ''}}>
                        <span class="lever switch-col-green"></span>
                    </label>
                </div>
            </div>
        </div>
        <div class="body squize-up">
            <div class="row clearfix">
                <div class="col-md-3">
                    <div class="form-group">
                        <div class="form-line">
                            <label for="country_code">Country (*)</label>
                            <select class="selectpicker countrypicker" data-live-search="true" id="country_code" name="country_code" required></select>
                            <span class="text-danger">@error('country_code'){{$message}}@enderror</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <div class="form-line">
                            <label for="city">City name</label>
                            <input type="text" class="form-control" id="city" name="city" value="{{$server->city}}">
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <div class="form-line">
                            <label for="ip">IP address (*)</label>
                            <input type="text" class="form-control" id="ip" name="ip" value="{{$server->ip}}" required {{$server->id == -1 ? '' : 'disabled'}}>
                            <span class="text-danger">@error('ip'){{$message}}@enderror</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="is_free">Availability (*)</label>
                        <select class="form-control" id="is_free" name="is_free">
                            <option value="1" {{$server->is_free == 1 ? 'selected' : ''}}>Free</option>
                            <option value="0" {{$server->is_free == 0 ? 'selected' : ''}}>Premium</option>
                        </select>
                        <span class="text-danger">@error('is_free'){{$message}}@enderror</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <div class="form-line">
                            <label for="capacity">Capacity</label>
                            <input type="number" class="form-control" id="capacity" name="capacity" value="{{$server->capacity}}" min=1>
                            <span class="text-danger">@error('capacity'){{$message}}@enderror</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row clearfix">
                <div class="col-md-4">
                    <div class="form-group">
                        <div class="form-line">
                            <label for="free_connect_duration">Connect duration (in minutes, 0 for unlimited)</label>
                            <input type="number" class="form-control" id="free_connect_duration" name="free_connect_duration" value="{{$server->free_connect_duration}}" min=0>
                            <span class="text-danger">@error('free_connect_duration'){{$message}}@enderror</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row clearfix">
                <div class="col-md-3">
                    <div class="form-group">
                        <div class="form-line">
                            <label for="vpn_username">VPN Username</label>
                            <input type="text" class="form-control" id="vpn_username" name="vpn_username" value="{{$server->vpn_username}}">
                            <span class="text-danger">@error('vpn_username'){{$message}}@enderror</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <div class="form-line">
                            <label for="vpn_password">VPN Password</label>
                            <input type="text" class="form-control" id="vpn_password" name="vpn_password" value="{{$server->vpn_password}}">
                            <span class="text-danger">@error('vpn_password'){{$message}}@enderror</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="header">
            <h2 class="card-inside-title">Configuration options</h2>
        </div>
        <div class="body squize-up">
            @if($server->id == -1)
                <ul class="nav nav-tabs tab-nav-right" role="tablist">
                    <li role="presentation" id="use_default" class="{{$server->use_file ? '' : 'active'}}"><a href="#default" data-toggle="tab">Use default config</a></li>
                    <li role="presentation" id="use_file" class="{{$server->use_file ? 'active' : ''}}"><a href="#custom" data-toggle="tab">Use custom ovpn file</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="default">
                        <div class="row clearfix">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="form-line">
                                        <label for="port">Port (*)</label>
                                        <input type="number" min="1" max="65535" class="form-control" id="port" name="port" value="{{$server->port}}" required>
                                        <span class="text-danger">@error('port'){{$message}}@enderror</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="protocol">Protocol (*)</label>
                                    <select class="form-control" id="protocol" name="protocol" required>
                                        <option value="udp" {{$server->protocol === 'udp' ? 'selected' : ''}}>UDP</option>
                                        <option value="tcp" {{$server->protocol === 'tcp' ? 'selected' : ''}}>TCP</option>
                                    </select>
                                    <span class="text-danger">@error('protocol'){{$message}}@enderror</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="custom">
                        <div id="upload_file_container">
                            <label for="ovpn_file">Custom ovpn file (*)</label>
                            <input type="file" class="form-control" id="ovpn_file" name="ovpn_file" accept=".ovpn" {{$server->use_file ? 'required' : ''}}>
                        </div>
                    </div>
                </div>
            @elseif ($server->use_file)
                <input type="hidden" name="use_file" value="1">
                <ul class="nav nav-tabs tab-nav-right" role="tablist">
                    <li role="presentation" class="active"><a href="#custom" data-toggle="tab">Use custom ovpn file</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="custom">
                        <p>Using custom ovpn file for this server. <a target="_blank" href="{{Storage::url('public/ovpn_files/' . $server->id . '.ovpn')}}">Click to open file</a>.</p>
                    </div>
                </div>
            @else
                <input type="hidden" name="use_file" value="0">
                <ul class="nav nav-tabs tab-nav-right" role="tablist">
                    <li role="presentation" class="active"><a href="#default" data-toggle="tab">Using default config</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="default">
                        <div class="row clearfix">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="form-line">
                                        <label for="port">Port (*)</label>
                                        <input type="number" min="1" max="65535" class="form-control" id="port" name="port" value="{{$server->port}}" required>
                                        <span class="text-danger">@error('port'){{$message}}@enderror</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="protocol">Protocol (*)</label>
                                    <select class="form-control" id="protocol" name="protocol" required>
                                        <option value="udp" {{$server->protocol === 'udp' ? 'selected' : ''}}>UDP</option>
                                        <option value="tcp" {{$server->protocol === 'tcp' ? 'selected' : ''}}>TCP</option>
                                    </select>
                                    <span class="text-danger">@error('protocol'){{$message}}@enderror</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <div class="header">
            <h2 class="card-inside-title">Server's additional info</h2>
        </div>
        <div class="body">
            <div class="row clearfix">
                <div class="col-md-3">
                    <div class="form-group">
                        <div class="form-line">
                            <label for="service_provider_link">Service provider link</label>
                            <input type="url" list="links" class="form-control" id="service_provider_link" name="service_provider_link" value="{{$server->service_provider_link ? $server->service_provider_link : ''}}">
                            <datalist id="links">
                                @foreach($links as $link)
                                    <option value="{{ $link->service_provider_link }}">
                                @endforeach
                            </datalist>
                            <span class="text-danger">@error('service_provider_link'){{$message}}@enderror</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="form-group form-float">
                        <div class="form-line">
                            <label for="notes">Notes</label>
                            <textarea id="notes" name="notes" rows="5" class="form-control no-resize" aria-required="true">{{$server->notes}}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" name="submit" value="" class="btn bg-green waves-effect"><i class="material-icons">save</i><span> Save Changes</span></button>
            @if($server->id == -1)
                <button type="submit" name="submit" value="new" class="btn bg-teal waves-effect"><i class="material-icons">save</i><span> Save then add new one</span></button>
            @endif
        </div>
    </form>
</div>

@endsection