@extends('layouts.app')

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

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



@section('content')

  <x-page-video-header
        page="resources"
        title=""
        subtitle="Resources"
     />




@php

$videos = [

    [
        'thumb' => 'resources-video-thumbnail.png',
        'video' => 'SecureX360-Corporate-Video.mp4',
        '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'] }}?time=0">

                            <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>

<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 open-datasheet-modal" data-product="SecureX360" data-page="SecureX360" 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 open-datasheet-modal" data-product="PenX" data-page="PenX" 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 open-datasheet-modal" data-product="ExposureX" data-page="ExposureX"  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>

<!-- 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