@extends('layouts.app')

@section('title', 'Edit Payment Form - ' . $form->name)

@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-pencil-square me-2 text-primary"></i>Edit Payment Form
            </h1>
            <p class="text-muted mb-0">Update payment form settings and configuration</p>
        </div>
        <div>
            <a href="{{ route('payment-forms.show', [$website, $form]) }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left me-2"></i>Cancel
            </a>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show mb-4">
            <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show mb-4">
            <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show mb-4">
            <h6 class="alert-heading mb-2">Please correct the following errors:</h6>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Edit Form -->
    <form action="{{ route('payment-forms.update', [$website, $form]) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="row">
            <div class="col-md-8">
                <!-- Basic Information -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="mb-0">Basic Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="name" class="form-label">Form Name <span class="text-danger">*</span></label>
                            <input type="text"
                                   class="form-control @error('name') is-invalid @enderror"
                                   id="name"
                                   name="name"
                                   value="{{ old('name', $form->name) }}"
                                   placeholder="e.g., Donation Form, Product Payment"
                                   required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="slug" class="form-label">URL Slug <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text">{{ url('/payment') }}/</span>
                                <input type="text"
                                       class="form-control @error('slug') is-invalid @enderror"
                                       id="slug"
                                       name="slug"
                                       value="{{ old('slug', $form->slug) }}"
                                       placeholder="payment-form-url"
                                       required>
                            </div>
                            @error('slug')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">This will be the public URL for your payment form</small>
                        </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="Brief description of what this payment is for">{{ old('description', $form->description) }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Payment Settings -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="mb-0">Payment Settings</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Payment Type <span class="text-danger">*</span></label>
                            <div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="type"
                                           id="type_fixed"
                                           value="fixed"
                                           {{ old('type', $form->type) === 'fixed' ? 'checked' : '' }}
                                           onchange="toggleAmountField()">
                                    <label class="form-check-label" for="type_fixed">
                                        Fixed Amount
                                    </label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="type"
                                           id="type_variable"
                                           value="variable"
                                           {{ old('type', $form->type) === 'variable' ? 'checked' : '' }}
                                           onchange="toggleAmountField()">
                                    <label class="form-check-label" for="type_variable">
                                        Variable Amount (User enters)
                                    </label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="type"
                                           id="type_donation"
                                           value="donation"
                                           {{ old('type', $form->type) === 'donation' ? 'checked' : '' }}
                                           onchange="toggleAmountField()">
                                    <label class="form-check-label" for="type_donation">
                                        Donation (Any Amount)
                                    </label>
                                </div>
                            </div>
                            @error('type')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3" id="amount-field" style="{{ old('type', $form->type) === 'variable' || old('type', $form->type) === 'donation' ? 'display: none;' : '' }}">
                                    <label for="amount" class="form-label">Amount <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text">{{ $form->currency }}</span>
                                        <input type="number"
                                               class="form-control @error('amount') is-invalid @enderror"
                                               id="amount"
                                               name="amount"
                                               value="{{ old('amount', $form->amount) }}"
                                               step="0.01"
                                               min="0">
                                    </div>
                                    @error('amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="currency" class="form-label">Currency <span class="text-danger">*</span></label>
                                    <select class="form-select @error('currency') is-invalid @enderror"
                                            id="currency"
                                            name="currency">
                                        <option value="MYR" {{ old('currency', $form->currency) === 'MYR' ? 'selected' : '' }}>MYR - Malaysian Ringgit</option>
                                        <option value="USD" {{ old('currency', $form->currency) === 'USD' ? 'selected' : '' }}>USD - US Dollar</option>
                                        <option value="SGD" {{ old('currency', $form->currency) === 'SGD' ? 'selected' : '' }}>SGD - Singapore Dollar</option>
                                    </select>
                                    @error('currency')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Accepted Payment Methods</label>
                            <small class="text-muted d-block mb-2">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,
                                ];
                                $formPaymentMethods = is_array($form->payment_methods) ? $form->payment_methods : [];
                            @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>
                                    @if($enabledMethods['chipin'])
                                        <div class="form-check mb-2">
                                            <input class="form-check-input"
                                                   type="checkbox"
                                                   name="payment_methods[]"
                                                   value="chipin"
                                                   id="method_chipin"
                                                   {{ in_array('chipin', $formPaymentMethods) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="method_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>
                                    @endif

                                    @if($enabledMethods['bank_transfer'])
                                        <div class="form-check mb-2">
                                            <input class="form-check-input"
                                                   type="checkbox"
                                                   name="payment_methods[]"
                                                   value="bank_transfer"
                                                   id="method_bank_transfer"
                                                   {{ in_array('bank_transfer', $formPaymentMethods) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="method_bank_transfer">
                                                <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>
                                    @endif

                                    @if($enabledMethods['cod'])
                                        <div class="form-check mb-2">
                                            <input class="form-check-input"
                                                   type="checkbox"
                                                   name="payment_methods[]"
                                                   value="cash_on_delivery"
                                                   id="method_cash"
                                                   {{ in_array('cash_on_delivery', $formPaymentMethods) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="method_cash">
                                                <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>
                                    @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>
                </div>

                <!-- Redirect URLs -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="mb-0">After Payment Redirect URLs (Optional)</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            <strong>Note:</strong> Payment status will be captured by our system first, then users will be redirected to these URLs if provided.
                        </div>
                        <div class="mb-3">
                            <label for="success_url" class="form-label">Success Redirect URL (Optional)</label>
                            <input type="url"
                                   class="form-control @error('success_url') is-invalid @enderror"
                                   id="success_url"
                                   name="success_url"
                                   value="{{ old('success_url', $form->success_url) }}"
                                   placeholder="https://example.com/thank-you">
                            @error('success_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Optional: Redirect users here after payment is successfully processed. Leave empty to use default success page.</small>
                        </div>

                        <div class="mb-3">
                            <label for="cancel_url" class="form-label">Cancel Redirect URL (Optional)</label>
                            <input type="url"
                                   class="form-control @error('cancel_url') is-invalid @enderror"
                                   id="cancel_url"
                                   name="cancel_url"
                                   value="{{ old('cancel_url', $form->cancel_url) }}"
                                   placeholder="https://example.com/cancelled">
                            @error('cancel_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Optional: Redirect users here after payment is cancelled. Leave empty to redirect back to payment form.</small>
                        </div>
                    </div>
                </div>

                <!-- Customer Information Collection -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="mb-0">Customer Information Collection</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            <strong>Note:</strong> Name and email are always required for payment processing.
                        </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', $form->require_phone) ? 'checked' : '' }}>
                            <label class="form-check-label" for="require_phone">
                                <strong>Require Phone Number</strong>
                                <br>
                                <small class="text-muted">Make phone number a required field</small>
                            </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', $form->collect_address) ? 'checked' : '' }}>
                            <label class="form-check-label" for="collect_address">
                                <strong>Collect Billing Address</strong>
                                <br>
                                <small class="text-muted">Request customer's full billing address</small>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Terms & Conditions -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="mb-0">Terms & Conditions</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check mb-3">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="require_terms"
                                   id="require_terms"
                                   value="1"
                                   {{ old('require_terms', $form->require_terms) ? 'checked' : '' }}
                                   onchange="toggleTermsField()">
                            <label class="form-check-label" for="require_terms">
                                <strong>Require Terms Acceptance</strong>
                                <br>
                                <small class="text-muted">Users must accept terms before payment</small>
                            </label>
                        </div>

                        <div id="terms-field" style="{{ old('require_terms', $form->require_terms) ? '' : 'display: none;' }}">
                            <div class="mb-3">
                                <label for="terms_conditions" class="form-label">Terms & Conditions Text</label>
                                <textarea class="form-control"
                                          id="terms_conditions"
                                          name="terms_conditions"
                                          rows="8"
                                          placeholder="Enter your terms and conditions here...">{{ old('terms_conditions', $form->terms_conditions) }}</textarea>
                                <small class="text-muted">This will be shown to customers before they can complete payment</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Email Notifications -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="mb-0">Email Notifications</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check mb-3">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="notification_email_enabled"
                                   id="send_email"
                                   {{ old('notification_email_enabled', $form->notification_settings['enabled'] ?? false) ? 'checked' : '' }}
                                   onchange="toggleEmailField()">
                            <label class="form-check-label" for="send_email">
                                Send email notification for new payments
                            </label>
                        </div>

                        <div id="email-field" style="{{ old('notification_email_enabled', $form->notification_settings['enabled'] ?? false) ? '' : 'display: none;' }}">
                            <div class="mb-3">
                                <label for="notification_email" class="form-label">Notification Email</label>
                                <input type="email"
                                       class="form-control"
                                       name="notification_email"
                                       value="{{ old('notification_email', $form->notification_settings['email'] ?? '') }}"
                                       placeholder="admin@example.com">
                                <small class="text-muted">Email address to receive payment notifications</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-md-4">
                <!-- Status -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="mb-0">Status</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check form-switch">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="is_active"
                                   id="is_active"
                                   {{ old('is_active', $form->is_active) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                Form is Active
                            </label>
                        </div>
                        <small class="text-muted">Inactive forms cannot accept payments</small>
                    </div>
                </div>

                <!-- Form Preview -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="mb-0">Preview</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">See how your form looks to customers</p>
                        <a href="{{ url('/payment/' . $form->slug) }}"
                           target="_blank"
                           class="btn btn-outline-primary btn-sm w-100">
                            <i class="bi bi-eye me-2"></i>Preview Form
                        </a>
                    </div>
                </div>

                <!-- Statistics -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="mb-0">Statistics</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Views:</span>
                            <strong>{{ $form->view_count ?? 0 }}</strong>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Submissions:</span>
                            <strong>{{ $form->submission_count ?? 0 }}</strong>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-muted">Total Collected:</span>
                            <strong>{{ $form->currency }} {{ number_format($form->total_collected ?? 0, 2) }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="d-flex justify-content-between">
                    <button type="button"
                            class="btn btn-outline-danger"
                            onclick="confirmDelete()">
                        <i class="bi bi-trash me-2"></i>Delete Form
                    </button>
                    <div>
                        <a href="{{ route('payment-forms.show', [$website, $form]) }}" class="btn btn-secondary">
                            Cancel
                        </a>
                        <button type="submit" class="btn btn-primary ms-2">
                            <i class="bi bi-check-circle me-2"></i>Update Form
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- Delete Form (Hidden) -->
    <form id="delete-form"
          action="{{ route('payment-forms.destroy', [$website, $form]) }}"
          method="POST"
          style="display: none;">
        @csrf
        @method('DELETE')
    </form>
</div>

<script>
// Toggle amount field based on payment type
function toggleAmountField() {
    const paymentType = document.querySelector('input[name="type"]:checked').value;
    const amountField = document.getElementById('amount-field');

    if (paymentType === 'variable' || paymentType === 'donation') {
        amountField.style.display = 'none';
    } else {
        amountField.style.display = 'block';
    }
}

// Toggle email notification field
function toggleEmailField() {
    const sendEmail = document.getElementById('send_email').checked;
    const emailField = document.getElementById('email-field');

    if (sendEmail) {
        emailField.style.display = 'block';
    } else {
        emailField.style.display = 'none';
    }
}

// Toggle terms & conditions field
function toggleTermsField() {
    const requireTerms = document.getElementById('require_terms').checked;
    const termsField = document.getElementById('terms-field');

    if (requireTerms) {
        termsField.style.display = 'block';
    } else {
        termsField.style.display = 'none';
    }
}

// Auto-generate slug from name
document.getElementById('name').addEventListener('blur', function() {
    const slug = document.getElementById('slug');
    if (!slug.value) {
        slug.value = this.value
            .toLowerCase()
            .replace(/[^\w\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-')
            .trim();
    }
});

// Confirm delete
function confirmDelete() {
    if (confirm('Are you sure you want to delete this payment form? This action cannot be undone.')) {
        document.getElementById('delete-form').submit();
    }
}
</script>

<style>
.card {
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15)!important;
}
</style>
@endsection