@extends('layouts.frontend')

@section('title', 'About')

@section('content')
    <div class="page-content" style="margin-bottom:50px;">
        <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 class="btn btn-outline-info" href="{{ $settings_->where('key', 'link')->first()->value ?? '#' }}" 
                style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;margin: 0 auto; width:70%; border: white"
                target="_blank">
                <img src="{{ asset('telegram2.png') }}" style="width:30px;">
                Contact Customer Service
            </a>
            <div style="color: #cccac7">
                <p class="text-center text-light"><span class="badge text-bg-warning"><i class="bi bi-alarm-fill"> </i>Operating hours: 09:00-20:00</span>
                </p>
            </div>
        </div>

        @foreach ($how_to as $k => $val)
            <button type="button" class="btn btn-light w-100 rounded-pill my-1 shadow"
                style="margin-bottom:10px;border: #252525 !important;" data-bs-toggle="modal"
                data-bs-target="#exampleModalToggle1{{ ++$k }}">{{ $val['title'] }}</button>


            <div class="modal fade" id="exampleModalToggle1{{ $k }}" aria-hidden="true"
                aria-labelledby="exampleModalToggle1{{ $k }}" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header " style="box-shadow: 0px 0px 0px 0px #030303; ">
                            <h1 class="modal-title fs-5" style="
                                font-size: 1rem !important;" id="exampleModalToggle1{{ $k }}">{{ $k }}.
                                {{ $val['title'] }}</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            {{$val['desc']}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- end modal popup -->
        @endforeach
    </div>
@endsection