@extends("front.$version.layout")

@section('pagename')
 {{__('Donation')}}
@endsection

@section('styles')
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Cinzel:wght@400;700;900&family=Inter:wght@300;400;500;600;700&family=Hind+Siliguri:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>
    .donation-section {
        background: linear-gradient(180deg, #f0f9ff, #dbeafe);
        padding: 120px 0;
        position: relative;
    }

    .donation-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"%3E%3Cpath fill="%23ffffff" fill-opacity="0.1" d="M0,224L48,213.3C96,203,192,181,288,176C384,171,480,181,576,197.3C672,213,768,235,864,234.7C960,235,1056,213,1152,181.3C1248,149,1344,107,1392,85.3L1440,64L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"%3E%3C/path%3E%3C/svg%3E') no-repeat top center;
        background-size: cover;
        z-index: -1;
    }

    .donation-card {
        background: linear-gradient(135deg, #ffffff, #f8f9fa);
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        padding: 40px;
        transition: all 0.5s ease;
    }

    .donation-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    }

    .donation-title {
        font-family: 'Playfair Display', serif;
        font-size: 2.5rem;
        font-weight: 900;
        color: #4b5563;
        text-align: center;
        margin-bottom: 10px;
    }

    .donation-subtitle {
        font-family: 'Inter', sans-serif;
        font-size: 1.2rem;
        color: #4b5563;
        text-align: center;
        margin-bottom: 30px;
    }

    .video-section iframe {
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        width: 100%;
        height: 350px;
        transition: transform 0.5s ease;
    }

    .video-section iframe:hover {
        transform: scale(1.02);
    }

    .up-content p {
        font-family: 'Hind Siliguri', sans-serif;
        font-size: 1.15rem;
        line-height: 1.8;
        color: #1f2937;
        margin-top: 20px;
        text-align: justify;
    }

    .frequency-btn {
        padding: 12px 30px;
        font-family: 'Cinzel', serif;
        font-size: 1.1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        border-radius: 50px;
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .frequency-btn.active {
        background: #5892a7;
        color: #fff;
    }

    .frequency-btn:not(.active) {
        background: #e5e7eb;
        color: #1f2937;
    }

    .frequency-btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: #486e55;
        transition: left 0.4s ease;
        z-index: -1;
    }

    .frequency-btn:hover::after {
        left: 0;
    }

    .frequency-btn:hover {
        color: #fff;
    }

    .amount-btn {
        padding: 12px;
        font-family: 'Inter', sans-serif;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 12px;
        border: 2px solid #e5e7eb;
        background: #fff;
        transition: all 0.3s ease;
    }

    .amount-btn:hover {
        background: #b79f24;
        color: #fff;
        border-color: transparent;
        transform: scale(1.02);
    }

    .form-control {
        font-family: 'Hind Siliguri', sans-serif;
        font-size: 1rem;
        border-radius: 12px;
        border: 1px solid #d1d5db;
        padding: 12px;
        transition: all 0.3s ease;
    }

    .form-control:focus {
        border-color: #2563eb;
        box-shadow: 0 0 10px rgba(37, 99, 235, 0.2);
        outline: none;
    }

    .donate-btn {
        padding: 16px;
        font-family: 'Cinzel', serif;
        font-size: 1.2rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #fff;
        /*background: linear-gradient(90deg, #4c1d95, #2563eb);*/
        border-radius: 50px;
        border: none;
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .donate-btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #2563eb, #4c1d95);
        transition: left 0.4s ease;
        z-index: -1;
    }

    .donate-btn:hover::after {
        left: 0;
    }

    .donate-btn:hover {
        transform: scale(1.05);
        color: #fff;
    }

    label {
        font-family: 'Inter', sans-serif;
        font-size: 0.9rem;
        font-weight: 500;
        color: #1f2937;
        margin-bottom: 8px;
    }

    @media (max-width: 991px) {
        .donation-section {
            padding: 80px 0;
        }

        .donation-card {
            padding: 30px;
        }

        .donation-title {
            font-size: 2rem;
        }

        .video-section iframe {
            height: 250px;
        }
    }
</style>
@endsection

@section('meta-keywords', "$be->services_meta_keywords")
@section('meta-description', "$be->services_meta_description")

@section('content')

