@extends('layouts.master')
@section('title', __('locale.Billing_Plans_Management'))
@section('content')
    <link href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <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">{{__('locale.Billing_Plans_Management')}}</h1>
                    <div>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a
                                    href="javascript:void(0)">{{__('locale.Billing_Plans_Management')}}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{__('common.home')}}</li>
                        </ol>
                    </div>
                </div>
                <!-- PAGE-HEADER END -->

                <!-- Plans Grid -->
                <div class="row">
                    @foreach($plans as $plan)
                        <div class="col-md-4 mb-4">
                            <div class="card h-100 {{ $plan->is_active ? 'border-primary' : 'border-secondary' }}">
                                <div class="card-header {{ $plan->is_active ? 'bg-primary' : 'bg-secondary' }} text-white">
                                    <h3 class="card-title mb-0">
                                        <i class="fe fe-tag"></i> {{ $plan->name }}
                                    </h3>
                                    <div class="card-tools">
                                        <span class="badge {{ $plan->is_active ? 'badge-light' : 'badge-dark' }}">
                                            {{ $plan->is_active ? __('locale.Active') : __('locale.Inactive') }}
                                        </span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="text-center mb-3">
                                        <h2 class="text-primary">{{ $plan->price_formatted }}</h2>
                                        <small class="text-muted">{{ __('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>{{ $plan->requests_per_second }}
                                                    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>{{ $plan->daily_limit }}</strong></td>
                                        </tr>
                                        <tr>
                                            <td><i class="fe fe-layer-group text-success"></i> {{ __('locale.Batch_Tags') }}:
                                            </td>
                                            <td class="text-right"><strong>{{ $plan->batch_tags_per_call }}
                                                    {{ __('locale.tags_per_call') }}</strong></td>
                                        </tr>
                                        <tr>
                                            <td><i
                                                    class="fe fe-infinity {{ $plan->is_unlimited ? 'text-success' : 'text-muted' }}"></i>
                                                {{ __('locale.Unlimited') }}:</td>
                                            <td class="text-right">
                                                @if($plan->is_unlimited)
                                                    <span class="badge badge-success">{{ __('locale.Yes') }}</span>
                                                @else
                                                    <span class="badge badge-secondary">{{ __('locale.No') }}</span>
                                                @endif
                                            </td>
                                        </tr>
                                    </table>

                                    <div class="alert alert-info mt-3 mb-0 small">
                                        <i class="fe fe-info-circle"></i>
                                        <strong>{{ __('locale.Rate_Limit_Headers') }}:</strong> X-RateLimit-Remaining,
                                        X-RateLimit-Reset
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="btn-group w-100">
                                        <a href="{{ route('admin.billing_plans.edit', $plan) }}" class="btn btn-warning">
                                            <i class="fe fe-edit"></i> {{ __('locale.Edit') }}
                                        </a>
                                        <!-- FIX 1: Changed to onclick to show modal instead of opening JSON data -->
                                        <button type="button" class="btn btn-info" onclick="showRateLimits({{ $plan->id }})">
                                            <i class="fe fe-chart-line"></i> {{ __('locale.Rate_Limits') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <!-- Create New Plan Card -->
                    <div class="col-md-4 mb-4">
                        <div class="card h-100 border-success" style="border-style: dashed;">
                            <div class="card-body text-center py-5">
                                <i class="fe fe-plus-circle fa-4x text-success mb-3"></i>
                                <h5>{{ __('locale.Create_New_Plan') }}</h5>
                                <p class="text-muted">{{ __('locale.Create_New_Plan_Description') }}</p>
                                <a href="{{ route('admin.billing_plans.create') }}" class="btn btn-success">
                                    <i class="fe fe-plus"></i> {{ __('locale.Create_Plan') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Partners with Assigned Plans Section -->
                <div class="card mt-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="card-title mb-0">
                            <i class="fe fe-users"></i> {{ __('locale.Partners_And_Assigned_Plans') }}
                        </h3>
                        <div class="card-tools">
                            <a href="{{ route('admin.billing_plans.flow') }}" class="btn btn-primary btn-sm">
                                <i class="fe fe-magic"></i> {{ __('locale.Plan_Assignment_Flow') }}
                            </a>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-striped" id="partnersTable">
                                <thead>
                                    <tr>
                                        <th>{{ __('locale.Partner') }}</th>
                                        <th>{{ __('locale.Partner_ID') }}</th>
                                        <th>{{ __('locale.Current_Plan') }}</th>
                                        <th>{{ __('locale.Assigned_At') }}</th>
                                        <th>{{ __('locale.Expires_At') }}</th>
                                        <th>{{ __('locale.Current_Month_Usage') }}</th>
                                        <th>{{ __('locale.Remaining_Daily') }}</th>
                                        <th>{{ __('locale.Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($partners as $partner)
                                        <tr>
                                            <td>{{ $partner->name }}</td>
                                            <td>{{ $partner->partner_id }}</td>
                                            <td>
                                                @if($partner->currentPlan)
                                                    <span class="badge badge-primary">{{ $partner->currentPlan->name }}</span>
                                                @else
                                                    <span class="badge badge-secondary">{{ __('locale.No_Plan') }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                {{ $partner->plan_assigned_at ? $partner->plan_assigned_at->format('Y-m-d') : '-' }}
                                            </td>
                                            <td>
                                                @if($partner->plan_expires_at)
                                                    <span
                                                        class="{{ $partner->plan_expires_at->isPast() ? 'text-danger' : 'text-warning' }}">
                                                        {{ $partner->plan_expires_at->format('Y-m-d') }}
                                                        @if($partner->plan_expires_at->isPast())
                                                            <br><small>{{ __('locale.Expired') }}</small>
                                                        @endif
                                                    </span>
                                                @else
                                                    <span class="text-success">{{ __('locale.Never') }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <strong>{{ number_format($partner->getCurrentMonthUsage()) }}</strong>
                                                <br><small>{{ __('locale.billable_calls') }}</small>
                                            </td>
                                            <td>
                                                @php
                                                    $remaining = $partner->getRemainingDailyRequests();
                                                @endphp
                                                @if(is_numeric($remaining))
                                                    <span class="{{ $remaining < 1000 ? 'text-danger' : 'text-success' }}">
                                                        {{ number_format($remaining) }}
                                                    </span>
                                                @else
                                                    {{ $remaining }}
                                                @endif
                                            </td>
                                            <td>
                                                <!-- FIX 2: Fixed onclick to properly open modal -->
                                                <button type="button" class="btn btn-sm btn-info"
                                                    onclick="openAssignPlanModal({{ $partner->id }})">
                                                    <i class="fe fe-exchange-alt"></i> {{ __('locale.Change_Plan') }}
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer">
                        {{ $partners->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Assign Plan Modal -->
    <div class="modal fade" id="assignPlanModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title">
                        <i class="fe fe-exchange-alt"></i> {{ __('locale.Assign_Plan_To_Partner') }}
                    </h5>
                    <button type="button" class="close -bottom-3btn btn-sm btn-danger" data-bs-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">{{ __('locale.Close')}}</span>
                    </button>
                </div>
                <form id="assignPlanForm">
                    @csrf
                    <input type="hidden" name="partner_id" id="assign_partner_id">
                    <div class="modal-body">
                        <div class="form-group">
                            <label>{{ __('locale.Select_Plan') }} *</label>
                            <select name="plan_id" id="plan_id" class="form-control" required>
                                <option value="">{{ __('locale.Select_Plan_Placeholder') }}</option>
                                @foreach($plans as $plan)
                                    <option value="{{ $plan->id }}">
                                        {{ $plan->name }} - {{ $plan->price_formatted }}
                                        ({{ number_format($plan->requests_per_second) }} req/s)
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label>{{ __('locale.Duration_Optional') }}</label>
                            <select name="duration_months" class="form-control">
                                <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">{{ __('locale.Duration_Help_Text') }}</small>
                        </div>

                        <div class="alert alert-warning">
                            <i class="fe fe-exclamation-triangle"></i>
                            {{ __('locale.Plan_Change_Warning') }}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ __('locale.Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fe fe-save"></i> {{ __('locale.Assign_Plan') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Rate Limit Modal (FIX 1: Added modal for rate limits) -->
    <div class="modal fade" id="rateLimitModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title">
                        <i class="fe fe-chart-line"></i> {{ __('locale.Rate_Limit_Details') }}
                    </h5>
                    <button type="button" class="close btn btn-sm btn-danger" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">{{ __('locale.Close')}}</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="rateLimitContent">
                        <div class="text-center py-4">
                            <i class="fe fe-loader fa-spin fa-2x"></i>
                            <p class="mt-2">{{ __('locale.Loading_Rate_Limits') }}</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ __('locale.Close') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('bottom_script')
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#partnersTable').DataTable({
                "paging": false,
                "info": false,
                "searching": true,
                "order": [[0, "asc"]]
            });
        });

        let currentPartnerId = null;

        // FIX 2: Renamed function to avoid conflicts and ensure proper modal opening
        function openAssignPlanModal(partnerId) {
            currentPartnerId = partnerId;
            $('#assign_partner_id').val(partnerId);
            $('#assignPlanModal').modal('show');
        }

        // Keep original function name for compatibility
        window.assignPlan = openAssignPlanModal;

        // FIX 1: New function to show rate limits in modal instead of opening JSON
        function showRateLimits(planId) {
            $('#rateLimitModal').modal('show');
            $('#rateLimitContent').html(`
                                                        <div class="text-center py-4">
                                                            <i class="fe fe-loader fa-spin fa-2x"></i>
                                                            <p class="mt-2">{{ __('locale.Loading_Rate_Limits') }}</p>
                                                        </div>
                                                    `);

            $.ajax({
                url: `{{ url('/admin/billing_plans/rate-limit') }}/${planId}`,
                method: 'GET',
                success: function (response) {
                    let html = `
                                                                <div class="table-responsive">
                                                                    <table class="table table-bordered">
                                                                        <thead class="thead-light">
                                                                            <tr>
                                                                                <th>{{ __('locale.Parameter') }}</th>
                                                                                <th>{{ __('locale.Value') }}</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                            `;

                    if (typeof response === 'object') {
                        for (let key in response) {
                            if (response.hasOwnProperty(key)) {
                                html += `
                                                                            <tr>
                                                                                <td><strong>${key}</strong></td>
                                                                                <td>${JSON.stringify(response[key])}</td>
                                                                            </tr>
                                                                        `;
                            }
                        }
                    } else {
                        html += `
                                                                    <tr>
                                                                        <td colspan="2" class="text-center">{{ __('locale.Rate_Limit_Data') }}</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan="2"><pre class="mb-0">${JSON.stringify(response, null, 2)}</pre></td>
                                                                    </tr>
                                                                `;
                    }

                    html += `
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            `;

                    $('#rateLimitContent').html(html);
                },
                error: function (xhr) {
                    let errorMsg = '{{ __('locale.Failed_To_Load_Rate_Limits') }}';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    $('#rateLimitContent').html(`
                                                                <div class="alert alert-danger mb-0">
                                                                    <i class="fe fe-alert-triangle"></i>
                                                                    ${errorMsg}
                                                                </div>
                                                            `);
                }
            });
        }

        $('#assignPlanForm').submit(function (e) {
            e.preventDefault();

            const submitBtn = $(this).find('button[type="submit"]');
            submitBtn.prop('disabled', true).html('<i class="fe fe-spinner fa-spin"></i> {{ __('locale.Assigning') }}...');

            $.ajax({
                url: `/admin/billing_plans/assign/${currentPartnerId}`,
                method: 'POST',
                data: $(this).serialize(),
                success: function (response) {
                    if (response.success) {
                        toastr.success(response.message);
                        $('#assignPlanModal').modal('hide');
                        setTimeout(() => location.reload(), 1500);
                    } else {
                        toastr.error(response.error || response.message || '{{ __('locale.Assignment_Failed') }}');
                    }
                },
                error: function (xhr) {
                    let errorMsg = '{{ __('locale.Failed_To_Assign_Plan') }}';
                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                        errorMsg = Object.values(xhr.responseJSON.errors).join('\n');
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    toastr.error(errorMsg);
                },
                complete: function () {
                    submitBtn.prop('disabled', false).html('<i class="fe fe-save"></i> {{ __('locale.Assign_Plan') }}');
                }
            });
        });

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