@extends('backend.layouts.master')
@section('title','Donation Cause 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 Cause 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-cause.index') }}">Donation Causes</a></li>
                          <li class="active">Donation Cause 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 Cause Details</strong>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Cause Title:</strong></label>
                    <p>{{$donationCause->cause_title}}</p>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Goal Amount:</strong></label>
                    <p>${{number_format($donationCause->intended_budget, 2)}}</p>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Raised Amount:</strong></label>
                    <p>${{number_format($donationCause->raised_amount, 2)}}</p>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Donors Count:</strong></label>
                    <p>{{$donationCause->donors_count}} donors</p>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Status:</strong></label>
                    <p>
                      @if($donationCause->status=='active')
                        <span class="badge badge-success">{{$donationCause->status}}</span>
                      @else
                        <span class="badge badge-warning">{{$donationCause->status}}</span>
                      @endif
                    </p>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="col-form-label"><strong>Created At:</strong></label>
                    <p>{{$donationCause->created_at->format('M d, Y')}}</p>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label class="col-form-label"><strong>Details:</strong></label>
                <div class="border p-3">
                  {!! $donationCause->details !!}
                </div>
              </div>

              <div class="form-group">
                <label class="col-form-label"><strong>Image:</strong></label>
                <div>
                  @if($donationCause->image)
                    <img src="{{ Storage::url($donationCause->image) }}" class="img-fluid" style="max-width: 300px;" alt="{{$donationCause->cause_title}}" />
                  @else
                    <p>No image uploaded</p>
                  @endif
                </div>
              </div>

              <div class="form-group">
                <a href="{{route('donation-cause.index')}}" class="btn btn-secondary">Back to List</a>
                <a href="{{route('donation-cause.edit',$donationCause->id)}}" class="btn btn-primary">Edit</a>
              </div>
            </div>
        </div>
      </div>
    </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