@extends('administrator.layout.master')
@push('plugin-styles')
    @foreach (config('assets.datatable.css') as $datatable)
        <link href="{{ asset($datatable) }}" rel="stylesheet" />
    @endforeach
@endpush

@section('breadcrumb')
    @php
        $breadcrumbItems = [
            ['label' => 'Modules'],
            ['label' => 'DNS Server', 'url' => route('module.dns.index')],
            ['label' => 'Add DNS Server', 'active' => true],
        ];
    @endphp
    <x-admin-breadcrumb :items="$breadcrumbItems" />
@endsection
@section("content")
    @if(auth()->guard('admins')->user()->can("add module dns"))
        <div class="card card-outline card-primary">
            <form action="{{ route('module.dns.store') }}" method="post">
                @csrf
                <div class="card-body p-4">
                    <div class="row g-4">
                        {{-- Server Host --}}
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-medium" for="name">Server Host <span
                                    class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0">
                                    <i data-lucide="server" width="18" height="18"></i>
                                </span>
                                <input type="text" id="name" name="name" class="form-control border-start-0 ps-3 text-sm"
                                    placeholder="e.g. 103.42.xx.xxx" value="{{ old('name') }}" required>
                            </div>
                        </div>
                        {{-- User --}}
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-medium" for="user">User <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0">
                                    <i data-lucide="user" width="18" height="18"></i>
                                </span>
                                <input type="text" id="user" name="user" class="form-control border-start-0 ps-3 text-sm"
                                    placeholder="e.g. root" value="{{ old('user') }}" required>
                            </div>
                        </div>
                        {{-- Password --}}
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-medium" for="password">Password <span
                                    class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0">
                                    <i data-lucide="lock" width="18" height="18"></i>
                                </span>
                                <input type="password" id="password" name="password"
                                    class="form-control border-start-0 ps-3 text-sm" placeholder="•••••••••"
                                    value="{{ old('password') }}" required>
                            </div>
                        </div>

                        {{-- Status --}}
                        <div class="col-12 col-md-6">
                            <label class="form-label fw-medium" for="status">Status</label>
                            <div class="input-group flex-nowrap">
                                <span class="input-group-text bg-light border-end-0">
                                    <i data-lucide="activity" width="18" height="18"></i>
                                </span>
                                <select class="form-control select2 single__select border-start-0 ps-3" name="status"
                                    id="status" style="width: 100%;">
                                    @foreach(App\Enums\Status::getOptions() as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- Fixed Bottom Actions --}}
                <x-fixed-action-bar>
                    <x-button-c-r-m route="module.dns.index" variant="secondary" icon="arrow-left">
                        Cancel
                    </x-button-c-r-m>
                    <x-button-c-r-m type="submit" variant="primary" icon="save">
                        Create
                    </x-button-c-r-m>
                </x-fixed-action-bar>
            </form>
        </div>
    @else
        <div class="alert alert-danger alert-dismissible">
            <h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module dns
                management department</h5>
        </div>
    @endif
@endsection
@push('plugin-scripts')
    @foreach (config('assets.datatable.js') as $datatable)
        <script src="{{ asset($datatable) }}"></script>
    @endforeach
    <script>
        $(document).ready(function () {
            $('.select2').select2();
        });
    </script>
@endpush