@extends('layouts.app')

@section('title', 'Quotation ' . $quotation->quotation_number)

@section('content')
    <div class="px-4 py-6 sm:px-0">
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Quotation {{ $quotation->quotation_number }}</h1>
                <p class="text-gray-600">Created on {{ $quotation->created_at->format('M d, Y') }}</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('quotations.preview', $quotation) }}" target="_blank"
                    class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 flex items-center">
                    <i class="fas fa-eye mr-2"></i> Preview
                </a>
                <a href="{{ route('quotations.pdf', $quotation) }}" target="_blank"
                    class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 flex items-center">
                    <i class="fas fa-file-pdf mr-2"></i> PDF
                </a>
                @if ($quotation->canBeConvertedToInvoice())
                    <a href="{{ route('quotations.edit', $quotation) }}"
                        class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 flex items-center">
                        <i class="fas fa-edit mr-2"></i> Edit
                    </a>
                @endif
                <a href="{{ route('quotations.index') }}"
                    class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i> Back
                </a>
            </div>
        </div>

        <div class="bg-white shadow rounded-lg overflow-hidden mb-6">
            <!-- Quotation Header -->
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-start">
                    <div>
                        <h2 class="text-2xl font-bold text-gray-900">{{ $quotation->company->name }}</h2>
                        <p class="text-gray-600 whitespace-pre-line">{{ $quotation->company->address }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-lg font-semibold">Quotation #: {{ $quotation->quotation_number }}</p>
                        <p class="text-gray-600">Date: {{ $quotation->quotation_date->format('M d, Y') }}</p>
                        <p class="text-gray-600 {{ $quotation->is_expired ? 'text-red-600 font-semibold' : '' }}">
                            Valid Until: {{ $quotation->valid_until_date->format('M d, Y') }}
                        </p>
                        <span
                            class="mt-2 inline-flex px-3 py-1 rounded-full text-sm font-semibold
                        {{ $quotation->status === 'approved'
                            ? 'bg-green-100 text-green-800'
                            : ($quotation->status === 'sent'
                                ? 'bg-blue-100 text-blue-800'
                                : ($quotation->status === 'rejected'
                                    ? 'bg-red-100 text-red-800'
                                    : ($quotation->status === 'converted_to_invoice'
                                        ? 'bg-purple-100 text-purple-800'
                                        : ($quotation->status === 'revised'
                                            ? 'bg-yellow-100 text-yellow-800'
                                            : 'bg-gray-100 text-gray-800')))) }}">
                            {{ ucfirst(str_replace('_', ' ', $quotation->status)) }}
                        </span>
                        @if ($quotation->is_expired)
                            <span
                                class="ml-2 inline-flex px-2 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-800">
                                Expired
                            </span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Client Information -->
            <div class="p-6 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900 mb-3">Quotation To:</h3>
                <p class="font-semibold">{{ $quotation->client->contact_person_name }}</p>
                <p class="font-semibold">{{ $quotation->client->company_name }}</p>
                <p class="text-gray-600 whitespace-pre-line">{{ $quotation->client->company_address }}</p>
                @if ($quotation->client->email)
                    <p class="mt-2"><i class="fas fa-envelope mr-2"></i>{{ $quotation->client->email }}</p>
                @endif
                @if ($quotation->client->phone)
                    <p><i class="fas fa-phone mr-2"></i>{{ $quotation->client->phone }}</p>
                @endif
            </div>

            <!-- Line Items -->
            <div class="p-6 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Line Items</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Item</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Description</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Price</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    UOM</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Qty</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Total</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach ($quotation->lineItems as $item)
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->item_number }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        {{ $item->item_name }}</td>
                                    <td class="px-6 py-4 text-sm text-gray-500">{{ $item->description }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        ${{ number_format($item->price_per_unit, 2) }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->uom }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->quantity }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-right">
                                        ${{ number_format($item->total, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="bg-gray-50">
                            <tr>
                                <td colspan="6" class="px-6 py-4 text-sm font-medium text-gray-900 text-right">Grand
                                    Total:</td>
                                <td class="px-6 py-4 text-sm font-bold text-gray-900 text-right">
                                    ${{ number_format($quotation->grand_total, 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <!-- Notes and Terms -->
            @if ($quotation->notes || $quotation->terms_conditions)
                <div class="p-6 border-t border-gray-200 grid grid-cols-1 md:grid-cols-2 gap-6">
                    @if ($quotation->notes)
                        <div>
                            <h3 class="text-lg font-medium text-gray-900 mb-2">Notes:</h3>
                            <p class="text-gray-600 whitespace-pre-line">{{ $quotation->notes }}</p>
                        </div>
                    @endif
                    @if ($quotation->terms_conditions)
                        <div>
                            <h3 class="text-lg font-medium text-gray-900 mb-2">Terms & Conditions:</h3>
                            <p class="text-gray-600 whitespace-pre-line">{{ $quotation->terms_conditions }}</p>
                        </div>
                    @endif
                </div>
            @endif

            <!-- Conversion Info -->
            @if ($quotation->invoice->count() > 0)
                <div class="p-6 border-t border-gray-200 bg-blue-50">
                    <h3 class="text-lg font-medium text-blue-900 mb-2">Converted to Invoice</h3>
                    <p class="text-blue-700">
                        This quotation has been converted to invoice:
                        <a href="{{ route('invoices.show', $quotation->invoice->first()) }}"
                            class="font-semibold hover:underline">
                            {{ $quotation->invoice->first()->invoice_number }}
                        </a>
                    </p>
                </div>
            @endif
        </div>

        <!-- Quick Actions -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Quick Actions</h3>
            <div class="flex flex-wrap gap-3">
                @if ($quotation->canBeConvertedToInvoice())
                    <form action="{{ route('quotations.convert-to-invoice', $quotation) }}" method="POST" class="inline">
                        @csrf
                        <button type="submit"
                            class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 flex items-center">
                            <i class="fas fa-exchange-alt mr-2"></i> Convert to Invoice
                        </button>
                    </form>
                @endif

                <form action="{{ route('quotations.status.update', $quotation) }}" method="POST" class="inline">
                    @csrf
                    <select name="status" onchange="this.form.submit()"
                        class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="draft" {{ $quotation->status == 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="sent" {{ $quotation->status == 'sent' ? 'selected' : '' }}>Sent</option>
                        <option value="approved" {{ $quotation->status == 'approved' ? 'selected' : '' }}>Approved</option>
                        <option value="rejected" {{ $quotation->status == 'rejected' ? 'selected' : '' }}>Rejected</option>
                        <option value="revised" {{ $quotation->status == 'revised' ? 'selected' : '' }}>Revised</option>
                    </select>
                </form>

                @if ($quotation->canBeConvertedToInvoice())
                    <form action="{{ route('quotations.destroy', $quotation) }}" method="POST" class="inline"
                        onsubmit="return confirm('Are you sure you want to delete this quotation?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                            class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 flex items-center">
                            <i class="fas fa-trash mr-2"></i> Delete Quotation
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </div>
@endsection