@extends('frontend.layouts.master')
@section('title') {{$cause->cause_title}} - Donate @endsection
@section('main-content')

<!-- Start Page Title Area -->
<div class="page-title-area">
    <div class="d-table">
        <div class="d-table-cell">
            <div class="container">
                <div class="page-title-content">
                    <h2>{{$cause->cause_title}}</h2>
                    <ul>
                        <li><a href="{{route('home')}}">Home</a></li>
                        <li><a href="{{route('donate')}}">Donate</a></li>
                        <li>{{$cause->cause_title}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Page Title Area -->
        <!-- Start Causes Details Area -->
        <section class="causes-details-area ptb-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-12">
                        <div class="causes-details-desc">
                            <div class="causes-details-image">
                                <img src="{{ Storage::url($cause->image) }}" alt="{{$cause->cause_title}}">
                            </div>

                            <div class="causes-details-text">
                                @php
                                    $progressRaw = ($cause->intended_budget > 0)
                                        ? ($cause->raised_amount / $cause->intended_budget) * 100
                                        : 0;
                                    $progressPercentage = (int) max(0, min(100, round($progressRaw)));
                                @endphp
                                <div class="progress pink" aria-label="Donation progress" title="{{$progressPercentage}}% of goal reached">
                                    {{-- The percentage width is now directly on the progress-bar --}}
                                    <div class="progress-bar2" style="width: {{$progressPercentage}}%">
                                        <span class="progress-value-text">{{$progressPercentage}}%</span>
                                    </div>
                                </div>
                                <ul>
                                    <li>
                                        <span>Raised:</span> 
                                        ${{number_format($cause->raised_amount, 2)}}
                                    </li>
                                    <li class="left-site">
                                        <span>Goal:</span> 
                                        ${{number_format($cause->intended_budget, 2)}}
                                    </li>
                                </ul>
                            </div>

                            <div class="causes-details-meta">
								<div class="entry-meta">
									<ul>
										<li>
                                            <span>Posted On:</span> 
                                            <a href="javascript:void(0)">{{$cause->created_at->format('d M , Y. D')}}</a>
                                        </li>
									</ul>
								</div>

								<h3>{{$cause->cause_title}}</h3>

								<p>{!! ($cause->details) !!}</p>
								
                            </div>
                            
                            <div class="causes-details-payment">
                                <form class="contact-form" id="donationForm">
                                    @csrf
                                    <input type="hidden" name="donation_cause_id" value="{{$cause->id}}">
                                    
                                    <div class="payment-method">
                                        <h3>Select Payment Method</h3>
                                        <p>
                                            <input type="radio" id="paypal" name="payment_method" value="paypal" required>
                                            <label for="paypal">PayPal</label>
                                        </p>
                                        <p>
                                            <input type="radio" id="credit" name="payment_method" value="credit_card" required>
                                            <label for="credit">Credit Card</label>
                                        </p>
                                        <p>
                                            <input type="radio" id="debit" name="payment_method" value="debit_card" required>
                                            <label for="debit">Debit Card</label>
                                        </p>
                                        <p>
                                            <input type="radio" id="others" name="payment_method" value="others" required>
                                            <label for="others">Others</label>
                                        </p>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <input type="text" name="first_name" id="first_name" class="form-control" placeholder="First Name" required>
                                            </div>
                                        </div>

                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <input type="text" name="last_name" id="last_name" class="form-control" placeholder="Last Name" required>
                                            </div>
                                        </div>

                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <input type="email" name="email" id="email" class="form-control" placeholder="Email" required>
                                            </div>
                                        </div>

                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <input type="tel" name="phone" id="phone" class="form-control" placeholder="Phone (Optional)">
                                            </div>
                                        </div>

                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <input type="number" name="amount" id="amount" class="form-control" placeholder="Donation Amount" min="1" step="0.01" required>
                                            </div>
                                        </div>

                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <textarea name="message" id="message" class="form-control" rows="3" placeholder="Message (Optional)"></textarea>
                                            </div>
                                        </div>

                                        <div class="col-lg-12">
                                            <div class="causes-details-btn">
                                                <button type="submit" class="default-btn" id="donateBtn">Donate Now <span></span></button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
							</div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-12">
						<aside class="widget-area" id="secondary">
							<div class="widget widget_search">
								<form class="search-form" id="causeSearchForm">
									<label>
										<span class="screen-reader-text">Search for:</span>
										<input type="search" class="search-field" placeholder="Search donation causes..." id="causeSearchInput">
                                    </label>
                                    
									<button type="submit">
                                        <i class="flaticon-search"></i>
                                    </button>
								</form>
							</div>

							<section class="widget widget_huruma_posts_thumb">
								<h3 class="widget-title">Other Donation Causes</h3>
								<div id="otherCausesList">
									@if(isset($otherCauses) && $otherCauses->count() > 0)
										@foreach($otherCauses as $otherCause)
										<article class="item">
											<a href="{{route('donate.detail', $otherCause->id)}}" class="thumb">
												@if($otherCause->image)
													<img src="{{ Storage::url($otherCause->image) }}" alt="{{$otherCause->cause_title}}" style="width: 100%; height: 80px; object-fit: cover;">
												@else
													<span class="fullimage cover bg1" role="img"></span>
												@endif
											</a>
											<div class="info">
												<time datetime="{{$otherCause->created_at->format('Y-m-d')}}">{{$otherCause->created_at->format('M d, Y')}}</time>
												<h4 class="title usmall">
													<a href="{{route('donate.detail', $otherCause->id)}}">{{$otherCause->cause_title}}</a>
												</h4>
												<p style="font-size: 12px; color: #666; margin: 5px 0;">
													Raised: ${{number_format($otherCause->raised_amount, 2)}} / ${{number_format($otherCause->intended_budget, 2)}}
												</p>
											</div>
											<div class="clear"></div>
										</article>
										@endforeach
									@else
										<p>No other donation causes found.</p>
									@endif
								</div>
							</section>


							
							
						</aside>
					</div>
                </div>
            </div>
        </section>
        <!-- End Causes Details Area -->

@endsection

@push('styles')
<style>
/* The track of the progress bar */
.causes-details-text .progress.pink {
    width: 100%;
    height: 12px;
    background-color: #eef0f2; /* Light gray track */
    border-radius: 6px;
    overflow: hidden;
    /* Added for better positioning of the inner text if you use it */
    position: relative; 
}

/* The colored fill of the progress bar */
.causes-details-text .progress.pink .progress-bar2 {
    display: block;
    height: 100%;
    max-width: 100%; /* Ensures it doesn't overflow */
    /* The gradient is now on this element */
    background: linear-gradient(90deg, #ff6b35, #ff8c42) ;
    border-radius: 6px;
    /* Smooth transition for visual effect */
    transition: width 0.4s ease-in-out;
}

/* Optional: Style for the percentage text inside */
.causes-details-text .progress.pink .progress-value-text {
    position: absolute;
    right: 10px;
    color: white;
    font-size: 10px;
    font-weight: bold;
    line-height: 12px; /* Match the height of the bar */
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    $('.quick-amount').click(function() {
        var amount = $(this).data('amount');
        $('#amount').val(amount);
    });

    // Handle cause search
    $('#causeSearchForm').on('submit', function(e) {
        e.preventDefault();
        var searchQuery = $('#causeSearchInput').val().trim();
        if (searchQuery.length > 0) {
            searchDonationCauses(searchQuery);
        }
    });

    // Handle real-time search as user types
    $('#causeSearchInput').on('input', function() {
        var searchQuery = $(this).val().trim();
        if (searchQuery.length > 2) {
            searchDonationCauses(searchQuery);
        } else if (searchQuery.length === 0) {
            // Show all other causes when search is cleared
            loadOtherCauses();
        }
    });

    function searchDonationCauses(query) {
        $.ajax({
            url: '{{ route("donation-causes.search") }}',
            type: 'GET',
            data: {
                q: query,
                exclude_id: {{$cause->id}}
            },
            success: function(response) {
                if (response.success) {
                    updateCausesList(response.causes);
                }
            },
            error: function() {
                console.log('Search failed');
            }
        });
    }

    function loadOtherCauses() {
        // This would reload the original other causes
        // For now, we'll just show a message
        $('#otherCausesList').html('<p>Type to search for donation causes...</p>');
    }

    function updateCausesList(causes) {
        var html = '';
        if (causes.length > 0) {
            causes.forEach(function(cause) {
                var imageHtml = cause.image ? 
                    '<img src="/storage/' + cause.image + '" alt="' + cause.cause_title + '" style="width: 100%; height: 80px; object-fit: cover;">' :
                    '<span class="fullimage cover bg1" role="img"></span>';
                
                html += '<article class="item">' +
                    '<a href="/donate-detail/' + cause.id + '" class="thumb">' + imageHtml + '</a>' +
                    '<div class="info">' +
                        '<time datetime="' + cause.created_at + '">' + new Date(cause.created_at).toLocaleDateString() + '</time>' +
                        '<h4 class="title usmall">' +
                            '<a href="/donate-detail/' + cause.id + '">' + cause.cause_title + '</a>' +
                        '</h4>' +
                        '<p style="font-size: 12px; color: #666; margin: 5px 0;">' +
                            'Raised: $' + parseFloat(cause.raised_amount).toFixed(2) + ' / $' + parseFloat(cause.intended_budget).toFixed(2) +
                        '</p>' +
                    '</div>' +
                    '<div class="clear"></div>' +
                '</article>';
            });
        } else {
            html = '<p>No donation causes found matching your search.</p>';
        }
        $('#otherCausesList').html(html);
    }

    // Handle donation form submission
    $('#donationForm').on('submit', function(e) {
        e.preventDefault();
        
        var formData = new FormData(this);
        var submitBtn = $('#donateBtn');
        var originalText = submitBtn.html();
        
        // Disable submit button and show loading
        submitBtn.prop('disabled', true).html('Processing... <span></span>');
        
        $.ajax({
            url: '{{ route("donation.submit") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    // Show success message
                    alert('Thank you for your donation! An invoice has been sent to your email.');
                    // Reset form
                    $('#donationForm')[0].reset();
                    // Reload page to update progress
                    location.reload();
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function(xhr) {
                var errorMessage = 'An error occurred while processing your donation.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                    var errors = xhr.responseJSON.errors;
                    var errorList = [];
                    for (var field in errors) {
                        errorList.push(errors[field][0]);
                    }
                    errorMessage = errorList.join('\n');
                }
                alert(errorMessage);
            },
            complete: function() {
                // Re-enable submit button
                submitBtn.prop('disabled', false).html(originalText);
            }
        });
    });
});
</script>
@endpush