@extends('layouts.app')

@section('title', 'Invoice Details - Quick OMS')

@section('content')
<div class="welcome">
    <h3>Invoice #{{ $invoice->invoice_number }}</h3>
</div>

<div class="invoice_prev">

    <!-- LEFT: Invoice Details -->
    <div class="invoice">
        <div class="header_prev">
            <div class="logo_prev">
                <img src="{{ $invoice->company && $invoice->company->logo ? asset('storage/company/'.$invoice->company->logo) : asset('admin/images/logo-img.png') }}" alt="Logo" style="max-height: 80px;">
            </div>
            <div class="address">
                @if($invoice->company)
                    <strong>{{ $invoice->company->name }}</strong><br>
                    {!! nl2br(e($invoice->company->address)) !!}<br>
                    P: {{ $invoice->company->phone }}<br>
                    E: {{ $invoice->company->email }}
                @else
                    A: 4 Square Glen Eden<br>
                    P: +64 123 456 789<br>
                    E: rob.worker1@4sq.co.nz<br>
                    GST: 987-654-321
                @endif
            </div>
        </div>

        <div class="bar-wrap">
            <div class="bar">TAX INVOICE</div>
            <div class="title">INVOICE</div>
        </div>

        <div class="info">
            <div>
                Invoice to:<br>
                <strong>{{ $invoice->client->name ?? 'Guest' }}</strong><br>
                @if($invoice->client)
                    A: {{ $invoice->client->address ?? '-' }}<br>
                    P: {{ $invoice->client->mobile ?? '-' }}<br>
                    E: {{ $invoice->client->email ?? '-' }}
                @endif
            </div>

            <div class="info_right text-right">
                <div class="badge" style="background-color: {{ $invoice->status->color ?? '#666' }}; color: #fff; padding: 5px 12px; border-radius: 4px;">
                    {{ strtoupper($invoice->status->name ?? 'N/A') }}
                </div><br>
                <strong>Invoice No. {{ $invoice->invoice_number }}</strong><br>
                Issue Date : {{ $invoice->issue_date ? date('M d, Y', strtotime($invoice->issue_date)) : '-' }}<br>
                Expiry Date : {{ $invoice->expiry_date ? date('M d, Y', strtotime($invoice->expiry_date)) : '-' }}
            </div>
        </div>

        <div class="table">
            <table style="width: 100%; border-collapse: collapse; margin-top: 20px;">
                <thead>
                    <tr style="background: #f8faff; text-align: left;">
                        <th style="padding: 10px; border-bottom: 2px solid #eee;">Item Description</th>
                        <th style="padding: 10px; border-bottom: 2px solid #eee;">Quantity</th>
                        <th style="padding: 10px; border-bottom: 2px solid #eee;">Price</th>
                        <th style="padding: 10px; border-bottom: 2px solid #eee;">Disc.</th>
                        <th style="padding: 10px; border-bottom: 2px solid #eee;">Tax</th>
                        <th style="padding: 10px; border-bottom: 2px solid #eee; text-align: right;">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @php 
                        $subtotal = 0; 
                        $totalTax = 0;
                    @endphp
                    @foreach($invoice->items as $item)
                    <tr>
                        <td style="padding: 10px; border-bottom: 1px solid #eee;">
                            {{ $item->item_name }}<br>
                            <small style="color: #888;">{{ $item->description }}</small>
                        </td>
                        <td style="padding: 10px; border-bottom: 1px solid #eee;">{{ $item->quantity }}</td>
                        <td style="padding: 10px; border-bottom: 1px solid #eee;">${{ number_format($item->unit_price, 2) }}</td>
                        <td style="padding: 10px; border-bottom: 1px solid #eee;">${{ number_format($item->discount, 2) }}</td>
                        <td style="padding: 10px; border-bottom: 1px solid #eee;">{{ $item->tax_rate }}%</td>
                        <td style="padding: 10px; border-bottom: 1px solid #eee; text-align: right;"><b>${{ number_format($item->total, 2) }}</b></td>
                    </tr>
                    @php
                        $subtotal += ($item->unit_price * $item->quantity) - $item->discount;
                        $totalTax += $item->tax_amount;
                    @endphp
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="total-wrap" style="display: flex; justify-content: flex-end; margin-top: 20px;">
            <div class="total-box" style="width: 300px; background: #f9fbff; padding: 20px; border-radius: 8px;">
                <div class="row" style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                    <span>Subtotal:</span><span><b>${{ number_format($subtotal, 2) }}</b></span>
                </div>
                <div class="row" style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                    <span>Tax (GST):</span><span><b>${{ number_format($totalTax, 2) }}</b></span>
                </div>
                <div class="row total" style="display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 2px solid #ddd; font-size: 18px; color: #1B79B5;">
                    <span>Total</span><span>${{ number_format($invoice->total, 2) }}</span>
                </div>
                @php
                    $totalPaid = $invoice->invoicePayments->sum('payment_amount');
                    $balance = max(0, $invoice->total - $totalPaid);
                @endphp
                <div class="balance" style="margin-top: 15px; text-align: center; background: #fff; padding: 10px; border: 1px solid #eee;">
                    <span style="display: block; font-size: 12px; color: #888;">Remaining Balance:</span>
                    <span style="font-size: 24px; font-weight: 700; color: #E7000B;">${{ number_format($balance, 2) }}</span>
                </div>
            </div>
        </div>

        <div class="note" style="margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px; color: #666;">
            <strong>Note:</strong><br>
            {{ $invoice->note ?? 'Thank you for your business.' }}
        </div>
    </div>

    <!-- RIGHT: Sidebar -->
    <div class="invoice_sidebar">
        <!-- UPDATE STATUS -->
        <div class="card" style="background: #fff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);">
            <div class="title" style="font-weight: 700; margin-bottom: 15px; color: #1B79B5;">Update Status</div>
            <form action="{{ route('admin.invoices.status-update', $invoice->id) }}" method="POST">
                @csrf
                <select name="status_id" class="input" style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 8px;">
                    @foreach($statuses as $status)
                        <option value="{{ $status->id }}" {{ $invoice->status_id == $status->id ? 'selected' : '' }}>{{ $status->name }}</option>
                    @endforeach
                </select>
                <textarea name="note" class="input" style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 8px;" placeholder="Add a note..."></textarea>
                <button type="submit" class="btn" style="width: 100%; background: #1B79B5; color: #fff; border: none; padding: 12px; border-radius: 8px; cursor: pointer;">Update Status</button>
            </form>
        </div>

        <!-- ACTIONS -->
        <div class="card" style="background: #fff; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);">
            <button class="btn green" style="width: 100%; background: #28a745; color: #fff; border: none; padding: 12px; border-radius: 8px; cursor: pointer; margin-bottom: 10px;" onclick="openDrawer()">Send Invoice</button>
            <a href="{{ route('admin.invoices.download', $invoice->id) }}" class="btn green" style="display: block; text-align: center; text-decoration: none; width: 100%; background: #28a745; color: #fff; border: none; padding: 12px; border-radius: 8px; cursor: pointer; margin-bottom: 10px;">Download PDF</a>
            <a href="{{ route('admin.invoices.edit', $invoice->id) }}" class="btn blue" style="display: block; text-align: center; text-decoration: none; width: 100%; background: #007bff; color: #fff; border: none; padding: 12px; border-radius: 8px; cursor: pointer;">Edit Invoice</a>
        </div>

        <!-- STATUS HISTORY -->
        <div class="card" style="background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);">
            <div class="title" style="font-weight: 700; margin-bottom: 15px; color: #1B79B5;">Status History</div>
            <div class="history-list">
                @foreach($invoice->statusHistories as $history)
                <div class="row_status" style="border-bottom: 1px solid #eee; padding: 10px 0;">
                    <div style="display: flex; justify-content: space-between;">
                        <span class="badge" style="background: {{ $history->invoiceStatus->color ?? '#666' }}; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 10px;">
                            {{ $history->invoiceStatus->name ?? 'N/A' }}
                        </span>
                        <small style="color: #999;">{{ $history->created_at->format('d-m-Y H:i') }}</small>
                    </div>
                    <div style="font-size: 12px; color: #666; margin-top: 5px;">
                        {{ $history->note }}
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Drawer and Overlay -->
<div class="overlayP" id="overlayP" onclick="closeDrawer()" style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;"></div>

