<x-app-layout>
    <style>
        @media print {
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            html, body {
                width: 210mm !important;
                height: 297mm !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            body {
                margin: 0;
                padding: 6mm;
                background: white;
                font-size: 9px;
                line-height: 1.2;
                overflow: hidden;
            }

            .no-print {
                display: none !important;
            }

            .printable {
                page-break-inside: avoid;
            }

            .py-6 {
                padding: 0 !important;
            }

            .max-w-6xl {
                max-width: 100% !important;
                margin: 0 !important;
                height: 285mm;
                overflow: hidden;
            }

            .px-4 {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            .mb-4 {
                margin-bottom: 3px !important;
            }

            .mb-3 {
                margin-bottom: 2px !important;
            }

            .mt-1 {
                margin-top: 0px !important;
            }

            .mt-4 {
                margin-top: 1px !important;
            }

            .gap-4 {
                gap: 1px !important;
            }

            .gap-3 {
                gap: 1px !important;
            }

            .gap-2 {
                gap: 0px !important;
            }

            .p-5 {
                padding: 3px !important;
            }

            .p-4 {
                padding: 2px !important;
            }

            .p-3 {
                padding: 1px !important;
            }

            .grid-cols-3 {
                grid-template-columns: 1fr 1fr !important;
            }

            h2 {
                font-size: 12px !important;
                margin: 0 !important;
                margin-bottom: 2px !important;
            }

            h3 {
                font-size: 9px !important;
                margin: 0 !important;
                margin-bottom: 2px !important;
            }

            .text-2xl {
                font-size: 12px !important;
            }

            .text-sm {
                font-size: 8px !important;
            }

            .text-xs {
                font-size: 7px !important;
            }

            .text-base {
                font-size: 8px !important;
            }

            .text-lg {
                font-size: 9px !important;
            }

            .rounded {
                border-radius: 2px !important;
            }

            .rounded-lg {
                border-radius: 2px !important;
            }

            table {
                font-size: 7px !important;
                line-height: 1;
            }

            th, td {
                padding: 2px !important;
            }

            .border {
                border: 0.5px solid #999 !important;
            }

            .border-b {
                border-bottom: 0.5px solid #999 !important;
            }

            .shadow-sm {
                box-shadow: none !important;
            }

            .shadow-md {
                box-shadow: none !important;
            }

            .overflow-x-auto {
                overflow: visible !important;
            }

            .transition {
                transition: none !important;
            }

            @page {
                size: A4;
                margin: 0;
            }

            div, p, span, tr, td, th {
                margin: 0 !important;
                padding: 0 !important;
            }

            p {
                margin: 0 !important;
                margin-bottom: 0px !important;
                line-height: 1.1 !important;
            }

            br {
                display: none !important;
            }
        }

        @media print {
            .status-bar-print {
                page-break-inside: avoid;
            }

            .details-table-print {
                page-break-inside: avoid;
            }

            .grid {
                display: block !important;
            }

            .grid > div {
                display: inline-block;
                width: 48% !important;
                margin-right: 2% !important;
                margin-bottom: 2px !important;
                vertical-align: top;
                page-break-inside: avoid;
            }

            .grid > div:nth-child(even) {
                margin-right: 0;
            }

            table {
                width: 100%;
                border-collapse: collapse;
            }

            thead {
                display: table-header-group;
            }

            tfoot {
                display: table-footer-group;
            }

            .space-y-3 {
                margin-bottom: 1px !important;
            }

            .space-y-3 > div {
                margin-bottom: 1px !important;
            }

            .space-y-3 > div:last-child {
                margin-bottom: 0 !important;
            }

            .divide-y > * {
                border-bottom-width: 0.5px !important;
            }

            .hover\:shadow-md:hover {
                box-shadow: none !important;
            }

            .hover\:bg-blue-50:hover {
                background-color: white !important;
            }

            .space-y-3 {
                margin-bottom: 2px !important;
            }

            .bg-white {
                background-color: white !important;
            }

            .bg-gray-50 {
                background-color: #f9fafb !important;
            }

            .bg-gray-100 {
                background-color: #f3f4f6 !important;
            }

            .bg-gradient-to-r {
                background: linear-gradient(to right, white, white) !important;
            }

            .bg-red-100 {
                background-color: #fee2e2 !important;
            }

            .bg-blue-100 {
                background-color: #dbeafe !important;
            }

            .bg-red-600 {
                background-color: #dc2626 !important;
            }

            .bg-blue-600 {
                background-color: #2563eb !important;
            }

            .text-red-600 {
                color: #dc2626 !important;
            }

            .text-blue-600 {
                color: #2563eb !important;
            }

            .text-gray-900 {
                color: #111827 !important;
            }

            .text-gray-600 {
                color: #4b5563 !important;
            }

            .text-gray-500 {
                color: #6b7280 !important;
            }

            .font-bold {
                font-weight: 700 !important;
            }

            .font-medium {
                font-weight: 500 !important;
            }

            .font-semibold {
                font-weight: 600 !important;
            }

            .border-l-4 {
                border-left: 1px solid #3b82f6 !important;
            }

            .pb-2 {
                padding-bottom: 0px !important;
            }

            .px-2 {
                padding-left: 1px !important;
                padding-right: 1px !important;
            }

            .py-0 {
                padding-top: 0px !important;
                padding-bottom: 0px !important;
            }

            .px-3 {
                padding-left: 1px !important;
                padding-right: 1px !important;
            }

            .py-1 {
                padding-top: 0px !important;
                padding-bottom: 0px !important;
            }

            .py-2 {
                padding-top: 1px !important;
                padding-bottom: 1px !important;
            }

            .py-3 {
                padding-top: 1px !important;
                padding-bottom: 1px !important;
            }

            .inline-block {
                margin-right: 0px !important;
            }
        }
    </style>

    <x-slot name="header">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="font-semibold text-2xl text-gray-800">{{ __('تفاصيل قيد اليومية') }}</h2>
                <p class="text-gray-500 text-sm mt-1">{{ $entry->reference_number }}</p>
            </div>
            <a href="{{ route('accounting.journal-entries.index') }}" class="no-print inline-flex items-center px-3 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded hover:bg-gray-200">
                <span>← {{ __('العودة') }}</span>
            </a>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-6xl mx-auto px-4">
            @if (session('success'))
                <div class="no-print mb-4 p-3 bg-green-50 border border-green-200 text-green-700 text-sm rounded-lg">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div class="no-print mb-4 p-3 bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg">
                    {{ session('error') }}
                </div>
            @endif

            <div style="display: flex; flex-direction: column; min-height: 100vh; gap: 1rem;">
                <!-- Header Section: 15% -->
                <div style="flex: 0 0 15%; background: white; border-left: 4px solid #3b82f6; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <div style="display: flex; align-items: center; gap: 0.75rem;">
                            <div>
                                <p style="color: #4b5563; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;">{{ __('الحالة الحالية') }}</p>
                                <p style="color: #111827; font-weight: 600; margin-top: 0.25rem;">
                                    @switch($entry->status)
                                        @case('draft')
                                            <span style="display: inline-flex; align-items: center; padding: 0.375rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background: #f3f4f6; color: #1f2937;">
                                                {{ __('مسودة') }}
                                            </span>
                                            @break
                                        @case('posted')
                                            <span style="display: inline-flex; align-items: center; padding: 0.375rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background: #dbeafe; color: #1e40af;">
                                                {{ __('مرحل') }}
                                            </span>
                                            @break
                                        @case('approved')
                                            <span style="display: inline-flex; align-items: center; padding: 0.375rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background: #dcfce7; color: #166534;">
                                                {{ __('معتمد') }}
                                            </span>
                                            @break
                                        @case('rejected')
                                            <span style="display: inline-flex; align-items: center; padding: 0.375rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background: #fee2e2; color: #991b1b;">
                                                {{ __('مرفوض') }}
                                            </span>
                                            @break
                                    @endswitch
                                </p>
                            </div>
                        </div>
                        <!-- Action Buttons -->
                        <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;" class="no-print">
                            @if ($entry->canBeEdited())
                                <a href="{{ route('accounting.journal-entries.edit', $entry) }}" style="padding: 0.5rem 0.75rem; background: #eab308; color: white; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; text-decoration: none;">
                                    {{ __('تعديل') }}
                                </a>
                            @endif
                            
                            @if ($entry->canBePosted())
                                <form action="{{ route('accounting.journal-entries.post', $entry) }}" method="POST" style="display: inline;">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" style="padding: 0.5rem 0.75rem; background: #2563eb; color: white; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; border: none; cursor: pointer;" onclick="return confirm('{{ __('هل أنت متأكد من ترحيل هذا القيد؟') }}')">
                                        {{ __('ترحيل') }}
                                    </button>
                                </form>
                            @endif
                            
                            @if ($entry->canBeApproved())
                                <form action="{{ route('accounting.journal-entries.approve', $entry) }}" method="POST" style="display: inline;">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" style="padding: 0.5rem 0.75rem; background: #16a34a; color: white; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; border: none; cursor: pointer;" onclick="return confirm('{{ __('هل أنت متأكد من اعتماد هذا القيد؟') }}')">
                                        {{ __('اعتماد') }}
                                    </button>
                                </form>
                            @endif
                            
                            @if ($entry->canBeRejected())
                                <form action="{{ route('accounting.journal-entries.reject', $entry) }}" method="POST" style="display: inline;">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" style="padding: 0.5rem 0.75rem; background: #dc2626; color: white; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; border: none; cursor: pointer;" onclick="return confirm('{{ __('هل أنت متأكد من رفض هذا القيد؟') }}')">
                                        {{ __('رفض') }}
                                    </button>
                                </form>
                            @endif
                            
                            @if ($entry->status === 'draft')
                                <form action="{{ route('accounting.journal-entries.destroy', $entry) }}" method="POST" style="display: inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" style="padding: 0.5rem 0.75rem; background: #dc2626; color: white; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; border: none; cursor: pointer;" onclick="return confirm('{{ __('هل أنت متأكد من حذف هذا القيد؟') }}')">
                                        {{ __('حذف') }}
                                    </button>
                                </form>
                            @endif

                            <button type="button" onclick="window.print()" style="padding: 0.5rem 0.75rem; background: #4b5563; color: white; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; border: none; cursor: pointer;">
                                🖨 {{ __('طباعة') }}
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Body Section: 80% -->
                <div style="flex: 0 0 80%; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto;">
                    <!-- Main Content Cards (Info Summary) -->
                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
                        <!-- Card 1: Basic Info -->
                        <div style="background: white; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; padding: 1.25rem;">
                            <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
                                <div style="width: 2rem; height: 2rem; border-radius: 0.5rem; background: #dbeafe; display: flex; align-items: center; justify-content: center; font-size: 1rem;">📋</div>
                                <h3 style="font-size: 0.75rem; font-weight: 600; color: #4b5563; text-transform: uppercase; letter-spacing: 0.05em;">{{ __('الأساسيات') }}</h3>
                            </div>
                            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                                <div style="border-bottom: 1px solid #f3f4f6; padding-bottom: 0.5rem;">
                                    <p style="color: #6b7280; font-size: 0.75rem; font-weight: 600;">{{ __('الرقم') }}</p>
                                    <p style="color: #111827; font-size: 1rem; font-weight: 700; margin-top: 0.25rem;">{{ $entry->reference_number }}</p>
                                </div>
                                <div style="border-bottom: 1px solid #f3f4f6; padding-bottom: 0.5rem;">
                                    <p style="color: #6b7280; font-size: 0.75rem; font-weight: 600;">{{ __('التاريخ') }}</p>
                                    <p style="color: #111827; font-size: 0.875rem; font-weight: 500; margin-top: 0.25rem;">{{ $entry->entry_date ? $entry->entry_date->format('Y-m-d') : '-' }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Card 2: Period Info -->
                        <div style="background: white; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; padding: 1.25rem;">
                            <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
                                <div style="width: 2rem; height: 2rem; border-radius: 0.5rem; background: #dcfce7; display: flex; align-items: center; justify-content: center; font-size: 1rem;">📅</div>
                                <h3 style="font-size: 0.75rem; font-weight: 600; color: #4b5563; text-transform: uppercase; letter-spacing: 0.05em;">{{ __('الفترة') }}</h3>
                            </div>
                            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                                <div style="border-bottom: 1px solid #f3f4f6; padding-bottom: 0.5rem;">
                                    <p style="color: #6b7280; font-size: 0.75rem; font-weight: 600;">{{ __('السنة المالية') }}</p>
                                    <p style="color: #111827; font-size: 0.875rem; font-weight: 500; margin-top: 0.25rem;">{{ $entry->fiscalYear ? $entry->fiscalYear->name : '-' }}</p>
                                </div>
                                <div style="border-bottom: 1px solid #f3f4f6; padding-bottom: 0.5rem;">
                                    <p style="color: #6b7280; font-size: 0.75rem; font-weight: 600;">{{ __('الفترة المحاسبية') }}</p>
                                    <p style="color: #111827; font-size: 0.875rem; font-weight: 500; margin-top: 0.25rem;">{{ $entry->accountingPeriod ? $entry->accountingPeriod->name : '-' }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Card 3: Audit Info -->
                        <div style="background: white; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; padding: 1.25rem;">
                            <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
                                <div style="width: 2rem; height: 2rem; border-radius: 0.5rem; background: #e9d5ff; display: flex; align-items: center; justify-content: center; font-size: 1rem;">✓</div>
                                <h3 style="font-size: 0.75rem; font-weight: 600; color: #4b5563; text-transform: uppercase; letter-spacing: 0.05em;">{{ __('المراجعة') }}</h3>
                            </div>
                            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                                <div style="border-bottom: 1px solid #f3f4f6; padding-bottom: 0.5rem;">
                                    <p style="color: #6b7280; font-size: 0.75rem; font-weight: 600;">{{ __('أنشأ بواسطة') }}</p>
                                    <p style="color: #111827; font-size: 0.875rem; font-weight: 500; margin-top: 0.25rem;">{{ $entry->creator ? $entry->creator->name : '-' }}</p>
                                </div>
                                @if ($entry->approved_by && $entry->approver)
                                    <div>
                                        <p style="color: #6b7280; font-size: 0.75rem; font-weight: 600;">{{ __('اعتمد بواسطة') }}</p>
                                        <p style="color: #111827; font-size: 0.875rem; font-weight: 500; margin-top: 0.25rem;">{{ $entry->approver->name }}</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Details Table -->
                    <div style="background: white; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; overflow: hidden; flex-grow: 1; display: flex; flex-direction: column;">
                        <div style="padding: 1.25rem; border-bottom: 1px solid #e5e7eb; background: linear-gradient(to right, #f9fafb, white);">
                            <h3 style="font-size: 1rem; font-weight: 700; color: #111827;">📊 {{ __('تفاصيل البنود') }}</h3>
                            <p style="font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem;">{{ count($entry->details) }} {{ __('بند') }}</p>
                        </div>
                        <div style="overflow-x: auto; flex-grow: 1;">
                            <table style="width: 100%; border-collapse: collapse;">
                                <thead style="background: linear-gradient(to right, #f3f4f6, #f9fafb); border-bottom: 1px solid #d1d5db;">
                                    <tr>
                                        <th style="padding: 0.75rem; text-align: right; font-size: 0.75rem; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.05em;">{{ __('الحساب') }}</th>
                                        <th style="padding: 0.75rem; text-align: right; font-size: 0.75rem; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.05em;">{{ __('الاسم') }}</th>
                                        <th style="padding: 0.75rem; text-align: right; font-size: 0.75rem; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.05em;">{{ __('مركز التكلفة') }}</th>
                                        <th style="padding: 0.75rem; text-align: right; font-size: 0.75rem; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.05em;">{{ __('الوصف') }}</th>
                                        <th style="padding: 0.75rem; text-align: center; font-size: 0.75rem; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.05em;">{{ __('مدين') }}</th>
                                        <th style="padding: 0.75rem; text-align: center; font-size: 0.75rem; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.05em;">{{ __('دائن') }}</th>
                                    </tr>
                                </thead>
                                <tbody style="border-top: 1px solid #f3f4f6;">
                                    @foreach ($entry->details as $detail)
                                        <tr style="border-bottom: 1px solid #f3f4f6;">
                                            <td style="padding: 0.75rem;">
                                                <span style="display: inline-block; background: #f3f4f6; padding: 0.25rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 700; color: #111827;">
                                                    {{ $detail->account->code }}
                                                </span>
                                            </td>
                                            <td style="padding: 0.75rem; color: #111827; font-weight: 500; font-size: 0.875rem;">{{ $detail->account->name }}</td>
                                            <td style="padding: 0.75rem; color: #4b5563; font-size: 0.875rem;">
                                                @if($detail->costCenter)
                                                    <span style="display: inline-block; background: #e9d5ff; padding: 0.25rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; color: #6d28d9;">
                                                        {{ $detail->costCenter->code }} - {{ $detail->costCenter->name }}
                                                    </span>
                                                @else
                                                    <span style="color: #d1d5db;">-</span>
                                                @endif
                                            </td>
                                            <td style="padding: 0.75rem; color: #4b5563; font-size: 0.875rem;">{{ $detail->description ?: '-' }}</td>
                                            <td style="padding: 0.75rem; text-align: center;">
                                                @if ($detail->debit_amount > 0)
                                                    <span style="display: inline-block; background: #fee2e2; color: #dc2626; padding: 0.25rem 0.75rem; border-radius: 0.5rem; font-weight: 700; font-size: 0.875rem;">
                                                        {{ number_format($detail->debit_amount, 2) }}
                                                    </span>
                                                @else
                                                    <span style="color: #d1d5db;">-</span>
                                                @endif
                                            </td>
                                            <td style="padding: 0.75rem; text-align: center;">
                                                @if ($detail->credit_amount > 0)
                                                    <span style="display: inline-block; background: #dbeafe; color: #2563eb; padding: 0.25rem 0.75rem; border-radius: 0.5rem; font-weight: 700; font-size: 0.875rem;">
                                                        {{ number_format($detail->credit_amount, 2) }}
                                                    </span>
                                                @else
                                                    <span style="color: #d1d5db;">-</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                    <tr style="background: linear-gradient(to right, #111827, #1f2937); color: white; font-weight: 700; border-top: 2px solid #d1d5db;">
                                        <td colspan="4" style="padding: 1rem; font-size: 0.875rem;">{{ __('الإجمالي النهائي') }}</td>
                                        <td style="padding: 1rem; text-align: center;">
                                            <div style="display: inline-block; background: #dc2626; padding: 0.5rem 1rem; border-radius: 0.5rem;">
                                                {{ number_format($entry->total_debit, 2) }}
                                            </div>
                                        </td>
                                        <td style="padding: 1rem; text-align: center;">
                                            <div style="display: inline-block; background: #2563eb; padding: 0.5rem 1rem; border-radius: 0.5rem;">
                                                {{ number_format($entry->total_credit, 2) }}
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Footer Section: 5% -->
                <div style="flex: 0 0 5%; background: white; border-top: 1px solid #e5e7eb; padding: 0.5rem 1rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: #6b7280;">
                    <div>
                        <span>{{ __('تم إنشاء هذا القيد بواسطة النظام - ') }}</span>
                        <span>{{ now()->format('d/m/Y H:i') }}</span>
                    </div>
                    <div>
                        <span>{{ __('رقم القيد: ') }} {{ $entry->reference_number }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
