@extends('backend.layouts.master')
@section('title','Donation Details')
@section('main-content')
@include('backend.layouts.notification')

<div class="breadcrumbs">
  <div class="breadcrumbs-inner">
      <div class="row m-0">
          <div class="col-sm-4">
              <div class="page-header float-left">
                  <div class="page-title">
                      <h1>Donation Details</h1>
                  </div>
              </div>
          </div>
          <div class="col-sm-8">
              <div class="page-header float-right">
                  <div class="page-title">
                      <ol class="breadcrumb text-right">
                          <li><a href="{{ route('admin')}}">Dashboard</a></li>
                          <li><a href="{{ route('donation.index') }}">Donations</a></li>
                          <li class="active">Donation Details</li>
                      </ol>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

<div class="content">
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <strong>Donation Information</strong>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Transaction ID:</strong></label>
                    <p>{{$donation->transaction_id}}</p>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Status:</strong></label>
                    <p>
                      @if($donation->status=='completed')
                        <span class="badge badge-success">{{ucfirst($donation->status)}}</span>
                      @elseif($donation->status=='pending')
                        <span class="badge badge-warning">{{ucfirst($donation->status)}}</span>
                      @elseif($donation->status=='failed')
                        <span class="badge badge-danger">{{ucfirst($donation->status)}}</span>
                      @else
                        <span class="badge badge-info">{{ucfirst($donation->status)}}</span>
                      @endif
                    </p>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Donor Name:</strong></label>
                    <p>{{$donation->full_name}}</p>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Email:</strong></label>
                    <p>{{$donation->email}}</p>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Phone:</strong></label>
                    <p>{{$donation->phone ?: 'Not provided'}}</p>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Payment Method:</strong></label>
                    <p>{{ucfirst(str_replace('_', ' ', $donation->payment_method))}}</p>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Amount:</strong></label>
                    <p style="font-size: 24px; color: #ff6b35; font-weight: bold;">${{number_format($donation->amount, 2)}}</p>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Date:</strong></label>
                    <p>{{$donation->created_at->format('M d, Y \a\t h:i A')}}</p>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label class="col-form-label"><strong>Donation Cause:</strong></label>
                <div class="border p-3">
                  <h5>{{$donation->donationCause->cause_title}}</h5>
                  <p>{!! Str::limit($donation->donationCause->details, 200) !!}</p>
                  <p><strong>Goal:</strong> ${{number_format($donation->donationCause->intended_budget, 2)}}</p>
                </div>
              </div>

              @if($donation->message)
              <div class="form-group">
                <label class="col-form-label"><strong>Donor Message:</strong></label>
                <div class="border p-3">
                  <p><em>"{{$donation->message}}"</em></p>
                </div>
              </div>
              @endif

              <div class="form-group">
                <a href="{{route('donation.index')}}" class="btn btn-secondary">Back to List</a>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#statusModal">Update Status</button>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Status Update Modal -->
<div class="modal fade" id="statusModal" tabindex="-1" role="dialog" aria-labelledby="statusModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="statusModalLabel">Update Donation Status</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form method="POST" action="{{route('donation.update-status', $donation->id)}}">
        @csrf
        <div class="modal-body">
          <div class="form-group">
            <label for="status">Status</label>
            <select name="status" id="status" class="form-control" required>
              <option value="pending" {{$donation->status == 'pending' ? 'selected' : ''}}>Pending</option>
              <option value="completed" {{$donation->status == 'completed' ? 'selected' : ''}}>Completed</option>
              <option value="failed" {{$donation->status == 'failed' ? 'selected' : ''}}>Failed</option>
              <option value="refunded" {{$donation->status == 'refunded' ? 'selected' : ''}}>Refunded</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Update Status</button>
        </div>
      </form>
    </div>
  </div>
</div>

@endsection

@push('styles')
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
@endpush

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
@endpush