@extends('crm.layouts.app')

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

@section('content')
<div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 py-8">
    <div class="mb-8">
        <h1 class="text-2xl font-semibold text-gray-900">Create Invoice</h1>
        <p class="mt-1 text-sm text-gray-600">Create a new invoice for a client</p>
    </div>

    <form action="{{ route('crm.invoices.store') }}" method="POST"
          x-data="{
              lineItems: [{ description: '', amount: 0 }],
              subtotal: 0,
              taxRate: 0,
              taxAmount: 0,
              tipAmount: 0,
              total: 0,

              addLineItem() {
                  this.lineItems.push({ description: '', amount: 0 });
              },

              removeLineItem(index) {
                  if (this.lineItems.length > 1) {
                      this.lineItems.splice(index, 1);
                      this.calculateTotal();
                  }
              },

              calculateTotal() {
                  this.subtotal = this.lineItems.reduce((sum, item) => sum + parseFloat(item.amount || 0), 0);
                  this.taxAmount = (this.subtotal * parseFloat(this.taxRate || 0)) / 100;
                  this.total = this.subtotal + this.taxAmount + parseFloat(this.tipAmount || 0);
              }
          }"
          @input="calculateTotal()">
        @csrf

        <div class="space-y-8">
            <!-- Client and Artist Information -->
            <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-8 sm:grid-cols-2">
                        <!-- Client -->
                        <div>
                            <label for="client_id" class="block text-sm font-medium leading-6 text-gray-900">Client <span class="text-red-500">*</span></label>
                            <div class="mt-2">
                                <select id="client_id" name="client_id" required class="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 a client</option>
                                    @foreach($clients as $client)
                                        <option value="{{ $client->id }}">{{ $client->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @error('client_id')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Artist -->
                        <div>
                            <label for="artist_id" class="block text-sm font-medium leading-6 text-gray-900">Artist</label>
                            <div class="mt-2">
                                <select id="artist_id" name="artist_id" class="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 an artist (optional)</option>
                                    @foreach($artists as $artist)
                                        <option value="{{ $artist->id }}" {{ $artist->id === auth()->id() ? 'selected' : '' }}>{{ $artist->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- Invoice Date -->
                        <div>
                            <label for="invoice_date" class="block text-sm font-medium leading-6 text-gray-900">Invoice Date <span class="text-red-500">*</span></label>
                            <div class="mt-2">
                                <input type="date" name="invoice_date" id="invoice_date" value="{{ date('Y-m-d') }}" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                            </div>
                            @error('invoice_date')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Due Date -->
                        <div>
                            <label for="due_date" class="block text-sm font-medium leading-6 text-gray-900">Due Date</label>
                            <div class="mt-2">
                                <input type="date" name="due_date" id="due_date" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Line Items -->
            <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="flex items-center justify-between mb-4">
                        <h3 class="text-base font-semibold leading-7 text-gray-900">Line Items</h3>
                        <button type="button" @click="addLineItem()" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                            <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                            </svg>
                            Add Item
                        </button>
                    </div>

                    <div class="space-y-4">
                        <template x-for="(item, index) in lineItems" :key="index">
                            <div class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-12 items-start">
                                <div class="sm:col-span-8">
                                    <label :for="'description_' + index" class="block text-sm font-medium leading-6 text-gray-900">Description</label>
                                    <input type="text" :name="'line_items[' + index + '][description]'" :id="'description_' + index" x-model="item.description" 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 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="e.g., Tattoo session, Touch-up">
                                </div>
                                <div class="sm:col-span-3">
                                    <label :for="'amount_' + index" class="block text-sm font-medium leading-6 text-gray-900">Amount</label>
                                    <div class="relative mt-2 rounded-md shadow-sm">
                                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                            <span class="text-gray-500 sm:text-sm">$</span>
                                        </div>
                                        <input type="number" :name="'line_items[' + index + '][amount]'" :id="'amount_' + index" x-model="item.amount" step="0.01" min="0" required class="block w-full rounded-md border-0 py-1.5 pl-7 pr-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                    </div>
                                </div>
                                <div class="sm:col-span-1 flex items-end">
                                    <button type="button" @click="removeLineItem(index)" :disabled="lineItems.length === 1" class="mt-7 rounded-md bg-red-600 p-2 text-white shadow-sm hover:bg-red-500 disabled:opacity-50 disabled:cursor-not-allowed">
                                        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <!-- Pricing 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">
                    <h3 class="text-base font-semibold leading-7 text-gray-900 mb-6">Pricing Details</h3>

                    <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2">
                        <!-- Tax Rate -->
                        <div>
                            <label for="tax_rate" class="block text-sm font-medium leading-6 text-gray-900">Tax Rate (%)</label>
                            <div class="mt-2">
                                <input type="number" name="tax_rate" id="tax_rate" x-model="taxRate" step="0.01" min="0" max="100" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="0.00">
                            </div>
                        </div>

                        <!-- Tip Amount -->
                        <div>
                            <label for="tip_amount" class="block text-sm font-medium leading-6 text-gray-900">Tip Amount</label>
                            <div class="relative mt-2 rounded-md shadow-sm">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <span class="text-gray-500 sm:text-sm">$</span>
                                </div>
                                <input type="number" name="tip_amount" id="tip_amount" x-model="tipAmount" step="0.01" min="0" class="block w-full rounded-md border-0 py-1.5 pl-7 pr-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="0.00">
                            </div>
                        </div>
                    </div>

                    <!-- Totals Summary -->
                    <div class="mt-6 border-t border-gray-200 pt-6">
                        <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" x-text="'$' + subtotal.toFixed(2)">$0.00</dd>
                            </div>
                            <div class="flex items-center justify-between">
                                <dt class="text-sm text-gray-600">Tax</dt>
                                <dd class="text-sm font-medium text-gray-900" x-text="'$' + taxAmount.toFixed(2)">$0.00</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" x-text="'$' + parseFloat(tipAmount || 0).toFixed(2)">$0.00</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" x-text="'$' + total.toFixed(2)">$0.00</dd>
                            </div>
                        </dl>
                    </div>

                    <!-- Hidden input for subtotal -->
                    <input type="hidden" name="subtotal" :value="subtotal.toFixed(2)">
                </div>
            </div>

            <!-- 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">
                    <label for="notes" class="block text-sm font-medium leading-6 text-gray-900">Notes</label>
                    <div class="mt-2">
                        <textarea name="notes" id="notes" rows="4" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Additional notes or payment instructions..."></textarea>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex items-center justify-end gap-x-6">
                <a href="{{ route('crm.billing.index') }}" class="text-sm font-semibold leading-6 text-gray-900">Cancel</a>
                <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 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create Invoice</button>
            </div>
        </div>
    </form>
</div>
@endsection