@extends('adminlte::page')

@section('title', 'payments')

@section('content_header')
    <h1>Payments</h1>
@stop
@section('content')
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-6">Create Payment Link</h1>

    <form action="{{ route('admin.payment-links.store') }}" method="POST" class="max-w-2xl bg-white rounded-lg shadow p-6">
        @csrf

        <div class="space-y-4">
            <!-- Service Selection -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Service (Optional)</label>
                <select name="service_id" class="w-full px-4 py-2 border rounded-lg">
                    <option value="">-- Custom Amount --</option>
                    @foreach($services as $service)
                        <option value="{{ $service->id }}">{{ $service->menu_title ?? $service->title }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Custom Amount -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Custom Amount (Optional)</label>
                <input type="number" name="custom_amount" step="0.01" min="0" 
                    class="w-full px-4 py-2 border rounded-lg">
                <p class="text-sm text-gray-500 mt-1">Leave empty to use service price</p>
            </div>

            <!-- Currency -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Currency *</label>
                <select name="currency" required class="w-full px-4 py-2 border rounded-lg">
                    <option value="USD">USD ($)</option>
                    <option value="GBP">GBP (£)</option>
                    <option value="EUR">EUR (€)</option>
                    <option value="INR">INR (₹)</option>
                </select>
            </div>

            <!-- Customer Name -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Customer Name (Optional)</label>
                <input type="text" name="customer_name" class="w-full px-4 py-2 border rounded-lg">
            </div>

            <!-- Customer Email -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Customer Email (Optional)</label>
                <input type="email" name="customer_email" class="w-full px-4 py-2 border rounded-lg">
            </div>

            <!-- Require Email -->
            <div class="flex items-center">
                <input type="checkbox" name="email_required" id="email_required" class="mr-2">
                <label for="email_required" class="text-sm text-gray-700">Require customer to enter email</label>
            </div>

            <!-- Require Name -->
            <div class="flex items-center">
                <input type="checkbox" name="name_required" id="name_required" class="mr-2">
                <label for="name_required" class="text-sm text-gray-700">Require customer to enter name</label>
            </div>

            <!-- Expiration Date -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Expiration Date (Optional)</label>
                <input type="datetime-local" name="expires_at" class="w-full px-4 py-2 border rounded-lg">
            </div>

            <!-- Admin Notes -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Admin Notes (Optional)</label>
                <textarea name="admin_notes" rows="3" class="w-full px-4 py-2 border rounded-lg"></textarea>
            </div>

            <!-- Send Email -->
            <div class="flex items-center">
                <input type="checkbox" name="send_email" id="send_email" class="mr-2">
                <label for="send_email" class="text-sm text-gray-700">Send payment link to customer via email</label>
            </div>

            <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700">
                Create Payment Link
            </button>
        </div>
    </form>
</div>
@stop