@extends('layouts.master')
@section('title', __('locale.Billing_Plans'))
@section('content')
    <div class="main-content app-content mt-0">
        <div class="side-app">
            <div class="main-container container-fluid">

                <!-- PAGE-HEADER -->
                <div class="page-header">
                    <h1 class="page-title">{{ isset($plan) ? __('locale.Edit_Billing_Plan') : __('locale.Create_New_Billing_Plan') }}</h1>
                    <div>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ isset($plan) ? __('locale.Edit') : __('locale.Create') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('common.home') }}</li>
                        </ol>
                    </div>
                </div>
                <!-- PAGE-HEADER END -->

                <div class="row">
                    <div class="col-md-8">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="fe {{ isset($plan) ? 'fe-edit' : 'fe-plus-circle' }}"></i>
                                    {{ isset($plan) ? __('locale.Edit_Plan') . ': ' . $plan->name : __('locale.Plan_Information') }}
                                </h3>
                            </div>
                            <form action="{{ isset($plan) ? route('admin.billing_plans.update', $plan) : route('admin.billing_plans.store') }}"
                                  method="POST"
                                  id="planForm">
                                @csrf
                                @if(isset($plan))
                                    @method('PUT')
                                @endif

                                <div class="card-body">
                                    <!-- Basic Information -->
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="name">{{ __('locale.Plan_Name') }} *</label>
                                                <input type="text"
                                                       class="form-control @error('name') is-invalid @enderror"
                                                       id="name"
                                                       name="name"
                                                       value="{{ old('name', $plan->name ?? '') }}"
                                                       placeholder="{{ __('locale.Plan_Name_Placeholder') }}"
                                                       required>
                                                @error('name')
                                                    <span class="invalid-feedback">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="slug">{{ __('locale.Slug') }} *</label>
                                                <input type="text"
                                                       class="form-control @error('slug') is-invalid @enderror"
                                                       id="slug"
                                                       name="slug"
                                                       value="{{ old('slug', $plan->slug ?? '') }}"
                                                       placeholder="{{ __('locale.Slug_Placeholder') }}"
                                                       required>
                                                @error('slug')
                                                    <span class="invalid-feedback">{{ $message }}</span>
                                                @enderror
                                                <small class="form-text text-muted">{{ __('locale.Slug_Help_Text') }}</small>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Rate Limits -->
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="requests_per_second">{{ __('locale.Requests_Per_Second') }} *</label>
                                                <input type="number"
                                                       class="form-control @error('requests_per_second') is-invalid @enderror"
                                                       id="requests_per_second"
                                                       name="requests_per_second"
                                                       value="{{ old('requests_per_second', $plan->requests_per_second ?? 100) }}"
                                                       min="1"
                                                       required>
                                                @error('requests_per_second')
                                                    <span class="invalid-feedback">{{ $message }}</span>
                                                @enderror
                                                <small class="form-text text-muted">{{ __('locale.Requests_Per_Second_Help') }}</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="requests_per_day">{{ __('locale.Requests_Per_Day') }}</label>
                                                <input type="number"
                                                       class="form-control @error('requests_per_day') is-invalid @enderror"
                                                       id="requests_per_day"
                                                       name="requests_per_day"
                                                       value="{{ old('requests_per_day', $plan->requests_per_day ?? '') }}"
                                                       min="1"
                                                       placeholder="{{ __('locale.Leave_Empty_For_Unlimited') }}">
                                                @error('requests_per_day')
                                                    <span class="invalid-feedback">{{ $message }}</span>
                                                @enderror
                                                <small class="form-text text-muted">{{ __('locale.Requests_Per_Day_Help') }}</small>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Features -->
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="batch_tags_per_call">{{ __('locale.Batch_Tags_Per_Call') }} *</label>
                                                <input type="number"
                                                       class="form-control @error('batch_tags_per_call') is-invalid @enderror"
                                                       id="batch_tags_per_call"
                                                       name="batch_tags_per_call"
                                                       value="{{ old('batch_tags_per_call', $plan->batch_tags_per_call ?? 1) }}"
                                                       min="1"
                                                       required>
                                                @error('batch_tags_per_call')
                                                    <span class="invalid-feedback">{{ $message }}</span>
                                                @enderror
                                                <small class="form-text text-muted">{{ __('locale.Batch_Tags_Help') }}</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="price_per_1000_calls">{{ __('locale.Price_Per_1000_Calls') }} ($) *</label>
                                                <input type="number"
                                                       class="form-control @error('price_per_1000_calls') is-invalid @enderror"
                                                       id="price_per_1000_calls"
                                                       name="price_per_1000_calls"
                                                       value="{{ old('price_per_1000_calls', $plan->price_per_1000_calls ?? 0) }}"
                                                       step="0.0001"
                                                       min="0"
                                                       required>
                                                @error('price_per_1000_calls')
                                                    <span class="invalid-feedback">{{ $message }}</span>
                                                @enderror
                                                <small class="form-text text-muted">{{ __('locale.Price_Per_1000_Calls_Help') }}</small>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Additional Options -->
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox"
                                                           class="custom-control-input"
                                                           id="is_unlimited"
                                                           name="is_unlimited"
                                                           value="1"
                                                           {{ old('is_unlimited', $plan->is_unlimited ?? false) ? 'checked' : '' }}>
                                                    <label class="custom-control-label" for="is_unlimited">
                                                        <span style="margin-inline-start:20px !important">{{ __('locale.Unlimited_Daily_Requests') }}</span>
                                                    </label>
                                                </div>
                                                <small class="form-text text-muted">{{ __('locale.Unlimited_Daily_Requests_Help') }}</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox"
                                                           class="custom-control-input"
                                                           id="is_active"
                                                           name="is_active"
                                                           value="1"
                                                           {{ old('is_active', $plan->is_active ?? true) ? 'checked' : '' }}>
                                                    <label class="custom-control-label" for="is_active">
                                                        <span style="margin-inline-start:20px !important">{{ __('locale.Plan_Active') }}</span>
                                                    </label>
                                                </div>
                                                <small class="form-text text-muted">{{ __('locale.Plan_Active_Help') }}</small>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Rate Limit Warning -->
                                    <div class="alert alert-info mt-3">
                                        <h5><i class="icon fe fe-info-circle"></i> {{ __('locale.Rate_Limit_Information') }}</h5>
                                        <ul class="mb-0">
                                            <li>{{ __('locale.Rate_Limit_Headers_Text') }}:
                                                <code>X-RateLimit-Remaining</code>, <code>X-RateLimit-Reset</code>
                                            </li>
                                            <li><strong class="text-danger">⚠️ {{ __('locale.Never_Retry_Immediately') }}</strong> {{ __('locale.Exponential_Backoff_Text') }}</li>
                                            <li>{{ __('locale.Max_Retries_Recommended') }}</li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary" id="submitBtn">
                                        <i class="fe fe-save"></i> {{ isset($plan) ? __('locale.Update_Plan') : __('locale.Create_Plan') }}
                                    </button>
                                    <a href="{{ route('admin.billing_plans.index') }}" class="btn btn-secondary">
                                        <i class="fe fe-times"></i> {{ __('locale.Cancel') }}
                                    </a>
                                    @if(isset($plan))
                                        <button type="button" class="btn btn-danger float-right" onclick="confirmDelete()">
                                            <i class="fe fe-trash"></i> {{ __('locale.Delete_Plan') }}
                                        </button>
                                    @endif
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Preview Sidebar -->
                    <div class="col-md-4">
                        <div class="card card-success">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="fe fe-eye"></i> {{ __('locale.Live_Preview') }}
                                </h3>
                            </div>
                            <div class="card-body">
                                <div id="previewCard">
                                    <div class="text-center mb-3">
                                        <h2 id="previewPrice">$0.0000</h2>
                                        <small>{{ __('locale.Per_1000_Calls') }}</small>
                                    </div>
                                    <table class="table table-sm table-borderless">
                                        <tr>
                                            <td><i class="fe fe-tachometer-alt text-info"></i> {{ __('locale.Rate_Limit') }}:</td>
                                            <td class="text-right"><strong id="previewRPS">0 req/s</strong></td>
                                        </tr>
                                        <tr>
                                            <td><i class="fe fe-calendar-day text-warning"></i> {{ __('locale.Daily_Limit') }}:</td>
                                            <td class="text-right"><strong id="previewDaily">{{ __('locale.Unlimited') }}</strong></td>
                                        </tr>
                                        <tr>
                                            <td><i class="fe fe-layer-group text-success"></i> {{ __('locale.Batch_Tags') }}:</td>
                                            <td class="text-right"><strong id="previewBatch">1 {{ __('locale.tags_per_call') }}</strong></td>
                                        </tr>
                                    　
                                </div>

                                <hr>

                                <h6>{{ __('locale.Pricing_Calculation') }}:</h6>
                                <div id="pricingCalc" class="small">
                                    <p class="text-muted">{{ __('locale.Fill_Form_For_Preview') }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Rate Limit Examples -->
                        <div class="card card-info">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="fe fe-code"></i> {{ __('locale.Rate_Limit_Headers_Example') }}
                                </h3>
                            </div>
                            <div class="card-body">
                                <pre class="bg-dark text-light p-2" style="font-size: 12px;">
{
  "X-RateLimit-Remaining": 99,
  "X-RateLimit-Reset": 1234567890,
  "Retry-After": 1
}</pre>
                                <small class="text-muted">{{ __('locale.Rate_Limit_Headers_Example_Text') }}</small>
                            </div>
                        </div>

                        <!-- Exponential Backoff Example -->
                        <div class="card card-warning">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="fe fe-chart-line"></i> {{ __('locale.Exponential_Backoff_Strategy') }}
                                </h3>
                            </div>
                            <div class="card-body">
                                <ul class="mb-0 small">
                                    <li>{{ __('locale.Retry_1') }}: 1 {{ __('locale.second') }}</li>
                                    <li>{{ __('locale.Retry_2') }}: 2 {{ __('locale.seconds') }}</li>
                                    <li>{{ __('locale.Retry_3') }}: 4 {{ __('locale.seconds') }}</li>
                                    <li>{{ __('locale.Retry_4') }}: 8 {{ __('locale.seconds') }}</li>
                                    <li>{{ __('locale.Retry_5') }}: 16 {{ __('locale.seconds') }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    @if(isset($plan))
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title">
                        <i class="fe fe-exclamation-triangle"></i> {{ __('locale.Confirm_Delete') }}
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>{{ __('locale.Delete_Confirmation_Text', ['name' => $plan->name]) }}</p>
                    <p class="text-danger">{{ __('locale.Delete_Warning_Text') }}</p>

                    <div class="alert alert-warning">
                        <i class="fe fe-info-circle"></i>
                        {{ __('locale.Delete_Alternative_Suggestion') }}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('locale.Cancel') }}</button>
                    <form action="{{ route('admin.billing_plans.destroy', $plan) }}" method="POST" id="deleteForm">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="fe fe-trash"></i> {{ __('locale.Yes_Delete_Plan') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endif
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Auto-generate slug from name
    $('#name').on('keyup', function() {
        if ($('#slug').val() === '' || $('#slug').val() === $(this).data('original-slug')) {
            const slug = $(this).val()
                .toLowerCase()
                .replace(/[^\w\s]/gi, '')
                .replace(/\s+/g, '-');
            $('#slug').val(slug);
        }
    });

    // Store original slug if editing
    @if(isset($plan))
        $('#slug').data('original-slug', '{{ $plan->slug }}');
    @endif

    // Live preview updates
    function updatePreview() {
        // Price
        const price = parseFloat($('#price_per_1000_calls').val()) || 0;
        $('#previewPrice').text('$' + price.toFixed(4));

        // Requests per second
        const rps = parseInt($('#requests_per_second').val()) || 0;
        $('#previewRPS').text(rps.toLocaleString() + ' req/s');

        // Daily limit
        const isUnlimited = $('#is_unlimited').is(':checked');
        const dailyLimit = $('#requests_per_day').val();
        if (isUnlimited || !dailyLimit) {
            $('#previewDaily').text('{{ __("locale.Unlimited") }}');
        } else {
            $('#previewDaily').text(parseInt(dailyLimit).toLocaleString() + ' / day');
        }

        // Batch tags
        const batchTags = parseInt($('#batch_tags_per_call').val()) || 0;
        $('#previewBatch').text(batchTags + ' {{ __("locale.tags_per_call") }}');

        // Pricing calculation
        const callsPerMonth = 1000000; // Example: 1M calls
        const monthlyCost = (callsPerMonth / 1000) * price;
        $('#pricingCalc').html(`
            <div class="small">
                <div class="d-flex justify-content-between">
                    <span>{{ __("locale.Per_1000_Calls") }}:</span>
                    <strong>$${price.toFixed(4)}</strong>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <span>{{ __("locale.Per_1M_Calls") }}:</span>
                    <strong>$${monthlyCost.toFixed(2)}</strong>
                </div>
                <hr>
                <div class="text-success">
                    <i class="fe fe-chart-line"></i>
                    {{ __("locale.Annual_Revenue_Potential") }}: <strong>$${(monthlyCost * 12).toFixed(2)}</strong>
                </div>
            </div>
        `);
    }

    // Update preview on input changes
    $('#price_per_1000_calls, #requests_per_second, #requests_per_day, #batch_tags_per_call').on('input', updatePreview);
    $('#is_unlimited').on('change', updatePreview);

    // Initial preview update
    updatePreview();

    // Form validation
    $('#planForm').on('submit', function(e) {
        const price = parseFloat($('#price_per_1000_calls').val());
        if (price < 0) {
            e.preventDefault();
            toastr.error('{{ __("locale.Price_Negative_Error") }}');
            return false;
        }

        const rps = parseInt($('#requests_per_second').val());
        if (rps < 1) {
            e.preventDefault();
            toastr.error('{{ __("locale.RPS_Too_Low_Error") }}');
            return false;
        }

        const batchTags = parseInt($('#batch_tags_per_call').val());
        if (batchTags < 1) {
            e.preventDefault();
            toastr.error('{{ __("locale.Batch_Tags_Error") }}');
            return false;
        }

        const submitBtn = $('#submitBtn');
        submitBtn.prop('disabled', true).html('<i class="fe fe-spinner fa-spin"></i> {{ __("locale.Saving") }}...');
        return true;
    });
});

function confirmDelete() {
    $('#deleteModal').modal('show');
}

toastr.options = {
    "closeButton": true,
    "progressBar": true,
    "positionClass": "toast-top-right",
    "timeOut": "5000"
};
</script>
@endpush