@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="container">

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

            @php

            $datasheets = [

                [
                    "title"=>"SecureX360",
                    "image"=>"securex360_flyer.png",
                    "pdf"=>"CTEM-DataSheet.pdf"
                ],

                [
                    "title"=>"ExposureX",
                    "image"=>"exposurex-datasheet.png",
                    "pdf"=>"ExposureX-DataSheet.pdf"
                ],

                [
                    "title"=>"PenX",
                    "image"=>"penx-datasheet.png",
                    "pdf"=>"PenX-DataSheet.pdf"
                ],

                [
                    "title"=>"CISOX",
                    "image"=>"cisox-datasheet.png",
                    "pdf"=>"CISOX-DataSheet.pdf"
                ]

            ];

            @endphp

            @foreach($datasheets as $item)

            <div class="col-xl-3 col-lg-3 col-md-6">

                <div class="datasheet-card">

                    <div class="datasheet-image">

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

                    </div>

                    <div class="datasheet-body">

                        <h3></h3>

                    </div>

                    <a

                        href="#"

                        class="datasheet-download open-datasheet-modal"

                        data-product="{{ $item['title'] }}"
                        data-page="{{ $item['title'] }}"
                        data-bs-toggle="modal"
                        data-bs-target="#datasheetModal"
                        data-pdf="{{ asset('downloads/datasheets/'.$item['pdf']) }}">

                        <span>

                            Download

                        </span>

                        <img

                            src="{{ asset('images/resources/datasheet_arrow.svg') }}"

                            alt="">

                    </a>

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