@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/pages_style.css') }}" />
@endsection
@section('content')
    <!-- ---------- inner_header ----------- -->
    <section class="inner_header">
        <div class="container">
            <div class="content">
                <h3>{{$title}}</h3>
                <div class="links">
                    <a href="{{LaravelLocalization::getLocalizedURL($lang, route('home'), [], true)}}" class="nav_link">

                        <img src="{{asset('assets/web/images/logo_shape.png')}}" alt="" class="icon">
                        <span>{{__('main.home')}}</span>
                    </a>
                    <a href="#" class="nav_link active">
                        <img src="{{asset('assets/web/images/logo_shape.png')}}" alt="" class="icon">
                        <span>{{$title}}</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="terms_page section_padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                        <button class="nav-link active" id="v-pills-terms-tab" data-bs-toggle="pill" data-bs-target="#v-pills-terms" type="button" role="tab" aria-controls="v-pills-terms" aria-selected="true">{{$page->terms_conditions_title}}</button>
                        <button class="nav-link" id="v-pills-privacy-tab" data-bs-toggle="pill" data-bs-target="#v-pills-privacy" type="button" role="tab" aria-controls="v-pills-privacy" aria-selected="false">{{$page->privacy_policy_title}}</button>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="tab-content" id="v-pills-tabContent">
                        <div class="tab-pane fade show active" id="v-pills-terms" role="tabpanel" aria-labelledby="v-pills-terms-tab">
                            <div class="tab_content_info">
                                <div class="row justify-content-center">
                                    <div class="col-lg-10">
                                        <div class="content">
                                            <div class="title">
                                                {{$page->terms_conditions_title}}
                                            </div>

                                            @foreach($termsConditionsDescription as $termsItem)
                                                <div class="text">
                                                    <i class="bi bi-check-circle-fill"></i>
                                                {{$termsItem}}
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="v-pills-privacy" role="tabpanel" aria-labelledby="v-pills-privacy-tab">
                            <div class="tab_content_info">
                                <div class="row justify-content-center">
                                    <div class="col-lg-10">
                                        <div class="content">
                                            <div class="title">
                                                {{$page->privacy_polciy_title}}
                                            </div>
                                            @foreach($privacyPolicyDescription as $privacyItem)
                                                <div class="text">
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    {{$privacyItem}}
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>

        let pageName = "{{$pageName}}";

        if(pageName === 'terms-condition'){
            $('#v-pills-terms-tab').trigger('click');
        }

        if(pageName === 'privacy-policy'){
            $('#v-pills-privacy-tab').trigger('click');
        }

    </script>
@endsection