@extends('layouts.admin_layout.admin_layout')
@section('content')
<style>
    /* #country_name option[value=""] {
    display: none;
} */
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="content-wrapper custom-content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Edit Server</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ url('admin/dashboard') }}"  style="color: #87888C">Home</a></li>
                        <li class="breadcrumb-item">Edit Server</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-12 col-md-8 col-lg-6">
                    <div class="card custom-card card-primary">
                        <br>
                        <x-alert />
                        <form action="{{ route('servers.update', $server->id) }}" method="post" enctype="multipart/form-data">
                            @csrf
                            
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="country_name">Country Name</label>
                                    <select name="country_id" id="country_name" class="form-control custom-input"  style="width: 100%;">
                                        <option selected>Select County Name---</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="country_vpn">Country Vpn</label>
                                    <input type="text" class="form-control custom-input" name="country_vpn" id="country_vpn" value="{{ old('country_vpn', $server->country_vpn) }}">
                                    @error('country_vpn')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="server_name">Server Name</label>
                                    <input type="text" class="form-control custom-input" name="server_name" id="server_name" value="{{ old('server_name', $server->server_name) }}">
                                    @error('server_name')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="vpn_username">Vpn Username</label>
                                    <input type="text" class="form-control custom-input" name="vpn_username" id="vpn_username" value="{{ old('vpn_username', $server->vpn_username) }}">
                                    @error('vpn_username')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="vpn_password">Vpn Password</label>
                                    <input type="text" class="form-control custom-input" name="vpn_password" id="vpn_password" value="{{ old('vpn_password', $server->vpn_password) }}">
                                    @error('vpn_password')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="udp">Ovpn Config Script [UDP]</label>
                                    <textarea class="form-control custom-input" name="udp" id="udp" rows="3">{{ old('udp', $server->udp) }}</textarea>
                                    @error('udp')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="tcp">Ovpn Config Script [TCP]</label>
                                    <textarea class="form-control custom-input" name="tcp" id="tcp" rows="3">{{ old('tcp', $server->tcp) }}</textarea>
                                    @error('tcp')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                
                                <div class="form-group">
                                    <label for="provide_to">Provide To</label>
                                    <select name="provide_to" id="provide_to" class="form-control custom-input">
                                        <option selected>Select Server Type---</option>
                                        <option value="free" {{ $server->provide_to == 'free' ? 'selected' : '' }}>Free Server</option>
                                        <option value="premium" {{ $server->provide_to == 'premium' ? 'selected' : '' }}>Premium Server</option>                                    
                                    </select>
                                </div>
                              
                            </div>
                            <div class="card-footer">
                                <button type="submit" class="custom-submit">Update Server</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    $(document).ready(function() {
        function categoryData() {
            $.ajax({
                type: "GET",
                url: "{{ route('servers.create') }}",
                success: function(response) {
                    console.log(response);
                    populateSelect(response.categories);
                },
                error: function() {
                    console.log("Ajax request failed");
                }
            });
        }

        categoryData();

        function populateSelect(categories) {
            var select = $('#country_name');
        
            $.each(categories, function(index, category) {
                var imagePath = '{{ asset("/") }}' + category.flag_name;
                var option = $('<option>', {
                    value: category.id,
                    'data-imagesrc': imagePath,
                    text: category.name
                });
                
                if (category.id == {{ $server->country_id }}) {
                    option.attr('selected', 'selected');
                }
                
                select.append(option);
            });

        
            select.select2({
                templateResult: formatCountry,
                placeholder: 'Select a country',
            });
        }


        function formatCountry(option) {
            if (!option.id) {
                return option.text;
            }

            var ob = $('<span><img src="' + $(option.element).data('imagesrc') + '" class="flag-icon" style="height: 20px; width: 40px; padding-right: 10px;" /> ' + option.text + '</span>');
            return ob;
        }
});
</script>
@endsection