@extends('front.master')

@section('title', 'Training')

@section('content')
    <style>
        .certificate {
            background-color: #ddfdff78;
        }

        .enroll-btn {
            background-color: #40999d;
            color: white;
        }

        .inactive {
            background-color: #ddfdff78;
            border-radius: 6px;
        }

        .certificate-span {
            background-color: rgb(240, 239, 239);
        }

        .box3 img {
            position: absolute;
            top: -65px;
        }

        .nav-pills .nav-link.active {
            color: #40999d !important;
            background-color: transparent
        }

        .nav-pills .nav-link {
            border-bottom: 1px solid #dbdbdb;
            color: #000000 !important;
            font-weight: bold;
        }

        .show-btn {
            border: 1px solid #40999d;
            background-color: #40999d;
            color: white;
            height: 60px;
        }

        .explore-btn {
            border: 1px solid white;
            background-color: white;
            color: #40999d;
        }

        .section2 {
            background-color: #ddfdff78;
        }

        .join-input {
            height: 60px;
        }

        .join-h1 {
            font-size: 40px;
        }

        .category-h1 {
            font-size: 40px;
            color: white;
        }

        .training-banner {
            background-color: #e7f1f1;
            color: #000000;
        }

        /* .training-img {
            filter: invert(1);
        } */
        .certificate-header .box {
            background-color: #e7f1f1;
        }
        .training-card-body {
            background-color: #e7f1f1;
        }
        .training-banner-span {
            position: relative;
        }
        .training-banner-span::before {
            position: absolute;
            content: "";
            width: 130px;
            height: 4px;
            bottom: -5px;
            border-radius: 5px;
            background-color: #40999d;
        }
        /* .video-card {
            background-color: #d3d3d32e;
            border-radius: 12px;
        } */
        .video-card p {
            text-align: justify;
        }
        .video-bg-box {
            background-color: #40999d;
            padding: 75px 0;
        }
        .video-bg-box iframe {
            position: relative;
            right: -80px;
        }
    </style>
    <section class="training-banner mb-5">
        <div class="container-fluid p-5">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-5 px-4">
                        <h1 class="category-h1 mb-4 text-dark text-center"><strong>Stay Ahead of the
                            <span class="d-block training-banner-span">Game</span></strong></h1>
                        <p class="mb-5 text-dark">From start to finish, from inside the classroom to management, our tailored courses and training sessions give you the tools to realize your individual education goals.</p>
                        {{-- <a href="#" class="explore-btn px-5 py-3 rounded text-decoration-none">Explore</a> --}}
                    </div>
                    <div class="col-md-7 text-center">
                        <img src="{{ asset('front/img/genZ.png') }}" alt="" class="w-75 training-img">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="video-section my-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="video-card pt-5 px-5 pb-0 mb-5">
                        @if (count($training_video) > 0)
                            @foreach ($training_video as $training)
                            <div class="row align-items-center">
                                @if ($training->video)
                                    <div class="col-md-6">
                                        <div class="video-bg-box">
                                            <iframe class="shadow bg-white p-3" src="{{ asset('uploads/trainingvideo/' . $training->video) }}" width="95%" height="375px"
                                                style="border: none;"
                                                allowfullscreen>
                                            </iframe>
                                        </div>
                                    </div>
                                @endif
                                <div class="col-md-5 offset-1">
                                    <h2 class="category-h1 mb-4 text-dark training-banner-span mt-5"><strong>{{ $training->title ?? "" }}</strong></h2>
                                    <p class="mb-0 text-dark mb-0">{!! $training->description ?? "" !!}</p>
                                </div>
                            </div>
                            @endforeach
                        @else
                            <h3 class="text-center">No Training Video Found</h3>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="certificate-header">
        <div class="container-fluid">
            <div class="container my-4">
                <div class="row">
                    <div class="col-md-4">
                        <div class="box p-4 h-100">
                            <h4 class="text-dark text-center"><b>Category</b></h4>
                            <ul class="nav nav-pills mt-4">
                                @foreach ($categories as $category)
                                @php
                                    $id = $category->id;
                                    $courses = DB::table('courses')->where('category_id', $id)->count();
                                @endphp
                                    <li class="nav-item w-100 {{ $loop->first ? '' : 'mt-2' }}">
                                        <a class="categoryFilter nav-link d-flex justify-content-between {{ $loop->first ? 'active' : '' }} text-secondary"
                                            data-id="{{ $category->id }}" data-toggle="pill"
                                            href="#catetgory{{ $loop->iteration }}"><span>{{ $category->name }}</span> <span>({{ $courses }})</span></a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div id='category'>
                            <div class="tab-content">
                                @foreach ($categories as $category)
                                    <div class="tab-pane container {{ $loop->first ? 'active' : '' }}" id="category{{ $loop->iteration }}">
                                        <div class="row">
                                            @if (count($category->courses) > 0)
                                                @foreach ($category->courses as $item)
                                                    @if (!in_array($item->id, $data) && $item->status == 1 && count($item->modules) > 0)
                                                        <div class="col-md-4 mb-4">
                                                            <div class="card border-0 rounded-0 shadow-none h-100">
                                                                <a href="{{ url('course/' . urlencode(base64_encode($item->id))) . '/detail' }}" class="text-decoration-none">
                                                                    <img class="card-img-top rounded-0" src="{{ Storage::url('uploads/course/' . $item->image) }}" alt="Card image" style="width:100%; height: 150px; object-fit: cover;">
                                                                    <div class="card-body training-card-body">
                                                                        <h5 class="card-title text-dark">{{ $item->title }} </h5>
                                                                    </div>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            @else
                                            <div class="col-12 d-flex justify-content-center align-items-center">
                                                <h1>No Course Found</h1>
                                            </div>

                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- <section class="section2 mt-5">
    <div class="container-fluid p-5">
         <div class="container py-5">
              <div class="row align-items-center">
                   <div class="col-md-4">
                        <h1 class="join-h1 mb-0"><strong>Join Our Community!</strong></h1>
                        <div class="progress w-50 mb-4" style="height: 5px;">
                             <div class="progress-bar" style="width:100%; height: 5px; background-color: #40999d;"></div>
                        </div>
                        <p class="mb-0">Stay up to date on the latest news and developments in the world of education.</p>
                   </div>
                   <div class="col-md-8">
                        <form>
                             <div class="input-group mb-0">
                                  <input type="email" class="form-control join-input rounded-0" placeholder="Enter your email here.">
                                  <div class="input-group-append">
                                      <a href="#" class="input-group-text show-btn rounded-0 px-5 text-decoration-none">Subscribe Now</a>
                                  </div>
                             </div>
                        </form>
                   </div>
              </div>
         </div>
    </div>
</section> --}}

@endsection

@push('custom-scripts')
    <script type="text/javascript" src="https://demo.dashboardpack.com/architectui-html-free/assets/scripts/main.js">
    </script>
    @if (session('signin_modal'))
        <script>
            $(document).ready(function() {
                $('.loignmodal').trigger('click');
            });
        </script>
    @endif

    <script>
        $(document).ready(function() {


            //filter category
            $(document).on('click', '.categoryFilter', function(event) {
                var id = $(this).attr('data-id');

                $.ajax({
                    type: 'GET',
                    url: "{{ url('/category-filter') }}",
                    data: {
                        'id': id
                    },
                    success: function(response) {
                        console.log(response);
                        $('#category').replaceWith(response);
                    },
                });
            });


        });
    </script>

@endpush