@php
    $authUser = auth()->user();
@endphp
@extends('frontend.layouts.app')
@push('style')
    <style>
        .donation-form-container {
            font-family: 'Segoe UI', sans-serif;
            padding: 40px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px;
            box-sizing: border-box;
            align-items: center;
            background-color: #fff;
            border: none;
            border-radius: 8px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            margin: 40px auto;
        }

        .donation-form-container h2 {
            text-align: center;
            margin-bottom: 25px;
            color: #3b5998;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
        }

        .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .radio-option {
            flex: 1 1 48%;
            border: 1px solid #ccc;
            border-radius: 6px;
            text-align: center;
            padding: 10px;
            cursor: pointer;
            background: #fff;
            position: relative;
        }

        .radio-option input {
            position: absolute;
            left: -9999px;
        }

        .radio-option.active {
            background-color: #3b5998;
            color: white;
            border-color: #3b5998;
        }

        .conditional-field {
            display: none;
        }

        .donation-btn {
            width: 100%;
            padding: 12px;
            background-color: #b8333a;
            color: #fff;
            border: none;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            border-radius: 6px;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
        }

        .donation-btn:hover {
            background-color: #96292f;
        }

        .bank_info {
            background-color: #f9f9f0;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
        }

        .bank_info h5 {
            margin-bottom: 20px;
            color: #2d4373;
            font-weight: 600;
            border-bottom: 1px dashed #ccc;
            padding-bottom: 5px;
        }

        .bank_account_box {
            background-color: #fff;
            border: 1px solid #dcdcdc;
            border-radius: 8px;
            padding: 15px 20px;
            margin-bottom: 15px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease;
        }

        .bank_account_box:hover {
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }

        .bank_account_box p {
            margin: 5px 0;
            font-size: 14px;
        }

        .mobile_info {
            background-color: #f0f8ff;
            border: 1px solid #cce4f7;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
        }

        .mobile_info h5 {
            margin-bottom: 15px;
            color: #0074b7;
            font-weight: 600;
            border-bottom: 1px dashed #ccc;
            padding-bottom: 5px;
        }

        .mobile_gateway_item {
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 10px 15px;
            margin-bottom: 10px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            font-size: 14px;
        }

        @media (max-width: 767px) {
            .donation-form-container {
                margin: 0;
                border-radius: 0;
                box-shadow: none;
                padding: 20px;
            }
        }

        .member-info-box span:first-child {
            min-width: 120px;
        }

        .donation-request-box {
            background: #f5f9ff;
            border: 1px solid #c6d8f0;
            padding: 20px 25px;
            border-radius: 12px;
            margin-bottom: 30px;
            box-shadow: 0 2px 5px rgba(0, 60, 130, 0.05);
            font-family: 'Segoe UI', sans-serif;
        }

        .donation-request-title {
            font-size: 18px;
            font-weight: 600;
            color: #154c79;
            margin-bottom: 15px;
            border-bottom: 1px dashed #c6d8f0;
            padding-bottom: 8px;
        }

        .donation-request-details div {
            font-size: 14px;
            margin-bottom: 8px;
            display: flex;
            gap: 10px;
        }

        .donation-request-details span {
            font-weight: 600;
            color: #333;
            min-width: 140px;
        }

        .status-pending {
            color: #ff9800;
        }

        .status-publish {
            color: #009688;
        }

        .status-approved {
            color: #4caf50;
        }

        .status-rejected {
            color: #f44336;
        }

        .status-complete {
            color: #3f51b5;
        }
    </style>
@endpush

@section('content')

    <div class="container-fluid page-header-modern">
        <div class="container">
            <h1>Donation</h1>
            <ol class="breadcrumb breadcrumb-modern">
                <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                <li class="breadcrumb-item">Pages</li>
                <li class="breadcrumb-item active">Donation</li>
            </ol>
        </div>
    </div>


    <div class="donation-form-container">
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if (session('invoice_url'))
            <script>
                window.open("{{ session('invoice_url') }}", '_blank');
            </script>
        @endif

        @if (isset($donationRequest))
            <input type="hidden" value="{{ $donationRequest->id }}" name="donation_request_id">
            <div class="donation-request-box">
                <h4 class="donation-request-title">🎯 Donation Request</h4>
                <div class="donation-request-details">
                    <div><span>👤 Name:</span> {{ $donationRequest->name }}</div>
                    {{--    <div><span>📧 Email:</span> {{ $donationRequest->email ?? 'N/A' }}</div> --}}
                    <div><span>📱 Mobile:</span> {{ $donationRequest->mobile }}</div>
                    {{-- <div><span>💰 Requested Amount:</span> {{ number_format($donationRequest->amount, 2) }}</div> --}}
                    <div><span>📌 Status:</span> <strong
                            class="status-{{ $donationRequest->status }}">{{ ucfirst($donationRequest->status) }}</strong>
                    </div>
                </div>
            </div>
        @endif

        @if ($authUser && in_array($authUser->type, ['member', 'donar']))
            <div class="member-info-box bg-light p-3 mb-4 rounded border">
                <h5 class="mb-3 text-primary fw-bold">
                    <i class="fas fa-user-check me-2"></i>Your Information
                </h5>

                <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                    <span class="text-muted">Full Name:</span>
                    <span class="text-dark fw-semibold">{{ $authUser->name }}</span>
                </div>

                <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                    <span class="text-muted">Email:</span>
                    <span class="text-dark fw-semibold">{{ $authUser->email }}</span>
                </div>
                @if ($authUser->type === 'member' && $authUser->member && $authUser->member->mobile)
                    <div class="d-flex justify-content-between align-items-center py-2">
                        <span class="text-muted">Mobile:</span>
                        <span class="text-dark fw-semibold">{{ $authUser->member->mobile }}</span>
                    </div>
                @elseif ($authUser->type === 'donar' && $authUser->mobile)
                    <div class="d-flex justify-content-between align-items-center py-2">
                        <span class="text-muted">Mobile:</span>
                        <span class="text-dark fw-semibold">{{ $authUser->mobile }}</span>
                    </div>
                @endif
            </div>
        @endif
        <form action="{{ route('donation.submit') }}" method="POST" id="donationForm">
            @csrf

            <div class="form-group">
                <label for="donation_amount">Amount</label>
                <input type="number" name="donation_amount" id="donation_amount"
                    class="form-control @error('donation_amount') is-invalid @enderror" placeholder="Enter donation amount"
                    value="{{ old('donation_amount') }}">
                @error('donation_amount')
                    <span class="invalid-feedback">{{ $message }}</span>
                @enderror
            </div>
            <div class="form-group">
                @if ($authUser && in_array($authUser->type, ['member', 'donar']))
                    <input type="hidden" name="donor_name" value="{{ $authUser->name }}">
                @else
                    <label for="donor_name">Full Name</label>
                    <input type="text" name="donor_name" id="donor_name"
                        class="form-control @error('donor_name') is-invalid @enderror" placeholder="Enter your full name"
                        value="{{ old('donor_name') }}">
                    @error('donor_name')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                @endif
            </div>

            <div class="form-group">

                @if ($authUser && in_array($authUser->type, ['member', 'donar']))
                    <input type="hidden" name="donor_email" value="{{ $authUser->email }}">
                @else
                    <label for="donor_email">Email</label>
                    <input type="email" name="donor_email" id="donor_email"
                        class="form-control @error('donor_email') is-invalid @enderror"
                        placeholder="Enter your email address" value="{{ old('donor_email') }}">
                    @error('donor_email')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                @endif
            </div>

            {{-- Mobile --}}
            <div class="form-group">
                @if ($authUser && $authUser->type=='member' && $authUser->member && $authUser->member->mobile)
                    <input type="hidden" name="mobile" value="{{ $authUser->member->mobile }}">
                @elseif ($authUser && $authUser->type=='donar' && $authUser->mobile)
                    <input type="hidden" name="mobile" value="{{ $authUser->mobile }}">
                @else
                    <label for="mobile">Mobile Number</label>
                    <input type="tel" name="mobile" id="mobile"
                        class="form-control @error('mobile') is-invalid @enderror" placeholder="Enter your mobile number"
                        value="{{ old('mobile') }}">
                    @error('mobile')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                @endif
            </div>

            <div class="form-group">
                <label>Payment Type</label>
                <div class="radio-group">
                    <label class="radio-option">
                        <input type="radio" name="payment_type" value="mobile_bank"> Mobile Banking
                    </label>
                    <label class="radio-option">
                        <input type="radio" name="payment_type" value="bank"> Bank Transfer
                    </label>
                    <label class="radio-option">
                        <input type="radio" name="payment_type" value="cash"> Cash
                    </label>
                </div>
                @error('payment_type')
                    <span class="invalid-feedback">{{ $message }}</span>
                @enderror
            </div>
            {{-- Mobile Banking Info --}}
            <div id="mobile-info" class="conditional-field">

                <div class="row">
                    <div class="mobile_info col-12">
                        <h5>Send via Mobile Banking</h5>
                        <div class="row">
                            @forelse ($gateways->where('gateway_type', 'Mobile Bank') as $acc)
                                <div class="col-md-6">
                                    <div class="mobile_gateway_item">
                                        <strong>{{ $acc->company_name }}:</strong> {{ $acc->mobile_number }}
                                    </div>
                                </div>
                            @empty
                                <div class="col-12">
                                    <p class="text-danger">No mobile banking options available.</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="mobile_account_id">Select Mobile Account</label>
                    <select name="mobile_account_id" id="mobile_account_id" class="form-control"
                        value="{{ old('mobile_account_id') }}">
                        <option value="">Select Account</option>
                        @foreach ($gateways->whereIn('gateway_type', ['Mobile Bank']) as $acc)
                            <option value="{{ $acc->id }}" data-gateway="{{ $acc->gateway_type }}">
                                {{ $acc->gateway_type }} - {{ $acc->mobile_number }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
            {{-- Bank Info --}}
            <div id="bank-info" class="conditional-field">
                <div class="row">
                    <div class="bank_info col-12">
                        <h5>Bank Transfer Info</h5>
                        <div class="row">
                            @forelse ($gateways->where('gateway_type', 'Bank') as $acc_bank)
                                <div class="col-md-12">
                                    <div class="bank_account_box">
                                        <p><strong>Account Name:</strong> {{ $acc_bank->account_name }}</p>
                                        <p><strong>Account Number:</strong> {{ $acc_bank->account_number }}</p>
                                        <p><strong>Bank Name:</strong> {{ $acc_bank->bank_name }}</p>
                                        <p><strong>Branch:</strong> {{ $acc_bank->branch_name }}</p>
                                        @if ($acc_bank->routing_number)
                                            <p><strong>Routing Number:</strong> {{ $acc_bank->routing_number }}</p>
                                        @endif
                                    </div>
                                </div>
                            @empty
                                <div class="col-12">
                                    <p class="text-danger">No bank accounts available.</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="bank_account_id">Select Bank Account</label>
                    <select name="bank_account_id" id="bank_account_id" class="form-control"
                        value="{{ old('bank_account_id') }}">
                        <option value="">Select Bank Account</option>
                        @foreach ($gateways->where('gateway_type', 'Bank') as $acc)
                            <option value="{{ $acc->id }}">
                                {{ $acc->bank_name }} - {{ $acc->account_number }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- Transaction No --}}
            <div class="form-group conditional-field" id="transaction-field">
                <label for="transaction_no">Transaction No</label>
                <input type="text" name="transaction_no" id="transaction_no" class="form-control">
            </div>

            <div class="form-group">
                <button type="submit" class="donation-btn">Donate Now</button>
            </div>
        </form>
    </div>
@endsection


@push('script')
    <script>
        $(document).ready(function() {

            function toggleFields() {
                const selected = $('input[name="payment_type"]:checked').val();
                $('.conditional-field').hide();
                $('#gateway').val('');
                $('#mobile_account_id').val('');
                $('#bank_account_id').val('');
                $('#transaction_no').val('');

                if (selected === 'mobile_bank') {
                    $('#mobile-info').show();
                    $('#transaction-field').show();
                } else if (selected === 'bank') {
                    $('#bank-info').show();
                    $('#transaction-field').show();
                }
            }

            $('.radio-option input[type="radio"]').on('change', function() {
                $('.radio-option').removeClass('active');
                $(this).closest('.radio-option').addClass('active');
                toggleFields();
            });

            $('#gateway').on('change', function() {
                const selectedGateway = $(this).val();
                $('#mobile_account_id option').hide().filter(function() {
                    return $(this).data('gateway') === selectedGateway;
                }).show();
                $('#mobile_account_id').val('');
            });

            toggleFields(); // On page load
        });
    </script>
@endpush