@extends('layouts.master')
@section('title', __('locale.Plan_Assignment_Flow_Select_Partner'))
@section('content')
    <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 Modern -->
                        <div class="progress-steps">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="step completed">
                                        <div class="step-circle">
                                            <i class="fe fe-check"></i>
                                        </div>
                                        <div class="step-label">{{ __('locale.Select_Plan') }}</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="step active">
                                        <div class="step-circle">2</div>
                                        <div class="step-label">{{ __('locale.Select_Partner') }}</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="step">
                                        <div class="step-circle">3</div>
                                        <div class="step-label">{{ __('locale.Confirm_Assignment') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Error Alert -->
                        @if($errors->any())
                            <div class="alert-card animated-card">
                                <div class="d-flex align-items-center">
                                    <div style="margin-right: 1rem;">
                                        <i class="fe fe-alert-circle" style="font-size: 24px; color: var(--danger-color);"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <strong style="color: var(--danger-color);">Please fix the following errors:</strong>
                                        <ul style="margin: 8px 0 0 0; padding-left: 20px;">
                                            @foreach($errors->all() as $error)
                                                <li style="color: #742a2a;">{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <button type="button" class="btn-close" data-dismiss="alert"
                                        style="background: none; border: none; font-size: 20px;">
                                        <i class="fe fe-x"></i>
                                    </button>
                                </div>
                            </div>
                        @endif

                        <div class="row">
                            <!-- Left Column - Form -->
                            <div class="col-lg-8">
                                <div class="modern-card animated-card">
                                    <div class="card-header-modern">
                                        <h3>
                                            <i class="fe fe-users" style="margin-right: 8px;"></i>
                                            {{ __('locale.Step_2_Select_Partner_For_Plan', ['plan' => $plan->name]) }}
                                        </h3>
                                    </div>

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

                                        <div style="padding: 1.5rem;">
                                            <!-- Search Input -->
                                            <div class="search-input-modern">
                                                <i class="fe fe-search"></i>
                                                <input type="text" id="partnerSearch" class="form-control"
                                                    placeholder="🔍 {{ __('locale.Search_Partner_Placeholder') }}">
                                            </div>

                                            <!-- Partner Select -->
                                            <div class="form-group">
                                                <label style="font-weight: 600; margin-bottom: 0.5rem; display: block;">
                                                    <i class="fe fe-users" style="margin-right: 5px;"></i>
                                                    {{ __('locale.Select_Partner_Label') }} *
                                                </label>
                                                <div class="partner-select-modern">
                                                    <select name="partner_id" id="partner_id" class="form-control" size="8"
                                                        required>
                                                        <option value="" disabled selected>— Select a partner —</option>
                                                        @foreach($partners as $partner)
                                                            <option value="{{ $partner->id }}" data-name="{{ $partner->name }}"
                                                                data-id="{{ $partner->partner_id }}"
                                                                style="padding: 12px 16px;">
                                                                <div class="d-flex justify-content-between">
                                                                    <span>
                                                                        <strong>{{ $partner->name }}</strong>
                                                                        <small
                                                                            class="text-muted">({{ $partner->partner_id }})</small>
                                                                    </span>
                                                                    @if($partner->currentPlan)
                                                                        <span class="badge badge-info">Current:
                                                                            {{ $partner->currentPlan->name }}</span>
                                                                    @else
                                                                        <span class="badge badge-secondary">No Plan</span>
                                                                    @endif
                                                                </div>
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <small class="form-text text-muted" style="margin-top: 8px;">
                                                    <i class="fe fe-info"></i> {{ __('locale.Select_Partner_Help_Text') }}
                                                </small>
                                            </div>

                                            <!-- Duration Select -->
                                            <div class="form-group">
                                                <label style="font-weight: 600; margin-bottom: 0.5rem; display: block;">
                                                    <i class="fe fe-clock" style="margin-right: 5px;"></i>
                                                    {{ __('locale.Duration_Optional') }}
                                                </label>
                                                <select name="duration_months" class="form-control duration-select">
                                                    <option value="">{{ __('locale.No_Expiry_Permanent') }}</option>
                                                    <option value="1">📅 {{ __('locale.Month_1') }}</option>
                                                    <option value="3">📅 {{ __('locale.Months_3') }}</option>
                                                    <option value="6">📅 {{ __('locale.Months_6') }}</option>
                                                    <option value="12">📅 {{ __('locale.Months_12') }}</option>
                                                </select>
                                                <small class="form-text text-muted" style="margin-top: 8px;">
                                                    <i class="fe fe-info"></i> {{ __('locale.Duration_Help_Text_Select') }}
                                                </small>
                                            </div>

                                            <!-- Action Buttons -->
                                            <div class="mt-4"
                                                style="display: flex; gap: 1rem; justify-content: space-between;">
                                                <a href="{{ route('admin.billing_plans.flow', ['step' => 1]) }}"
                                                    class="btn btn-modern btn-modern-secondary">
                                                    <i class="fe fe-arrow-left"></i> {{ __('locale.Back') }}
                                                </a>
                                                <button type="submit" class="btn btn-modern btn-modern-primary" id="nextBtn"
                                                    disabled>
                                                    {{ __('locale.Next_Review_Confirm') }} <i class="fe fe-arrow-right"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <!-- Right Column - Summary Cards -->
                            <div class="col-lg-4">
                                <!-- Selected Plan Summary -->
                                <div class="modern-card animated-card" style="margin-bottom: 1.5rem;">
                                    <div
                                        style="background: linear-gradient(135deg, #06d6a0 0%, #059669 100%); padding: 1rem; border-radius: 20px 20px 0 0;">
                                        <h4 style="margin: 0; color: white; display: flex; align-items: center;">
                                            <i class="fe fe-check-circle" style="margin-right: 8px;"></i>
                                            {{ __('locale.Selected_Plan_Title') }}
                                        </h4>
                                    </div>
                                    <div style="padding: 1.5rem;">
                                        <h3 style="color: var(--primary-color); margin-bottom: 1rem;">{{ $plan->name }}</h3>

                                        <div class="summary-stats"
                                            style="background: var(--gray-100); border-radius: 12px; padding: 1rem;">
                                            <div class="summary-stats-item">
                                                <span><i class="fe fe-tachometer-alt"></i>
                                                    {{ __('locale.Rate_Limit') }}:</span>
                                                <strong>{{$plan->requests_per_second }} req/s</strong>
                                            </div>
                                            <div class="summary-stats-item">
                                                <span><i class="fe fe-calendar-day"></i>
                                                    {{ __('locale.Daily_Limit') }}:</span>
                                                <strong>{{ $plan->daily_limit }}</strong>
                                            </div>
                                            <div class="summary-stats-item">
                                                <span><i class="fe fe-layer-group"></i>
                                                    {{ __('locale.Batch_Tags') }}:</span>
                                                <strong>{{ $plan->batch_tags_per_call }}
                                                    {{ __('locale.tags_per_call') }}</strong>
                                            </div>
                                            <div class="summary-stats-item">
                                                <span><i class="fe fe-dollar-sign"></i> {{ __('locale.Price') }}:</span>
                                                <strong
                                                    style="color: var(--success-color);">{{ $plan->price_formatted }}</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Selected Partner Preview -->
                                <div class="modern-card animated-card" id="partnerPreview" style="display: none;">
                                    <div
                                        style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); padding: 1rem; border-radius: 20px 20px 0 0;">
                                        <h4 style="margin: 0; color: white; display: flex; align-items: center;">
                                            <i class="fe fe-user-check" style="margin-right: 8px;"></i>
                                            {{ __('locale.Selected_Partner_Title') }}
                                        </h4>
                                    </div>
                                    <div style="padding: 1.5rem;">
                                        <div id="selectedPartnerInfo"></div>
                                    </div>
                                </div>

                                <!-- Tip Card -->
                                <div class="modern-card animated-card"
                                    style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                                    <div style="padding: 1.5rem; text-align: center;">
                                        <i class="fe fe-lightbulb"
                                            style="font-size: 2rem; margin-bottom: 0.5rem; display: inline-block;"></i>
                                        <h5 style="margin-bottom: 0.5rem;">Pro Tip</h5>
                                        <p style="font-size: 0.85rem; opacity: 0.9; margin: 0;">
                                            You can set an expiry date for the plan assignment.<br>
                                            After expiry, the partner will revert to no plan.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('bottom_script')
    <script>
        $(document).ready(function () {
            // Enhanced partner search with animation
            $('#partnerSearch').on('keyup', function () {
                const searchTerm = $(this).val().toLowerCase();
                let visibleCount = 0;

                $('#partner_id option').each(function () {
                    const text = $(this).text().toLowerCase();
                    const isVisible = text.indexOf(searchTerm) > -1;
                    $(this).toggle(isVisible);
                    if (isVisible) visibleCount++;
                });

                // Show search result count
                if (searchTerm.length > 0) {
                    if (visibleCount === 0) {
                        if (!$('#noResultsMsg').length) {
                            $('#partner_id').after('<div id="noResultsMsg" class="text-center text-muted mt-2 p-2">No partners found</div>');
                        }
                    } else {
                        $('#noResultsMsg').remove();
                    }
                } else {
                    $('#noResultsMsg').remove();
                }
            });

            // Enhanced selected partner preview with animation
            $('#partner_id').change(function () {
                const selectedOption = $(this).find('option:selected');

                if (!selectedOption.val()) {
                    $('#partnerPreview').hide();
                    $('#nextBtn').prop('disabled', true);
                    return;
                }

                const partnerName = selectedOption.data('name');
                const partnerId = selectedOption.data('id');
                const currentPlanText = selectedOption.text();
                const hasCurrentPlan = currentPlanText.includes('Current:');
                let currentPlan = '{{ __("locale.No_Plan") }}';

                if (hasCurrentPlan) {
                    const match = currentPlanText.match(/Current:\s*([^)]+)/);
                    if (match) {
                        currentPlan = match[1].trim();
                    }
                }

                $('#selectedPartnerInfo').html(`
                                        <div class="partner-preview">
                                            <div class="partner-preview-icon" style="margin: 0 auto 1rem auto;">
                                                <i class="fe fe-building"></i>
                                            </div>
                                            <h4 style="margin-bottom: 1rem;">${partnerName}</h4>
                                            <table style="width: 100%; text-align: left; margin-bottom: 1rem;">
                                                <tr>
                                                    <td style="padding: 6px 0;"><strong>Partner ID:</strong></td>
                                                    <td>${partnerId}</td>
                                                </tr>
                                                <tr>
                                                    <td style="padding: 6px 0;"><strong>Current Plan:</strong></td>
                                                    <td>${currentPlan}</td>
                                                </tr>
                                                <tr>
                                                    <td style="padding: 6px 0;"><strong>Status:</strong></td>
                                                    <td><span class="badge" style="background: var(--success-color); color: white;">Selected ✓</span></td>
                                                </tr>
                                            </table>
                                            <div style="background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 0.75rem; margin-top: 1rem;">
                                                <i class="fe fe-exchange-alt" style="margin-right: 5px;"></i>
                                                <small>{{ __('locale.Assign_Replace_Warning') }}</small>
                                            </div>
                                        </div>
                                    `);

                $('#partnerPreview').fadeIn('fast');
                $('#nextBtn').prop('disabled', false).css('opacity', '1');
            });

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