@extends('layouts.auth.app')

@section('title', 'Operation Manager - Revise Late Charge')

@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">Operation Manager - Revise Late Charge</h1>
            <p class="mt-1 text-sm text-gray-500">Search and manage late charges on bills</p>
        </div>
    </div>

    <!-- Search Form 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">Revise Late Charge</h3>
        </div>

        <div class="px-6 py-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div>
                    <form action="{{ route('late-charge.manage-lookup') }}" method="POST">
                        @csrf

                        @if(session('error'))
                        <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                            <div class="flex">
                                <svg class="h-5 w-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                <span class="ml-2 text-sm text-red-700">{{ session('error') }}</span>
                            </div>
                        </div>
                        @endif

                        <div class="space-y-4">
                            <!-- Bill Reference Number -->
                            <div>
                                <label for="BillRefNo" class="block text-sm font-medium text-gray-700 mb-1">
                                    Bill Ref No <span class="text-red-500">*</span>
                                </label>
                                <input type="text"
                                       name="BillRefNo"
                                       id="BillRefNo"
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 @error('BillRefNo') border-red-500 @enderror"
                                       placeholder="Enter Bill Ref No (e.g., AB2024000001 or SB2024000001)"
                                       value="{{ old('BillRefNo') }}"
                                       required>
                                @error('BillRefNo')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                                <p class="mt-1 text-xs text-gray-500">Enter Assessment Bill (AB) or Service Bill (SB) reference number</p>
                            </div>

                            <!-- Submit Button -->
                            <div class="pt-2">
                                <button type="submit" class="w-full sm:w-auto inline-flex items-center justify-center px-6 py-2.5 bg-teal-600 border border-transparent rounded-lg font-semibold text-sm text-white hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                    </svg>
                                    Open Bill
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Information Panel -->
                <div class="bg-gray-50 rounded-lg p-6">
                    <h4 class="text-sm font-semibold text-gray-900 mb-3">Bill Reference Format</h4>
                    <div class="space-y-3">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <span class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-blue-100 text-blue-600 text-xs font-bold">AB</span>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-gray-700">Assessment Bill</p>
                                <p class="text-xs text-gray-500">Format: AB + Year + Sequence (e.g., AB2024000001)</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <span class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-green-100 text-green-600 text-xs font-bold">SB</span>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-gray-700">Service Bill</p>
                                <p class="text-xs text-gray-500">Format: SB + Year + Sequence (e.g., SB2024000001)</p>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6 pt-4 border-t border-gray-200">
                        <h5 class="text-xs font-semibold text-gray-700 uppercase mb-2">What happens next?</h5>
                        <p class="text-xs text-gray-500">
                            After entering a valid bill reference number, you will be redirected to the adjustment page where you can view and manage late charges applied to the bill.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Auto-uppercase the bill reference number
    $('#BillRefNo').on('input', function() {
        this.value = this.value.toUpperCase();
    });

    // Focus on input
    $('#BillRefNo').focus();
});
</script>
@endpush