@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' => 'Package vCenter', 'route' => 'package.vm.index'],
            ['label' => 'Virtual Machine', 'route' => 'package.vm.index'],
            ['label' => 'Add VM', 'active' => true],
        ];
    @endphp
    <x-admin-breadcrumb :items="$breadcrumbItems" />
@endsection

@section('content')
@if(auth()->guard('admins')->user()->can("add module vcenter"))
    <form action="{{ route('package.vm.store') }}" method="post">
        @csrf
        <div class="row align-items-start">
            <div class="col-md-8">
                <div class="card card-primary card-outline">
                    <div class="card-header bg-white">
                        <h5 class="card-title m-0">Add Virtual Machine</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-4">
                            <h5 class="text-primary border-bottom mb-3 pb-2">vCenter Configuration</h5>
                            <x-module.v-center :model="null" />
                            <x-module.datacenter :model="null" />
                            <x-module.host :model="null" />
                        </div>

                        <div class="mb-4">
                            <h5 class="text-primary border-bottom mb-3 pb-2">VM Information</h5>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="vm_id">VM ID <span class="text-danger">*</span></label>
                                        <input type="text" id="vm_id" name="vm_id" value="{{ old('vm_id') }}"
                                            class="form-control" required placeholder="vm-XXXX" />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="name">Name <span class="text-danger">*</span></label>
                                        <input type="text" id="name" name="name" value="{{ old('name') }}"
                                            class="form-control" required placeholder="VM Name" />
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="cpu">CPU (cores)</label>
                                        <input type="number" id="cpu" name="cpu" value="{{ old('cpu') }}"
                                            class="form-control" placeholder="Number of cores" />
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="ram_mb">RAM (MB)</label>
                                        <input type="number" id="ram_mb" name="ram_mb" value="{{ old('ram_mb') }}"
                                            class="form-control" placeholder="RAM in MB" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card card-primary card-outline">
                    <div class="card-header bg-white">
                        <h5 class="card-title m-0">Actions</h5>
                    </div>
                    <div class="card-body">
                        <x-button-crm type="submit" variant="primary" size="lg" icon="plus-circle" class="w-100 mb-2">Create VM</x-button-crm>
                        <x-button-crm type="button" variant="outline-secondary" size="lg" route="package.vm.index" icon="arrow-left" class="w-100">Cancel</x-button-crm>
                    </div>
                </div>
            </div>
        </div>
    </form>
@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 vCenter management department</h5>
    </div>
@endif
@endsection

@push('plugin-scripts')
    @foreach (config('assets.datatable.js') as $datatable)
        <script src="{{ asset($datatable) }}"></script>
    @endforeach
@endpush