@extends('administrator.layout.master')
@push('plugin-styles')
    <link href="{{ asset('build/plugins/select2/select2.min.css') }}" rel="stylesheet" />
@endpush

@php
    use App\Enums\Status;
@endphp

@section('breadcrumb')
    @php
        $breadcrumbItems = [
            ['label' => 'Modules'],
            ['label' => 'Package vCenter'],
            ['label' => 'OS Group'],
            ['label' => 'Add New', 'active' => true],
        ];
    @endphp
    <x-admin-breadcrumb :items="$breadcrumbItems" />
@endsection
@section('content')
    @if (auth()->guard('admins')->user()->can('add package module'))
        <div class="card card-outline card-primary">
            <form action="{{ route('package.group.store') }}" method="post">
                @csrf
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            {{-- Name --}}
                            <div class="row form-group align-items-center mb-0">
                                <label for="name" class="col-md-3 text-right">Group Name</label>
                                <div class="col-md-9 bg-customer p-1">
                                    <input type="text" id="name" name="name" placeholder="" value=""
                                        class="form-control">
                                </div>
                            </div>
                            {{-- Thumbnail --}}
                            <div class="row form-group align-items-center mb-0">
                                <label for="thumbnail" class="col-md-3 text-right">Thumbnail</label>
                                <div class="col-md-9 p-1">
                                    <div class="row">
                                        <div class="col-md-8 bg-customer">
                                            <input type="text" data-choise="upload-images" name="thumbnail"
                                                value="{{ old('thumbnail') }}" class="form-control" placeholder="Chọn File">
                                        </div>
                                        <div class="col-md-4">
                                            <button type="button" class="btn btn-outline-secondary btn-open-thumb">
                                                <i class="fas fa-folder-open"></i> Chọn hình ảnh
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <x-module.v-center :model="null" />
                            <x-module.datacenter :model="null" />
                            <x-module.host :model="null" />
                            {{-- Status --}}
                            <div class="row form-group align-items-center mb-0">
                                <label for="status" class="col-md-3 text-right">Status</label>
                                <div class="col-md-9 p-1 bg-customer">
                                    <select class="custom-select select2" id="status" name="status">
                                        @foreach (Status::getOptions() as $value => $label)
                                            <option value="{{ $value }}">
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="{{ route('package.group.index') }}" class="btn btn-outline-secondary">Trở về</a>
                    <button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
                </div>
            </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 Package
                management department</h5>
        </div>
    @endif
@endsection
@push('scripts')
    <script type="text/javascript">
        $('.btn-open-thumb').click(function() {
            CKFinder.popup({
                chooseFiles: true,
                onInit: function(finder) {
                    finder.on('files:choose', function(evt) {
                        let img = $('input[name="thumbnail"]');
                        if (img.length) {
                            img.val(evt.data.files.first().getUrl())
                            img.trigger('input')
                        }
                    });
                }
            });
        });
        // Initialize Select2
        $(document).ready(function() {
            $('.select2').select2({
                theme: 'bootstrap4',
                width: '100%'
            });
        });
    </script>
@endpush

@push('plugin-scripts')
    <script src="{{ asset('build/plugins/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('build/plugins/select2/select2.min.js') }}"></script>
    <script src="{{ asset('build/plugins/datatables.net/dataTables.min.js') }}"></script>
    <script src="{{ asset('build/plugins/datatables.net-bs5/dataTables.bootstrap5.min.js') }}"></script>
@endpush