@extends('crm.layouts.app')

@section('title', 'Invoice #' . $invoice->invoice_number)

@section('content')
<div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="sm:flex sm:items-center sm:justify-between mb-8">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900">Invoice {{ $invoice->invoice_number }}</h1>
            <p class="mt-1 text-sm text-gray-600">Created {{ $invoice->created_at->format('M d, Y') }}</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <span class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium ring-1 ring-inset
                @if($invoice->status === 'paid') bg-green-50 text-green-700 ring-green-600/20
                @elseif($invoice->status === 'draft') bg-gray-50 text-gray-700 ring-gray-600/20
                @elseif($invoice->status === 'sent') bg-blue-50 text-blue-700 ring-blue-600/20
                @elseif($invoice->status === 'overdue') bg-red-50 text-red-700 ring-red-600/20
                @else bg-gray-50 text-gray-700 ring-gray-600/20
                @endif">
                {{ ucfirst($invoice->status) }}
            </span>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="mb-6 rounded-md bg-green-50 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-green-800">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-6 rounded-md bg-red-50 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-red-800">{{ session('error') }}</p>
                </div>
            </div>
        </div>
    @endif

    <div class="space-y-6">
        <!-- Invoice Details -->
        <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2">
                    <!-- Client Information -->
                    <div>
                        <h3 class="text-sm font-medium text-gray-500">Client</h3>
                        <p class="mt-1 text-base font-semibold text-gray-900">{{ $invoice->client->name }}</p>
                        @if($invoice->client->email)
                            <p class="mt-1 text-sm text-gray-600">{{ $invoice->client->email }}</p>
                        @endif
                        @if($invoice->client->phone)
                            <p class="mt-1 text-sm text-gray-600">{{ $invoice->client->phone }}</p>
                        @endif
                    </div>

                    <!-- Artist Information -->
                    <div>
                        <h3 class="text-sm font-medium text-gray-500">Artist</h3>
                        <p class="mt-1 text-base font-semibold text-gray-900">{{ $invoice->artist ? $invoice->artist->name : 'Not assigned' }}</p>
                    </div>

                    <!-- Invoice Date -->
                    <div>
                        <h3 class="text-sm font-medium text-gray-500">Invoice Date</h3>
                        <p class="mt-1 text-base text-gray-900">{{ $invoice->invoice_date->format('M d, Y') }}</p>
                    </div>

                    <!-- Due Date -->
                    <div>
                        <h3 class="text-sm font-medium text-gray-500">Due Date</h3>
                        <p class="mt-1 text-base text-gray-900">{{ $invoice->due_date ? $invoice->due_date->format('M d, Y') : 'N/A' }}</p>
                    </div>

                    @if($invoice->status === 'paid')
                        <!-- Payment Method -->
                        <div>
                            <h3 class="text-sm font-medium text-gray-500">Payment Method</h3>
                            <p class="mt-1 text-base text-gray-900">{{ ucfirst(str_replace('_', ' ', $invoice->payment_method)) }}</p>
                        </div>

                        <!-- Payment Date -->
                        <div>
                            <h3 class="text-sm font-medium text-gray-500">Payment Date</h3>
                            <p class="mt-1 text-base text-gray-900">{{ $invoice->payment_date->format('M d, Y') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Line Items -->
        @if($invoice->line_items && count($invoice->line_items) > 0)
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
                <div class="px-4 py-6 sm:p-8">
                    <h3 class="text-base font-semibold leading-7 text-gray-900 mb-4">Line Items</h3>
                    <div class="flow-root">
                        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                                <table class="min-w-full divide-y divide-gray-300">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">Description</th>
                                            <th scope="col" class="px-3 py-3.5 text-right text-sm font-semibold text-gray-900">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-200">
                                        @foreach($invoice->line_items as $item)
                                            <tr>
                                                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-0">{{ $item['description'] }}</td>
                                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm text-gray-900">${{ number_format($item['amount'], 2) }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Pricing Summary -->
        <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                <h3 class="text-base font-semibold leading-7 text-gray-900 mb-4">Summary</h3>
                <dl class="space-y-4">
                    <div class="flex items-center justify-between">
                        <dt class="text-sm text-gray-600">Subtotal</dt>
                        <dd class="text-sm font-medium text-gray-900">${{ number_format($invoice->subtotal, 2) }}</dd>
                    </div>
                    <div class="flex items-center justify-between">
                        <dt class="text-sm text-gray-600">Tax ({{ number_format($invoice->tax_rate, 2) }}%)</dt>
                        <dd class="text-sm font-medium text-gray-900">${{ number_format($invoice->tax_amount, 2) }}</dd>
                    </div>
                    <div class="flex items-center justify-between">
                        <dt class="text-sm text-gray-600">Tip</dt>
                        <dd class="text-sm font-medium text-gray-900">${{ number_format($invoice->tip_amount, 2) }}</dd>
                    </div>
                    <div class="flex items-center justify-between border-t border-gray-200 pt-4">
                        <dt class="text-base font-semibold text-gray-900">Total</dt>
                        <dd class="text-base font-semibold text-gray-900">${{ number_format($invoice->total_amount, 2) }}</dd>
                    </div>
                </dl>
            </div>
        </div>

        <!-- Notes -->
        @if($invoice->notes)
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
                <div class="px-4 py-6 sm:p-8">
                    <h3 class="text-base font-semibold leading-7 text-gray-900 mb-2">Notes</h3>
                    <p class="text-sm text-gray-700 whitespace-pre-wrap">{{ $invoice->notes }}</p>
                </div>
            </div>
        @endif

        <!-- Payment Link -->
        @if($invoice->status === 'sent' || ($invoice->status !== 'paid' && $invoice->status !== 'draft' && $invoice->payment_token))
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
                <div class="px-4 py-6 sm:p-8">
                    <h3 class="text-base font-semibold leading-7 text-gray-900 mb-2">Payment Link</h3>
                    <p class="text-sm text-gray-600 mb-4">Share this link with your client so they can pay online.</p>

                    <div class="flex items-center gap-2">
                        <input type="text" readonly value="{{ $invoice->getPaymentUrl() }}" id="paymentLinkInput" class="flex-1 block w-full rounded-md border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 bg-gray-50 sm:text-sm sm:leading-6">
                        <button type="button" onclick="copyPaymentLink()" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 whitespace-nowrap">
                            <svg class="inline-block w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                            </svg>
                            Copy Link
                        </button>
                    </div>

                    <div id="copySuccess" class="hidden mt-3 rounded-md bg-green-50 p-3">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-green-800">Payment link copied to clipboard!</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <script>
                function copyPaymentLink() {
                    const input = document.getElementById('paymentLinkInput');
                    input.select();
                    input.setSelectionRange(0, 99999); // For mobile devices

                    navigator.clipboard.writeText(input.value).then(() => {
                        const successMsg = document.getElementById('copySuccess');
                        successMsg.classList.remove('hidden');

                        setTimeout(() => {
                            successMsg.classList.add('hidden');
                        }, 3000);
                    });
                }
            </script>
        @endif

        <!-- Actions -->
        <div class="flex items-center justify-between gap-x-6 border-t border-gray-200 pt-6">
            <a href="{{ route('crm.invoices.index') }}" class="text-sm font-semibold leading-6 text-gray-900">
                <svg class="inline-block w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                Back to Invoices
            </a>

            <div class="flex gap-x-3">
                @if($invoice->status === 'draft')
                    <!-- Edit Button -->
                    <a href="{{ route('crm.invoices.edit', $invoice) }}" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                        Edit
                    </a>

                    <!-- Send Button -->
                    <form action="{{ route('crm.invoices.send', $invoice) }}" method="POST" class="inline">
                        @csrf
                        <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                            Send to Client
                        </button>
                    </form>

                    <!-- Delete Button -->
                    <form action="{{ route('crm.invoices.destroy', $invoice) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this invoice?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500">
                            Delete
                        </button>
                    </form>
                @elseif($invoice->status !== 'paid' && $invoice->status !== 'cancelled')
                    <!-- Mark as Paid Button -->
                    <button type="button" onclick="document.getElementById('markAsPaidModal').classList.remove('hidden')" class="rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500">
                        Mark as Paid
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Mark as Paid Modal -->
@if($invoice->status !== 'paid' && $invoice->status !== 'cancelled')
<div id="markAsPaidModal" class="hidden relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                <form action="{{ route('crm.invoices.mark-paid', $invoice) }}" method="POST">
                    @csrf
                    <div>
                        <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
                            <svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
                            </svg>
                        </div>
                        <div class="mt-3 text-center sm:mt-5">
                            <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">Mark Invoice as Paid</h3>
                            <div class="mt-4">
                                <label for="payment_method" class="block text-sm font-medium leading-6 text-gray-900 text-left">Payment Method</label>
                                <select id="payment_method" name="payment_method" required class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                    <option value="">Select payment method</option>
                                    <option value="cash">Cash</option>
                                    <option value="card">Card</option>
                                    <option value="bank_transfer">Bank Transfer</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
                        <button type="submit" class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2">
                            Confirm Payment
                        </button>
                        <button type="button" onclick="document.getElementById('markAsPaidModal').classList.add('hidden')" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endif
@endsection