@extends('layouts.public')
@section('title', 'Program | Kenya Diaspora Alliance')
@section('content')
    <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page-header-inner text-center">
                        <h1 class="page-title">
                            Program
                        </h1>
                        <ul>
                            <li>
                                <a class="active" href="{{ route('welcome') }}">Home</a>
                            </li>
                            <li>Program</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section id="pricing" class="section-padding bg-white">
        <div class="container rounded-3 text-center">
            <img src="{{ asset('storage/program/program-intro.jpg') }}" alt="Program"
                class="img-fluid rounded-2 mb-3 ">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs d-none" id="program" role="tablist">
                <li class="nav-item fs-6 " role="presentation">
                    <button class="nav-link active" id="dayone-tab" data-bs-toggle="tab" data-bs-target="#dayone"
                        type="button" role="tab" aria-controls="dayone" aria-selected="true"><small class="fs-6">6th
                            Wed</small></button>
                </li>
                <li class="nav-item fs-6 " role="presentation">
                    <button class="nav-link" id="daytwo-tab" data-bs-toggle="tab" data-bs-target="#daytwo" type="button"
                        role="tab" aria-controls="daytwo" aria-selected="false"><small class="fs-6">7th
                            Thur</small></button>
                </li>
                <li class="nav-item fs-6 " role="presentation">
                    <button class="nav-link" id="daythree-tab" data-bs-toggle="tab" data-bs-target="#daythree"
                        type="button" role="tab" aria-controls="daythree" aria-selected="false"><small
                            class="fs-6">8th Fri</small>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" href="{{ asset('storage/program/Full KDHC Program v5.pdf') }}" download>
                        <i class="bi bi-download"></i>
                    </a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content d-none">
                <div class="tab-pane active" id="dayone" role="tabpanel" aria-labelledby="dayone-tab">
                    <div class="row row-cols-1 row-cols-md-2 g-3 p-3">
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00002.jpg') }}" alt="One"
                                class="img-fluid ">
                        </div>
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00003.jpg') }}" alt="Two"
                                class="img-fluid ">
                        </div>
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00004.jpg') }}" alt="Three"
                                class="img-fluid">
                        </div>
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00005.jpg') }}" alt="Three"
                                class="img-fluid">
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="daytwo" role="tabpanel" aria-labelledby="daytwo-tab">
                    <div class="row row-cols-1 row-cols-md-2 g-3 p-3">
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00006.jpg') }}" alt="One"
                                class="img-fluid ">
                        </div>
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00007.jpg') }}" alt="Two"
                                class="img-fluid ">
                        </div>
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00008.jpg') }}" alt="Three"
                                class="img-fluid">
                        </div>
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00009.jpg') }}" alt="One"
                                class="img-fluid ">
                        </div>
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00010.jpg') }}" alt="Two"
                                class="img-fluid ">
                        </div>
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00011.jpg') }}" alt="Three"
                                class="img-fluid">
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="daythree" role="tabpanel" aria-labelledby="daythree-tab">
                    <div class="row row-cols-1 row-cols-md-2 g-3 p-3">
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00012.jpg') }}" alt="Three"
                                class="img-fluid">
                        </div>
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00013.jpg') }}" alt="Three"
                                class="img-fluid">
                        </div>
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00014.jpg') }}" alt="Two"
                                class="img-fluid ">
                        </div>
                        <div class="col">
                            <img src="{{ asset('storage/program/Full KDHC Program v5_00015.jpg') }}" alt="Three"
                                class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection