@extends('layouts.frontend')

@section('title', 'About')

@section('content')
<div class="mb-4 py-1 card-bg">
    <a href="{{route('home')}}" class="text-decoration-none">
        <i class="fa-solid fa-arrow-left gray-color fs-4 ps-2 text-white"></i>
    </a>
    <p class="d-inline-block fs-4 fw-bold mb-0 ms-2 text-white text-center small-header">Contact</p>
    
</div>

<div class="rounded p-3 card-bg custom-shadow px-">
    <a href="{{ $settings_->where('key', 'link')->first()->value ?? '#' }}" class="text-decoration-none">
        <div class="row rounded main-border p-2 m-0 ">
            <div class="col-2">
                <img src="{{ asset('fronts\assets\icons\telegram.png') }}" style="width:40px;">
            </div>
            <div class="col-10 text-white">
                <p class="pt-2 mb-0">
                    Contact Customer Service
                </p>
            </div>
        </div>
    </a>
    <p class="mb-0 text-white text-center mt-2">
        Working hours: 08:00 AM - 09:00 PM
    </p>
</div>
<br>

<div class="card-bg rounded p-2 custom-shadow">
    @foreach ($how_to as $k => $val)
        <div class="row main-border rounded card-bg mx-0 mb-2">
            <div class="col-1">
                <div class="w-50">
                    <p class="mb-0 py-2 text-white">
                        {{++$k}}.
                    </p>
                </div>
            </div>
            <div class="col-11 " data-bs-toggle="collapse" href="#collap{{$k}}" role="button" aria-expanded="false" aria-controls="collap{{$k}}">
                <p class="mb-0 py-2 text-white" >
                    {{$val['title']}}
                </p>
            </div>
            <p class="mt-2 text-white collapse" id="collap{{$k}}" >
                {{$val['desc']}}
            </p>
        </div>
    @endforeach
</div>

@endsection