@extends('layouts.app')

@section('content')
<div class="h-100 d-flex flex-column">
    <!-- Header -->
    <div class="bg-white border-bottom p-3">
        <div class="d-flex justify-content-between align-items-center px-3">
            <div class="d-flex align-items-center">
                <a href="{{ route('documents.index') }}" class="btn btn-sm btn-light border me-3 rounded-circle">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <div>
                    <h5 class="mb-0 fw-bold">{{ $document->file_name }}</h5>
                    <span class="badge {{ $document->status == 'ready' ? 'bg-warning text-dark' : 'bg-info' }} rounded-pill xx-small">
                        {{ strtoupper($document->status) }}
                    </span>
                </div>
            </div>
            <div class="d-flex gap-2">
                @if($document->status == 'uploaded')
                <button type="button" class="btn btn-info btn-sm px-4 rounded-pill text-white fw-bold" id="process-doc-btn">
                    <i class="fas fa-magic me-2"></i> Auto Process
                </button>
                @endif
                <button type="button" class="btn btn-primary btn-sm px-4 rounded-pill fw-bold" id="convert-btn" {{ $document->status == 'ready' ? '' : 'disabled' }}>
                    <i class="fas fa-exchange-alt me-2"></i> Convert to Transaction
                </button>
            </div>
        </div>
    </div>

    <!-- Main Content: Split View -->
    <div class="flex-grow-1 overflow-hidden">
        <div class="row h-100 g-0">
            <!-- Left Side: Viewer -->
            <div class="col-md-7 h-100 bg-secondary bg-opacity-10 border-end overflow-auto p-4 d-flex align-items-center justify-content-center">
                @if(Str::endsWith($document->file_name, '.pdf'))
                    <iframe src="{{ route('documents.file', $document) }}" class="w-100 h-100 shadow-sm rounded-4 border-0" style="min-height: 600px;"></iframe>
                @else
                    <img src="{{ route('documents.file', $document) }}" class="img-fluid shadow-sm rounded-4 border">
                @endif
            </div>

            <!-- Right Side: Form -->
            <div class="col-md-5 h-100 bg-white overflow-auto p-4">
                <div class="px-3">
                    <h5 class="fw-bold mb-4">Transaction Details</h5>
                    
                    <form id="convert-form">
                        @csrf
                        <div class="mb-4">
                            <label class="form-label small fw-bold text-muted text-uppercase">Convert To</label>
                            <div class="d-flex gap-3">
                                <div class="form-check card p-3 flex-grow-1 border-2 {{ $document->document_type == 'Bill' ? 'border-primary' : 'border-light' }}">
                                    <input class="form-check-input" type="radio" name="convert_to" id="type_bill" value="bill" {{ $document->document_type == 'Bill' ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold d-block cursor-pointer" for="type_bill">
                                        <i class="fas fa-file-invoice text-primary me-2"></i> Bill
                                    </label>
                                </div>
                                <div class="form-check card p-3 flex-grow-1 border-2 {{ $document->document_type == 'Receipt' || $document->document_type == 'Expense' ? 'border-primary' : 'border-light' }}">
                                    <input class="form-check-input" type="radio" name="convert_to" id="type_expense" value="expense" {{ $document->document_type == 'Receipt' || $document->document_type == 'Expense' ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold d-block cursor-pointer" for="type_expense">
                                        <i class="fas fa-receipt text-success me-2"></i> Expense
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-muted text-uppercase">Vendor</label>
                            <select name="vendor_id" class="form-select border-2 rounded-3" required>
                                <option value="">Select Vendor</option>
                                @foreach($vendors as $vendor)
                                    <option value="{{ $vendor->id }}" {{ $document->vendor_name == $vendor->display_name ? 'selected' : '' }}>
                                        {{ $vendor->display_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">Date</label>
                                <input type="date" name="date" class="form-control border-2 rounded-3" value="{{ $document->document_date ? $document->document_date->format('Y-m-d') : date('Y-m-d') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-muted text-uppercase">Amount</label>
                                <div class="input-group">
                                    <span class="input-group-text border-2 bg-light fw-bold">{{ getCurrencySymbol() }}</span>
                                    <input type="number" step="0.01" name="amount" class="form-control border-2 rounded-end-3" value="{{ $document->amount }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="mb-4" id="category-group" style="display: {{ $document->document_type == 'Bill' ? 'none' : 'block' }}">
                            <label class="form-label small fw-bold text-muted text-uppercase">Expense Category</label>
                            <select name="expense_category_id" class="form-select border-2 rounded-3">
                                <option value="">Select Category</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-muted text-uppercase">Invoice / Reference Number</label>
                            <input type="text" name="invoice_number" class="form-control border-2 rounded-3" value="{{ $document->extracted_data['invoice_number'] ?? '' }}">
                        </div>

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-muted text-uppercase">Notes</label>
                            <textarea name="notes" class="form-control border-2 rounded-3" rows="3"></textarea>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Toggle Category field
    document.querySelectorAll('input[name="convert_to"]').forEach(radio => {
        radio.addEventListener('change', (e) => {
            const group = document.getElementById('category-group');
            group.style.display = e.target.value === 'expense' ? 'block' : 'none';
            
            // Visual feedback on cards
            document.querySelectorAll('.form-check.card').forEach(card => card.classList.replace('border-primary', 'border-light'));
            e.target.closest('.card').classList.replace('border-light', 'border-primary');
        });
    });

    // Process Doc
    const processBtn = document.getElementById('process-doc-btn');
    if (processBtn) {
        processBtn.addEventListener('click', async function() {
            const originalContent = this.innerHTML;
            this.disabled = true;
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Processing...';
            
            try {
                const response = await fetch('{{ route("documents.process", $document) }}', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                });
                const data = await response.json();
                if (data.success) {
                    window.location.reload();
                } else {
                    alert('Processing failed: ' + (data.message || 'Unknown error'));
                    this.disabled = false;
                    this.innerHTML = originalContent;
                }
            } catch (err) {
                alert('Processing failed. Please check your connection.');
                this.disabled = false;
                this.innerHTML = originalContent;
            }
        });
    }

    // Convert Doc
    document.getElementById('convert-btn').addEventListener('click', async function() {
        const form = document.getElementById('convert-form');
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }

        const formData = new FormData(form);
        const originalContent = this.innerHTML;
        
        this.disabled = true;
        this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Converting...';
        
        try {
            const response = await fetch('{{ route("documents.convert", $document) }}', {
                method: 'POST',
                body: formData,
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            });
            const data = await response.json();
            if (data.success) {
                window.location.href = data.redirect;
            } else {
                alert('Conversion failed: ' + (data.message || 'Unknown error'));
                this.disabled = false;
                this.innerHTML = originalContent;
            }
        } catch (err) {
            alert('Conversion failed. Please check your connection.');
            this.disabled = false;
            this.innerHTML = originalContent;
        }
    });
</script>
@endpush

<style>
    .xx-small { font-size: 0.65rem; }
    .bg-opacity-10 { --bs-bg-opacity: 0.1; }
    .cursor-pointer { cursor: pointer; }
    iframe { width: 100%; height: 100%; min-height: 700px; border-radius: 12px; }
</style>
@endsection