@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')}}">

<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">
                                    <a href="{{ url('previous') }}">
                                        <button class="about-link py-3 px-2 rounded shadow" id="previous-tab" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
                                            Previous Trainings
                                        </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=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">
                                    <button class="about-link py-3 rounded shadow active" id="graduates-tab" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false">
                                        Directory of Graduates
                                    </button>
                                    <!--  -->
                                </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">
                        <a href="{{ url('previous') }}">
                            <button class="about-link py-3 mb-1" id="previous-tab" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
                                Previous Trainings
                            </button>
                        </a>
                    </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" 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">
                        <button class="about-link py-3 mb-1 active" type="button" id="graduates-tab" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
                            Directory of Graduates
                        </button>
                    </li>
                </div>
            </div>
        </ul>
    </div>
</div>

<div class="container mt-5 pt-5">

    <form id="graduateSearchForm" action="{{ url('/graduates') }}" method="GET">
        <div class="row mb-4">
            <div class="col-md-6">
                <input type="text" class="form-control form-search shadow" name="searchGraduate" placeholder="Graduate Name">
            </div>
            <div class="col-md-6">
                <select class="form-control shadow" name="searchPosition" placeholder="Position">
                    <option selected hidden disabled>Position</option>
                    @foreach ($graduates->pluck('position')->unique() as $items)
                    <option>{{ $items }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="text-center mb-5">
            <button class="button button-search" type="button" id="graduateSearchButton"></button>
        </div>
    </form>

    <style>
        .circle {
            border-radius: 50%;
            width: 200px;
            height: 200px;
        }
    </style>

    <div class="row gy-5 mb-5">
        @foreach ($graduates as $graduate)
        <div class="col-12 col-md-6 col-lg-6">
            <div class="shadow rounded-3 p-5">
                <div class="row">
                    <div class="col-md-6">
                        <img src="{{ asset('files/' .$graduate->image) }}" class="img-fluid mb-1 circle" alt="...">
                    </div>
                    <div class="col-md-6 d-flex flex-column my-auto">
                        <div class="d-flex justify-content-between mb-2">
                            <div>
                                <h2 class="m-0">{{ $graduate->name }}</h2>
                            </div>
                        </div>

                        <p class="text-truncate">
                            Batch {{ $graduate->batch }}
                        </p>

                        <div class="">
                            <button class="button-learn2 modal-trigger" data-bs-target="#graduateModal{{ $graduate->id }}" data-bs-toggle="modal"></button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="modal fade" id="graduateModal{{ $graduate->id }}" 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 ">

                        <div class="row mb-3">
                            <div class="col-md-6 text-center">
                                <img src="{{ asset('files/' .$graduate->image) }}" class="img-fluid mb-1 circle" alt="...">
                            </div>
                            <div class="col-md-6 my-auto">
                                <div>
                                    <h1>{{ $graduate->name }}</h1>
                                    <span class="fs-3">Batch {{ $graduate->batch }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 text-center">
                                <p>Positions: {{ $graduate->position }}</p>
                            </div>
                            <div class="col-md-6 my-auto">
                                <p class="text-justify">{!! $graduate->content !!}</p>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer border-top-0">
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </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') || 'graduates'; // 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 graduateSearchForm = document.getElementById('graduateSearchForm');
        var graduateSearchButton = document.getElementById('graduateSearchButton');

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

        if (graduateSearchForm && graduateSearchButton) {
            graduateSearchButton.addEventListener('click', function() {
                handleFormSubmit(graduateSearchForm);
            });

            graduateSearchForm.addEventListener('keypress', function(e) {
                var key = e.which || e.keyCode;
                if (key === 13) { // 13 is the key code for 'Enter'
                    handleFormSubmit(graduateSearchForm);
                }
            });

            // Add change event listener to the select element
            var searchPositionSelect = document.querySelector('[name="searchPosition"]');
            if (searchPositionSelect) {
                searchPositionSelect.addEventListener('change', function() {
                    handleFormSubmit(graduateSearchForm);
                });
            }
        }
    });
</script>
@endsection