@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
<title>Trainings | JRS</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Trainings | JRS" />
<meta property="og:description" content="Discover the power of smart investments with JRS Holdings Inc. We specialize in managing a diverse portfolio for long-term success." />
<meta property="og:site_name" content="Trainings | JRS" />
<meta property="og:image" content="{{ asset('images/thumbnail.png') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.png') }}" />
<meta property="og:keywords" content="JRS Holdings Inc., Holding Company, Investment Portfolio, Diversified Holdings, Business Investments, Strategic Holdings, Corporate Investments, Investment Management, Asset Portfolio, Growth Investments, Financial Holdings, Holding Group, Investment Holdings, Investment Strategies, Portfolio Management, Capital Investments, Business Expansion, Equity Holdings, Investment Opportunities, Investment Diversification, Investment Company, Holding Group, Strategic Investments, Diverse Portfolio, Financial Holdings, Investment Management, Corporate Holdings, Investment Strategies, Asset Diversification, Growth Opportunities, Business Expansion, Investment Portfolio, Equity Holdings, Capital Management, Investment Diversity, Investment Growth, Portfolio Diversification, Profitable Investments, Investment Ventures">
@endsection

@section('content')
<link rel="stylesheet" href="{{asset('css/trainings.css')}}">

@if(session('success'))
<div class="position-relative d-flex justify-content-end" data-aos="fade-left" data-aos-duration="500">
    <div class="alert alert-success alert-dismissible fade show position-absolute m-3" role="alert">
        <h4>{{ session('success') }}</h4>
        <button type="button" class="btn-close my-auto" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>
@endif

@if(session('error'))
<div class="position-relative d-flex justify-content-end" data-aos="fade-left">
    <div class="alert alert-warning alert-dismissible fade show position-absolute" role="alert">
        <h5><i class="icon fas fa-times-circle"></i> An error has occured</h5>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>
@endif

<div class="banner mb-5">
    <div class="container">

        <div class="col-3 text-end d-md-block d-none">
            <h1 class="banner-title fw-bold text-white fs-1">TRAININGS</h1>
            <span class="text-white">JRS HOLDINGS INC</span>
        </div>

        <div class="text-center d-sm-block d-md-none">
            <h1 class="banner-title fw-bold text-white fs-1">TRAININGS</h1>
            <span class="text-white">JRS HOLDINGS INC</span>
        </div>

        <!-- LARGE/MEDIUM NAV -->
        <div class="d-xl-block d-md-block d-none d-sm-none">
            <div class="w-100 about-tabs-overlay">
                <div class="">
                    <ul class="nav justify-content-center nav-tabs border-0" id="myTab" role="tablist">
                        <div class="w-100 d-flex justify-content-center gap-2" data-aos="fade-down" data-aos-duration="1000">
                            <div class="col-12 col-md-4 col-xl-2 px-0">
                                <li class="nav-item" role="presentation">
                                    <a href="{{ url('trainings?tab=competency') }}">
                                        <button class="about-link py-3 rounded shadow" id="competency-tab" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">
                                            Leveraging Competency
                                        </button>
                                    </a>
                                </li>
                            </div>
                            <div class="col-12 col-md-4 col-xl-2 px-0">
                                <li class="nav-item" role="presentation">
                                    <a href="{{ url('trainings?tab=upcoming') }}">
                                        <button class="about-link py-3 rounded shadow" id="upcoming-tab" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">
                                            Upcoming Trainings
                                        </button>
                                    </a>
                                </li>
                            </div>
                            <div class="col-12 col-md-4 col-xl-2 px-0">
                                <li class="nav-item" role="presentation">
                                    <button class="about-link py-3 px-2 rounded shadow active" id="previous-tab" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
                                        Previous Trainings
                                    </button>
                                </li>
                            </div>
                            <div class="col-12 col-md-4 col-xl-2 px-0">
                                <li class="nav-item" role="presentation">
                                    <a href="{{ url('trainings?tab=certified') }}">
                                        <button class="about-link py-3 rounded shadow" id="certified-tab" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false">
                                            Certified Individuals
                                        </button>
                                    </a>
                                </li>
                            </div>
                            <div class="col-12 col-md-4 col-xl-2 px-0">
                                <li class="nav-item" role="presentation">
                                    <a href="{{ url('graduates') }}">
                                        <button class="about-link py-3 rounded shadow" id="graduates-tab" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false">
                                            Directory of Graduates
                                        </button>
                                    </a>
                                </li>
                            </div>
                        </div>

                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- SMALL NAV -->
