@extends('layouts.auth.app')

@section('title', 'Set Tax Office Target - ' . $viewModel['TaxOfficeName'])

@section('content')
<!-- Page Header -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
        <div>
            <h3 class="text-lg font-semibold text-gray-900">Operation Manager - Set Tax Office Target</h3>
            <p class="text-sm text-gray-500 mt-1">{{ $viewModel['TaxOfficeName'] }}</p>
        </div>
        <a href="{{ route('operation-manager.tax-office-target') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 transition-colors">
            Cancel
        </a>
    </div>
</div>

<!-- Tax Office Details -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
    <div class="px-6 py-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700">Tax Office</label>
                <p class="mt-1 text-sm text-gray-900">{{ $viewModel['TaxOfficeName'] }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Tax Year</label>
                <p class="mt-1 text-sm text-gray-900">{{ $viewModel['TaxYearName'] }}</p>
            </div>
        </div>
    </div>
</div>

<!-- Target Form -->
<form id="frmSetTarget" action="{{ route('operation-manager.save-tax-office-target') }}" method="POST">
    @csrf
    <input type="hidden" name="TaxOfficeID" value="{{ $viewModel['TaxOfficeID'] }}">
    <input type="hidden" name="TaxYearID" value="{{ $viewModel['TaxYearID'] }}">

    <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">
            <h3 class="text-lg font-semibold text-gray-900">Revenue Stream Target</h3>
        </div>

        @if(session('error'))
        <div class="px-6 py-3">
            <div class="p-3 rounded-md bg-red-50 text-red-800 text-sm">
                {{ session('error') }}
            </div>
        </div>
        @endif

        @if(session('success'))
        <div class="px-6 py-3">
            <div class="p-3 rounded-md bg-green-50 text-green-800 text-sm">
                {{ session('success') }}
            </div>
        </div>
        @endif

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" style="width: 40%">
                            Revenue Stream
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" style="width: 30%">
                            Yearly
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" style="width: 30%">
                            Monthly
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @php $totalYearly = 0; @endphp
                    @foreach($taxOfficeTargetList as $item)
                    @php $totalYearly += $item->TargetAmount ?? 0; @endphp
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ $item->RevenueStreamName }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <input type="hidden" name="hdnRSTOTID_{{ $item->RevenueStreamID }}" value="{{ $item->TOTID ?? 0 }}">
                            <input type="text"
                                   name="txtRSAmount_{{ $item->RevenueStreamID }}"
                                   id="txtRSAmount_{{ $item->RevenueStreamID }}"
                                   class="rsyearlyamount w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                                   data-rsid="{{ $item->RevenueStreamID }}"
                                   value="{{ number_format($item->TargetAmount ?? 0, 2, '.', '') }}"
                                   placeholder="Enter Amount">
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            <span id="spnrsmonthamount_{{ $item->RevenueStreamID }}">
                                {{ number_format(($item->TargetAmount ?? 0) / 12, 2) }}
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot class="bg-gray-100">
                    <tr>
                        <td class="px-6 py-3 text-right text-sm font-semibold text-gray-900">Total</td>
                        <td class="px-6 py-3 text-sm font-semibold text-gray-900">
                            <span id="spnrsyearlytotal">{{ number_format($totalYearly, 2) }}</span>
                        </td>
                        <td class="px-6 py-3 text-sm font-semibold text-gray-900">
                            <span id="spnrsmonthlytotal">{{ number_format($totalYearly / 12, 2) }}</span>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 text-right">
            <button type="submit" class="inline-flex items-center px-6 py-2 bg-teal-600 text-white font-medium rounded-lg hover:bg-teal-700 transition-colors">
                Save
            </button>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Update monthly amount when yearly amount changes
    $('.rsyearlyamount').on('input', function() {
        const rsid = $(this).data('rsid');
        let yearlyAmount = parseFloat($(this).val().replace(/,/g, '')) || 0;
        const monthlyAmount = yearlyAmount / 12;

        $('#spnrsmonthamount_' + rsid).text(formatMoney(monthlyAmount));

        // Update totals
        updateTotals();
    });

    function updateTotals() {
        let totalYearly = 0;

        $('.rsyearlyamount').each(function() {
            const amount = parseFloat($(this).val().replace(/,/g, '')) || 0;
            totalYearly += amount;
        });

        $('#spnrsyearlytotal').text(formatMoney(totalYearly));
        $('#spnrsmonthlytotal').text(formatMoney(totalYearly / 12));
    }

    function formatMoney(amount) {
        return parseFloat(amount).toLocaleString('en-NG', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    // Format input on blur
    $('.rsyearlyamount').on('blur', function() {
        let value = parseFloat($(this).val().replace(/,/g, '')) || 0;
        $(this).val(value.toFixed(2));
    });
});
</script>
@endpush