@extends('admin.layouts.dashboard')
@section('title', 'Appointment Settings')
@section('content')
<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="mb-0">Appointment Settings</h3>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="card shadow-sm" style="max-width:720px;">
        <div class="card-body p-4">
            <form method="POST" action="{{ route('admin.app-settings.update') }}">
                @csrf @method('PUT')

                <h6 class="fw-bold text-muted mb-3">Booking Type</h6>

                <div class="mb-3">
                    <p class="text-muted" style="font-size:13px;">
                        Choose whether customers need to pay at the time of booking or can book for free.
                    </p>

                    <div class="d-flex gap-3 mt-3">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="appointment_type"
                                   id="type_paid" value="paid"
                                   {{ $setting->appointment_type === 'paid' ? 'checked' : '' }}>
                            <label class="form-check-label fw-bold" for="type_paid">
                                <i class="fas fa-credit-card me-1 text-warning"></i> Paid
                                <div style="font-size:11px; color:#6b7280; font-weight:normal;">
                                    Customer must pay to complete booking
                                </div>
                            </label>
                        </div>

                        <div class="form-check form-check-inline ms-4">
                            <input class="form-check-input" type="radio" name="appointment_type"
                                   id="type_free" value="free"
                                   {{ $setting->appointment_type === 'free' ? 'checked' : '' }}>
                            <label class="form-check-label fw-bold" for="type_free">
                                <i class="fas fa-gift me-1 text-success"></i> Free
                                <div style="font-size:11px; color:#6b7280; font-weight:normal;">
                                    Booking is confirmed without payment
                                </div>
                            </label>
                        </div>
                    </div>
                </div>

                {{-- Booking fee — only shown when paid --}}
                <div id="bookingFeeSection" style="{{ $setting->appointment_type === 'paid' ? '' : 'display:none;' }} margin-bottom:16px;">
                    <label class="fw-bold" style="font-size:13px;">Booking Fee Amount</label>
                    <div class="input-group mt-1" style="max-width:180px;">
                        <span class="input-group-text">$</span>
                        <input type="number" name="booking_fee" id="bookingFee"
                               class="form-control" min="0" step="0.01"
                               value="{{ old('booking_fee', $setting->booking_fee ?? 50) }}"
                               placeholder="50">
                    </div>
                    <small class="text-muted">This amount will be charged to customers at booking time.</small>
                </div>

                <div id="paymentGatewaySection" style="{{ $setting->appointment_type === 'paid' ? '' : 'display:none;' }}">
                    @include('admin.partials._payment-gateway-settings', ['appSetting' => $setting, 'idPrefix' => 'as_'])
                </div>

                <div class="alert mt-3 {{ $setting->appointment_type === 'paid' ? 'alert-warning' : 'alert-success' }}" style="font-size:13px;">
                    @if($setting->appointment_type === 'paid')
                        <i class="fas fa-info-circle me-1"></i>
                        <strong>Paid mode:</strong> Customers will be redirected to payment page after filling the booking form. Booking is only confirmed after successful payment.
                    @else
                        <i class="fas fa-info-circle me-1"></i>
                        <strong>Free mode:</strong> Customers can book directly without any payment. Booking is confirmed immediately.
                    @endif
                </div>

                <button type="submit" class="btn btn-dark px-4 mt-2">Save Settings</button>
            </form>
        </div>
    </div>
</div>

<script>
const feeSection = document.getElementById('bookingFeeSection');
const gatewaySection = document.getElementById('paymentGatewaySection');
const alertBox   = document.querySelector('.alert.mt-3');

function toggleGatewayPanels(prefix) {
    const selected = document.querySelector('input[name="payment_gateway"]:checked');
    const gateway = selected ? selected.value : 'clover';
    const cloverPanel = document.getElementById(prefix + 'cloverCredentials');
    const stripePanel = document.getElementById(prefix + 'stripeCredentials');
    if (cloverPanel) cloverPanel.style.display = gateway === 'clover' ? '' : 'none';
    if (stripePanel) stripePanel.style.display = gateway === 'stripe' ? '' : 'none';
}

document.querySelectorAll('input[name="payment_gateway"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        toggleGatewayPanels('as_');
    });
});

document.querySelectorAll('input[name="appointment_type"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        if (this.value === 'paid') {
            feeSection.style.display = '';
            if (gatewaySection) gatewaySection.style.display = '';
            alertBox.className = 'alert mt-3 alert-warning';
            alertBox.innerHTML = '<i class="fas fa-info-circle me-1"></i><strong>Paid mode:</strong> Customers will be redirected to payment page after filling the booking form. Booking is only confirmed after successful payment.';
        } else {
            feeSection.style.display = 'none';
            if (gatewaySection) gatewaySection.style.display = 'none';
            alertBox.className = 'alert mt-3 alert-success';
            alertBox.innerHTML = '<i class="fas fa-info-circle me-1"></i><strong>Free mode:</strong> Customers can book directly without any payment. Booking is confirmed immediately.';
        }
    });
});
</script>
@endsection