@extends('web.layouts.layout')

@section('content')

    <main class="regist_pg_main">
        
        <!-- ---------- about_header ----------- -->
        <div class="about_pg ">
            <section class="about_header register_header ">
            <div class="container">
                        <div class="row justify-content-between">
                    <div class="col-lg-4">
                        <div class="info">
                            <div class="section_head mb_50">
                                <h2> {{ __('users.invest_in') }}  <span class="mainColor"> {{ __('users.health_with_us') }} </span>   </h2>
                                <p> {{ __('users.do_not_miss_chance_now') }} <br> {{ __('users.advanced_nutrition_reach_goals') }} </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="instructions">
                            <div class="title">
                                <div class="icon">
                                    <i class="fas fa-comment-alt-lines"></i>
                                </div>
                                <div class="cont">
                                    <h6> {{ $page_7->currentDescription->title ?? "" }} </h6>
                                    <p> {{ $page_7->currentDescription->subtitle ?? "" }} </p>
                                </div>
                            </div>
                            <div class="instructions_body">
                                {!! $page_7->currentDescription->description ?? "" !!}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="transfer_content">
                    <div class="row justify-content-center mb-4">
                        <div class="col-lg-9">
                            <div class="top_info">
                                <img src="{{asset('assets/web/images/dumble.png')}}" alt="" class="float_img">
                                <div class="row justify-content-between">
                                    <div class="col-lg-7">
                                        <div class="inf">
                                            <h6> {{ __('users.account_activated_within') }} </h6>
                                            <p class="text-white"> {{ __('users.encounter_problem_registration') }} </p>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 mt-4 mt-lg-0">
                                        <div class="whats text-start">
                                            <h6> {{ __('users.contact_support') }} </h6>
                                            <a href="{{ $settings['whatis_link'] ?? "" }}" target="_blank"> {{ __('users.whatsapp_number') }}  {{ $settings['whatis_phone'] ?? "" }} </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row justify-content-center">
                        <div class="col-lg-10">
                            <div class="transfer_cards">
                                <div class="row justify-content-between">
                                    @foreach($bankAccounts as $bankAccount)
                                        <div class="col-lg-4">
                                            <div class="transfer_card">
                                                <div class="title">
                                                    <small> {{ $bankAccount->currentDescription->title ?? "" }} </small>
                                                    <h6>
                                                        <img src="{{ getImage($bankAccount->image) }}" alt="{{ $bankAccount->currentDescription->title ?? "" }}" class="icon"/>
                                                        <span> {{ $bankAccount->currentDescription->subtitle ?? "" }} </span>
                                                    </h6>
                                                </div>
                                                <div class="cont">
                                                    <div class="numb_item">
                                                        <small> {{ __('users.account_number') }} </small>
                                                        <p> {{ $bankAccount->item_number }} </p>
                                                    </div>
                                                    <div class="numb_item">
                                                        <small> {{ __('users.iban_number') }} </small>
                                                        <p> {{ $bankAccount->item_name }} </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        </div>
        
                <!-- ---------- register_header ----------- -->
        <!--<section class="register_header wow fadeInUp">-->
        <!--    <div class="container">-->
        <!--        <div class="row justify-content-between">-->
        <!--            <div class="col-lg-4">-->
        <!--                <div class="info">-->
        <!--                    <div class="section_head mb_50">-->
        <!--                        <h2> {{ __('users.invest_in') }}  <span class="mainColor"> {{ __('users.health_with_us') }} </span>   </h2>-->
        <!--                        <p> {{ __('users.do_not_miss_chance_now') }} <br> {{ __('users.advanced_training_reach_goals') }} </p>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div class="col-lg-6">-->
        <!--                <div class="instructions">-->
        <!--                    <div class="title">-->
        <!--                        <div class="icon">-->
        <!--                            <i class="fas fa-comment-alt-lines"></i>-->
        <!--                        </div>-->
        <!--                        <div class="cont">-->
        <!--                            <h6> {{ $page_7->currentDescription->title ?? "" }} </h6>-->
        <!--                            <p> {{ $page_7->currentDescription->subtitle ?? "" }} </p>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <div class="instructions_body">-->
        <!--                        {!! $page_7->currentDescription->description ?? "" !!}-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="transfer_content">-->
        <!--            <div class="row justify-content-center">-->
        <!--                <div class="col-lg-9">-->
        <!--                    <div class="top_info">-->
        <!--                        <img src="{{asset('assets/web/images/dumble.png')}}" alt="" class="float_img">-->
        <!--                        <div class="row justify-content-between">-->
        <!--                            <div class="col-lg-7">-->
        <!--                                <div class="inf">-->
        <!--                                    <h6> {{ __('users.program_reach_within') }} </h6>-->
        <!--                                    <p> {{ __('users.encounter_problem_registration') }} </p>-->
        <!--                                </div>-->
        <!--                            </div>-->
        <!--                            <div class="col-lg-4 mt-4 mt-lg-0">-->
        <!--                                <div class="whats text-start">-->
        <!--                                    <h6> {{ __('users.contact_support') }} </h6>-->
        <!--                                    <a href="tel:{{ $settings['site_phone'] ?? "" }}" target="_blank"> {{ __('users.whatsapp_number') }}  {{ $settings['site_phone'] ?? "" }} </a>-->
        <!--                                </div>-->
        <!--                            </div>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->

        <!--            <div class="row justify-content-center">-->
        <!--                <div class="col-lg-10">-->
        <!--                    <div class="transfer_cards">-->
        <!--                        <div class="row justify-content-between">-->
        <!--                            @foreach($bankAccounts as $bankAccount)-->
        <!--                                <div class="col-lg-4">-->
        <!--                                    <div class="transfer_card">-->
        <!--                                        <div class="title">-->
        <!--                                            <small> {{ $bankAccount->currentDescription->title ?? "" }} </small>-->
        <!--                                            <h6>-->
        <!--                                                <img src="{{ getImage($bankAccount->image) }}" alt="{{ $bankAccount->currentDescription->title ?? "" }}" class="icon"/>-->
        <!--                                                <span> {{ $bankAccount->currentDescription->subtitle ?? "" }} </span>-->
        <!--                                            </h6>-->
        <!--                                        </div>-->
        <!--                                        <div class="cont">-->
        <!--                                            <div class="numb_item">-->
        <!--                                                <small> {{ __('users.account_number') }} </small>-->
        <!--                                                <p> {{ $bankAccount->item_number }} </p>-->
        <!--                                            </div>-->
        <!--                                            <div class="numb_item">-->
        <!--                                                <small> {{ __('users.iban_number') }} </small>-->
        <!--                                                <p> {{ $bankAccount->item_name }} </p>-->
        <!--                                            </div>-->
        <!--                                        </div>-->
        <!--                                    </div>-->
        <!--                                </div>-->
        <!--                            @endforeach-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</section>-->
        
        <!-- ---------- register_form ----------- -->
        <section class="register_form wow fadeInUp" data-wow-delay="0.2s">
            <div class="container">
                <div class="section_head text-center">
                    <h2> {{ __('main.subscribe_now') }} </h2>
                    <p class="mainColor"> {{ __('main.your_turn_ready') }} </p>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-9">
                        <form action="{{ route('web.users.add_user') }}" method="post" class="form" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for=""> {{ __('users.email') }} </label>
                                        <input type="email" name="email"
                                               required value="{{ old('email') }}"
                                               class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}"
                                               placeholder="{{ __('users.email') }}" />
                                    </div>
                                    <div class="form-group">
                                        <label for=""> {{ __('members.username') }} </label>
                                        <input type="text" name="username"
                                               required value="{{ old('username') }}"
                                               class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }}"
                                               placeholder="{{ __('members.username') }}" />
                                    </div>
                                    <div class="form-group">
                                        <label for=""> {{ __('users.password') }} </label>
                                        <input type="password" name="password" required
                                               class="form-control input-password {{ $errors->has('password') ? 'is-invalid' : '' }}"
                                               placeholder="{{ __('users.password') }}"/>
                                        <span class="show_pass">
                                            <div class="form-check">
                                                <input class="form-check-input show-password" type="checkbox" value="" id="flexCheckDefault2">
                                                <label class="form-check-label p-0" for="flexCheckDefault2">
                                                    {{ __('users.show_it') }}
                                                </label>
                                              </div>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <label for=""> {{ __('members.hear_us') }} </label>
                                        <input type="text"
                                               name="hear_us" required value="{{ old('hear_us') }}"
                                               class="form-control {{ $errors->has('hear_us') ? 'is-invalid' : '' }}"
                                               placeholder="{{ __('members.hear_us') }}" />
                                    </div>
                                    <div class="form-group">
                                        <label for=""> {{ __('members.gender') }} </label>
                                        <div class="checks">
                                            <div class="form-check">
                                                <input class="form-check-input"
                                                       type="radio" name="gender"
                                                       value="male" id="gender_male"
                                                       checked @if(old('gender') == 'male') checked @endif />
                                                <label class="form-check-label" for="gender_male">
                                                    <i class="far fa-male me-1"></i> <span> {{ __("members.male") }} </span>
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input"
                                                       type="radio" name="gender"
                                                       value="female" id="gender_female"
                                                       @if(old('gender') == 'female') checked @endif />
                                                <label class="form-check-label" for="gender_female">
                                                    <i class="far fa-female me-1"></i> <span> {{ __("members.female") }} </span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for=""> {{ __('members.height') }} </label>
                                        <input type="number" min="0"
                                               name="height" required value="{{ old('height') }}"
                                               class="form-control {{ $errors->has('height') ? 'is-invalid' : '' }}"
                                               placeholder="{{ __('main.cm') }}"/>
                                    </div>
                                    <div class="form-group">
                                        <label for=""> {{ __('members.weight') }} </label>
                                        <input type="number" min="0"
                                               name="weight" required value="{{ old('weight') }}"
                                               class="form-control {{ $errors->has('weight') ? 'is-invalid' : '' }}"
                                               placeholder="{{ __('main.kg') }}"/>
                                    </div>
                                    <div class="form-group">
                                        <label for=""> {{ __('users.choose_payment_method') }} </label>
                                        <div class="checks pay_checks flex-wrap">
                                            <div class="form-check w-100 mb-3">
                                                <input class="form-check-input" type="radio"
                                                       name="payment_method" value="online_payment"
                                                       id="pay_online_payment" checked
                                                       @if(old('payment_method') == 'online_payment') checked @endif />
                                                <label class="form-check-label flex-wrap pay_label" for="pay_online_payment">
                                                    <!--<small> {{ __('users.online_pay_methods') }} </small>-->
                                                    <span> 
                                                        <img src="{{asset('assets/web/images/icons/mada.svg')}}" class="icon">
                                                        <small> مدى </small>
                                                    </span>
                                                    <span class="slash">/</span>
                                                    <span> 
                                                        <img src="{{asset('assets/web/images/icons/visa.png')}}" class="icon">
                                                        <small> فيزا </small>
                                                    </span>
                                                    <span class="slash">/</span>
                                                    <span> 
                                                        <img src="{{asset('assets/web/images/icons/master.png')}}" class="icon">
                                                        <small> ماستركارد </small>
                                                    </span>
                                                    <span class="slash">/</span>
                                                    <span> 
                                                        <img src="{{asset('assets/web/images/icons/apple_pay.png')}}" class="icon">
                                                        <small> apple pay </small>
                                                    </span>
                                                    <span class="slash">/</span>
                                                    <span> 
                                                        <img src="{{asset('assets/web/images/icons/stc.jpg')}}" class="icon">
                                                        <small> stc pay </small>
                                                    </span>
                                                </label>
                                            </div>
                                            <div class="form-check w-100">
                                                <input class="form-check-input" type="radio"
                                                       name="payment_method" value="bank_transfer"
                                                       id="pay_bank_transfer"
                                                       @if(old('payment_method') == 'bank_transfer') checked @endif />
                                                <label class="form-check-label" for="pay_bank_transfer">
                                                    <small> {{ __('users.bank_account') }} </small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="upload_group" id="upload_group">
                                        <div class="avatar-upload">
                                            <div class="avatar-edit">
                                                <input type='file' name="transfer_receipt" id="imageUpload" accept=".png, .jpg, .jpeg" />
                                                <label for="imageUpload">
                                                    <i class="fad fa-cloud-upload mainColor me-2"></i>
                                                    {{ __('users.upload_transfer_receipt') }}
                                                </label>
                                            </div>
                                            <div class="avatar-preview">
                                                <div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);">
                                                </div>
                                            </div>
                                        </div>
                                        <small class="text-danger d-block text-center"> * انواع الملفات المطلوبة - jpeg - jpg - png * </small>
                                    </div>
                                    <div class="text-center d-none d-lg-block">
                                        <button type="submit" class="butn butn_main w-100">
                                            <span> {{ __('users.subscription_confirmation') }} </span>
                                        </button>
                                        <small class="text-center fw-bold mt-2 d-block text-muted"> "{{ __('users.amounts_paid_not_refundable') }}" </small>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group ">
                                        <label for=""> {{ __('users.phone') }} </label>
                                        <input type="text" dir=""
                                               name="phone" required value="{{ old('phone') }}"
                                               class="form-control {{ $errors->has('phone') ? 'is-invalid' : '' }}"
                                               placeholder="993344555"/>
                                        <!--<div class="float_select">-->
                                        <!--    <select name="" class="form-select">-->
                                        <!--        <option value=""> +966 </option>-->
                                        <!--    </select>-->
                                        <!--</div>-->
                                    </div>
                                    <div class="form-group">
                                        <label for=""> {{ __('users.name') }} </label>
                                        <input type="text"
                                               name="name" required value="{{ old('name') }}"
                                               class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}"
                                               placeholder="{{ __('users.name') }}"/>
                                    </div>
                                    <div class="form-group">
                                        <label for=""> {{ __('users.password_confirmation') }} </label>
                                        <input type="password"
                                               name="password_confirmation" required
                                               class="form-control input-password {{ $errors->has('password_confirmation') ? 'is-invalid' : '' }}"
                                               placeholder="{{ __('users.password_confirmation') }}"/>
                                       <span class="show_pass">
                                            <div class="form-check">
                                                <input class="form-check-input show-password" type="checkbox" value="" id="flexCheckDefault3">
                                                <label class="form-check-label p-0" for="flexCheckDefault3">
                                                    {{ __('users.show_it') }}
                                                </label>
                                              </div>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <label for=""> {{ __('programs.program') }} </label>
                                        <div class="program_select">
                                            @foreach($programs as $program)
                                                <div class="form-check">
                                                    <input class="form-check-input program-input"
                                                           type="checkbox" name="programs[]"
                                                           data-price="{{ $program['price'] }}"
                                                           value="{{ $program['id'] }}" id="program_{{ $program['id'] }}"
                                                           @if($loop->index == 0) checked @endif
                                                           @if(in_array($program['id'], old('programs',  []))) checked @endif />
                                                    <label class="form-check-label" for="program_{{ $program['id'] }}">
                                                        {{ $program['currentDescription']['title'] ?? "" }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="checkout_card">
                                        <h6> {{ __('users.required_paid') }} </h6>
                                        <div class="pay_item">
                                            <span> {{ __('users.plan_price') }} </span>
                                            <span class="mainColor"> <span id="plan-price">0</span> {{ __('main.saudi_riyal') }} </span>
                                        </div>
                                        <div class="pay_item coupon-discount-wrapper">
                                            <span> {{ __('subscriptions.coupon_discount') }} </span>
                                            <del class="mainColor"> <span id="coupon-discount">0</span> {{ __('main.saudi_riyal') }} </del>
                                        </div>
                                        <div class="coupon_card">
                                            <div class="input_cont">
                                                <img src="{{asset('assets/web/images/icons/coupon.svg')}}" alt="" class="coupon">
                                                <input type="text" name="coupon" autocomplete="off" placeholder="{{ __('users.enter_discount_code') }}"/>
                                            </div>
                                            <button type="button" id="apply-coupon" class="butn butn_dark rounded-3 mt-0">
                                                <span> {{ __('users.applying') }} </span>
                                            </button>
                                            <button type="button" id="del-coupon" class="butn butn_del rounded-3 mt-0">
                                                <span> {{ __('general.delete') }} </span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center d-block d-lg-none">
                                <button type="submit" class="butn butn_main w-100">
                                    <span> {{ __('users.subscription_confirmation') }} </span>
                                </button>
                                <small class="text-center fw-bold mt-2 d-block text-muted"> "{{ __('users.amounts_paid_not_refundable') }}" </small>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <!-- ---------- instagram  ----------- -->
        @include('web.home.other._instagram')

    </main>

@endsection

@section('js')
    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    let imagePreview = $('#imagePreview');
                    imagePreview.css('background-image', 'url('+e.target.result +')');
                    $('.avatar-preview').addClass("d-block");
                    imagePreview.hide();
                    imagePreview.fadeIn(650);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#imageUpload").change(function() {
            readURL(this);
        });
    </script>

    <script>
        /*$(".pay_checks .form-check-input").change(function(){
            $("#upload_group").toggleClass("d-none")
        })*/

        $("input[name=payment_method]").change(function() {
            let paymentMethodValue = $(this).val(),
                transferReceiptUpload = $("#upload_group");
            if(paymentMethodValue === 'bank_transfer'){
                transferReceiptUpload.show();
            } else {
                transferReceiptUpload.hide();
            }
        });
        $("input[name=payment_method]:checked").trigger("change");
    </script>

    <script>
        let programInput = $(".program-input"),
            checkedProgramInputs = $(".program-input:checked");
        
        programInput.change(function() {
            calculateProgramsPrice();
        });
        checkedProgramInputs.trigger("change");
        
        function calculateProgramsPrice(){
            let planPrice = $("#plan-price");
            
            let programsPrice = [... programInput].reduce((total, el) =>
                total + (el.checked ? Number(el.dataset.price) : 0),
                0
            );
            
            planPrice.text(programsPrice); // .toFixed(2)
        }
    </script>

    <script>
        let planPrice = $('#plan-price'),
            couponDiscount = $('#coupon-discount'),
            couponDiscountWrapper = $('.coupon-discount-wrapper'),
            applyCouponBtn = $('#apply-coupon'),
            delCouponBtn = $('#del-coupon');
        couponDiscountWrapper.hide();
        delCouponBtn.hide();
        
        $(document).on('click', '#apply-coupon', async function(event) {
            let coupon = $('[name=coupon]').val().trim();
            if(!coupon){return;}

            const callAjaxResponse = await callAjax({
                data: $(this).closest('form').serialize(),
                url: "{{ route('web.apply_coupon') }}",
                method: 'post'
            });
            if(callAjaxResponse){
                planPrice.text(callAjaxResponse.new_price);
                couponDiscount.text(callAjaxResponse.coupon_discount);
                couponDiscountWrapper.show();
                
                $(this).hide();
                delCouponBtn.show();
            }else{
                resetCoupon();
            }
        });
        
        function resetCoupon(){
            calculateProgramsPrice();
            couponDiscount.text(0);
            couponDiscountWrapper.hide();
        }
        
        $(document).on('click', '#del-coupon', function(event) {
            $('[name=coupon]').val('');
            resetCoupon();
            $(this).hide();
            applyCouponBtn.show();
        });
        
        $('[name=coupon]').keyup(function(event){
            if(!$(this).val()){
                resetCoupon();
                delCouponBtn.hide();
                applyCouponBtn.show();
            }
        });
    </script>
@endsection