@extends('layouts.admin_layout.admin_layout')
@section('content')
<style>
    /* #country_name option[value=""] {
    display: none;
} */
.custom-color {
    color: red;
    background-color: yellow;
}
</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">Add New 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">Add New 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.store') }}" 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%; background-color: #21272D; color: #858F98; border: 1px solid #858F98;">
                                        <option style="color: red;" 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">
                                </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">
                                </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">
                                </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">
                                </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"></textarea>
                                </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"></textarea>
                                </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">Free Server</option>
                                        <option value="premium">Premium Server</option>                                    
                                    </select>
                                </div>
                                <div class="">
                                    <button type="submit" class="custom-submit mr-2">Add Server</button>
                                    <a href="{{ url('admin/dashboard') }}" class="custom-cancel">Cancel</a>
                                </div>
                            </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 = new Option(category.name, category.id, false, false);
                option.dataset.imagesrc = imagePath;
                option.classList.add('custom-color');
                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