File: /home/durgeshpandey215/public_html/mykarma.skilladders.com/resources/views/campkarma.blade.php
@extends('layouts.app')
@section('title','My Karma Foundation | Campaign')
@section('style')
<link rel="stylesheet" href="{{url('/assets/css/kstyle.css')}}">
</style>
@stop
@section('content')
@include('common.navigation')
<div class="container-fluid px-0">
<div class="row hero-section mx-0">
<div class="col-12 px-0 ">
<div class="hero-section position-relative px-0">
<img src="{{$campaign->main_image}}" alt="" srcset="" class="position-absolute z-1 img-cover w-100 h-100" >
<div class="z-2 bg-dark w-100 h-100 position-absolute opacity-50"></div>
<div class="z-3 hero-content w-46 position-absolute ">
<h2 class="text-white fs-1 fw-bold">{{$campaign->title}} </h2>
<p class="text-white mt-5">{{$campaign->short_description}}</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-lg-6 order-2 order-lg-1">
<div class=" my-2">
@if ($campaign->is_direct == 0)
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper4">
<div class="swiper-wrapper">
@foreach ($campaign->documents as $item)
<div class="swiper-slide">
<img src="{{url($item->attachment)}}" class="img-fluid"/>
</div>
@endforeach
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper3">
<div class="swiper-wrapper">
@foreach ($campaign->documents as $item)
<div class="swiper-slide">
<img src="{{url($item->attachment)}}" />
</div>
@endforeach
</div>
</div>
@endif
</div>
<p class="my-5">{!!$campaign->description!!}</p>
</div>
<div class="col-12 col-lg-6 p-1 order-1 order-lg-2">
<div class="karmadonationform mt-5 shadow-sm m-auto">
<div class="d-flex justify-content-center align-items-center">
<button id="buttonOne" class=" border-0 bg-prim mt-2 p-1 rounded-pill">
<div class="p-2 bg-white rounded-pill"></div>
</button>
<div class="progress-container">
<div id="progressBar" class="progress-bar-custom bg-sec1"></div>
</div>
<button id="buttonTwo" class="border-0 bg-prim mt-2 p-1 rounded-pill">
<div class="p-2 bg-white rounded-pill"></div>
</button>
</div>
<form action="" class=" py-3 px-2" id="donate_parent">
<div class="d-flex justify-content-center align-items-center flex-column gap-2" >
<div class="t-txt text-center text-capitaliz">SuPPORT THE CAUSE</div>
<p
class="bg-sec1 text-white col-lg-8 col-md-10 col-12 rounded text-center p-2 text-capitalize">
MAKE A DIFFERENCE</p>
</div>
<ul class="d-flex justify-content-center payment-tab karma-payment p-0 mt-3 m-auto">
<li class=" mx-1 list-unstyled bg-white shadow-sm"><button type="button" class="text-center w-100 px-2 px-lg-3 d-inline-block p-2 bg-white text-sec" id="onetime">One time</button></li>
<li class=" mx-1 list-unstyled bg-white shadow-sm"><button type="button" class="text-center w-100 px-2 px-lg-3 d-inline-block p-2 bg-white text-sec" id="monthly">Monthly</button></li>
<li class=" mx-1 list-unstyled bg-white shadow-sm"><button type="button" class="text-center w-100 px-2 px-lg-3 d-inline-block p-2 bg-white text-sec" id="fullpayment">Full payment</button></li>
</ul>
<div class="position-relative rounded pt-3">
<div class="input-group mt-2 mb-1 bg-light-gray rounded d-flex d-none donate-search-div" id="donate-search-div">
<span
class="input-group-text bg-light-gray border-0 py-2 fw-600 fs-18 bg-light-gray">RS.</span>
<input type="number" class="form-control border-0 rounded bg-light-gray"
placeholder="Customer Amount " id="donationAmount" name="donationAmount" onkeyup="selectAmountFromOther(this.value)">
<p class="m-0 p-0 fs-12 text-danger" id="donateError"></p>
</div>
<div class="position-absolute rounded end-0 top-0 h-100 text-center bg-light-gray bg-box-hide">
</div>
</div>
<div class="col-12 ">
<div class="mt-3 d-flex justify-content-between">
<p class="amt m-0 col d-flex justify-content-start" id="givenAmountDiv">₹{{$campaign->raise_fund}}</p>
<p class="des m-0 col-md-auto d-flex align-items-end" id="totalAmountDiv">Raised of: ₹{{$campaign->fund_amount}} goal
</p>
<p class="ranjeet"></p>
</div>
</div>
<div class=" col-12">
<div>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: {{$campaign->fund_percentage}}% ;border-radius: 1.5625rem; background: var(--primary-primary, #F9CA3E);"
aria-valuenow="{{$campaign->fund_percentage}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-12 ">
<div >
<div class="col"><img src="emoji sparkling heart.svg" width="25"
alt=""><span>
<img src="/img/hurt.png" height="21" alt="" class=" pe-2">{{$campaign->count_total}}
supporter's</span></div>
</div>
</div>
@if($campaign->title == "Sustaining Hope: Monthly Grocery Support for Widows")
<div class="donation-amount-div row d-flex justify-content-between flex-wrap px-2 my-3">
<div class="col-3">
<label for="" class="fs-14">1 house</label><br>
<input type="radio" id="ten" value="10000"
onclick="setInputValue(750)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4 text-sec py-1 display-font rounded-2 w-100"
for="ten">₹750 </label>
</div>
<div class="col-3">
<label for="" class="fs-14">2 house</label><br>
<input type="radio" id="twenty" value="20000"
onclick="setInputValue(1500)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4
text-sec py-1 display-font rounded-2"
for="twenty w-100">₹1500</label>
</div>
<div class="col-3">
<label for="" class="fs-14">3 house</label><br>
<input type="radio" id="thirty" value="30000"
onclick="setInputValue(2250)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4
text-sec py-1 display-font rounded-2 w-100"
for="thirty">₹2250</label>
</div>
<div class="col-3">
<label for="" class="fs-14">4 house</label><br>
<input type="radio" id="four" value="40000"
onclick="setInputValue(3000)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4 text-sec py-1 display-font rounded-2 w-100"
for="four">₹3000</label>
</div>
<div class="col-3">
<label for="" class="fs-14 w-100">5 house</label><br>
<input type="radio" id="five" value="50000"
onclick="setInputValue(3750)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4 text-sec py-1 display-font rounded-2 w-100"
for="five">₹3750</label>
</div>
<div class="col-3">
<label for="" class="fs-14 w-100">6 house</label><br>
<input type="radio" id="six" value="60000"
onclick="setInputValue(4500)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4
text-sec py-1 display-font rounded-2 w-100"
for="six">₹4500</label>
</div>
<div class="col-3">
<label for="" class="fs-14 w-100">7 house</label><br>
<input type="radio" id="seven" value="70000"
onclick="setInputValue(6000)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4
text-sec py-1 display-font rounded-2 w-100"
for="seven">₹6000</label>
</div>
<div class="pt-4 col-3">
{{-- <input type="radio" id="others-button" name="donation-amount"
class=" donation-amount1 pamount d-none ">
<label class="donation-amount-label1 display-font bg-light-gray shadow-sm px-3 d-inline-block py-1 px-md-4"
for="others-button">Others</label> --}}
<input type="radio" id="others-button" name="donation-amount"
class="donation-amount1 d-none">
<label class="w-100 donation-amount-label1 d-inline-block px-3 px-md-4 shadow-sm rounded-2 py-1 display-font bg-light-gray text-tri w-100"
for="others-button">Others</label>
</div>
</div>
@elseif($campaign->title == "Building Futures: Pre-Primary School for Slum Children")
<div class="donation-amount-div row d-flex justify-content-between flex-wrap px-2 my-3">
<div class="col-3">
<label for="" class="fs-14">1 Child</label><br>
<input type="radio" id="ten" value="10000"
onclick="setInputValue(7000)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4 text-sec py-1 display-font rounded-2 w-100"
for="ten">₹7000 </label>
</div>
<div class="col-3">
<label for="" class="fs-14">2 Pack</label><br>
<input type="radio" id="twenty" value="20000"
onclick="setInputValue(14000)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4
text-sec py-1 display-font rounded-2"
for="twenty w-100">₹14,000</label>
</div>
<div class="col-3">
<label for="" class="fs-14">3 Pack</label><br>
<input type="radio" id="thirty" value="30000"
onclick="setInputValue(21000)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4
text-sec py-1 display-font rounded-2 w-100"
for="thirty">₹21,000</label>
</div>
<div class="col-3">
<label for="" class="fs-14">4 Pack</label><br>
<input type="radio" id="four" value="40000"
onclick="setInputValue(28000)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4 text-sec py-1 display-font rounded-2 w-100"
for="four">₹28,000</label>
</div>
<div class="col-3">
<label for="" class="fs-14 w-100">5 Pack</label><br>
<input type="radio" id="five" value="50000"
onclick="setInputValue(35000)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4 text-sec py-1 display-font rounded-2 w-100"
for="five">₹35,000</label>
</div>
<div class="col-3">
<label for="" class="fs-14 w-100">6 Pack</label><br>
<input type="radio" id="six" value="60000"
onclick="setInputValue(42000)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4
text-sec py-1 display-font rounded-2 w-100"
for="six">₹42,000</label>
</div>
<div class="col-3">
<label for="" class="fs-14 w-100">7 Pack</label><br>
<input type="radio" id="seven" value="70000"
onclick="setInputValue(49000)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4
text-sec py-1 display-font rounded-2 w-100"
for="seven">₹49,000</label>
</div>
<div class="col-3">
<label for="" class="fs-14 w-100">Others</label>
<input type="radio" id="others-button" name="donation-amount"
class="donation-amount1 d-none">
<label class="w-100 donation-amount-label1 d-inline-block px-3 px-md-4 shadow-sm rounded-2 py-1 display-font bg-light-gray text-tri w-100"
for="others-button">Others</label>
</div>
@else
<div class="donation-amount-div row d-flex justify-content-between flex-wrap px-2 my-3">
<div class="col-3">
<label for="" class="fs-14">1 house</label><br>
<input type="radio" id="ten" value="500"
onclick="setInputValue(750)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4 text-sec py-1 display-font rounded-2 w-100"
for="ten">₹500 </label>
</div>
<div class="col-3">
<label for="" class="fs-14">2 house</label><br>
<input type="radio" id="thirty" value="1000"
onclick="setInputValue(1000)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4
text-sec py-1 display-font rounded-2 w-100"
for="thirty">₹1000</label>
</div>
<div class="col-3">
<label for="" class="fs-14">3 house</label><br>
<input type="radio" id="twenty" value="1500"
onclick="setInputValue(1500)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4
text-sec py-1 display-font rounded-2"
for="twenty w-100">₹1500</label>
</div>
<div class="col-3">
<label for="" class="fs-14">4 house</label><br>
<input type="radio" id="four" value="2000"
onclick="setInputValue(2000)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4 text-sec py-1 display-font rounded-2 w-100"
for="four">₹2000</label>
</div>
<div class="col-3">
<label for="" class="fs-14 w-100">5 house</label><br>
<input type="radio" id="five" value="2500"
onclick="setInputValue(2500)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4 text-sec py-1 display-font rounded-2 w-100"
for="five">₹2500</label>
</div>
<div class="col-3">
<label for="" class="fs-14 w-100">6 house</label><br>
<input type="radio" id="six" value="3000"
onclick="setInputValue(3000)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4
text-sec py-1 display-font rounded-2 w-100"
for="six">₹3000</label>
</div>
<div class="col-3">
<label for="" class="fs-14 w-100">7 house</label><br>
<input type="radio" id="seven" value="3500"
onclick="setInputValue(3500)" name="donation-amount"
class="donation-amount1 pamount d-none">
<label class="donation-amount-label1 shadow-sm px-3 px-md-4
text-sec py-1 display-font rounded-2 w-100"
for="seven">₹3500</label>
</div>
<div class="pt-4 col-3">
{{-- <input type="radio" id="others-button" name="donation-amount"
class=" donation-amount1 pamount d-none ">
<label class="donation-amount-label1 display-font bg-light-gray shadow-sm px-3 d-inline-block py-1 px-md-4"
for="others-button">Others</label> --}}
<input type="radio" id="others-button" name="donation-amount"
class="donation-amount1 d-none">
<label class="w-100 donation-amount-label1 d-inline-block px-3 px-md-4 shadow-sm rounded-2 py-1 display-font bg-light-gray text-tri w-100"
for="others-button">Others</label>
</div>
</div>
@endif
<div class=" w-100">
<p class="fs-15 py-md-3 text-justify text-uppercase">"YOUR CONTRIBUTIONS ARE
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur provident quam distinctio fugit sapiente ab perferendis perspiciatis magnam enim!</p>
<button type="button" class="bg-sec1 w-100 py-3 border-0 rounded px-4 text-white" id="donate_button" {{($fundcomplete==true)?'disabled':''}}><span
class="float-start text-white fw-600 fs-20">Donate Now</span><i
class="fa-solid fa-arrow-right float-end fs-4"></i>
</button>
</div>
</form>
<div class="" >
<form action="" method="post" class="d-none gradient-custom p-4" id="donor_detail">
<i class="fa fa-arrow-circle-left fs-2 text-sec1" aria-hidden="true" id="backbuttom"></i>
<div class="row">
<div class="col-12">
<input type="text" name="donor_pancard" id="" class="w-100 bg-body-secondary rounded-2 py-2 px-3 px-md-4 my-2 border-0 outline-0" placeholder="Indian Pan Card">
</div>
<div class="col-12">
<input type="text" name="donor_name" id="" class="w-100 bg-body-secondary rounded-2 py-2 px-3 px-md-4 my-2 border-0 outline-0" placeholder="Full Name">
</div>
<div class="col-12">
<textarea name="donor_address" rows="7" class="w-100 bg-body-secondary rounded-2 py-2 px-3 px-md-4 border-0 my-2 outline-0" placeholder="Message"></textarea>
</div>
<div class="col-6">
<input type="text" name="donor_email" id="" class="w-100 bg-body-secondary rounded-2 py-2 px-3 px-md-4 my-2 border-0 outline-0" placeholder="Email">
</div>
<div class="col-6">
<input type="text" name="donor_city" id="" class="w-100 bg-body-secondary rounded-2 py-2 px-3 px-md-4 my-2 border-0 outline-0" placeholder="City">
</div>
<div class="col-6">
<input type="text" name="donor_phone" id="" class="w-100 bg-body-secondary rounded-2 py-2 px-3 px-md-4 my-2 border-0 outline-0" placeholder="India Phone">
</div>
<div class="col-6">
<input type="text" name="donor_state" id="" class="w-100 bg-body-secondary rounded-2 py-2 px-3 px-md-4 my-2 border-0 outline-0" placeholder="State">
</div>
<div class="col-6">
<select name="" id="" class="bg-body-secondary mt-2 w-100 py-2 px-2 rounded-2 border-0 outline-0">
<option value="india">Indian</option>
<option value="other">Others</option>
</select>
</div>
<div class="col-6">
<input type="date" name="donor_birth" id="" class="w-100 bg-body-secondary rounded-2 py-2 px-3 my-2 border-0 outline-0" placeholder="Date of Birth">
</div>
</div>
<div class="col-12">
<button type="button" class="bg-sec1 w-100 py-3 border-0 rounded px-4 text-white" id="donate_button" {{($fundcomplete==true)?'disabled':''}}><span
class="float-start text-white fw-600 fs-20">Donate Now</span><i
class="fa-solid fa-arrow-right float-end fs-4"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@include('common.footer')
@section('script')
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper3", {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
var swiper2 = new Swiper(".mySwiper4", {
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
});
</script>
@stop
@stop