@extends('web.layouts.main')
@section('content')


<main>
        <!-- ---------- packages_header_sec ----------- -->
        <section class="packages_header_sec wow fadeInUp slow">
            <div class="container">
                <div class="content">
                    <h2> {{$title}} </h2>
                </div>
            </div>
        </section>

        <!-- ---------- packages_cards_sec ----------- -->
        <section class="packages_cards_sec">
            <div class="container">
                <div class="packages_top_img">
                    @foreach($sectionsFooter as $section)
                    <a href="{{url(getCurrentLocale().'/packages?type='.$section->id)}}" class="img @if($section->id == $request->type) active @endif">
                        <img src="{{asset($section->image)}}" alt="">
                        <h6> {{$section->descriptions()->name}} </h6>
                    </a>
                    @endforeach
                </div>
                @if($type)
                <form action="{{url(getCurrentLocale().'/packages/subscribe')}}" method="POST" onsubmit="saveForm(this)">
                    @CSRF
                    <div class="row">
                        <div class="col-12">
                            <div class="form-check form-switch">
                                <label class="form-check-label" for="">{{__('web.men')}}</label>
                                <input class="form-check-input" onchange="GenderPackage(this)" data-id="{{$type}}" type="checkbox" id="flexSwitchCheckChecked" value="male">
                                <label class="form-check-label" for="">{{__('web.women')}}</label>
                            </div>
                        </div>
                    </div>
                
                    <div class="packages_cards" id="packages">
                        @if(count($packages) > 0 )
                            <div class="row">
                                @foreach($packages as $package)
                                    <div class="col-lg-4">
                                        <div class="packages_card wow fadeInUp slow">
                                            <div class="img">
                                                <img src="{{asset($package->image)}}" alt="">
                                            </div>
                                            <div class="info">
                                                <h2 class="text-center"> {{__('web.package')}} <span class="mainColor"> {{ $package->descriptions()->name }} </span> </h2>
                                                <div class="text text-center mb-4">
                                                    {{ $package->descriptions()->description }}
                                                </div>
                                                <!-- ------------- package card ------------- -->
                                                @foreach($package->specieses as $species)
                                                <div class="form-check packages_card_check">
                                                    <div class="packages_card_choose">
                                                        <div class="inf">
                                                            <h6> {{$species->species->descriptions()->name}} <small> {{$species->calories}} {{__('web.calories')}} </small> </h6>
                                                            <div class="choose_days_select">
                                                                 @foreach($species->costs as $key=>$row)
                                                                <label class="form-check-label">
                                                                    {{$row->day->day}} {{__('web.days')}}
                                                                </label>
                                                                @if($key != count($species->costs)-1)
                                                                    <span class="dash mx-2"> / </span>
                                                                @endif
                                                                @endforeach
                                                               
                                                            </div>
                                                        </div>
                                                        <div class="price_start">
                                                            {{__('web.start_cost')}} {{$package->minCost()}} {{__('web.sar')}}
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--<div class="form-check packages_card_check">-->
                                                <!--    <input class="form-check-input packages_card_input" type="radio" name="packages_card" value="{{$species->id}}"-->
                                                <!--        id="packages_card{{$species->id}}" value="option1">-->
                                                <!--    <label class="form-check-label packages_card_label" for="packages_card{{$species->id}}">-->
                                                <!--        <div class="packages_card_choose">-->
                                                <!--            <div class="row gx-2 align-items-center">-->
                                                <!--                <div class="col-8">-->
                                                <!--                    <div class="inf">-->
                                                <!--                        <h6> {{$species->species->descriptions()->name}} <small> {{$species->calories}} {{__('web.calories')}} </small> </h6>-->
                                                <!--                        <div class="choose_days_select">-->
                                                <!--                            @foreach($species->costs as $row)-->
                                                <!--                            <div class="form-check form-check-inline">-->
                                                <!--                                <input class="form-check-input" type="radio" onclick="CostDaySelect(this)" package-id="{{$package->id}}" target-id="{{$species->id}}" value="{{$row->id}}" name="choose_days"-->
                                                <!--                                    id="choose_days{{$row->id}}" value="option1">-->
                                                <!--                                <label class="form-check-label" for="choose_days{{$row->id}}">-->
                                                <!--                                    {{$row->day->day}} {{__('web.days')}}-->
                                                <!--                                </label>-->
                                                <!--                            </div>-->
                                                <!--                            @endforeach-->
                                                <!--                        </div>-->
                                                <!--                    </div>-->
                                                <!--                </div>-->
                                                <!--                <div class="col-4">-->
                                                <!--                    <div class="price" id="price{{$package->id}}species{{$species->id}}">  </div>-->
                                                <!--                </div>-->
                                                <!--            </div>-->
                                                <!--        </div>-->
                                                <!--    </label>-->
                                                <!--</div>-->
                                                @endforeach
                                            </div>
                                            <a href="{{url(getCurrentLocale().'/subscribe?package_id='.$package->id)}}" class="butn butn_main_line w-100 mt-4 rounded-pill">
                                                <span> {{__('web.subscribe_now')}} </span>
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-5 mt-5">
                                <div class="alert alert-warning py-5" role="alert">
                                    <h5 class="mb-0"> {{__('web.not_exists_packages')}} </h5>
                                </div>
                            </div>
                        @endif
                    </div>
                </form>
                @endif
            </div>
        </section>

        <!-- ---------- subscribe_sec ----------- -->
        @include('web.pages.components.subscribe_plan',['page'=>$page])

    </main>


    @push('js')
        <script>
            let url_gender = {!! json_encode(url(getCurrentLocale().'/packages/gender')) !!}
            let url_select_day = {!! json_encode(url(getCurrentLocale().'/packages/select/day')) !!}
            let sar = {!! json_encode(__('web.sar')) !!}
        </script>
        <script src="{{url('')}}/assets/web/js/custom/packageAction.js"></script>
        
        <script>
            $(".choose_days_select .form-check-label , .choose_days_select .form-check-input").on("click" , function(){
                $(this).parents(".packages_card_label").click();
            })
        </script>
    @endpush
@stop