<div class="d-sm-block d-block d-xl-none d-md-none mt-3">
    <div class="container">
        <ul class="nav justify-content-center nav-tabs border-0" id="myTab" role="tablist">
            <div class="row w-100" data-aos="fade-up" data-aos-duration="1500">
                <div class="col-12  px-1">
                    <li class="nav-item w-100" role="presentation">
                        <a href="{{ url('trainings?tab=competency') }}">
                            <button class="about-link py-3 mb-1" id="comptenecy-tab" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">
                                Leveraging Competency
                            </button>
                        </a>
                    </li>
                </div>
                <div class="col-12  px-1">
                    <li class="nav-item w-100" role="presentation">
                        <a href="{{ url('trainings?tab=upcoming') }}">
                            <button class="about-link py-3 mb-1" id="upcoming-tab" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">
                                Upcoming Trainings
                            </button>
                        </a>
                    </li>
                </div>
                <div class="col-12  px-1">
                    <li class="nav-item" role="presentation">
                        <button class="about-link py-3 mb-1 active" id="previous-tab" data-bs-toggle="tab" data-bs-target="#previous" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
                            Previous Trainings
                        </button>
                    </li>
                </div>
                <div class="col-12  px-1">
                    <li class="nav-item" role="presentation">
                        <a href="{{ url('trainings?tab=certified') }}">
                            <button class="about-link py-3 mb-1" id="certified-tab" data-bs-toggle="tab" data-bs-target="#certified" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false">
                                Certified Individuals
                            </button>
                        </a>
                    </li>
                </div>
                <div class="col-12  px-1">
                    <li class="nav-item" role="presentation">
                        <a href="{{ url('graduates') }}">
                            <button class="about-link py-3 mb-1" id="previous-tab" data-bs-target="/graduates" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
                                Directory of Graduates
                            </button>
                        </a>
                    </li>
                </div>
            </div>
        </ul>
    </div>
</div>

<!-- PREVIOUS TRAININGS TAB -->
<div class="container justify-content-center overflow-hidden">

    <form id="previousSearchForm" action="{{ url('/previous') }}" method="GET">
        <div class="col-lg-12 d-flex justify-content-center my-5">
            <div class="col-9"><input type="text" class="form-control form-search" name="search" id="" placeholder="Type in your search"> </div>
            <input type="hidden" name="tab" value="previous"><!-- value="{{ request('tab') }}" -->

            <div class=""><a class="btn border" type="button" id="previousSearchButton"><i class="fa-solid fa-magnifying-glass"></i> Search</a></div>
        </div>
    </form>

    <div class="mb-5">
        <div class="row gy-3 mb-3">
            @foreach ($trainings as $training)
            @if ($training->status == 'Completed')
            <div class="col-12 col-md-4 col-xl-4">
                <div class="card shadow" style="width: 22rem;">
                    <img src="{{ asset('images/calendar-img.png') }}" class="card-img-top" alt="...">
                    <div class="card-body p-5 text-center">
                        <div class=" mb-4">
                            <span class="card-title fs-4 fw-bold text-uppercase description-truncate">{{$training->title}}</span>
                        </div>

                        <p class="card-text text-uppercase">{{$training->date}}</p>
                        <p class="card-text text-uppercase">{{$training->time}}</p>

                        <span class="bg-red text-white p-1 rounded-3 fw-bold">COMPLETED</span>
                        <a href="{{ url('/previous-trainings', ['id' => $training->id]) }}"><button href="#" class="button-learn mt-3" data-bs-target="#officeModal" data-bs-toggle="modal"></button></a>
                    </div>
                </div>
            </div>
            @endif
            @endforeach

        </div>
    </div>

    <a href="#" class="text-decoration-none" data-bs-target="#advertiseModal" data-bs-toggle="modal">
        <div class="advertise-bg text-center rounded p-3 mt-5 mb-5">
            <span class="text-warning fw-bold fs-2">ADVERTISE WITH JRS HOLDINGS</span><br>
            <span class="text-warning fs-3">CLICK HERE TO INQUIRE</span>
        </div>
    </a>

</div>

