@extends('layouts.auth.app')

@section('title', 'Late Charge Detail')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900">Late Charge Detail</h1>
            <p class="mt-1 text-sm text-gray-500">Process late charges for {{ $profName ?? 'Revenue Stream' }} - Tax Year {{ $taxYear ?? 'N/A' }}</p>
        </div>
        <div>
            <a href="{{ route('late-charge.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg font-semibold text-sm text-gray-700 hover:bg-gray-200 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Back to List
            </a>
        </div>
    </div>

    <!-- Info Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-900">Late Charge Information</h3>
        </div>

        <div class="px-6 py-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-blue-50 rounded-lg p-4">
                    <p class="text-sm text-blue-600 font-medium">Revenue Stream</p>
                    <p class="mt-1 text-lg font-semibold text-blue-900">{{ $profName ?? 'N/A' }}</p>
                </div>
                <div class="bg-green-50 rounded-lg p-4">
                    <p class="text-sm text-green-600 font-medium">Tax Year</p>
                    <p class="mt-1 text-lg font-semibold text-green-900">{{ $taxYear ?? 'N/A' }}</p>
                </div>
                <div class="bg-orange-50 rounded-lg p-4">
                    <p class="text-sm text-orange-600 font-medium">Late Charge ID</p>
                    <p class="mt-1 text-lg font-semibold text-orange-900">{{ $id ?? 'N/A' }}</p>
                </div>
            </div>

            @if($lateChargeDetail)
            <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="border border-gray-200 rounded-lg p-4">
                    <p class="text-sm text-gray-500">Penalty Rate</p>
                    <p class="text-2xl font-bold text-orange-600">{{ number_format($lateChargeDetail->Penalty ?? 0, 2) }}%</p>
                </div>
                <div class="border border-gray-200 rounded-lg p-4">
                    <p class="text-sm text-gray-500">Interest Rate</p>
                    <p class="text-2xl font-bold text-blue-600">{{ number_format($lateChargeDetail->Interest ?? 0, 2) }}%</p>
                </div>
            </div>
            @endif
        </div>
    </div>

    <!-- Process Steps Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-900">Process Late Charge</h3>
        </div>

        <div class="px-6 py-6">
            <!-- Step Indicator -->
            <div class="mb-8">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div id="step1Indicator" class="flex items-center justify-center w-10 h-10 rounded-full bg-teal-600 text-white font-semibold">1</div>
                        <span class="ml-3 text-sm font-medium text-gray-900">Initialize</span>
                    </div>
                    <div class="flex-1 h-1 mx-4 bg-gray-200">
                        <div id="step1Progress" class="h-full bg-teal-600 transition-all duration-500" style="width: 0%"></div>
                    </div>
                    <div class="flex items-center">
                        <div id="step2Indicator" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-200 text-gray-500 font-semibold">2</div>
                        <span class="ml-3 text-sm font-medium text-gray-500">Process</span>
                    </div>
                    <div class="flex-1 h-1 mx-4 bg-gray-200">
                        <div id="step2Progress" class="h-full bg-teal-600 transition-all duration-500" style="width: 0%"></div>
                    </div>
                    <div class="flex items-center">
                        <div id="step3Indicator" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-200 text-gray-500 font-semibold">3</div>
                        <span class="ml-3 text-sm font-medium text-gray-500">Complete</span>
                    </div>
                </div>
            </div>

            <!-- Processing Area -->
            <div id="processingArea" class="text-center py-8">
                <div id="loader" class="hidden">
                    <svg class="animate-spin h-12 w-12 text-teal-600 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <p class="mt-4 text-gray-600">Processing late charges...</p>
                </div>

                <div id="stepButtons">
                    <button type="button" id="btnStep1" class="inline-flex items-center px-6 py-3 bg-teal-600 border border-transparent rounded-lg font-semibold text-sm text-white hover:bg-teal-700 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        STEP 1 - Initialize
                    </button>

                    <button type="button" id="btnStep2" class="hidden inline-flex items-center px-6 py-3 bg-teal-600 border border-transparent rounded-lg font-semibold text-sm text-white hover:bg-teal-700 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        STEP 2 - Process
                    </button>

                    <button type="button" id="btnStep3" class="hidden inline-flex items-center px-6 py-3 bg-green-600 border border-transparent rounded-lg font-semibold text-sm text-white hover:bg-green-700 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        Complete
                    </button>
                </div>

                <div id="resultMessage" class="hidden mt-6">
                    <div class="inline-flex items-center px-4 py-2 bg-green-50 border border-green-200 rounded-lg">
                        <svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span class="text-green-700" id="resultText">Late charges processed successfully!</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var currentStep = 1;
    var lateChargeId = {{ $id ?? 0 }};
    var revenueStreamId = {{ $id ?? 0 }};

    function showLoader() {
        $('#loader').removeClass('hidden');
        $('#stepButtons').addClass('hidden');
    }

    function hideLoader() {
        $('#loader').addClass('hidden');
        $('#stepButtons').removeClass('hidden');
    }

    function updateStepIndicator(step) {
        // Reset all indicators
        for (var i = 1; i <= 3; i++) {
            if (i < step) {
                $('#step' + i + 'Indicator').removeClass('bg-gray-200 text-gray-500 bg-teal-600 text-white').addClass('bg-green-500 text-white');
            } else if (i === step) {
                $('#step' + i + 'Indicator').removeClass('bg-gray-200 text-gray-500 bg-green-500').addClass('bg-teal-600 text-white');
            } else {
                $('#step' + i + 'Indicator').removeClass('bg-teal-600 text-white bg-green-500').addClass('bg-gray-200 text-gray-500');
            }
        }

        // Update progress bars
        if (step > 1) {
            $('#step1Progress').css('width', '100%');
        }
        if (step > 2) {
            $('#step2Progress').css('width', '100%');
        }
    }

    function processStep(step) {
        showLoader();

        $.ajax({
            url: '{{ route("late-charge.process-step") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                step: step,
                lateChargeId: lateChargeId,
                revenueStreamId: revenueStreamId
            },
            success: function(response) {
                hideLoader();

                if (response.success) {
                    currentStep = step + 1;
                    updateStepIndicator(currentStep);

                    if (step === 1) {
                        $('#btnStep1').addClass('hidden');
                        $('#btnStep2').removeClass('hidden');
                        toastr.success('Step 1 completed successfully');
                    } else if (step === 2) {
                        $('#btnStep2').addClass('hidden');
                        $('#btnStep3').removeClass('hidden');
                        toastr.success('Step 2 completed successfully');
                    } else if (step === 3) {
                        $('#btnStep3').addClass('hidden');
                        $('#resultMessage').removeClass('hidden');
                        $('#resultText').text(response.message || 'Late charges processed successfully!');
                        toastr.success('Late charges processed successfully!');
                    }
                } else {
                    toastr.error(response.message || 'An error occurred');
                }
            },
            error: function(xhr, status, error) {
                hideLoader();
                toastr.error('An error occurred while processing');
                console.error('Error:', error);
            }
        });
    }

    // Step button handlers
    $('#btnStep1').on('click', function() {
        processStep(1);
    });

    $('#btnStep2').on('click', function() {
        processStep(2);
    });

    $('#btnStep3').on('click', function() {
        processStep(3);
    });
});
</script>
@endpush