@extends('layouts.app')

@section('title', 'Opening Balance - ' . $branch->name . ' - Cash Book')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 bg-white border-b border-gray-200">
                <h2 class="text-2xl font-bold mb-4">Opening Balance - {{ $branch->name }}</h2>
                <a href="{{ route('branches.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">Back to Branches</a>
            </div>

            <div class="p-6">
                @if(session('success'))
                    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                        {{ session('success') }}
                    </div>
                @endif

                @if($errors->any())
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="mb-4 p-3 bg-blue-50 rounded text-sm text-blue-800">
                    Current Currency Rate: <strong>1 SAR = {{ number_format($currencyRate, 2) }} BDT</strong>
                </div>

                <form method="POST" action="{{ route('opening-balance.update', $branch) }}" id="openingBalanceForm">
                    @csrf
                    @method('PUT')

                    <input type="hidden" id="currencyRate" value="{{ $currencyRate }}">

                    <div class="mb-4">
                        <label class="inline-flex items-center mr-6">
                            <input type="radio" name="currency" value="sar" {{ !$isBdtMode ? 'checked' : '' }} class="form-radio" id="currencySar">
                            <span class="ml-2">SAR</span>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="radio" name="currency" value="bdt" {{ $isBdtMode ? 'checked' : '' }} class="form-radio" id="currencyBdt">
                            <span class="ml-2">BDT</span>
                        </label>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div class="border rounded-lg p-4">
                            <h3 class="text-lg font-semibold mb-3">Cash</h3>
                            <div class="mb-3" id="cashSrGroup">
                                <label for="opening_balance_cash_sr" class="block text-sm font-medium text-gray-700">Cash (SAR)</label>
                                <input type="number" step="0.01" name="opening_balance_cash_sr" id="opening_balance_cash_sr"
                                       value="{{ old('opening_balance_cash_sr', $branch->opening_balance_cash_sr) }}"
                                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" {{ $isBdtMode ? 'readonly' : '' }}>
                            </div>
                            <div class="mb-3" id="cashBdtGroup" style="display: {{ $isBdtMode ? 'block' : 'none' }}">
                                <label for="opening_balance_cash_tk" class="block text-sm font-medium text-gray-700">Cash (BDT)</label>
                                <input type="number" step="0.01" name="opening_balance_cash_tk" id="opening_balance_cash_tk"
                                       value="{{ old('opening_balance_cash_tk', $branch->opening_balance_cash_tk) }}"
                                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                            </div>
                            <div class="text-sm font-semibold mt-1">
                                Total Cash (SAR): <span id="cash_total_sar">{{ number_format((float)$branch->opening_balance_cash_sr + ((float)$branch->opening_balance_cash_tk / $currencyRate), 2) }}</span>
                            </div>
                        </div>

                        <div class="border rounded-lg p-4">
                            <h3 class="text-lg font-semibold mb-3">Bank</h3>
                            <div class="mb-3" id="bankSrGroup">
                                <label for="opening_balance_bank_sr" class="block text-sm font-medium text-gray-700">Bank (SAR)</label>
                                <input type="number" step="0.01" name="opening_balance_bank_sr" id="opening_balance_bank_sr"
                                       value="{{ old('opening_balance_bank_sr', $branch->opening_balance_bank_sr) }}"
                                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" {{ $isBdtMode ? 'readonly' : '' }}>
                            </div>
                            <div class="mb-3" id="bankBdtGroup" style="display: {{ $isBdtMode ? 'block' : 'none' }}">
                                <label for="opening_balance_bank_tk" class="block text-sm font-medium text-gray-700">Bank (BDT)</label>
                                <input type="number" step="0.01" name="opening_balance_bank_tk" id="opening_balance_bank_tk"
                                       value="{{ old('opening_balance_bank_tk', $branch->opening_balance_bank_tk) }}"
                                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                            </div>
                            <div class="text-sm font-semibold mt-1">
                                Total Bank (SAR): <span id="bank_total_sar">{{ number_format((float)$branch->opening_balance_bank_sr + ((float)$branch->opening_balance_bank_tk / $currencyRate), 2) }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 mb-4 p-3 bg-gray-50 rounded text-sm text-gray-700">
                        <strong>Combined Opening Balance (SAR):</strong> <span id="combined_total_sar">{{ number_format((float)$branch->opening_balance_cash_sr + ((float)$branch->opening_balance_cash_tk / $currencyRate) + (float)$branch->opening_balance_bank_sr + ((float)$branch->opening_balance_bank_tk / $currencyRate), 2) }}</span>
                    </div>

                    <div class="flex items-center justify-between">
                        <a href="{{ route('branches.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">Cancel</a>
                        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Update Opening Balance</button>
                    </div>
                </form>
            </div>
        </div>

        @if($histories->isNotEmpty())
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mt-6">
            <div class="p-6 bg-white border-b border-gray-200">
                <h3 class="text-xl font-bold mb-4">Change History</h3>
            </div>

            <div class="p-6">
                <table class="min-w-full bg-white">
                    <thead>
                        <tr>
                            <th class="py-2 px-4 border-b">Date</th>
                            <th class="py-2 px-4 border-b">Changed By</th>
                            <th class="py-2 px-4 border-b">Changes</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($histories as $history)
                            <tr>
                                <td class="py-2 px-4 border-b">{{ $history->created_at?->format('Y-m-d H:i') ?? 'N/A' }}</td>
                                <td class="py-2 px-4 border-b">{{ $history->user->name ?? 'N/A' }}</td>
                                <td class="py-2 px-4 border-b">
                                    @foreach($history->changes as $field => $change)
                                        @php
                                            $label = $field === 'cash' ? 'Cash' : 'Bank';
                                            $oldDisplay = number_format($change['old'], 2);
                                            $newDisplay = number_format($change['new'], 2);
                                            if (!empty($change['new_bdt']) || !empty($change['old_bdt'])) {
                                                $rate = $change['rate'] ?? $currencyRate;
                                                $oldDisplay .= $change['old_bdt'] > 0 ? ' [from ' . number_format($change['old_bdt'], 2) . ' BDT @ ' . number_format($rate, 2) . ']' : '';
                                                $newDisplay .= $change['new_bdt'] > 0 ? ' [from ' . number_format($change['new_bdt'], 2) . ' BDT @ ' . number_format($rate, 2) . ']' : '';
                                            }
                                        @endphp
                                        <div class="text-sm">
                                            <strong>{{ $label }}:</strong> {{ $oldDisplay }} &rarr; {{ $newDisplay }}
                                        </div>
                                    @endforeach
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif
    </div>
</div>

<script>
    const rate = parseFloat(document.getElementById('currencyRate').value);

    function updateTotals() {
        const isBdt = document.getElementById('currencyBdt').checked;
        
        const cashSr = parseFloat(document.getElementById('opening_balance_cash_sr').value) || 0;
        const cashTk = parseFloat(document.getElementById('opening_balance_cash_tk').value) || 0;
        const bankSr = parseFloat(document.getElementById('opening_balance_bank_sr').value) || 0;
        const bankTk = parseFloat(document.getElementById('opening_balance_bank_tk').value) || 0;

        let cashTotal, bankTotal;

        if (isBdt) {
            cashTotal = cashTk / rate;
            bankTotal = bankTk / rate;
            document.getElementById('cash_total_sar').textContent = cashTotal.toFixed(2);
            document.getElementById('bank_total_sar').textContent = bankTotal.toFixed(2);
        } else {
            cashTotal = cashSr;
            bankTotal = bankSr;
            document.getElementById('cash_total_sar').textContent = cashTotal.toFixed(2);
            document.getElementById('bank_total_sar').textContent = bankTotal.toFixed(2);
        }

        document.getElementById('combined_total_sar').textContent = (cashTotal + bankTotal).toFixed(2);
    }

    function toggleCurrency() {
        const isBdt = document.getElementById('currencyBdt').checked;
        
        document.getElementById('cashSrGroup').style.display = 'block';
        document.getElementById('bankSrGroup').style.display = 'block';
        document.getElementById('cashBdtGroup').style.display = isBdt ? 'block' : 'none';
        document.getElementById('bankBdtGroup').style.display = isBdt ? 'block' : 'none';

        document.getElementById('opening_balance_cash_sr').readOnly = isBdt;
        document.getElementById('opening_balance_bank_sr').readOnly = isBdt;

        updateTotals();
    }

    document.getElementById('currencySar').addEventListener('change', toggleCurrency);
    document.getElementById('currencyBdt').addEventListener('change', toggleCurrency);

    ['opening_balance_cash_sr', 'opening_balance_cash_tk', 'opening_balance_bank_sr', 'opening_balance_bank_tk'].forEach(function(id) {
        document.getElementById(id).addEventListener('input', updateTotals);
    });

    updateTotals();
</script>
@endsection