@extends('layouts.frontend')

@section('title', 'About')

@section('content')
    <div class="page-content p-0">
        <h3 class="py-2 text-bg-dark text-center mb-0">Online Services</h3>

        <img src="{{ asset('assets/images/call-center2.jpg') }}" alt="call-center"
            class="img-thumbnail w-100 p-0 border-0 bg-transparent rounded-0">
        <div class="row" style="background-color: #ffffffe0;">
            <a href="{{ $settings_->where('key', 'link')->first()->value ?? '#' }}" class="btn btn-primary" style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;margin: 5px 15%;width:70%;background-color: #f60005;" target="_blank">
                <img src="{{asset('telegram.png')}}" style="width:30px;">
                Contact Customer Service
            </a>
             <div style="color: #a26c00">
                <p class="text-center">Operating hours: 09:00-20:00</p>
            </div>
        </div>

     <!--    <div class="d-flex flex-column px-5 d-none">
            <a href="#" class="btn btn-success my-1">
                Contact Customer Service <img src="{{ asset('assets/images/telegram.png') }}" class="shadow-lg" alt="telegram"
                    width="25" height="25">
            </a>
            <a href="#" class="btn btn-success my-1">
                Contact Customer Service <img src="{{ asset('assets/images/line.png') }}" class="shadow-lg" alt="line"
                    width="25" height="25">
            </a>
            <div style="background-color:red">
                <p class="text-center">operating hours10:00-22:00</p>
            </div>

        </div> -->


        <div class="accordion" id="accordionHowTo">
            @foreach ($how_to as $k => $val)
            <div class="accordion-item card" style="margin-bottom:10px;box-shadow:0px 5px 9px 0px #000000 !important;">
                <h2 class="accordion-header" id="heading{{++$k}}">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$k}}"
                        aria-expanded="{{$loop->first?'true':'false'}}" aria-controls="collapse{{$k}}">
                        {{$k}}. {{$val['title']}}
                    </button>
                </h2>
                <div id="collapse{{$k}}" class="accordion-collapse collapse {{$loop->first?'show':''}}" aria-labelledby="heading{{$k}}"
                    data-bs-parent="#accordionHowTo">
                    <div class="accordion-body">
                        {{$val['desc']}}
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="py-2"></div>
    </div>
@endsection