@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render('laporan-closing-balance.show', $closingBalance) }}
@endsection

@section('content')
    <div class="grid">
        <!-- Header Card -->
        <div class="card mb-5">
            <div class="card-header">
                <h3 class="card-title">
                    Detail Laporan Closing Balance
                </h3>
                <div class="flex items-center gap-2">
                    <a href="{{ route('laporan-closing-balance.index') }}" class="btn btn-light">
                        <i class="ki-filled ki-left"></i>
                        Kembali
                    </a>
                </div>
            </div>
        </div>

        <!-- Detail Information Card -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    Informasi Rekening
                </h3>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- Informasi Dasar -->
                    <div class="space-y-4">
                        <div class="flex flex-col">
                            <label class="text-sm font-medium text-gray-600 mb-1">Nomor Rekening</label>
                            <div class="text-lg font-semibold text-gray-900">
                                {{ $closingBalance->account_number }}
                            </div>
                        </div>

                        <div class="flex flex-col">
                            <label class="text-sm font-medium text-gray-600 mb-1">Periode</label>
                            <div class="text-lg font-semibold text-gray-900">
                                @php
                                    $period = $closingBalance->period;
                                    if (strlen($period) === 8) {
                                        $formatted = substr($period, 6, 2) . '/' . substr($period, 4, 2) . '/' . substr($period, 0, 4);
                                        echo $formatted;
                                    } else {
                                        echo $period;
                                    }
                                @endphp
                            </div>
                        </div>

                        <div class="flex flex-col">
                            <label class="text-sm font-medium text-gray-600 mb-1">Tanggal Update Terakhir</label>
                            <div class="text-lg font-semibold text-gray-900">
                                {{ $closingBalance->updated_at ? $closingBalance->updated_at->format('d/m/Y H:i:s') : '-' }}
                            </div>
                        </div>
                    </div>

                    <!-- Informasi Saldo -->
                    <div class="space-y-4">
                        <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                            <label class="text-sm font-medium text-blue-700 mb-2 block">Saldo Cleared</label>
                            <div class="text-2xl font-bold text-blue-800">
                                @php
                                    $clearedBalance = $closingBalance->cleared_balance ?? 0;
                                    echo 'Rp ' . number_format($clearedBalance, 2, ',', '.');
                                @endphp
                            </div>
                        </div>

                        <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                            <label class="text-sm font-medium text-green-700 mb-2 block">Saldo Aktual</label>
                            <div class="text-2xl font-bold text-green-800">
                                @php
                                    $actualBalance = $closingBalance->actual_balance ?? 0;
                                    echo 'Rp ' . number_format($actualBalance, 2, ',', '.');
                                @endphp
                            </div>
                        </div>

                        <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                            <label class="text-sm font-medium text-gray-700 mb-2 block">Selisih Saldo</label>
                            <div class="text-2xl font-bold {{ ($actualBalance - $clearedBalance) >= 0 ? 'text-green-800' : 'text-red-800' }}">
                                @php
                                    $difference = $actualBalance - $clearedBalance;
                                    $sign = $difference >= 0 ? '+' : '';
                                    echo $sign . 'Rp ' . number_format($difference, 2, ',', '.');
                                @endphp
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Additional Information Card -->
        @if($closingBalance->created_at || $closingBalance->updated_at)
        <div class="card mt-5">
            <div class="card-header">
                <h3 class="card-title">
                    Informasi Sistem
                </h3>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    @if($closingBalance->created_at)
                    <div class="flex flex-col">
                        <label class="text-sm font-medium text-gray-600 mb-1">Tanggal Dibuat</label>
                        <div class="text-base text-gray-900">
                            {{ $closingBalance->created_at->format('d/m/Y H:i:s') }}
                        </div>
                        <div class="text-sm text-gray-500">
                            {{ $closingBalance->created_at->diffForHumans() }}
                        </div>
                    </div>
                    @endif

                    @if($closingBalance->updated_at)
                    <div class="flex flex-col">
                        <label class="text-sm font-medium text-gray-600 mb-1">Tanggal Diperbarui</label>
                        <div class="text-base text-gray-900">
                            {{ $closingBalance->updated_at->format('d/m/Y H:i:s') }}
                        </div>
                        <div class="text-sm text-gray-500">
                            {{ $closingBalance->updated_at->diffForHumans() }}
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        @endif

        <!-- Action Buttons -->
        <div class="card mt-5">
            <div class="card-body">
                <div class="flex flex-wrap gap-3 justify-center lg:justify-start">
                    <a href="{{ route('laporan-closing-balance.index') }}" class="btn btn-light">
                        <i class="ki-filled ki-left"></i>
                        Kembali ke Daftar
                    </a>
                    
                    <a href="{{ route('laporan-closing-balance.export', ['account_number' => $closingBalance->account_number, 'start_date' => $closingBalance->period, 'end_date' => $closingBalance->period]) }}" 
                       class="btn btn-primary">
                        <i class="ki-filled ki-file-down"></i>
                        Export Data Ini
                    </a>
                    
                    <button type="button" class="btn btn-info" onclick="window.print()">
                        <i class="ki-filled ki-printer"></i>
                        Print
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        /* Print styles */
        @media print {
            .btn, .card-header .flex, nav, .breadcrumb {
                display: none !important;
            }
            
            .card {
                box-shadow: none !important;
                border: 1px solid #ddd !important;
            }
            
            .card-body {
                padding: 1rem !important;
            }
            
            body {
                font-size: 12px !important;
            }
            
            .text-2xl {
                font-size: 1.5rem !important;
            }
            
            .text-lg {
                font-size: 1.125rem !important;
            }
        }
    </style>
