@extends('layouts.app')

@section('content')
    <section class="content">
        <div class="container-fluid">

            <div class="px-sm-4">

                <div class="row mt-2 mt-sm-3">
                    <div class="col-md-7 col-10">
                        <div class="top-head">
                            <h1>Training</h1>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/home">Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Training</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="col-md-5 col-2 text-right">
                        <div class="d-flex justify-content-end">

                            <div class="top-search-bar d-sm-block d-none mr-3">

                                <form class="search-form" role="search">
                                    <div class="form-group pull-right {{ isset($search) && $search ? 'sb-search-open' : '' }}"
                                        id="searchnew">
                                        <input type="search" name="search" value="{{ $search }}"
                                            onchange="this.form.submit()" class="form-control">
                                        <span class="search-label"><img src="{{ asset('assets/img/search.svg') }}"
                                                alt="/"></span>
                                    </div>
                                </form>

                            </div>

                            <a href="{{ url('/training/create') }}"><button type="button" class="plus-btn"><img
                                        src="{{ asset('assets/img/plus-white.svg') }}" alt=""></button></a>
                        </div>
                    </div>
                </div>
                <form action="" id="filterForm">
                    <div class="row align-items-center mt-2 mt-sm-0">
                        <div class="col-md-3 col-12 mb-2 mb-sm-0">
                            <h6 class="results-foundtext mb-0">{{ $trainings->total() }} Results found</h6>
                        </div>
                        <div class="col-md-6 col-12  mb-3 mb-sm-0">
                            <input type="hidden" id="category_id" name="category_id" value="{{ $request->category_id }}">
                            <input type="hidden" id="sort_by" name="sort_by" value="{{ $request->sort_by }}">
                            <ul class="nav nav-tabs events-tab justify-content-center" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link category_id {{ !$request->category_id ? 'active' : '' }}"
                                        data-category_id="">All</a>
                                </li>
                                @foreach ($categories as $category)
                                    <li class="nav-item">
                                        <a class="nav-link category_id {{ $request->category_id == $category->id ? 'active' : '' }}"
                                            data-category_id="{{ $category->id }}">{{ @$category->name }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="col-md-3 col-12">
                            <div class="d-flex justify-content-sm-end">
                                <div class="dropdown price-drop">
                                    <button class="btn new-dropbox dropdown-toggle" type="button" id="dropdownMenuButton"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span>Sort by</span> {{ $request->sort_by ?: 'newest' }}
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <a class="dropdown-item sort_by" href="#" data-sort_by="newest">Newest to
                                            Oldest</a>
                                        <a class="dropdown-item sort_by" href="#" data-sort_by="oldest">Oldest to
                                            Newest</a>
                                        {{-- <a class="dropdown-item" href="#">Price Highest to Lowest</a>
                                        <a class="dropdown-item" href="#">Price Lowest to Highest</a> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="row mt-2">
                    <div class="col-md-12">
                        <div class="row ">
                            
                            @foreach ($trainings as $training)
                                <div class="col-md-6 mt-sm-4 mt-2">
                                    <div class="training-box position-relative">
                                        <div class="training-box">
                                            <a {!! $training->video_url ? 'href="' . $training->video_url . '" target="_blank"' : 'href="##"' !!}>
                                                <div class="training-boximg"
                                                    style="position: relative; text-align: center;">
                                                    <img src="{{ $training->image }}" height="40" width="40"
                                                        class="training-img" alt="" />
                                                    <img src="{{ asset('assets/img/youtube-img.png') }}" alt=""
                                                        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 61px; z-index: 1;">
                                                </div>
                                            </a>
                                        </div>
                                        <div class="card-body">
                                            <div class="training-boxcontent">
                                                <div class="row align-items-sm-center">
                                                    <div class="col-md-10 col-10">
                                                        <h6>{{ $training->title }}</h6>
                                                        <p> <i class="fa fa-circle" aria-hidden="true"></i>
                                                            {{ \App\Helpers\CommonHelper::timeAgoString($training->valid_from) }}
                                                        </p>
                                                    </div>
                                                    <div class="col-md-2 col-2 text-right">
                                                        <a
                                                            href="{{ route('training.edit', ['training' => $training->id]) }}">


                                                            <span class="badge pencil-box"> <img
                                                                    src="{{ asset('assets/img/role-edit.svg') }}"
                                                                    alt=""></span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                {{ $trainings->appends(request()->input())->links('partials.pagination') }}
            </div>

        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $('.category_id').click(function() {
            var category_id = $(this).data('category_id');
            $('#category_id').val(category_id);
            $('#filterForm').submit();
        })
        $('.sort_by').click(function() {
            var sort_by = $(this).data('sort_by');
            $('#sort_by').val(sort_by);
            $('#filterForm').submit();
        })
    </script>
@endsection