<div class="drawer" id="drawer" style="position: fixed; right: -400px; top: 0; width: 400px; height: 100%; background: #fff; z-index: 1001; transition: 0.3s; padding: 20px; box-shadow: -5px 0 15px rgba(0,0,0,0.1);">
    <div class="top_bar" style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 20px;">
        <div class="title" style="font-weight: 700; font-size: 18px;">Send Invoice</div>
        <div class="close" onclick="closeDrawer()" style="cursor: pointer; font-size: 20px;">✕</div>
    </div>
    <form action="{{ route('admin.invoices.send', $invoice->id) }}" method="POST">
        @csrf
        <div class="popup_area">
            <label style="display: block; margin-bottom: 5px; font-weight: 600;">To:</label>
            <input type="email" name="email" value="{{ $invoice->client->email ?? '' }}" style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px;">

            <label style="display: block; margin-bottom: 5px; font-weight: 600;">Subject:</label>
            <input type="text" name="subject" value="Invoice #{{ $invoice->invoice_number }} from {{ $invoice->company->name ?? 'Quick OMS' }}" style="width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px;">

            <label style="display: block; margin-bottom: 5px; font-weight: 600;">Message:</label>
            <textarea name="message" style="width: 100%; height: 150px; padding: 10px; border: 1px solid #ddd; border-radius: 8px;">Hi {{ $invoice->client->name ?? '' }},

