@php

$countries=\App\Models\Country::where('cancelled',0)->get();
 $paragraphs=getter('paragraphs')->setLang(app()->getLocale())->condition('position','=','donate')->orderBy('orders')->get();

@endphp

@extends('layouts.main',[
    'compact'=>'compact'
])
@section('title')
    <title>{{__('texts.join-community')}} | {{env('APP_NAME')}}</title>
@endsection

@section('content')
    <div class="section white">
        <div class="content">
{{--            <div class="section-title">--}}
{{--                {{__('texts.donation')}}--}}
{{--            </div>--}}

            @if(isset($paragraphs) && count($paragraphs)>0)

                @foreach($paragraphs as $paragraph)

                    @include('components.paragraph',['paragraph'=>$paragraph,'looping'=>2])
                @endforeach

            @endif
        </div>

    </div>
    <div class="">

        <div class="section-body content join-community no-p">


            <div class="join-community-container">
                <div class="title-1 big">{{__('texts.donate-now')}}</div>
{{--                <div class="title-2">{{__('texts.for-candidates')}}</div>--}}

                <form action="{{route('donate-now')}}" method="post" class="community-form" id="donation-form">
                        @csrf

                    <input type="text" class="input-text half" required  name="first_name" placeholder="    {{__('texts.fname')}}*" value="">
                    <input type="text" class="input-text half"  required name="last_name" placeholder="    {{__('texts.lname')}}*" value="">
                    <input type="text" class="input-text half" required name="email" placeholder="    example@example.com*" value="">
                    <input type="text" class="input-text half" required name="confirm_email" placeholder="    example@example.com*" value="">
                    <input type="text" class="input-text half" required  name="address" placeholder="    {{__('texts.address')}}*" value="">
                    <input type="text" class="input-text half" required name="city" placeholder="    {{__('texts.city')}}*" value="">
                    <input type="text" class="input-text half not-required"  name="postal_code" placeholder="    {{__('texts.postal_code')}}" value="">
                    <div class="phone input-text half">

                        <select @class('custom-select grey wid') required name="country" id="country" >
                            <option value="">{{__('texts.select_country')}}*</option>
                            @if(count($countries)>0)
                                @foreach($countries as $country)
                                    <option @if($country['name']=="Lebanon") selected @endif value="{{$country['name']}}" >{{$country['name']}}</option>
                                @endforeach
                            @endif
                        </select>

                    </div>
                    <div class="phone input-text half">

                        <select @class('custom-select grey wid') required name="choice_of_support" >
                            <option value="">{{__('texts.choice_of_support')}}*</option>
                            <option value="Learning programs">{{__('texts.Learning programs')}}*</option>
                            <option value="Conservation Programs">{{__('texts.Conservation Programs')}}*</option>
                            <option value="Outreach">{{__('texts.Outreach')}}*</option>
                            <option value="Research">{{__('texts.Research')}}*</option>
{{--                            <option value="Building">{{__('texts.Building')}}*</option>--}}
                            <option value="General">{{__('texts.General')}}*</option>
                            <option value="Collection">{{__('texts.Collection')}}*</option>



                        </select>

                    </div>
                     <div class="phone input-text half">
                         <select @class('custom-select grey code') required name="country_code" id="country_code">
                             @if(count($countries)>0)
                                 @foreach($countries as $country)
                             <option value="+{{$country['phone_code']}}" @if($country['phone_code']==961) selected @endif>+{{$country['phone_code']}}</option>
                                 @endforeach
                          @endif
                         </select>
                         <input type="text" name="phone" class="numb" required placeholder="  {{__('texts.phone')}}" style="width: 100%;border: unset;outline: unset;" >
                     </div>
                    <input type="hidden" name="gender" value="-">
{{--                    <div class="phone input-text half">--}}

{{--                        <select @class('custom-select grey wid') name="gender" >--}}
{{--                            <option value="male">{{__('texts.male')}}</option>--}}
{{--                            <option value="female">{{__('texts.female')}}</option>--}}
{{--                        </select>--}}

{{--                    </div>--}}
                    <div class="phone input-text half">

                        <select @class('custom-select grey wid') required name="membership_status" >
                            <option value="">{{__('texts.i_wish_donation_to_be')}}*</option>
                            <option value="public">{{__('texts.public')}}</option>
                            <option value="anonymous">{{__('texts.anonymous')}}</option>
                        </select>

                    </div>
                    <label class="filter-checkbox">
                        <input type="checkbox" class="not-required"  name="contact_me"  value="1">
                        <span class="checkmark"></span>
                        {{__("texts.subscription_checkbox2")}}

                    </label>




                    <div class="title-1 mv-5 center big">{{__('texts.payment')}}</div>

                        <div class="payment-box-cont">
                            <div class="label">

                                {{__('texts.donation_amount')}}
                            </div>
                            <div class="prices-list">
                                <div class="payment-box">
                                    25$
                                    <input type="radio" name="amount" value="25" id="">
                                </div>
                                <div class="payment-box">
                                    50$
                                    <input type="radio" name="amount" value="50" id="">
                                </div>
                                <div class="payment-box">
                                    100$
                                    <input type="radio" name="amount" value="100" id="">
                                </div>
                                <div class="payment-box">
                                    250$
                                    <input type="radio" name="amount" value="250" id="">
                                </div>
                                <div class="payment-box">
                                    500$
                                    <input type="radio" name="amount" value="500" id="">
                                </div>
                                <div class="payment-box clear">
                                    $
                                    <input type="number" name="total" placeholder=" {{__('texts.enter_amount_here')}}" value="" id="">
                                </div>
                            </div>
                            <br>
                            <br>

                            <div class="label">

                                {{__('texts.donation_frequency')}}
                            </div>
                            <select @class('custom-select ') required name="frequency" >
                                                              <option value="none">{{__('texts.one_time')}}</option>
                                                           <option value="weekly">{{__('texts.weekly')}}</option>
                                                          <option value="monthly">{{__('texts.monthly')}}</option>
                                                          <option value="quarterly">{{__('texts.quarterly')}}</option>
                                                       <option value="semiannually">{{__('texts.semiannually')}}</option>
                                                              <option value="annually">{{__('texts.annually')}}</option>

                                                     </select>
                                                        </div>
                                {{--                    <div class="payment-table">--}}
{{--                       <div class="left">--}}
{{--                        {{__("texts.amount_of_support")}}--}}
{{--                       </div>--}}
{{--                        <div class="right" id="total">--}}
{{--                            <input type="number"  id="support_ammount" placeholder="{{__("texts.amount_of_support")}}" name="total" value="" min="0">--}}
{{--                        </div>--}}
{{--                        <div class="left">--}}
{{--                            {{__("texts.frequency")}}--}}
{{--                        </div>--}}
{{--                        <div class="right">--}}
{{--                            <select @class('custom-select grey wid') required name="frequency" >--}}
{{--                                <option value="none">{{__('texts.one_time')}}</option>--}}
{{--                                <option value="weekly">{{__('texts.weekly')}}</option>--}}
{{--                                <option value="monthly">{{__('texts.monthly')}}</option>--}}
{{--                                <option value="quarterly">{{__('texts.quarterly')}}</option>--}}
{{--                                <option value="semiannually">{{__('texts.semiannually')}}</option>--}}
{{--                                <option value="annually">{{__('texts.annually')}}</option>--}}

{{--                            </select>--}}
{{--                        </div>--}}
{{--                        <div class="left">--}}
{{--                            {{__("texts.total")}}--}}
{{--                        </div>--}}
{{--                        <div class="right" id="total1">--}}
{{--                       ---}}
{{--                        </div>--}}
{{--                    </div>--}}


                    <button style=" border: unset; outline: unset; margin: 20px auto" type="submit" @class('button_1 big black')><span class="text">{{__('texts.proceed-to-payment')}}</span></button>
                </form>



            </div>



        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function FooterFunctions(){
            // $('#support_ammount').keyup(function (){
            //     $(this).parents('#donation-form').find('#total1').html($(this).val()+' USD');
            // })
            $('.payment-box-cont .prices-list .payment-box').each(function (){
                $(this).click(function (){
                    $('.payment-box-cont .prices-list .payment-box').removeClass('active');
                    $(this).addClass('active')
                    $('.payment-box-cont .prices-list .payment-box').find('input').attr('checked',false);
                    $('.payment-box-cont .prices-list .payment-box.clear').find('input').val("");
                    if(!$(this).hasClass('clear')){
                        $(this).find('input').attr('checked',true);
                    }
                })
            })
        }
    </script>


@endsection