@extends('layouts.app')

@section('title', 'Resources | '.config('app.name'))

@push('styles')
    @vite('resources/css/pages/resources.css')
@endpush



@section('content')

<section class="resources-hero">

    <div class="resources-bg">
        <img src="{{ asset('images/pages/resources-header.jpg') }}">
    </div>

    <!-- <div class="resources-overlay"></div> -->

    <div class="container">

        <div class="resources-hero-content">

            <h1>Resources</h1>

        </div>

    </div>

</section>


<section class="datasheets-section">

    <div class="mesh-left"></div>
    <div class="mesh-right"></div>

    <div class="container">

        <div class="section-heading">
            <!-- <h2>Datasheets</h2> -->
        </div>

        <div class="resources-grid">

            <div class="resource-card blue">

                <div class="resource-image">
                    <img src="{{ asset('images/resources/SecurX-Flyer-2026.jpg') }}">
                </div>

                <div class="resource-content">

                    <h4>
                        SecureX360
                    </h4>

                </div>

                <a href="#" class="resource-download"  data-bs-toggle="modal" data-bs-target="#datasheetModal" data-pdf="{{ asset('downloads/datasheets/SecurX-Flyer-2026.pdf') }}">
                    Download the datasheet
                </a>

            </div>


            <div class="resource-card red">

                <div class="resource-image">
                    <img src="{{ asset('images/resources/PenX-DataSheet.jpg') }}">
                </div>

                <div class="resource-content">

                    <h4>PenX</h4>

                </div>

                <a href="#" class="resource-download " data-bs-toggle="modal" data-bs-target="#datasheetModal" data-pdf="{{ asset('downloads/datasheets/PenX-DataSheet.pdf') }}">
                    Download the datasheet
                </a>

            </div>


            <div class="resource-card blue">

                <div class="resource-image">
                    <img src="{{ asset('images/resources/ExposureX-DataSheet.jpg') }}">
                </div>

                <div class="resource-content">

                    <h4>
                        ExposureX
                    </h4>

                </div>

                <a href="#" class="resource-download"  data-bs-toggle="modal" data-bs-target="#datasheetModal" data-pdf="{{ asset('downloads/datasheets/ExposureX-DataSheet.pdf') }}">
                    Download the datasheet
                </a>

            </div>


            <div class="resource-card blue d-none">

                <div class="resource-image">
                    <img src="{{ asset('images/resources/ctem-datasheet.png') }}">
                </div>

                <div class="resource-content">

                    <h4>
                        CISOX
                    </h4>

                </div>

                <a href="#" class="resource-download">
                    Download the datasheet
                </a>

            </div>

        </div>

    </div>

</section>



@php

$videos = [

    [
        'thumb' => 'resources-video-thumbnail.png',
        'video' => 'Securx360-Corporate-Video-2026.m4v',
        'title' => 'Watch Corporate Video'
    ],

    [
        'thumb' => 'resources-video-thumbnail-2.png',
        'video' => 'SecurX360-GITEX2025.mp4',
        'title' => 'Watch Platform Demo'
    ]

];

@endphp

<section class="videos-section">

    <div class="container">

        <div class="row g-5 justify-content-center">

            @foreach($videos as $index => $video)

                <div class="col-lg-6">

                    <div class="video-card">

                        <img
                            src="{{ asset('images/resources/'.$video['thumb']) }}"
                            alt="{{ $video['title'] }}">

                        <div
                            class="video-overlay"
                            data-video="https://campaign.securelinkme.net/securex360/{{ $video['video'] }}">

                            <div class="video-play-btn">

                                <img
                                    src="{{ asset('images/icons/video-icon.svg') }}"
                                    alt="Play">

                            </div>

                            <span>{{ $video['title'] }}</span>

                        </div>

                    </div>

                </div>

            @endforeach

        </div>

    </div>

</section>

<!-- video popup -->
  <div class="modal fade"
     id="videoModal"
     tabindex="-1">

    <div class="modal-dialog modal-xl modal-dialog-centered">

        <div class="modal-content bg-black border-0">

            <button
                type="button"
                class="btn-close btn-close-white position-absolute end-0 top-0 m-3 z-3"
                data-bs-dismiss="modal"
                aria-label="Close">
            </button>

            <video
                id="popupVideo"
                controls
                preload="metadata"
                width="100%"
                class="rounded-4">

                <source src="" type="video/mp4">

            </video>

        </div>

    </div>

</div>
 

@endsection

@push('scripts')
    @vite('resources/js/resources.js')
@endpush