@section('breadcrumb-title', "Donation")
@section('breadcrumb-subtitle', "Donation")
@section('breadcrumb-link', __('Donation'))

  <!-- Donation Section Start -->
  <div class="donation-section">
     <div class="container">
        <div class="row">
           <div class="col-lg-12">
            <div class="row mt-4">
                <!-- Video Section -->
                <div class="col-md-6">
                    <div class="video-section">
                        <iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
                        <div class="up-content">
                            <p>{{ __('Donation Dialog') }}</p>
                        </div>
                    </div>
                </div>

                <!-- Donation Form Section -->
                <div class="col-md-6">
                    <div class="donation-card">
                        <h4 class="donation-title">Donation</h4>
                        <p class="donation-subtitle">Probash Service Foundation</p>

                        <!-- Donation Frequency -->
                        <div class="d-flex justify-content-center mb-4">
                            <button class="btn frequency-btn active" id="daily-btn">Daily</button>
                            <button class="btn frequency-btn" id="monthly-btn">Monthly</button>
                        </div>

                        <!-- Donation Amount Selection -->
                        <div id="daily" class="row mt-3 text-center">
                            <div class="col-4">
                                <button class="btn amount-btn w-100 amount-track" amount="10">10</button>
                            </div>
                            <div class="col-4">
                                <button class="btn amount-btn w-100 amount-track" amount="200">200</button>
                            </div>
                            <div class="col-4">
                                <button class="btn amount-btn w-100 amount-track" amount="500">500</button>
                            </div>
                            <div class="col-4 mt-3">
                                <button class="btn amount-btn w-100 amount-track" amount="1000">1000</button>
                            </div>
                            <div class="col-4 mt-3">
                                <button class="btn amount-btn w-100 amount-track" amount="Others">Others</button>
                            </div>
                        </div>

                        <div id="monthly" class="row mt-3 text-center d-none">
                            <div class="col-4">
                                <button class="btn amount-btn w-100 amount-track" amount="100">100</button>
                            </div>
                            <div class="col-4">
                                <button class="btn amount-btn w-100 amount-track" amount="2000">2000</button>
                            </div>
                            <div class="col-4">
                                <button class="btn amount-btn w-100 amount-track" amount="3000">3000</button>
                            </div>
                            <div class="col-4 mt-3">
                                <button class="btn amount-btn w-100 amount-track" amount="4000">4000</button>
                            </div>
                            <div class="col-4 mt-3">
                                <button class="btn amount-btn w-100 amount-track" amount="Others">Others</button>
                            </div>
                        </div>

                        <!-- Donation Form -->
                        <form id="donationForm" class="mt-4" action="{{ route('front.causes.payment') }}" method="POST">
                            @csrf
                            <div class="mb-3">
                                <label for="name">Name*</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label for="mobile">Mobile*</label>
                                <input type="text" class="form-control" id="mobile" name="mobile" required>
                            </div>
                            <div class="mb-3">
                                <label for="email">Email*</label>
                                <input type="text" class="form-control" id="email" name="email" required>
                            </div>
                            <div class="mb-3">
                                <label for="address">Address</label>
                                <input type="text" class="form-control" id="address" name="address">
                            </div>
                            <div class="mb-3">
                                <label for="amount">Amount*</label>
                                <input type="text" readonly class="form-control" id="amount" name="amount" required>
                            </div>
                            <div class="mb-3">
                                <label for="paymentMethod">Payment Method</label>
                                <select class="form-control" id="paymentMethod" name="payment_method">
                                    <option value="Select">Select</option>
                                    <option value="sslcommerz">SSLCommerz</option>
                                </select>
                            </div>
                            <button type="submit" class="btn donate-btn w-100">Donate</button>
                        </form>
                    </div>
                </div>
            </div>
           </div>
        </div>
     </div>
  </div>
  <!-- Donation Section End -->
@endsection

@section('scripts')
  <script src="{{ asset('assets/front/js/jquery.ui.js') }}"></script>
  <script src="{{ asset('assets/front/js/jquery.nice-select.min.js') }}"></script>

  <script>
    $('#monthly-btn').on('click', function(){
        $('#daily-btn').removeClass('active');
        $(this).addClass('active');
        $('#daily').addClass('d-none');
        $('#monthly').removeClass('d-none').show();
    });

    $('#daily-btn').on('click', function(){
        $('#monthly-btn').removeClass('active');
        $(this).addClass('active');
        $('#monthly').addClass('d-none');
        $('#daily').removeClass('d-none').show();
    });

    $('.amount-track').on('click', function(){
        let amount = $(this).attr('amount'); 
        if(amount === 'Others') {
            $('#amount').val('').prop('readonly', false); 
        } else {
            $('#amount').val(amount).prop('readonly', true); 
        }
    });
</script>
@endsection