@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' => 'Product'],
            ['label' => 'Product Addons', 'url' => route('addon.index')],
            ['label' => 'Add New Addon', 'active' => true],
        ];
    @endphp
    <x-admin-breadcrumb :items="$breadcrumbItems" />
@endsection

@php
    use App\Enums\Status;
    use App\Enums\AddonType;
    use App\Enums\AddonInputType;
@endphp

@section('content')
    @if (auth()->guard('admins')->user()->can('manager product'))
        <form action="{{ route('addon.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">
                            <h5 class="card-title m-0">Add New Addon</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <h5 class="text-primary border-bottom mb-3 pb-2">Basic Information</h5>
                                
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="type">Type <span class="text-danger">*</span></label>
                                            <select name="type" id="type" class="form-control select2">
                                                @foreach (AddonType::getOptions() as $value => $label)
                                                    <option value="{{ $value }}">{{ $label }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="sort_order">Sort Order</label>
                                            <input type="number" name="sort_order" id="sort_order" 
                                                value="{{ old('sort_order', 0) }}" class="form-control" placeholder="0">
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name">Name <span class="text-danger">*</span></label>
                                            <input type="text" name="name" id="name" 
                                                value="{{ old('name') }}" class="form-control" placeholder="CPU, RAM, Disk...">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="code">Code <span class="text-danger">*</span></label>
                                            <input type="text" name="code" id="code" 
                                                value="{{ old('code') }}" class="form-control" placeholder="cpu, ram, disk...">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group mb-3">
                                    <label for="prefix">Prefix</label>
                                    <input type="text" name="prefix" id="prefix" 
                                        value="{{ old('prefix') }}" class="form-control" placeholder="vCore, GB, Mbps...">
                                    <small class="text-muted">Đơn vị hiển thị (VD: GB, vCore, Mbps)</small>
                                </div>
                            </div>

                            <div class="mb-4">
                                <h5 class="text-primary border-bottom mb-3 pb-2">Configuration</h5>
                                
                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="min">Min Value</label>
                                            <input type="number" name="min" id="min" 
                                                value="{{ old('min', 0) }}" class="form-control" placeholder="1">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="max">Max Value</label>
                                            <input type="number" name="max" id="max" 
                                                value="{{ old('max') }}" class="form-control" placeholder="32">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="step">Step</label>
                                            <input type="number" name="step" id="step" 
                                                value="{{ old('step', 1) }}" class="form-control" placeholder="1">
                                        </div>
                                    </div>
                                </div>
                                <small class="text-muted d-block mb-3">Step là bước nhảy: VD RAM step=1 nhảy 1GB, step=512 nhảy 512MB</small>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="price">Price / Step <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="number" name="price" id="price" 
                                                    value="{{ old('price', 0) }}" class="form-control" placeholder="20000">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">VND</span>
                                                </div>
                                            </div>
                                            <small class="text-muted">Giá cho mỗi step (VD: 1 Core = 20,000đ)</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="input_type">Input Type</label>
                                            <select name="input_type" id="input_type" class="form-control select2">
                                                @foreach (AddonInputType::getOptions() as $value => $label)
                                                    <option value="{{ $value }}">{{ $label }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card card-primary card-outline">
                        <div class="card-header">
                            <h5 class="card-title m-0">Publish</h5>
                        </div>
                        <div class="card-body">
                            <div class="form-group mb-3">
                                <label for="status">Status</label>
                                <select name="status" id="status" class="form-control select2">
                                    @foreach (Status::getOptions() as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <x-fixed-action-bar>
                <x-button-crm type="button" variant="secondary" size="sm" icon="arrow-left"
                                route="addon.index">Cancel</x-button-crm>
                <x-button-crm type="submit" variant="primary" size="sm" icon="plus-circle" class="float-right">
                    Create Addon</x-button-crm>
            </x-fixed-action-bar>
        </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 Product 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