<!-- ADVERTISE INQUIRY MODAL -->
<div class="modal fade" id="advertiseModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
        <div class="modal-content">
            <div class="modal-header border-bottom-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body r px-5 text-center">
                <form action="{{ url('/submit-inquiryTrainings') }}" id="myForm" method="POST">
                    @csrf
                    <div class="text-center mb-5 d-flex flex-column align-items-center">
                        <span class=" fw-bold my-4 fs-2">ADVERTISING INQUIRY</span>

                        <input type="text" class="form-control mb-3" id="fullname" name="fullname" placeholder="Full Name">

                        <input type="text" class="form-control mb-3" id="company" name="company" placeholder="Company Name">

                        <input type="email" class="form-control mb-3" id="email" name="email" placeholder="Email">

                        <input type="number" class="form-control mb-3" id="contact" name="contact" placeholder="Contact Details">

                        <textarea class="form-control mb-3" name="message" id="message" cols="30" rows="10" placeholder="Message"></textarea>

                        <input type="text" id="context" name="context" value="Advertising" style="display: none;">
                    </div>

                    <div class="text-center">
                        <button class="button-green-inquire"></button>
                    </div>
                </form>
            </div>
            <div class="modal-footer border-top-0">
            </div>
        </div>
    </div>
</div>

<style>
    .banner {
        background-image: url("{{ asset('images/banner-trainings.jpg') }}");
        background-position: center;
        background-size: cover;
        align-items: center;
        display: flex;
        height: 45vh;
        width: 100%;
    }

    .advertise-bg {
        background-image: url("{{ asset('images/advertise.jpg') }}");
        background-position: center;
        background-size: cover;
        align-items: center;
        height: auto;
        width: 100%;
    }

    .rect {
        position: relative;
        top: 0;
        /* Move .rect slightly down */
        left: 0;
    }

    .another-rec {
        position: absolute;
        top: 5px;
        /* Move .another-rec slightly up */
        left: 10px;
    }
</style>

<!-- <script>
    // Get the URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    const activeTab = urlParams.get('tab') || 'upcoming'; // Default to 'upcoming' if tab parameter is not present

    // Add the "active" class to the corresponding button and "show active" class to the appropriate tab pane
    const buttons = document.querySelectorAll('.about-link');
    const tabPanes = document.querySelectorAll('.tab-pane');

    buttons.forEach(button => {
        const target = button.getAttribute('data-bs-target').substring(1);
        if (target === activeTab) {
            button.classList.add('active');
            button.setAttribute('aria-selected', 'true');
        } else {
            button.classList.remove('active');
            button.setAttribute('aria-selected', 'false');
        }
    });

    tabPanes.forEach(tabPane => {
        const id = tabPane.getAttribute('id');
        if (id === activeTab) {
            tabPane.classList.add('show', 'active');
        } else {
            tabPane.classList.remove('show', 'active');
        }
    });
</script> -->


<!-- <script>
    // Get the URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    const activeTab = urlParams.get('tab') || urlParams.get('search');

    // Add the "active" class to the corresponding button and "show active" class to the appropriate tab pane
    const buttons = document.querySelectorAll('.about-link');
    const tabPanes = document.querySelectorAll('.tab-pane');

    buttons.forEach(button => {
        const target = button.getAttribute('data-bs-target').substring(1);
        if (target === activeTab) {
            button.classList.add('active');
            button.setAttribute('aria-selected', 'true');
        } else {
            button.classList.remove('active');
            button.setAttribute('aria-selected', 'false');
        }
    });

    tabPanes.forEach(tabPane => {
        const id = tabPane.getAttribute('id');
        if (id === activeTab) {
            tabPane.classList.add('show', 'active');
        } else {
            tabPane.classList.remove('show', 'active');
        }
    });
</script> -->


<script>
    // Function to handle tab clicks
    function handleTabClick(tabId) {
        // Update the URL with the current tab
        const searchParams = new URLSearchParams(window.location.search);
        searchParams.set('tab', tabId);
        searchParams.delete('search'); // Clear the search parameter

        // Replace the current URL without triggering a page refresh
        history.replaceState({}, '', `${window.location.pathname}?${searchParams}`);

        // Reload the page
        location.reload();
    }

    // Add an event listener to each tab element
    const tabElements = document.querySelectorAll('.about-link');
    tabElements.forEach(tabElement => {
        tabElement.addEventListener('click', () => {
            const tabId = tabElement.getAttribute('data-bs-target').substring(1);
            handleTabClick(tabId);
        });
    });
</script>

<!-- SEARCH BUTTON -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var previousSearchForm = document.getElementById('previousSearchForm');
        var previousSearchButton = document.getElementById('previousSearchButton');

        function handleFormSubmit(form) {
            form.submit();
        }

        if (previousSearchForm && previousSearchButton) {
            previousSearchButton.addEventListener('click', function() {
                handleFormSubmit(previousSearchForm);
            });

            previousSearchForm.addEventListener('keypress', function(e) {
                var key = e.which || e.keyCode;
                if (key === 13) { // 13 is the key code for 'Enter'
                    handleFormSubmit(previousSearchForm);
                }
            });
        }
    });
</script>
@endsection