@extends('layouts.app')

@section('title', 'Purchase Invoice')

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1 md:space-x-3">
      <li>
        <a href="{{ route('dashboard') }}" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-700">
          <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
          Home
        </a>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          <a href="{{ route('purchases.index') }}" class="ml-1 text-sm font-medium text-slate-500 hover:text-slate-700">Purchases</a>
        </div>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          <span class="ml-1 text-sm font-medium text-slate-700">Invoice</span>
        </div>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="max-w-4xl mx-auto">
  <!-- Action Buttons -->
  <div class="flex flex-col sm:flex-row gap-3 justify-end mb-6">
    <button onclick="window.print()" class="inline-flex items-center px-4 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors duration-200 font-medium">
      <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4H9a2 2 0 00-2 2v2a2 2 0 002 2h4a2 2 0 002-2v-2a2 2 0 00-2-2zm0 0h4a2 2 0 002-2v-4a2 2 0 00-2-2h-4a2 2 0 00-2 2v4a2 2 0 002 2z"></path>
      </svg>
      Print
    </button>
    <a href="{{ route('purchases.edit', 1) }}" class="inline-flex items-center px-4 py-2 bg-accent-600 text-white rounded-lg hover:bg-accent-700 transition-colors duration-200 font-medium">
      <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
      </svg>
      Edit
    </a>
    <a href="{{ route('purchases.index') }}" class="inline-flex items-center px-4 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors duration-200 font-medium">
      Back to List
    </a>
  </div>

  <!-- Invoice Card -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-8">
    <!-- Header -->
    <div class="flex justify-between items-start mb-8 pb-8 border-b-2 border-slate-200">
      <div>
        <h1 class="text-3xl font-bold text-slate-900">PURCHASE INVOICE</h1>
        <p class="text-slate-600 mt-1">Invoice #INV-001</p>
      </div>
      <div class="text-right">
        <div class="w-12 h-12 bg-gradient-to-br from-primary-400 to-primary-600 rounded-lg flex items-center justify-center mb-2">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
            <path d="M13 21H3c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h10v2H3v14h10v2z"></path>
            <path d="M19 9h-4V5h-2v4h-4v2h4v4h2v-4h4V9z"></path>
          </svg>
        </div>
        <p class="font-semibold text-slate-900">Mandala Hotel</p>
      </div>
    </div>

    <!-- Company & Supplier Info -->
    <div class="grid grid-cols-2 gap-8 mb-8">
      <!-- Company Info -->
      <div>
        <h3 class="font-semibold text-slate-900 mb-2">From:</h3>
        <p class="font-medium text-slate-900">Mandala Hotel Management</p>
        <p class="text-slate-600">123 Hotel Street</p>
        <p class="text-slate-600">City, Country 12345</p>
        <p class="text-slate-600 mt-2">Phone: +1 234 567 8900</p>
        <p class="text-slate-600">Email: info@mandalabhotel.com</p>
      </div>

      <!-- Supplier Info -->
      <div>
        <h3 class="font-semibold text-slate-900 mb-2">Supplier:</h3>
        <p class="font-medium text-slate-900">ABC Suppliers</p>
        <p class="text-slate-600">456 Business Avenue</p>
        <p class="text-slate-600">Trade City, Country 67890</p>
        <p class="text-slate-600 mt-2">Phone: +1 987 654 3210</p>
        <p class="text-slate-600">Email: sales@abcsuppliers.com</p>
      </div>
    </div>

    <!-- Invoice Details -->
    <div class="grid grid-cols-3 gap-6 mb-8 p-4 bg-slate-50 rounded-lg">
      <div>
        <p class="text-sm text-slate-600 mb-1">Invoice Date</p>
        <p class="font-semibold text-slate-900">January 15, 2026</p>
      </div>
      <div>
        <p class="text-sm text-slate-600 mb-1">Expiry Date</p>
        <p class="font-semibold text-slate-900">December 31, 2026</p>
      </div>
      <div>
        <p class="text-sm text-slate-600 mb-1">Payment Status</p>
        <p class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Paid</p>
      </div>
    </div>

    <!-- Items Table -->
    <div class="mb-8 overflow-x-auto">
      <table class="w-full">
        <thead>
          <tr class="bg-slate-100 border-b-2 border-slate-300">
            <th class="px-4 py-3 text-left text-sm font-semibold text-slate-900">Product</th>
            <th class="px-4 py-3 text-right text-sm font-semibold text-slate-900">Quantity</th>
            <th class="px-4 py-3 text-right text-sm font-semibold text-slate-900">Unit Price</th>
            <th class="px-4 py-3 text-right text-sm font-semibold text-slate-900">Total</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          <tr class="hover:bg-slate-50">
            <td class="px-4 py-3 text-slate-900">Rice (10kg)</td>
            <td class="px-4 py-3 text-right text-slate-900">5</td>
            <td class="px-4 py-3 text-right text-slate-900">$150.00</td>
            <td class="px-4 py-3 text-right font-semibold text-slate-900">$750.00</td>
          </tr>
          <tr class="hover:bg-slate-50">
            <td class="px-4 py-3 text-slate-900">Flour (5kg)</td>
            <td class="px-4 py-3 text-right text-slate-900">3</td>
            <td class="px-4 py-3 text-right text-slate-900">$200.00</td>
            <td class="px-4 py-3 text-right font-semibold text-slate-900">$600.00</td>
          </tr>
          <tr class="hover:bg-slate-50">
            <td class="px-4 py-3 text-slate-900">Oil (2L)</td>
            <td class="px-4 py-3 text-right text-slate-900">2</td>
            <td class="px-4 py-3 text-right text-slate-900">$250.00</td>
            <td class="px-4 py-3 text-right font-semibold text-slate-900">$500.00</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Totals -->
    <div class="flex justify-end mb-8">
      <div class="w-full md:w-96">
        <div class="space-y-2">
          <div class="flex justify-between py-2 border-b border-slate-200">
            <span class="text-slate-600">Subtotal</span>
            <span class="font-semibold text-slate-900">$1,850.00</span>
          </div>
          <div class="flex justify-between py-2 border-b border-slate-200">
            <span class="text-slate-600">Tax (10%)</span>
            <span class="font-semibold text-slate-900">$185.00</span>
          </div>
          <div class="flex justify-between py-3 bg-primary-50 px-4 rounded-lg">
            <span class="text-lg font-semibold text-slate-900">Total Amount</span>
            <span class="text-lg font-bold text-primary-600">$2,035.00</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Notes -->
    <div class="p-4 bg-slate-50 rounded-lg mb-8">
      <h3 class="font-semibold text-slate-900 mb-2">Notes</h3>
      <p class="text-slate-600 text-sm">This is a purchase invoice for supplies ordered on the above mentioned date. Payment terms: Net 30 days. Please make payment within the stipulated time frame.</p>
    </div>

    <!-- Footer -->
    <div class="border-t-2 border-slate-200 pt-6 text-center">
      <p class="text-xs text-slate-500">This is an electronically generated document. No signature is required.</p>
      <p class="text-xs text-slate-500 mt-1">Generated on {{ now()->format('M d, Y H:i') }}</p>
    </div>
  </div>
</div>

<style media="print">
  @page {
    margin: 0;
  }
  body {
    margin: 0;
    padding: 0;
  }
  .no-print {
    display: none;
  }
</style>
@endsection