@extends('layouts.app')

@section('content')
<div class="container-fluid px-4">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center pt-3 pb-4 mb-4 border-bottom">
        <div>
            <h1 class="h2 mb-1">
                <i class="bi bi-plus-circle me-2 text-primary"></i>Create Payment Form
            </h1>
            <p class="text-muted mb-0">Build a custom payment form for donations, services, or one-time payments</p>
        </div>
        <a href="{{ route('payment-forms.index', $website) }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-2"></i>Back to Forms
        </a>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <form action="{{ route('payment-forms.store', $website) }}" method="POST">
                @csrf
                
                <!-- Basic Information Card -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="bi bi-info-circle me-2"></i>Basic Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label for="name" class="form-label">Form Name *</label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                       id="name" name="name" value="{{ old('name') }}" required
                                       placeholder="e.g., Donation Form, Service Payment">
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="type" class="form-label">Payment Type *</label>
                                <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required onchange="togglePriceFields()">
                                    <option value="">Select Type</option>
                                    <option value="fixed" {{ old('type') === 'fixed' ? 'selected' : '' }}>Fixed Amount</option>
                                    <option value="donation" {{ old('type') === 'donation' ? 'selected' : '' }}>Donation (Variable)</option>
                                    <option value="subscription" {{ old('type') === 'subscription' ? 'selected' : '' }}>Subscription</option>
                                </select>
                                @error('type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="3" 
                                      placeholder="Describe what this payment is for">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Pricing Configuration Card -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="bi bi-currency-dollar me-2"></i>Pricing Configuration
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="currency" class="form-label">Currency *</label>
                                <select class="form-select @error('currency') is-invalid @enderror" id="currency" name="currency" required>
                                    <option value="MYR" {{ old('currency', 'MYR') === 'MYR' ? 'selected' : '' }}>MYR (Malaysian Ringgit)</option>
                                    <option value="USD" {{ old('currency') === 'USD' ? 'selected' : '' }}>USD (US Dollar)</option>
                                    <option value="SGD" {{ old('currency') === 'SGD' ? 'selected' : '' }}>SGD (Singapore Dollar)</option>
                                </select>
                                @error('currency')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <!-- Fixed Amount Field -->
                            <div class="col-md-8 mb-3" id="fixed-amount-field" style="display: none;">
                                <label for="amount" class="form-label">Amount *</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" class="form-control @error('amount') is-invalid @enderror" 
                                           id="amount" name="amount" value="{{ old('amount') }}" 
                                           min="0" step="0.01" placeholder="0.00">
                                </div>
                                @error('amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <!-- Donation Amount Fields -->
                        <div class="row" id="donation-amount-fields" style="display: none;">
                            <div class="col-md-6 mb-3">
                                <label for="min_amount" class="form-label">Minimum Amount</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" class="form-control @error('min_amount') is-invalid @enderror" 
                                           id="min_amount" name="min_amount" value="{{ old('min_amount') }}" 
                                           min="0" step="0.01" placeholder="0.00">
                                </div>
                                @error('min_amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Leave empty for no minimum</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="max_amount" class="form-label">Maximum Amount</label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" class="form-control @error('max_amount') is-invalid @enderror" 
                                           id="max_amount" name="max_amount" value="{{ old('max_amount') }}" 
                                           min="0" step="0.01" placeholder="0.00">
                                </div>
                                @error('max_amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Leave empty for no maximum</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Payment Methods Card -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">
                            <i class="bi bi-credit-card me-2"></i>Payment Methods
                        </h5>
                    </div>
                    <div class="card-body">
                        <small class="text-muted d-block mb-3">Select which payment methods customers can use for this form</small>

                        @php
                            $websitePaymentSettings = $website->settings['payment'] ?? [];
                            $enabledMethods = [
                                'chipin' => $websitePaymentSettings['chipin']['enabled'] ?? false,
                                'bank_transfer' => $websitePaymentSettings['bank_transfer']['enabled'] ?? false,
                                'cod' => $websitePaymentSettings['cod']['enabled'] ?? false,
                            ];
                            $defaultMethods = [];
                            if ($enabledMethods['chipin']) $defaultMethods[] = 'chipin';
                            if ($enabledMethods['bank_transfer']) $defaultMethods[] = 'bank_transfer';
                        @endphp

                        @if(!$enabledMethods['chipin'] && !$enabledMethods['bank_transfer'] && !$enabledMethods['cod'])
                            <div class="alert alert-warning">
                                <i class="bi bi-exclamation-triangle me-2"></i>
                                No payment methods are enabled in your website settings.
                                <a href="{{ route('websites.edit', $website) }}#payment-settings" class="alert-link">Configure payment settings</a>
                            </div>
                        @else
                            <div class="row">
                                @if($enabledMethods['chipin'])
                                    <div class="col-md-12 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="payment_methods[]"
                                                   value="chipin" id="payment_chipin"
                                                   {{ in_array('chipin', old('payment_methods', $defaultMethods)) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="payment_chipin">
                                                <i class="bi bi-credit-card me-2 text-primary"></i>
                                                <strong>Online Payment (ChipIn)</strong>
                                                <br>
                                                <small class="text-muted">Credit/Debit Card, Online Banking, E-Wallets</small>
                                            </label>
                                        </div>
                                    </div>
                                @endif

                                @if($enabledMethods['bank_transfer'])
                                    <div class="col-md-12 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="payment_methods[]"
                                                   value="bank_transfer" id="payment_bank"
                                                   {{ in_array('bank_transfer', old('payment_methods', $defaultMethods)) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="payment_bank">
                                                <i class="bi bi-bank me-2 text-info"></i>
                                                <strong>Bank Transfer</strong>
                                                <br>
                                                <small class="text-muted">Manual transfer to your bank account</small>
                                            </label>
                                        </div>
                                    </div>
                                @endif

                                @if($enabledMethods['cod'])
                                    <div class="col-md-12 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="payment_methods[]"
                                                   value="cash_on_delivery" id="payment_cod"
                                                   {{ in_array('cash_on_delivery', old('payment_methods', [])) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="payment_cod">
                                                <i class="bi bi-cash-coin me-2 text-success"></i>
                                                <strong>Pay at Counter / Cash on Delivery</strong>
                                                <br>
                                                <small class="text-muted">Pay when visiting or upon delivery</small>
                                            </label>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <small class="text-muted">
                                <i class="bi bi-info-circle me-1"></i>
                                Only methods enabled in your <a href="{{ route('websites.edit', $website) }}#payment-settings">website payment settings</a> are shown here.
                            </small>
                        @endif
                    </div>
                </div>

                <!-- Form Settings Card -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0">
                            <i class="bi bi-gear me-2"></i>Form Settings
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="collect_customer_info" 
                                           id="collect_customer_info" value="1" 
                                           {{ old('collect_customer_info', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="collect_customer_info">
                                        Collect customer information (name, email)
                                    </label>
                                </div>
                                
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="collect_address" 
                                           id="collect_address" value="1" 
                                           {{ old('collect_address') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="collect_address">
                                        Collect billing address
                                    </label>
                                </div>
                                
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="require_phone" 
                                           id="require_phone" value="1" 
                                           {{ old('require_phone') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="require_phone">
                                        Require phone number
                                    </label>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="send_receipt" 
                                           id="send_receipt" value="1" 
                                           {{ old('send_receipt', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="send_receipt">
                                        Send email receipt
                                    </label>
                                </div>
                                
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="require_terms" 
                                           id="require_terms" value="1" 
                                           {{ old('require_terms') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="require_terms">
                                        Require terms acceptance
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3" id="terms-field" style="display: none;">
                            <label for="terms_conditions" class="form-label">Terms & Conditions</label>
                            <textarea class="form-control @error('terms_conditions') is-invalid @enderror" 
                                      id="terms_conditions" name="terms_conditions" rows="4" 
                                      placeholder="Enter your terms and conditions">{{ old('terms_conditions') }}</textarea>
                            @error('terms_conditions')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <label for="success_message" class="form-label">Success Message</label>
                            <textarea class="form-control @error('success_message') is-invalid @enderror" 
                                      id="success_message" name="success_message" rows="2" 
                                      placeholder="Thank you for your payment!">{{ old('success_message') }}</textarea>
                            @error('success_message')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('payment-forms.index', $website) }}" class="btn btn-outline-secondary">
                                <i class="bi bi-x-circle me-2"></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-2"></i>Create Payment Form
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Help Sidebar -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="bi bi-lightbulb me-2"></i>Payment Form Types
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6 class="text-primary">Fixed Amount</h6>
                        <p class="small mb-0">Set a specific price for services, products, or fees. Perfect for consultation fees, membership dues, or service charges.</p>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-primary">Donation</h6>
                        <p class="small mb-0">Allow customers to choose their own amount. Great for fundraising, tips, or voluntary contributions.</p>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-primary">Subscription</h6>
                        <p class="small mb-0">Recurring payments for ongoing services. Ideal for memberships, subscriptions, or monthly services.</p>
                    </div>
                    
                    <div class="alert alert-info small">
                        <i class="bi bi-info-circle me-1"></i>
                        After creating your form, you'll get a shareable link that you can send to customers or embed on your website.
                    </div>
                </div>
            </div>
            
            <div class="card border-0 shadow-sm mt-4">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="bi bi-palette me-2"></i>Customization
                    </h6>
                </div>
                <div class="card-body">
                    <p class="small mb-3">Once your form is created, you can:</p>
                    <ul class="small mb-0">
                        <li>Customize colors and branding</li>
                        <li>Add custom fields</li>
                        <li>Set up email notifications</li>
                        <li>Configure redirect URLs</li>
                        <li>Track analytics and conversions</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Toggle price fields based on payment type
function togglePriceFields() {
    const type = document.getElementById('type').value;
    const fixedField = document.getElementById('fixed-amount-field');
    const donationFields = document.getElementById('donation-amount-fields');
    
    fixedField.style.display = 'none';
    donationFields.style.display = 'none';
    
    if (type === 'fixed' || type === 'subscription') {
        fixedField.style.display = 'block';
        document.getElementById('amount').required = true;
        document.getElementById('min_amount').required = false;
    } else if (type === 'donation') {
        donationFields.style.display = 'block';
        document.getElementById('amount').required = false;
        document.getElementById('min_amount').required = true;
    }
}

// Toggle terms field
document.getElementById('require_terms').addEventListener('change', function() {
    const termsField = document.getElementById('terms-field');
    termsField.style.display = this.checked ? 'block' : 'none';
});

// Initialize form on page load
document.addEventListener('DOMContentLoaded', function() {
    togglePriceFields();
    
    // Show terms field if checkbox is checked
    if (document.getElementById('require_terms').checked) {
        document.getElementById('terms-field').style.display = 'block';
    }
});
</script>
@endsection