@extends('layouts.master')
@section('title', __('locale.Plan_Assignment_Flow_Confirm'))
@section('content')
    <style>
        .step .step-circle {
            width: 40px;
            height: 40px;
            background: #6c757d;
            color: white;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .step.active .step-circle {
            background: #007bff;
        }

        .step.completed .step-circle {
            background: #28a745;
        }

        .step .step-label {
            font-size: 14px;
            color: #6c757d;
        }

        .step.active .step-label {
            color: #007bff;
            font-weight: bold;
        }

        .table-success td {
            background-color: #d4edda;
        }

        .badge-lg {
            font-size: 14px;
            padding: 6px 12px;
        }

        .form-check {
            padding: 10px;
            background: #f8f9fa;
            border-radius: 5px;
            margin-bottom: 10px;
        }
    </style>
    <div class="main-content app-content mt-0">
        <div class="side-app">
            <div class="main-container container-fluid">
                <div class="row">
                    <div class="col-12">
                        <!-- Progress Steps -->
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4 text-center">
                                        <div class="step completed">
                                            <div class="step-circle">✓</div>
                                            <div class="step-label">{{ __('locale.Select_Plan') }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-center">
                                        <div class="step completed">
                                            <div class="step-circle">✓</div>
                                            <div class="step-label">{{ __('locale.Select_Partner') }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-center">
                                        <div class="step active">
                                            <div class="step-circle">3</div>
                                            <div class="step-label">{{ __('locale.Confirm_Assignment') }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-8 offset-md-2">
                                <div class="card card-primary">
                                    <div class="card-header bg-primary text-white">
                                        <h3 class="card-title">
                                            <i class="fe fe-check-double"></i>
                                            {{ __('locale.Step_3_Confirm_Assignment_Title') }}
                                        </h3>
                                    </div>
                                    <div class="card-body">
                                        @if($errors->any())
                                            <div class="alert-card alert-card-danger">
                                                <div class="d-flex">
                                                    <div class="flex-shrink-0">
                                                        <i class="fe fe-alert-circle"
                                                            style="font-size: 24px; color: #dc3545;"></i>
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <div class="alert-title" style="color: #dc3545; font-size: 16px;">
                                                            Please fix the following errors:
                                                        </div>
                                                        <ul class="error-list" style="margin-top: 8px; margin-bottom: 0;">
                                                            @foreach($errors->all() as $error)
                                                                <li style="color: #742a2a;">{{ $error }}</li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                    <button type="button" class="btn-close alert-close" data-bs-dismiss="alert"
                                                        style="background: none; border: none; font-size: 20px; color: #999;">
                                                        <i class="fe fe-x"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        @endif

                                        <div class="alert alert-warning">
                                            <i class="icon fe fe-exclamation-triangle"></i>
                                            {{ __('locale.Review_Details_Warning') }}
                                        </div>

                                        <form action="{{ route('admin.billing_plans.flow.process') }}" method="POST"
                                            id="confirmForm">
                                            @csrf
                                            <input type="hidden" name="step" value="3">
                                            <input type="hidden" name="confirm" value="1">

                                            <!-- Summary Table -->
                                            <table class="table table-bordered">
                                                <tr class="bg-light">
                                                    <th colspan="2" class="text-center">
                                                        {{ __('locale.Assignment_Summary') }}
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th width="200">{{ __('locale.Partner') }}</th>
                                                    <td>
                                                        <strong>{{ $partner->name }}</strong>
                                                        <br>
                                                        <small class="text-muted">{{ __('locale.ID') }}:
                                                            {{ $partner->partner_id }}</small>
                                                        <br>
                                                        <small class="text-muted">{{ __('locale.Email') }}:
                                                            {{ $partner->email ?? 'N/A' }}</small>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>{{ __('locale.Current_Plan_Label') }}</th>
                                                    <td>
                                                        @if($partner->currentPlan)
                                                            <span
                                                                class="badge badge-secondary">{{ $partner->currentPlan->name }}</span>
                                                            <br>
                                                            <small>
                                                                {{ $partner->currentPlan->requests_per_second }}
                                                                req/s |
                                                                {{ $partner->currentPlan->daily_limit }}
                                                                {{ __('locale.daily') }}
                                                            </small>
                                                        @else
                                                            <span
                                                                class="badge badge-danger">{{ __('locale.No_Plan_Assigned') }}</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                                <tr class="table-success">
                                                    <th>{{ __('locale.New_Plan') }}</th>
                                                    <td>
                                                        <span
                                                            class="badge badge-success badge-lg text-dark">{{ $plan->name }}</span>
                                                        <br>
                                                        <small>
                                                            <i class="fe fe-tachometer-alt"></i>
                                                            {{ $plan->requests_per_second }} req/s |
                                                            <i class="fe fe-calendar-day"></i>
                                                            {{ $plan->daily_limit }} |
                                                            <i class="fe fe-layer-group"></i>
                                                            {{ $plan->batch_tags_per_call }}
                                                            {{ __('locale.tags_per_call') }}
                                                        </small>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>{{ __('locale.Duration_Summary') }}</th>
                                                    <td>
                                                        @if($duration)
                                                            <div class="text-warning">
                                                                <i class="fe fe-hourglass-half"></i>
                                                                {{ $duration }} {{ __('locale.months') }}
                                                                <br>
                                                                <small>{{ __('locale.Expires_On') }}:
                                                                    <strong>{{ now()->addMonths($duration)->format('F j, Y') }}</strong></small>
                                                            </div>
                                                        @else
                                                            <div class="text-success">
                                                                <i class="fe fe-infinity"></i>
                                                                {{ __('locale.Permanent_Assignment') }}
                                                            </div>
                                                        @endif
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>{{ __('locale.Billing_Impact') }}</th>
                                                    <td>
                                                        <div class="text-info">
                                                            <i class="fe fe-dollar-sign"></i>
                                                            {{ __('locale.Will_Be_Billed_At') }}
                                                            <strong>{{ $plan->price_formatted }}</strong>
                                                            <br>
                                                            <small>{{ __('locale.Invoice_Generation_Note') }}</small>
                                                            <br>
                                                            <small
                                                                class="text-muted">{{ __('locale.Error_Billing_Note') }}</small>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>{{ __('locale.Rate_Limit_Changes') }}</th>
                                                    <td>
                                                        <div class="small">
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span>{{ __('locale.Current_Limit') }}:</span>
                                                                <span>{{ number_format($partner->currentPlan->requests_per_second ?? 0) }}
                                                                    req/s</span>
                                                            </div>
                                                            <div class="d-flex justify-content-between mb-1">
                                                                <span>{{ __('locale.New_Limit') }}:</span>
                                                                <span
                                                                    class="text-success">{{ number_format($plan->requests_per_second) }}
                                                                    req/s</span>
                                                            </div>
                                                            <div class="d-flex justify-content-between">
                                                                <span>{{ __('locale.Change') }}:</span>
                                                                <span
                                                                    class="{{ ($plan->requests_per_second - ($partner->currentPlan->requests_per_second ?? 0)) > 0 ? 'text-success' : 'text-danger' }}">
                                                                    {{ ($plan->requests_per_second - ($partner->currentPlan->requests_per_second ?? 0)) > 0 ? '+' : '' }}
                                                                    {{ number_format($plan->requests_per_second - ($partner->currentPlan->requests_per_second ?? 0)) }}
                                                                    req/s
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </table>

                                            <!-- Confirmation Checkboxes -->
                                            <div class="mt-4">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="confirm_plan"
                                                        required>
                                                    <label class="form-check-label" for="confirm_plan">
                                                        {!!   __('locale.Confirm_Plan_Assignment_Text', ['plan' => $plan->name, 'partner' => $partner->name]) !!}
                                                    </label>
                                                </div>

                                                <div class="form-check mt-2">
                                                    <input type="checkbox" class="form-check-input" id="confirm_rate_limit"
                                                        required>
                                                    <label class="form-check-label" for="confirm_rate_limit">
                                                        {{ __('locale.Confirm_Rate_Limit_Text') }}
                                                    </label>
                                                </div>

                                                <div class="form-check mt-2">
                                                    <input type="checkbox" class="form-check-input" id="confirm_billing"
                                                        required>
                                                    <label class="form-check-label" for="confirm_billing">
                                                        {{ __('locale.Confirm_Billing_Text') }}
                                                    </label>
                                                </div>
                                            </div>

                                            <!-- Action Buttons -->
                                            <div class="mt-4">
                                                <div class="row">
                                                    <div class="col-6">
                                                        <a href="{{ route('admin.billing_plans.flow', ['step' => 2]) }}"
                                                            class="btn btn-secondary btn-block">
                                                            <i class="fe fe-arrow-left"></i> {{ __('locale.Back_To_Edit') }}
                                                        </a>
                                                    </div>
                                                    <div class="col-6">
                                                        <button type="submit" class="btn btn-success btn-block"
                                                            id="confirmBtn" disabled>
                                                            <i class="fe fe-check-circle"></i>
                                                            {{ __('locale.Confirm_Assign_Plan') }}
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <!-- Rate Limit Reminder Card -->
                                <div class="card card-danger mt-3">
                                    <div class="card-header">
                                        <h3 class="card-title">
                                            <i class="fe fe-exclamation-circle"></i>
                                            {{ __('locale.Important_Rate_Limit_Guidelines') }}
                                        </h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <h6>✅ {{ __('locale.Dos') }}:</h6>
                                                <ul class="small">
                                                    <li>{{ __('locale.Monitor_Headers') }}
                                                        <code>X-RateLimit-Remaining</code>
                                                    </li>
                                                    <li>{{ __('locale.Implement_Exponential_Backoff') }}</li>
                                                    <li>{{ __('locale.Start_With_1_Second_Delay') }}</li>
                                                    <li>{{ __('locale.Use_Batch_Endpoint') }}</li>
                                                </ul>
                                            </div>
                                            <div class="col-md-6">
                                                <h6>❌ {{ __('locale.Donts') }}:</h6>
                                                <ul class="small">
                                                    <li>{{ __('locale.Dont_Retry_Immediately') }}</li>
                                                    <li>{{ __('locale.Dont_Ignore_Headers') }}</li>
                                                    <li>{{ __('locale.Dont_Exceed_Retries') }}</li>
                                                    <li>{{ __('locale.Dont_Use_Synchronous_Retries') }}</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('bottom_script')
    <script>
        $(document).ready(function () {
            // Enable confirm button only when all checkboxes are checked
            function updateConfirmButton() {
                const allChecked = $('#confirm_plan').is(':checked') &&
                    $('#confirm_rate_limit').is(':checked') &&
                    $('#confirm_billing').is(':checked');
                $('#confirmBtn').prop('disabled', !allChecked);
            }

            $('#confirm_plan, #confirm_rate_limit, #confirm_billing').on('change', updateConfirmButton);

            // Form submission
            $('#confirmForm').on('submit', function () {
                const confirmBtn = $('#confirmBtn');
                confirmBtn.prop('disabled', true).html('<i class="fe fe-spinner fa-spin"></i> {{ __("locale.Processing") }}...');
                return true;
            });
        });
    </script>
@endsection