@extends('layouts.admin')

@section('title', 'Offline Payment Settings')

@section('content')
<div class="max-w-4xl mx-auto px-6 py-8">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-[#0c2340]">Offline Payment Settings</h1>
        <p class="text-[#0c2340]/70 mt-2">Configure offline payment methods and payment details</p>
    </div>

    @if ($errors->any())
        <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
            <p class="font-semibold text-red-800 mb-2">Please fix the following errors:</p>
            <ul class="list-disc list-inside text-red-700 space-y-1">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('success'))
        <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
            <p class="text-green-800 font-semibold">{{ session('success') }}</p>
        </div>
    @endif

    <form method="POST" action="{{ route('admin.offline-payments.settings.update') }}" class="space-y-8">
        @csrf
        @method('PUT')

        <!-- General Settings -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-semibold text-[#0c2340] mb-4">General Settings</h2>
            
            <div class="space-y-4">
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" name="offline_payment_enabled" value="1" 
                           {{ old('offline_payment_enabled', $settings['offline_payment_enabled']) ? 'checked' : '' }}
                           class="w-4 h-4 text-[#c9a84c]">
                    <span class="text-[#0c2340] font-semibold">Enable Offline Payment Method</span>
                </label>
                <p class="text-[#0c2340]/70 text-sm ml-7">Allow customers to book with offline payment options</p>
            </div>
        </div>

        <!-- Payment Instructions -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-semibold text-[#0c2340] mb-4">Payment Instructions</h2>
            
            <div>
                <label class="block text-sm font-semibold text-[#0c2340] mb-3">Instructions for Customers</label>
                <textarea name="offline_payment_instructions" rows="5"
                          class="w-full px-4 py-3 border border-[#0c2340]/20 rounded-lg focus:outline-none focus:border-[#c9a84c]">{{ old('offline_payment_instructions', $settings['offline_payment_instructions']) }}</textarea>
                <p class="text-[#0c2340]/70 text-xs mt-2">These instructions will be displayed to customers when they choose offline payment</p>
            </div>
        </div>

        <!-- Bank Transfer Details -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-semibold text-[#0c2340] mb-4">Bank Transfer Details</h2>
            
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-[#0c2340] mb-2">Bank Name</label>
                    <input type="text" name="bank_name" 
                           value="{{ old('bank_name', $settings['offline_payment_bank_details']['bank_name'] ?? '') }}"
                           class="w-full px-4 py-2 border border-[#0c2340]/20 rounded-lg focus:outline-none focus:border-[#c9a84c]"
                           placeholder="e.g., First National Bank">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-[#0c2340] mb-2">Account Holder Name</label>
                    <input type="text" name="bank_account_holder" 
                           value="{{ old('bank_account_holder', $settings['offline_payment_bank_details']['account_holder'] ?? '') }}"
                           class="w-full px-4 py-2 border border-[#0c2340]/20 rounded-lg focus:outline-none focus:border-[#c9a84c]"
                           placeholder="e.g., Tourism Company Ltd">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-[#0c2340] mb-2">Account Number</label>
                    <input type="text" name="bank_account_number" 
                           value="{{ old('bank_account_number', $settings['offline_payment_bank_details']['account_number'] ?? '') }}"
                           class="w-full px-4 py-2 border border-[#0c2340]/20 rounded-lg focus:outline-none focus:border-[#c9a84c]"
                           placeholder="e.g., 123456789">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-[#0c2340] mb-2">Routing Number</label>
                    <input type="text" name="bank_routing_number" 
                           value="{{ old('bank_routing_number', $settings['offline_payment_bank_details']['routing_number'] ?? '') }}"
                           class="w-full px-4 py-2 border border-[#0c2340]/20 rounded-lg focus:outline-none focus:border-[#c9a84c]"
                           placeholder="e.g., 987654321">
                </div>
                <div class="col-span-2">
                    <label class="block text-sm font-semibold text-[#0c2340] mb-2">SWIFT Code (for international transfers)</label>
                    <input type="text" name="bank_swift_code" 
                           value="{{ old('bank_swift_code', $settings['offline_payment_bank_details']['swift_code'] ?? '') }}"
                           class="w-full px-4 py-2 border border-[#0c2340]/20 rounded-lg focus:outline-none focus:border-[#c9a84c]"
                           placeholder="e.g., FNBAXXXX">
                </div>
            </div>
        </div>

        <!-- Mobile Money Details -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-semibold text-[#0c2340] mb-4">Mobile Money Details</h2>
            
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-[#0c2340] mb-2">Provider Name</label>
                    <input type="text" name="mobile_money_provider" 
                           value="{{ old('mobile_money_provider', $settings['offline_payment_mobile_money_details']['provider'] ?? '') }}"
                           class="w-full px-4 py-2 border border-[#0c2340]/20 rounded-lg focus:outline-none focus:border-[#c9a84c]"
                           placeholder="e.g., MTN Mobile Money, Vodafone Cash">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-[#0c2340] mb-2">Phone Number</label>
                    <input type="text" name="mobile_money_number" 
                           value="{{ old('mobile_money_number', $settings['offline_payment_mobile_money_details']['number'] ?? '') }}"
                           class="w-full px-4 py-2 border border-[#0c2340]/20 rounded-lg focus:outline-none focus:border-[#c9a84c]"
                           placeholder="e.g., +1234567890">
                </div>
                <div class="col-span-2">
                    <label class="block text-sm font-semibold text-[#0c2340] mb-2">Account Holder Name</label>
                    <input type="text" name="mobile_money_account_holder" 
                           value="{{ old('mobile_money_account_holder', $settings['offline_payment_mobile_money_details']['account_holder'] ?? '') }}"
                           class="w-full px-4 py-2 border border-[#0c2340]/20 rounded-lg focus:outline-none focus:border-[#c9a84c]"
                           placeholder="e.g., Tourism Company Ltd">
                </div>
            </div>
        </div>

        <!-- Info Box -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
            <h3 class="font-semibold text-blue-900 mb-2">💡 Tips</h3>
            <ul class="text-blue-800 text-sm space-y-1">
                <li>• Make sure all payment details are accurate and current</li>
                <li>• Customers will see these details when they choose offline payment</li>
                <li>• Save and test the form to ensure all information displays correctly</li>
                <li>• You can add or remove payment methods by enabling/disabling fields</li>
            </ul>
        </div>

        <!-- Submit Button -->
        <div class="flex gap-4">
            <a href="{{ route('admin.offline-payments.index') }}" 
               class="flex-1 px-6 py-3 rounded-lg border-2 border-[#0c2340] text-[#0c2340] hover:bg-[#0c2340] hover:text-white transition font-semibold text-center">
                Cancel
            </a>
            <button type="submit" 
                    class="flex-1 px-6 py-3 rounded-lg bg-[#c9a84c] text-[#0c2340] hover:bg-[#0c2340] hover:text-white transition font-semibold">
                Save Settings
            </button>
        </div>
    </form>
</div>
@endsection
