@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' => 'Edit 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')
    <form action="{{ route('addon.update', ['id' => $addon->id]) }}" method="post">
        @csrf
        @method('put')
        <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">Edit Addon: {{ $addon->name }}</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 }}"
                                                    {{ $addon->type == $value ? 'selected' : '' }}>
                                                    {{ $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', $addon->sort_order) }}" 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', $addon->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', $addon->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', $addon->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', $addon->min) }}" 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', $addon->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', $addon->step) }}" 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', $addon->price) }}" 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 }}"
                                                    {{ $addon->input_type == $value ? 'selected' : '' }}>
                                                    {{ $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 }}" {{ $addon->status == $value ? 'selected' : '' }}>
                                        {{ $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="pencil" class="float-right">
                Update Addon</x-button-crm>
        </x-fixed-action-bar>
    </form>
@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