@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- ---------- program_content ----------- -->
        <section class="profile_content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="profile_side_nav wow fadeInUp">
                            <div class="user_img">
                                <img src="{{ getImage(auth()->user()->image, 'assets/web/images/user.png') }}" alt=""/>
                                <h6> {{ auth()->user()->name }} </h6>
                            </div>
                            <div class="subscribe_card">
                                <h5> {{ __('users.subscription_plan') }} </h5>
                                <p> {{ __('users.you_now_subscribed').' ('.implode(' - ', auth()->user()->programs_names ?? []).')' }} </p>
                            </div>
                            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link {{ getTabsClasses('info', $tab)['nav'] }}" id="pills-tab1-tab" data-bs-toggle="pill" data-bs-target="#pills-tab1" type="button" role="tab" aria-controls="pills-tab1" aria-selected="true">
                                        <span class="icon"> <i class="fal fa-user"></i> </span> <span> {{ __('users.profile_personly') }} </span>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link {{ getTabsClasses('programs', $tab)['nav'] }}" id="pills-tab2-tab" data-bs-toggle="pill" data-bs-target="#pills-tab2" type="button" role="tab" aria-controls="pills-tab2" aria-selected="false">
                                        <span class="icon"> <i class="fal fa-clipboard-list"></i> </span> <span> {{ __('users.subscribed_programs') }} </span>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link {{ getTabsClasses('calculator', $tab)['nav'] }}" id="pills-tab3-tab" data-bs-toggle="pill" data-bs-target="#pills-tab3" type="button" role="tab" aria-controls="pills-tab3" aria-selected="false">
                                        <span class="icon"> <i class="fal fa-calculator-alt"></i> </span> <span> {{ __('programs.calculator') }} </span>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <form action="{{ route('web.users.logout') }}" method="post">
                                        @csrf
                                        <button class="nav-link" type="submit">
                                            <span class="icon"> <i class="fal fa-sign-out"></i> </span> <span> {{ __('users.sign_out') }} </span>
                                        </button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-9 ps-lg-5">
                        <div class="tab-content wow fadeInUp" data-wow-delay="0.2s" id="pills-tabContent">
                            <div class="tab-pane fade {{ getTabsClasses('info', $tab)['tab'] }}" id="pills-tab1" role="tabpanel" aria-labelledby="pills-tab1-tab">
                                <div class="tab_content">
                                    <div class="tab_title">
                                        <h5> {{ __('users.profile_personly') }} </h5>
                                        <p> {{ __('users.modify_details') }} </p>
                                    </div>
                                    <div class="tab_body">
                                        <form action="{{ route('web.users.update_profile', auth()->user()->id) }}" method="post">
                                            @method('PUT')
                                            @csrf
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label for=""> {{ __('users.email') }} </label>
                                                        <input type="email"
                                                               required name="email"
                                                               value='{{ old("email", auth()->user()->email ?? "") }}'
                                                               class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}"
                                                               placeholder="{{ __('users.email') }}" />
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group ">
                                                        <label for=""> {{ __('users.phone') }} </label>
                                                        <input type="text" dir="ltr"
                                                               required name="phone"
                                                               value='{{ old("phone", auth()->user()->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>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label for=""> {{ __('members.username') }} </label>
                                                        <input type="text"
                                                               required name="username"
                                                               value='{{ old("username", auth()->user()->username ?? "") }}'
                                                               class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }}"
                                                               placeholder="{{ __('members.username') }}" />
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label for=""> {{ __('users.name') }} </label>
                                                        <input type="text"
                                                               required name="name"
                                                               value='{{ old("name", auth()->user()->name ?? "") }}'
                                                               class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}"
                                                               placeholder="{{ __('users.name') }}" />
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label for=""> {{ __('members.weight') }} </label>
                                                        <input type="number" min="0"
                                                               required name="weight"
                                                               value='{{ old("weight", auth()->user()->weight ?? "") }}'
                                                               class="form-control {{ $errors->has('weight') ? 'is-invalid' : '' }}"
                                                               placeholder="{{ __('members.weight') }}" />
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label for=""> {{ __('members.height') }} </label>
                                                        <input type="number" min="0"
                                                               required name="height"
                                                               value='{{ old("height", auth()->user()->height ?? "") }}'
                                                               class="form-control {{ $errors->has('height') ? 'is-invalid' : '' }}"
                                                               placeholder="{{ __('members.height') }}" />
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label for=""> {{ __('users.password') }} </label>
                                                        <input type="password"
                                                               name="password"
                                                               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="flexCheckDefaultPassword">
                                                                <label class="form-check-label p-0" for="flexCheckDefaultPassword">
                                                                    {{ __('users.show_it') }}
                                                                </label>
                                                            </div>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label for=""> {{ __('users.password_confirmation') }} </label>
                                                        <input type="password"
                                                               name="password_confirmation"
                                                               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="flexCheckDefaultConfirm">
                                                                <label class="form-check-label p-0" for="flexCheckDefaultConfirm">
                                                                    {{ __('users.show_it') }}
                                                                </label>
                                                              </div>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="submit" class="butn butn_main mt-4">
                                                <span> {{ __('users.save') }} </span>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade {{ getTabsClasses('programs', $tab)['tab'] }}" id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab2-tab">
                                <div class="tab_content programs_tab">
                                    <div class="tab_title">
                                        <h5> {{ __('users.subscribed_programs') }} </h5>
                                        <p> {{ __('users.plans_programs') }} </p>
                                    </div>
                                    <div class="row">
                                        @foreach($profilePrograms as $program)
                                            <div class="col-lg-6">
                                                <div class="program_card">
                                                    <a href="{{ route('web.programs.show', $program->id) }}" class="float_icon">
                                                        <i class="far fa-external-link"></i>
                                                    </a>
                                                    <div class="title mt-2 mb-4">
                                                        <h6 class="fw-bolder"> {{ $program->currentDescription->title ?? '' }} </h6>
                                                        <small class="mainColor"> {{ $program->currentDescription->subtitle ?? '' }} </small>
                                                    </div>
                                                    <div class="img mb-4">
                                                        <img src="{{ getImage($program->image) }}"
                                                             alt="{{ $program->currentDescription->title ?? '' }}" />
                                                    </div>
                                           
                                                    <div class="price">
                                                        <h5> {{ $program->price }} <span> {{ __('main.saudi_riyal') }} </span> </h5>
                                                    </div>
                                                    <div class="cont profile-program-details">
                                                        {!! $program->currentDescription->description ?? '' !!}
                                                    </div>
                                                             <a href="javascript:;" class="butn bg-white w-100 disabled mt-4">
                                                        <span> {{ __('users.already_subscribed') }} </span>
                                                    </a>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade {{ getTabsClasses('calculator', $tab)['tab'] }}" id="pills-tab3" role="tabpanel" aria-labelledby="pills-tab3-tab">
                                <div class="tab_content">
                                    <div class="tab_title">
                                        <h5> {{ __('programs.calculator') }} </h5>
                                        <p> {{ __('users.calculate_daily_calorie') }} </p>
                                    </div>
                                    <div class="tab_body">
                                        <form action="{{ route('web.programs.calculate_tdee') }}" method="post" id="calculator-form">
                                            @csrf
                                            <input type="hidden" name="unit" value="metric" />
                                            <input type="hidden" name="formula" value="mifflin_st_jeor" />
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label for=""> {{ __('members.gender') }} <span class="mainColor"> * </span> </label>
                                                        <div class="checks">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="radio"
                                                                       name="gender" value="male" id="gender_male" required checked />
                                                                <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" />
                                                                <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>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label for=""> {{ __('users.age') }} <span class="mainColor"> * </span> </label>
                                                        <input type="number" name="age" required class="form-control" placeholder=""/>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label for=""> {{ __('members.weight') .'('.__('main.kg').')' }}  <span class="mainColor"> * </span> </label>
                                                        <input type="number" name="weight_metric" required class="form-control" placeholder=""/>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label for=""> {{ __('members.height') .'('.__('main.cm').')' }} <span class="mainColor"> * </span> </label>
                                                        <input type="number" name="height_metric" required class="form-control" placeholder=""/>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group select_group">
                                                        <label for=""> {{ __('users.activity') }} </label>
                                                        <select name="activity" class="form-select form-control bg-white">
                                                            @foreach([
                                                                        'sedentary', 'light_exercise', 'moderate_exercise',
                                                                        'heavy_exercise', 'athlete'
                                                                     ] as $activity)
                                                                <option value="{{ $activity }}">{{__("users.$activity")}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <button type="submit" class="butn butn_main w-100 mt-5">
                                                        <span> {{ __('users.calculate') }} </span>
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                        <div class="calc_result">
                                            <h4 class="result_title"> <span> {{ __('users.result') }} </span> </h4>
                                            <div class="sub_title">
                                                <p> {{ __('users.consuming_rate') }}: <strong id="calculator-result"> 0 </strong> {{ __('users.calories_per_day') }}  </p>
                                            </div>
                                        </div>
                                        <h6 class="mt-5 text-center">   <span class="mainColor">  *{{ __('general.note') }}: </span> {{ __('users.calorie_needs_change') }} </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection

@section('js')
    <script>
        $('.profile-program-details ul li')
            .prepend('<span class="icon text-success me-3"> <i class="fal fa-check"></i> </span>');

        $("#calculator-form").submit(async function(event) {
            event.preventDefault();
            let formAction = $(this).attr('action'),
                formMethod = $(this).attr('method');

            const callAjaxResponse = await callAjax({
                data: $(this).serialize(),
                url: formAction,
                method: formMethod
            });
            if(callAjaxResponse){
                $('#calculator-result').text(callAjaxResponse.calories);
            }
        });
    </script>
@endsection