Here is your invoice #{{ $invoice->invoice_number }} for ${{ number_format($invoice->total, 2) }}.

Thank you!</textarea>
        </div>
        <div class="footer" style="margin-top: 20px; display: flex; gap: 10px;">
            <button type="submit" class="btn primary" style="flex: 1; background: #1B79B5; color: #fff; border: none; padding: 12px; border-radius: 8px; cursor: pointer;">Send Invoice</button>
            <button type="button" class="btn cancel" onclick="closeDrawer()" style="flex: 1; background: #eee; border: none; padding: 12px; border-radius: 8px; cursor: pointer;">Cancel</button>
        </div>
    </form>
</div>

@push('css')
<style>
    .invoice_prev { display: grid; grid-template-columns: 1fr 350px; gap: 30px; margin-top: 20px; }
    .invoice { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
    .header_prev { display: flex; justify-content: space-between; margin-bottom: 30px; }
    .address { color: #666; font-size: 13px; line-height: 1.6; }
    .bar-wrap { margin-bottom: 30px; position: relative; }
    .bar { background: #1B79B5; color: #fff; padding: 10px 20px; font-weight: 700; width: fit-content; border-radius: 4px; position: relative; z-index: 1; }
    .title { position: absolute; top: -10px; right: 0; font-size: 40px; font-weight: 800; color: #f0f4f8; z-index: 0; }
    .info { display: flex; justify-content: space-between; margin-bottom: 30px; color: #444; }
    .invoice_sidebar .input { display: block; width: 100%; }
    .drawer.active { right: 0 !important; }
    .overlayP.active { display: block !important; }
</style>
@endpush

@push('scripts')
<script>
    function openDrawer() {
        document.getElementById("drawer").classList.add("active");
        document.getElementById("overlayP").classList.add("active");
    }
    function closeDrawer() {
        document.getElementById("drawer").classList.remove("active");
        document.getElementById("overlayP").classList.remove("active");
    }
</script>
@endpush
@endsection