@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
<title>Calendar Events | 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="Calendar Events | 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="Calendar Events | 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/events.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-4 text-end d-md-block d-none">
            <h1 class="banner-title fw-bold text-white fs-1">CALENDAR EVENTS</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">CALENDAR EVENTS</h1>
            <span class="text-white">JRS HOLDINGS INC</span>
        </div>

    </div>
</div>

<!-- CALENDAR SINGLE TAB -->
<div class="container">
    <div class="row align-items-center">
        <div class="col-lg-4">
            <div class="text-start">
                <a href="{{ url('events?tab=calendar') }}" class="text-decoration-none fw-bold text-black fs-5" style="font-family: 'Bodoni Moda';"><i class="fa-solid fa-arrow-left"></i> RETURN</a>
            </div>
        </div>
    </div>
</div>


<div class="container mt-5">
    <div class="mt-5 text-center">
        <!-- <h1 class=" fw-bold">CYBERSECURITY MASTERCLASS PART 2: CYBERSECURITY VULNERABILITY AND INCIDENT RESPONSE</h1> -->
        <h1 class="text-uppercase fw-bold">{{ $events->title }}</h1>

    </div>

    <div class="mb-5">
        <!-- <p class="text-center text-uppercase">
            jrs holdings managed projects are a collaborative enterprise, frequently involving research or design, that is carefully planned to achieve a
            particular goal. we partner with various companies and/or organizations to cooperatively achieve set goals.
        </p> -->
        <p class="text-center text-uppercase">
            {{ $events->subtitle }}
        </p>
    </div>

    <div class="col-md-12 mb-3">
        <img src="{{ asset('files/' .$events->image) }}" class="img-fluid" alt="">
    </div>

    <div class="col-md-12 justify">

        {!! $events->content !!}

        <!-- <p class="justify">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </p> -->
    </div>

    <div class="text-center my-5">
        <button class="button-inquire" data-bs-target="#officeModal" data-bs-toggle="modal"></button>
    </div>

    <div class="modal fade" id="officeModal" 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">
                    <img src="{{ asset('files/' .$events->image) }}" class="card-img-top" alt="...">
                    <form action="{{ url('/submit-inquiryEventsAdvertising') }}" 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">{{ $events->title }}</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="Event: {{ $events->title }}" style="display: none;">
                        </div>

                        <div class="text-center">
                            <button class="button-inquire"></button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-top-0">
                </div>
            </div>
        </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 JR 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-inquiryEventsAdvertising') }}" 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-inquire"></button>
                    </div>
                </form>
            </div>
            <div class="modal-footer border-top-0">
            </div>
        </div>
    </div>
</div>

<style>
    .banner {
        background-image: url("{{ asset('images/banner-events.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%;
    }
</style>
@endsection