@extends('layouts.app')

@section('title', 'Vouchers')

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1">
      <li>
        <a href="{{ route('dashboard') }}" class="text-slate-700 hover:text-primary-600">Dashboard</a>
      </li>
      <li>
        <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>
      </li>
      <li>
        <span class="text-slate-700 font-medium">Vouchers</span>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="space-y-6" x-data="{ voucherType: 'journal' }">
  <!-- Header -->
  <div>
    <h1 class="text-3xl font-bold text-slate-900">Create Voucher</h1>
    <p class="text-slate-600 mt-1">Record financial transactions</p>
  </div>

  <!-- Form Card -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <!-- Voucher Type Tabs -->
    <div class="border-b border-slate-200">
      <div class="flex">
        <button @click="voucherType = 'journal'" :class="voucherType === 'journal' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-slate-600'" class="px-6 py-4 font-medium text-sm transition-colors duration-200">
          Journal Voucher
        </button>
        <button @click="voucherType = 'debit'" :class="voucherType === 'debit' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-slate-600'" class="px-6 py-4 font-medium text-sm transition-colors duration-200">
          Debit Note
        </button>
        <button @click="voucherType = 'credit'" :class="voucherType === 'credit' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-slate-600'" class="px-6 py-4 font-medium text-sm transition-colors duration-200">
          Credit Note
        </button>
        <button @click="voucherType = 'contra'" :class="voucherType === 'contra' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-slate-600'" class="px-6 py-4 font-medium text-sm transition-colors duration-200">
          Contra Voucher
        </button>
      </div>
    </div>

    <form class="p-6">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Voucher Date *</label>
          <input type="date" value="{{ now()->format('Y-m-d') }}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" required>
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Voucher Number *</label>
          <input type="text" value="JV-2024-001" class="w-full px-4 py-2 border border-slate-300 rounded-lg bg-slate-50" disabled>
        </div>
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Reference</label>
          <input type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="Optional reference">
        </div>
      </div>

      <!-- Voucher Items -->
      <div class="mb-6">
        <div class="flex items-center justify-between mb-4">
          <h3 class="font-semibold text-slate-900">Transaction Details</h3>
          <button type="button" class="text-sm text-primary-600 hover:text-primary-700 font-medium">+ Add Row</button>
        </div>
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-slate-50">
              <tr>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Account</th>
                <th class="px-4 py-3 text-right text-xs font-semibold text-slate-700">Debit</th>
                <th class="px-4 py-3 text-right text-xs font-semibold text-slate-700">Credit</th>
                <th class="px-4 py-3 text-left text-xs font-semibold text-slate-700">Description</th>
                <th class="px-4 py-3 text-center text-xs font-semibold text-slate-700">Action</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-200">
              <tr>
                <td class="px-4 py-3">
                  <select class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
                    <option value="">Select Account</option>
                    <option value="1100">Cash</option>
                    <option value="1120">Bank Account</option>
                    <option value="1130">Accounts Receivable</option>
                    <option value="2110">Accounts Payable</option>
                    <option value="3100">Room Revenue</option>
                    <option value="4100">Salaries & Wages</option>
                  </select>
                </td>
                <td class="px-4 py-3">
                  <input type="number" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-right focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="0.00" step="0.01">
                </td>
                <td class="px-4 py-3">
                  <input type="number" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-right focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="0.00" step="0.01">
                </td>
                <td class="px-4 py-3">
                  <input type="text" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="Description...">
                </td>
                <td class="px-4 py-3 text-center">
                  <button type="button" class="text-red-600 hover:text-red-700 font-medium">Remove</button>
                </td>
              </tr>
              <tr>
                <td class="px-4 py-3">
                  <select class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
                    <option value="">Select Account</option>
                    <option value="1100">Cash</option>
                    <option value="1120">Bank Account</option>
                    <option value="1130">Accounts Receivable</option>
                    <option value="2110">Accounts Payable</option>
                    <option value="3100">Room Revenue</option>
                    <option value="4100">Salaries & Wages</option>
                  </select>
                </td>
                <td class="px-4 py-3">
                  <input type="number" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-right focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="0.00" step="0.01">
                </td>
                <td class="px-4 py-3">
                  <input type="number" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-right focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="0.00" step="0.01">
                </td>
                <td class="px-4 py-3">
                  <input type="text" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="Description...">
                </td>
                <td class="px-4 py-3 text-center">
                  <button type="button" class="text-red-600 hover:text-red-700 font-medium">Remove</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- Balance Check -->
      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
        <div class="grid grid-cols-3 gap-6 text-center">
          <div>
            <p class="text-sm text-blue-600">Total Debit</p>
            <p class="text-2xl font-bold text-blue-900">$0.00</p>
          </div>
          <div>
            <p class="text-sm text-blue-600">Total Credit</p>
            <p class="text-2xl font-bold text-blue-900">$0.00</p>
          </div>
          <div>
            <p class="text-sm text-blue-600">Difference</p>
            <p class="text-2xl font-bold text-blue-900">$0.00</p>
          </div>
        </div>
      </div>

      <!-- Remarks -->
      <div class="mb-6">
        <label class="block text-sm font-medium text-slate-700 mb-2">Remarks</label>
        <textarea class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" rows="3" placeholder="Add any additional remarks..."></textarea>
      </div>

      <!-- Form Actions -->
      <div class="flex space-x-4 pt-6 border-t border-slate-200">
        <button type="submit" class="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium">
          Create Voucher
        </button>
        <button type="button" class="px-6 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors duration-200 font-medium">
          Save as Draft
        </button>
        <a href="{{ route('vouchers.index') }}" class="px-6 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors duration-200 font-medium">
          Cancel
        </a>
      </div>
    </form>
  </div>
</div>
@endsection