@extends('admin.layouts.app')

@section('title', __('admin/client-groups.button_add'))

@section('content')
<div class="container-fluid px-4">
    <x-admin.page-header
        :title="__('admin/client-groups.button_add')"
        :subtitle="__('admin/client-groups.subtitle')"
        icon="fas fa-plus"
        :buttons="[
            ['label' => __('admin/client-groups.button_back'), 'route' => route('admin.client-groups.index'), 'icon' => 'fas fa-arrow-left', 'color' => 'outline-secondary'],
        ]"
    />

    <x-admin.alert />

    <x-admin.two-column :main-cols="9" :side-cols="3">
        {{-- Main Content --}}
        <x-admin.card>
            <form id="clientGroupForm" method="POST" action="{{ route('admin.client-groups.store') }}">
                @csrf

                <!-- Nav Tabs -->
                <ul class="nav nav-tabs px-4 pt-3" id="clientGroupTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" type="button" role="tab">
                            <i class="fas fa-info-circle me-1"></i>
                            {{ __('admin/client-groups.tab_basic') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pricing-tab" data-bs-toggle="tab" data-bs-target="#pricing" type="button" role="tab">
                            <i class="fas fa-tags me-1"></i>
                            {{ __('admin/client-groups.tab_pricing') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="automation-tab" data-bs-toggle="tab" data-bs-target="#automation" type="button" role="tab">
                            <i class="fas fa-cogs me-1"></i>
                            {{ __('admin/client-groups.tab_automation') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="notifications-tab" data-bs-toggle="tab" data-bs-target="#notifications" type="button" role="tab">
                            <i class="fas fa-bell me-1"></i>
                            {{ __('admin/client-groups.tab_notifications') }}
                        </button>
                    </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content p-4" id="clientGroupTabsContent">

                    <!-- Basic Tab -->
                    <div class="tab-pane fade show active" id="basic" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <h6 class="text-muted mb-3">{{ __('admin/client-groups.section_basic') }}</h6>
                            </div>

                            <!-- Group Name -->
                            <div class="col-md-6">
                                <label for="group_name" class="form-label fw-semibold">
                                    {{ __('admin/client-groups.field_group_name') }}
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="text"
                                       class="form-control form-control-sm @error('group_name') is-invalid @enderror"
                                       id="group_name"
                                       name="group_name"
                                       value="{{ old('group_name') }}"
                                       placeholder="{{ __('admin/client-groups.placeholder_group_name') }}"
                                       required>
                                @error('group_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Text Color -->
                            <div class="col-md-6">
                                <label for="text_color" class="form-label fw-semibold">
                                    {{ __('admin/client-groups.field_text_color') }}
                                </label>
                                <div class="input-group input-group-sm">
                                    <input type="color"
                                           class="form-control form-control-color @error('text_color') is-invalid @enderror"
                                           id="text_color"
                                           name="text_color"
                                           value="{{ old('text_color', '#000000') }}"
                                           style="max-width: 80px;">
                                    <input type="text"
                                           class="form-control form-control-sm"
                                           id="text_color_hex"
                                           value="{{ old('text_color', '#000000') }}"
                                           readonly>
                                </div>
                                @error('text_color')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Description -->
                            <div class="col-md-12">
                                <label for="description" class="form-label fw-semibold">
                                    {{ __('admin/client-groups.field_description') }}
                                </label>
                                <textarea class="form-control form-control-sm @error('description') is-invalid @enderror"
                                          id="description"
                                          name="description"
                                          rows="3"
                                          placeholder="{{ __('admin/client-groups.placeholder_description') }}">{{ old('description') }}</textarea>
                                <div class="form-text small">{{ __('admin/client-groups.help_description') }}</div>
                                @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Support Priority -->
                            <div class="col-md-6">
                                <label for="support_priority" class="form-label fw-semibold">
                                    {{ __('admin/client-groups.field_support_priority') }}
                                </label>
                                <select class="form-select form-select-sm" id="support_priority" name="support_priority">
                                    <option value="low" @selected(old('support_priority') === 'low')>
                                        {{ __('admin/client-groups.priority_low') }}
                                    </option>
                                    <option value="normal" @selected(old('support_priority', 'normal') === 'normal')>
                                        {{ __('admin/client-groups.priority_normal') }}
                                    </option>
                                    <option value="high" @selected(old('support_priority') === 'high')>
                                        {{ __('admin/client-groups.priority_high') }}
                                    </option>
                                    <option value="urgent" @selected(old('support_priority') === 'urgent')>
                                        {{ __('admin/client-groups.priority_urgent') }}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Pricing & Tax Tab -->
                    <div class="tab-pane fade" id="pricing" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <h6 class="text-muted mb-3">{{ __('admin/client-groups.section_tax') }}</h6>
                            </div>

                            <!-- Tax Exempt -->
                            <div class="col-md-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="tax_exempt" name="tax_exempt" value="1" {{ old('tax_exempt') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold" for="tax_exempt">
                                        {{ __('admin/client-groups.field_tax_exempt') }}
                                    </label>
                                </div>
                                <div class="form-text small">{{ __('admin/client-groups.help_tax_exempt') }}</div>
                            </div>

                            <div class="col-md-12">
                                <hr class="my-3">
                                <h6 class="text-muted mb-3">{{ __('admin/client-groups.section_pricing') }}</h6>
                            </div>

                            <!-- Enable Custom Pricing -->
                            <div class="col-md-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="custom_pricing_enabled" name="custom_pricing_enabled" value="1" {{ old('custom_pricing_enabled') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold" for="custom_pricing_enabled">
                                        {{ __('admin/client-groups.field_custom_pricing') }}
                                    </label>
                                </div>
                            </div>

                            <!-- Pricing Settings (Hidden by default) -->
                            <div id="pricing-settings" class="col-md-12" style="display: {{ old('custom_pricing_enabled') ? 'block' : 'none' }};">
                                <div class="row g-3 mt-2">
                                    <!-- Pricing Type -->
                                    <div class="col-md-12">
                                        <label for="pricing_type" class="form-label fw-semibold">
                                            {{ __('admin/client-groups.field_pricing_type') }}
                                        </label>
                                        <select class="form-select form-select-sm" id="pricing_type" name="pricing_type">
                                            <option value="">{{ __('admin/common.select') }}</option>
                                            <option value="discount_percentage" @selected(old('pricing_type') === 'discount_percentage')>
                                                {{ __('admin/client-groups.pricing_discount_percentage') }}
                                            </option>
                                            <option value="discount_fixed" @selected(old('pricing_type') === 'discount_fixed')>
                                                {{ __('admin/client-groups.pricing_discount_fixed') }}
                                            </option>
                                            <option value="override_specific" @selected(old('pricing_type') === 'override_specific')>
                                                {{ __('admin/client-groups.pricing_override_specific') }}
                                            </option>
                                        </select>
                                    </div>

                                    <!-- Discount Percentage Field -->
                                    <div id="discount-percentage-field" class="col-md-6" style="display: none;">
                                        <label for="discount_percentage" class="form-label fw-semibold">
                                            {{ __('admin/client-groups.field_discount_percentage') }}
                                        </label>
                                        <div class="input-group input-group-sm">
                                            <input type="number" class="form-control form-control-sm" id="discount_percentage" name="pricing_rules[discount_percentage]" value="{{ old('pricing_rules.discount_percentage') }}" min="0" max="100" step="0.01">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>

                                    <!-- Discount Fixed Field -->
                                    <div id="discount-fixed-field" class="col-md-6" style="display: none;">
                                        <label for="discount_amount" class="form-label fw-semibold">
                                            {{ __('admin/client-groups.field_discount_amount') }}
                                        </label>
                                        <input type="number" class="form-control form-control-sm" id="discount_amount" name="pricing_rules[discount_amount]" value="{{ old('pricing_rules.discount_amount') }}" min="0" step="0.01">
                                    </div>

                                    <!-- Product Specific Pricing Override -->
                                    <div id="product-specific-field" class="col-md-12" style="display: none;">
                                        @include('admin.client-groups.partials.pricing-override')
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Automation Tab -->
                    <div class="tab-pane fade" id="automation" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <h6 class="text-muted mb-3">{{ __('admin/client-groups.section_automation') }}</h6>
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    {{ __('admin/client-groups.help_automation') }}
                                </div>
                            </div>

                            <!-- Auto Suspend Disabled -->
                            <div class="col-md-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="auto_suspend_disabled" name="auto_suspend_disabled" value="1" {{ old('auto_suspend_disabled') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold" for="auto_suspend_disabled">
                                        {{ __('admin/client-groups.field_auto_suspend_disabled') }}
                                    </label>
                                </div>
                                <div class="form-text small">{{ __('admin/client-groups.help_auto_suspend') }}</div>
                            </div>

                            <!-- Override Suspend -->
                            <div class="col-md-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="override_suspend" name="override_suspend" value="1" {{ old('override_suspend') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold" for="override_suspend">
                                        {{ __('admin/client-groups.field_override_suspend') }}
                                    </label>
                                </div>
                                <div class="form-text small text-warning">
                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                    {{ __('admin/client-groups.help_override_suspend') }}
                                </div>
                            </div>

                            <!-- Override Terminate -->
                            <div class="col-md-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="override_terminate" name="override_terminate" value="1" {{ old('override_terminate') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold" for="override_terminate">
                                        {{ __('admin/client-groups.field_override_terminate') }}
                                    </label>
                                </div>
                                <div class="form-text small text-warning">
                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                    {{ __('admin/client-groups.help_override_terminate') }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Notifications Tab -->
                    <div class="tab-pane fade" id="notifications" role="tabpanel">
                        @include('admin.client-groups.partials.notification-settings', ['clientGroup' => null])
                    </div>

                    <!-- Resources Tab -->
                    <div class="tab-pane fade" id="resources" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <h6 class="text-muted mb-3">{{ __('admin/client-groups.section_resources') }}</h6>
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    {{ __('admin/client-groups.help_resources') }}
                                </div>
                            </div>

                            <!-- Max Domains -->
                            <div class="col-md-4">
                                <label for="max_domains" class="form-label fw-semibold">
                                    {{ __('admin/client-groups.field_max_domains') }}
                                </label>
                                <input type="number" class="form-control form-control-sm" id="max_domains" name="max_domains" value="{{ old('max_domains') }}" min="0" placeholder="∞">
                            </div>

                            <!-- Max Products -->
                            <div class="col-md-4">
                                <label for="max_products" class="form-label fw-semibold">
                                    {{ __('admin/client-groups.field_max_products') }}
                                </label>
                                <input type="number" class="form-control form-control-sm" id="max_products" name="max_products" value="{{ old('max_products') }}" min="0" placeholder="∞">
                            </div>

                            <!-- Max Subaccounts -->
                            <div class="col-md-4">
                                <label for="max_subaccounts" class="form-label fw-semibold">
                                    {{ __('admin/client-groups.field_max_subaccounts') }}
                                </label>
                                <input type="number" class="form-control form-control-sm" id="max_subaccounts" name="max_subaccounts" value="{{ old('max_subaccounts') }}" min="0" placeholder="∞">
                            </div>
                        </div>
                    </div>

                </div>

                <!-- Form Actions (Bottom of Form) -->
                <div class="card-footer border-0 py-3 px-4">
                    <div class="d-flex justify-content-end gap-2">
                        <a href="{{ route('admin.client-groups.index') }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-times me-1"></i>{{ __('admin/client-groups.button_cancel') }}
                        </a>
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="fas fa-save me-1"></i>{{ __('admin/client-groups.button_save') }}
                        </button>
                    </div>
                </div>

            </form>
        </x-admin.card>

        {{-- Sidebar --}}
        <x-slot:sidebar>
            <!-- Actions Card -->
            <x-admin.card :title="__('admin/common.actions')" icon="fas fa-tasks" class="mb-3">
                <button type="submit" form="clientGroupForm" class="btn btn-primary btn-sm w-100 mb-2">
                    <i class="fas fa-save me-1"></i>{{ __('admin/client-groups.button_save') }}
                </button>
                <a href="{{ route('admin.client-groups.index') }}" class="btn btn-secondary btn-sm w-100">
                    <i class="fas fa-times me-1"></i>{{ __('admin/client-groups.button_cancel') }}
                </a>
            </x-admin.card>

            <!-- Help Card -->
            <x-admin.card :title="__('admin/common.help')" icon="fas fa-info-circle">
                <p class="small text-muted mb-2">{{ __('admin/client-groups.help_general') }}</p>
                <ul class="small text-muted mb-0 ps-3">
                    <li>{{ __('admin/client-groups.help_item1') }}</li>
                    <li>{{ __('admin/client-groups.help_item2') }}</li>
                    <li>{{ __('admin/client-groups.help_item3') }}</li>
                </ul>
            </x-admin.card>
        </x-slot:sidebar>
    </x-admin.two-column>
</div>
@endsection

@push('scripts')
<script>
    // Pass configuration to JavaScript
    window.pricingRoutes = {
        productsPricing: '{{ route("api.admin.client-groups.products-pricing") }}',
        tldsPricing: '{{ route("api.admin.client-groups.tlds-pricing") }}'
    };
    window.pricingTranslations = {
        year: '{{ __("admin/client-groups.pricing_year") }}'
    };
</script>
@vite('resources/js/admin/client-groups/create.js')
@vite('resources/js/admin/client-groups/pricing-override.js')
@endpush
