@extends('admin/layouts/admin')
@section('title',  __($translatePrefix . '.show.title', ['name' => $item->name]))
@section('scripts')
    <script>
        window.labels = '@json($labels)';
    </script>
    <script src="{{ Vite::asset('resources/global/js/admin/server.js') }}"></script>
@endsection
@section('content')
    <div class="container mx-auto">
        @include('admin/shared/alerts')
        <div class="grid grid-cols-12 gap-4">
                <div class="col-span-12 sm:col-span-8">
                    <form method="POST" class="card" action="{{ route($routePath . '.update', ['server' => $item]) }}" autocomplete="off">
                        <div class="card-heading">
                            <div>
                                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
                                    {{ __($translatePrefix . '.show.title', ['name' => $item->name]) }}
                                </h2>
                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                    {{ __($translatePrefix. '.show.subheading', ['date' => $item->created_at->format('d/m/y')]) }}
                                </p>
                            </div>

                            <div class="mt-4 flex items-center space-x-4 sm:mt-0">
                                <button class="btn btn-primary">
                                    {{ __('admin.updatedetails') }}
                                </button>
                            </div>
                        </div>
                        @method('PUT')
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                        <div class="flex flex-col">
                            @include('admin/shared/input', ['name' => 'name', 'label' => __('global.name'), 'value' => $item->name, 'attributes' => ['autocomplete' => 'off']])
                        </div>
                            <div class="flex flex-col">
                                @include('admin/shared/select', ['name' => 'type', 'label' => __($translatePrefix . '.type'), 'options' => $types, 'value' => $item->type])
                            </div>

                            <div class="flex flex-col" id="hostname-input-container">
                                @include('admin/shared/input', ['name' => 'hostname', 'label' => __($translatePrefix . '.hostname'), 'value' => old('hostname', $item->hostname), 'attributes' => ['autocomplete' => 'off', 'data-server-hostname-input' => true]])
                            </div>
                            <div class="flex-col hidden" id="registrar-select-container">
                                @include('admin/shared/select', ['name' => 'hostname', 'id' => 'registrar-hostname', 'label' => 'Registrar', 'options' => $registrars, 'value' => old('hostname', $item->hostname), 'attributes' => ['data-server-registrar-select' => true, 'disabled' => true]])
                            </div>

                            <div class="flex flex-col">
                                @include('admin/shared/input', ['name' => 'address', 'label' => __($translatePrefix . '.address'), 'value' => old('address', $item->address), 'attributes' => ['autocomplete' => 'off']])
                            </div>
                        <div class="flex flex-col">
                                @include('admin/shared/status-select', ['value' => $item->status])
                            </div>

                            <div class="flex flex-col" id="port-container">
                                @include('admin/shared/input', ['name' => 'port', 'label' => __($translatePrefix . '.port'), 'value' => old('port', $item->port), 'attributes' => ['autocomplete' => 'off']])
                            </div>

                            <div class="hidden flex-col justify-center" id="test-mode-container">
                                @include('admin/shared/checkbox', ['name' => 'test_mode', 'label' => 'Test mode', 'checked' => old('test_mode', $item->isTestMode())])
                            </div>

                            <div class="flex flex-col">
                                @include('admin/shared/input', ['name' => 'username', 'id' => 'username', 'label' => $labels[$item->type][0] ?? __('global.username'), 'value' => $item->type === \App\Contracts\Store\ProductTypeInterface::DOMAIN ? old('username', $item->username) : old('username'), 'attributes' => ['autocomplete' => 'off', 'aria-describedby' => 'username-help']])
                                <p id="username-help" class="text-sm text-gray-500 dark:text-gray-400 mt-2">{{ __('admin.blanktochange') }}</p>
                            </div>

                            <div class="flex flex-col">
                                @include('admin/shared/password', ['name' => 'password', 'label' => $labels[$item->type][1] ?? __('global.password'), 'value' => $item->type === \App\Contracts\Store\ProductTypeInterface::DOMAIN ? $item->password : null, 'help' => __('admin.blanktochange'), 'attributes' => ['autocomplete' => 'new-password']])
                            </div>
                            <input type="hidden" name="id" value="{{ $item->id }}">
                        </div>
                    </form>
                </div>
                <div class="col-span-12 sm:col-span-4">
                    <div class="card">
                        <div class="card-heading">
                            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200" id="">
                                {{ __($translatePrefix . '.testconnection.title') }}
                            </h2>
                        </div>
                        <div class="card-body">
                            <div class="mt-3 hidden text-gray-800 dark:text-gray-200" id="result-container">
                                <ul class="mt-3 flex flex-col">
                                    <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:border-gray-700 dark:text-gray-200">
                                        <div class="flex items-center justify-between w-full">
                                            <strong>{{ __("global.state")}}</strong>
                                            <span id="state"></span>
                                        </div>
                                    </li>
                                    <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:border-gray-700 dark:text-gray-200">
                                        <div class="flex items-center justify-between w-full">
                                            <strong>{{ __($translatePrefix . ".testconnection.statuscode")}}</strong>
                                            <span id="statuscode"></span>
                                        </div>
                                    </li>
                                </ul>

                                <div class="mt-3 overflow-y-auto
  [&::-webkit-scrollbar]:w-2
  [&::-webkit-scrollbar-track]:rounded-full
  [&::-webkit-scrollbar-track]:bg-gray-100
  [&::-webkit-scrollbar-thumb]:rounded-full
  [&::-webkit-scrollbar-thumb]:bg-gray-300
  dark:[&::-webkit-scrollbar-track]:bg-slate-700
  dark:[&::-webkit-scrollbar-thumb]:bg-slate-500" style="max-width: 100%; max-height: 200px; overflow-x: hidden; overflow: scroll;">

                                    <p id="data"><strong>{{ __($translatePrefix . ".testconnection.data")}} : </strong>

                                    </p>
                            </div>
                        </div>

                            <button class="btn btn-success mt-4 w-full" id="test-connection" data-fetch="{{ route('admin.servers.test') }}?server_id={{ $item->id }}&">
                                <i class="bi bi-arrow-clockwise mr-2 "></i>
                                {{ __($translatePrefix . '.testconnection.button') }}
                            </button>
                    </div>
                </div>
                    @if (staff_has_permission('admin.show_metadata'))
                    <button class="btn btn-secondary w-full" type="button" data-hs-overlay="#metadata-overlay">
                        {{ __('admin.metadata.title') }}
                    </button>
                    @endif
            </div>
    </div>
    @include('admin/metadata/overlay', ['item' => $item])
@endsection