@extends('layouts.auth')

@push('js')
<script>
$(document).ready(function() {
    if($('#input-tunnel-type').val() === 'GRE') {
        $('#div-remote-port').hide();
    }

    $('#input-tunnel-type').on('change', function() {
        if($('#input-tunnel-type').val() === 'GRE') {
            $('#div-remote-port').hide();
        }   
        else {
            $('#div-remote-port').show();
        }
    })
});
</script>
@endpush
@section('content')
            <div class="card">
                <div class="card-header">
                @isset($edit)
                    Change Existing Tunnel
                @else
                    Provision New Tunnel
                @endisset    
                </div>

                <div class="card-body">
                    @error('message')
                        <div class="alert alert-danger" role="alert">
                            {{ $message }}
                        </div>
                    @enderror
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    <form method="POST" action="{{ isset($edit) ? route('tunnel_edit_action') : route('tunnel_create_action')}}">
                        @csrf
                        @isset($edit)
                            <input name="id" value="{{ $id }}" style="display:none;"></input>
                        @endisset
                        <div class="mb-3">
                            <label for="input-reference-name" class="fw-bold form-label">Reference Name</label>
                            <input id="input-reference-name" type="text" class="form-control" placeholder="Reference Name"  name="reference-name" @isset($edit) value="{{ $reference_name }}" @endisset required>
                            <small class="form-text">This is for your reference only, and has no bearing on the tunnel.</small>
                        </div>
                        <div class="mb-3">
                            <label for="input-region" class="fw-bold form-label">Region</label>
                            <select class="form-select" name="region" @isset($edit) value="{{ $region }}" readonly @endisset required>
                                @isset($regions)
                                    @foreach($regions as $region)
                                <option value="{{$region}}">{{$region}}</option>
                                    @endforeach
                                @else
                                <option value="{{$region}}" selected>{{$region}}</option>
                                @endisset
                            </select>
                            <small class="form-text">The region you would like your tunnel provisioned in.</small>
                        </div>
                        <div class="mb-3">
                            <label for="input-tunnel-type" class="fw-bold form-label">Tunnel Type</label>
                            <select id="input-tunnel-type" class="form-select" name="tunnel-type" @isset($edit) readonly @endisset required>
                            @isset($edit)
                                <option value="{{$tunnel_type}}" @isset($edit) selected @endisset>{{$tunnel_type}}</option>
                            @else
                                @foreach(['VXLAN', 'GRE'] as $type)
                                <option value="{{$type}}" @isset($edit) {{ $type == $tunnel_type ? 'selected' : '' }} @endisset>{{$type}}</option>
                                @endforeach
                            @endisset
                           
                            </select>
                            <small class="form-text">The type of tunnel you wish to establish.</small>
                        </div>
                        <div class="mb-3">
                            <label for="input-remote-ip-address" class="fw-bold form-label">Remote IP Address</label>
                            <input id="input-remote-ip-address" type="text" class="form-control" placeholder="x.x.x.x" name="remote-ip-address" @isset($edit) value="{{ $remote_ip_address }}" readonly @endisset required>
                            <small class="form-text">The IP address that you would like a tunnel established to.</small>
                        </div>
                        <div id="div-remote-port" class="mb-3">
                            <label for="input-remote-port" class="fw-bold form-label">Remote Port</label>
                            <input id="input-remote-port" type="number" class="form-control" value="4789" name="remote-port" @isset($edit) value="{{ $remote_port }}" readonly @endisset required>
                            <small class="form-text">A valid port number that the tunnel will establish to.</small>
                        </div>
                        <div class="mb-3">
                            <label for="input-tunnel-speed" class="fw-bold form-label">Speed Limit</label>
                            <select id="input-tunnel-speed" class="form-select" name="tunnel-speed" required>
                            @foreach(['10', '25', '50', '125', '250', '500', '1000'] as $speed)
                                <option value="{{$speed}}" @isset($edit) {{ $speed == $tunnel_speed ? 'selected' : '' }} @endisset>{{$speed}}mbit</option>
                            @endforeach
                            </select>
                            <small class="form-text">The speed limit that will be applied to the tunnel.</small>
                        </div>
                        <div class="mb-3">
                            <label for="input-asn" class="fw-bold form-label">ASN</label>
                            <select id="input-asn" class="form-select" name="asn" @isset($edit) readonly @endisset required>
                                @isset($asns)
                                    @foreach($asns as $asn)
                                <option value="{{$asn}}">{{$asn}}</option>
                                    @endforeach
                                @else
                                <option value="{{$asn}}" selected>{{$asn}}</option>
                                @endisset
                            </select>
                            <small class="form-text">The autonomous system number for the group the remote address belongs to.</small>
                        </div>
                        <div class="mb-3 text-center">
                            <button class="btn btn-primary">
                            @isset($edit)
                                Confirm Changes
                            @else
                                Create
                            @endisset
                            </button>
                        </div>
                    </form>
                </div>
            </div>
@endsection