@extends('layouts.front')
@section('title')
    @lang('models/causes.singular')  @lang('crud.details')
@endsection
@section('content')

    <!--== Start Page Title Area ==-->
    <section class="page-title-area" data-bg-img="{{ asset($cause->image) }}">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-title-content text-center">
                        <h2 class="title text-white">Détail de la cause</h2>
                        <div class="bread-crumbs"><a href="index.html">Acceuil<span
                                    class="breadcrumb-sep">//</span></a><span class="active">Cause</span></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--== End Page Title Area ==-->

    <!--== Start Causes Area ==-->
    <section class="causes-details-area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="causes-details-column">
                        <div class="causes-details-content">
                            <div class="causes-details">
                                <div class="thumb">
                                    <img class="w-100" src="{{ asset($cause->image) }}" alt="Image-Givest">
                                </div>
                                <h3 class="cause-title">{{ $cause->name }}</h3>
                                <div class="donate-info-wrp">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <ul class="donate-info">
                                                <li class="info-item">
                                                    <span class="info-title">But:</span>
                                                    <span class="amount">{{ $cause->goal }} F</span>
                                                </li>
                                                <li class="info-item">
                                                    <span class="info-title">Collecter:</span>
                                                    <span class="amount">{{ $cause->raised }} F</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-md-6">
                                            <!-- Start Progress Item -->
                                            <div class="progress-item">
                                                <div class="progress-line">
                                                    <div class="progress-bar-line"
                                                         data-percent="{{ $cause->percent }}%"><span
                                                            class="percent"></span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{ $cause->description }}
                            </div>
                            <div class="mt-5 donation-form bgcolor-theme3" id="make-a-donation">
                                <div class="section-title">
                                    <h5 class="subtitle line-theme-color mb-14">Donner maintenant</h5>
                                    <h2 class="title text-white">Donner maintenant</h2>
                                    <img class="line-shape" src="{{ asset('front/assets/img/shape/line-t3.png') }}"
                                         alt="Image-Givest">
                                </div>
                                <form method="post" action="{{ route('donate.create') }}" x-data="{ anonymous: false, amount: '' }">
                                    @csrf
                                    <input type="hidden" name="cause" value="{{ $cause->id }}">
                                    <div class="amount-info">
                                        <div class="donate-amount donate-custom-amount">
                                            <input min="5" required name="amount" x-model="amount" class="form-control" type="number" placeholder="Montant du don">
                                        </div>
                                    </div>
                                    <div class="personal-info">
                                        <h4>Info. Personnelle:</h4>
                                        <div class="row row-gutter-20">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <input x-model="anonymous" type="checkbox" name="anonymous" id="anonymous">
                                                    <label for="anonymous" class="text-white">Rester anonyme</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row row-gutter-20">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <input required x-bind:disabled="anonymous ? true : false" class="form-control" type="text" name="lastname"
                                                           placeholder="Nom">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <input required x-bind:disabled="anonymous ? true : false" class="form-control" type="text" name="firstname"
                                                           placeholder="Prenom">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <input required x-bind:disabled="anonymous ? true : false" class="form-control" type="number" name="phone"
                                                           placeholder="Phone">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <input required x-bind:disabled="anonymous ? true : false" class="form-control" type="email" name="email"
                                                           placeholder="Email">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="btn-wrp">
                                        <button type="submit" class="btn-theme btn-gradient btn-slide">Donner <img
                                                class="icon icon-img"
                                                src="{{ asset('front/assets/img/icons/arrow-line-right2.png') }}"
                                                alt="Icon"></button>
                                        <a href="#/" class="btn-theme btn-gradient btn-border">Total Donation: <span x-text="amount == '' ? 0 : amount"></span> FCFA</a>
                                    </div>
                                </form>
                                <div class="layer-style">
                                    <img class="layer-style1"
                                         src="{{ asset('front/assets/img/shape/form-shape1.png') }}" alt="Image-Givest">
                                    <img class="layer-style2"
                                         src="{{ asset('front/assets/img/shape/form-shape2.png') }}" alt="Image-Givest">
                                </div>
                            </div>
                        </div>
                        <div class="sidebar-area">
                            <x-search route="causes.index"/>
                            <div class="widget">
                                <h3 class="widget-title">Autre cause</h3>
                                <div class="separator-line">
                                    <img class="me-1" src="{{ asset('front/assets/img/shape/line-t2.png') }}"
                                         alt="Image-Givest">
                                </div>
                                <x-cause.other :cause="$other"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--== End Causes Area ==-->


@endsection

@section('scripts')
    <script src="//unpkg.com/alpinejs" defer></script>
@endsection