@endpush

@push('scripts')
    <script type="text/javascript">
        /**
         * Fungsi untuk memformat angka menjadi format mata uang Indonesia
         * @param {number} amount - Jumlah yang akan diformat
         * @returns {string} - String yang sudah diformat
         */
        function formatCurrency(amount) {
            return new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                minimumFractionDigits: 2
            }).format(amount);
        }

        /**
         * Fungsi untuk copy nomor rekening ke clipboard
         */
        function copyAccountNumber() {
            const accountNumber = '{{ $closingBalance->account_number }}';
            
            if (navigator.clipboard) {
                navigator.clipboard.writeText(accountNumber).then(function() {
                    // Show success message
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: 'Nomor rekening berhasil disalin ke clipboard',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    } else {
                        alert('Nomor rekening berhasil disalin ke clipboard');
                    }
                }).catch(function(err) {
                    console.error('Error copying to clipboard: ', err);
                    fallbackCopyTextToClipboard(accountNumber);
                });
            } else {
                fallbackCopyTextToClipboard(accountNumber);
            }
        }

        /**
         * Fallback function untuk copy text jika clipboard API tidak tersedia
         */
        function fallbackCopyTextToClipboard(text) {
            const textArea = document.createElement('textarea');
            textArea.value = text;
            
            // Avoid scrolling to bottom
            textArea.style.top = '0';
            textArea.style.left = '0';
            textArea.style.position = 'fixed';
            
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            
            try {
                const successful = document.execCommand('copy');
                if (successful) {
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: 'Nomor rekening berhasil disalin ke clipboard',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    } else {
                        alert('Nomor rekening berhasil disalin ke clipboard');
                    }
                } else {
                    console.error('Fallback: Copying text command was unsuccessful');
                }
            } catch (err) {
                console.error('Fallback: Oops, unable to copy', err);
            }
            
            document.body.removeChild(textArea);
        }

        // Add click event to account number for easy copying
        document.addEventListener('DOMContentLoaded', function() {
            const accountNumberElements = document.querySelectorAll('.account-number-clickable');
            accountNumberElements.forEach(element => {
                element.style.cursor = 'pointer';
                element.title = 'Klik untuk menyalin nomor rekening';
                element.addEventListener('click', copyAccountNumber);
            });
        });
    </script>
@endpush