@extends('layouts.app')

@section(
    'title',
    'Defence & Aerospace Reports | Crescendo Defence'
)

@section(
    'meta_description',
    'Explore Crescendo Defence reports on aerospace, defence manufacturing, market intelligence, automotive and electric vehicles, and industrial opportunities in India.'
)

@section(
    'canonical',
    url('/reports')
)

@push('styles')
    <link rel="stylesheet"
          href="{{ asset('assets/css/defence-report.css') }}?v=20261013-2">
@endpush

@section('content')


{{-- =========================================================
     HERO
========================================================= --}}

<section class="def-report-index-hero">

    <div class="def-blog-container">

        <div class="def-blog-eyebrow">
            <span class="inner-kicker">
                CRESCENDO DEFENCE — REPORTS
            </span>
        </div>

        <h1>
            Defence & Aerospace Reports
        </h1>

        <p>
            Explore comprehensive industry reports, market intelligence,
            emerging opportunities and strategic insights into India's
            defence, aerospace and manufacturing sectors.
        </p>

    </div>

</section>


{{-- =========================================================
     REPORT LISTING
========================================================= --}}

<section class="def-report-listing">

    <div class="def-blog-container">

       
        @php

            $reports = [
        
                // ACTIVE REPORT 01
                [
                    'title' => 'India Defence Market Entry 2027',
                    'image' => 'assets/img/reports/india-defence-market-entry-2027-report-cover.webp',
                    'pdf'   => 'assets/pdf/reports/Report Defence.pdf',
                    'alt'   => 'India Defence Market Entry 2027 Report'
                ],
        
                /*
                // REPORT 02
                [
                    'title' => 'India Defence Industry Report',
                    'image' => 'assets/img/reports/india-defence-industry-report.png',
                    'pdf'   => 'assets/pdf/reports/india-defence-industry-report.pdf',
                    'alt'   => 'India Defence Industry Market Report'
                ],
        
                // REPORT 03
                [
                    'title' => 'Aerospace Industry Report',
                    'image' => 'assets/img/reports/aerospace-industry-report.png',
                    'pdf'   => 'assets/pdf/reports/aerospace-industry-report.pdf',
                    'alt'   => 'Aerospace Industry Report'
                ],
        
                // REPORT 04
                [
                    'title' => 'Defence Manufacturing Report',
                    'image' => 'assets/img/reports/defence-manufacturing-report.png',
                    'pdf'   => 'assets/pdf/reports/defence-manufacturing-report.pdf',
                    'alt'   => 'Defence Manufacturing Industry Report'
                ],
                */
        
            ];
        
        @endphp



        <div class="def-report-grid">

            @foreach($reports as $report)

                <article class="def-report-card">

                    <div class="def-report-card-image">

                        <img
                            src="{{ asset($report['image']) }}"
                            alt="{{ $report['alt'] }}"
                            loading="lazy"
                        >

                    </div>


                    <div class="def-report-card-content">

                        <h2>
                            {{ $report['title'] }}
                        </h2>


                        {{-- DOWNLOAD POPUP BUTTON --}}

                        <button
                            type="button"
                            class="def-report-download-btn"
                            data-report="{{ $report['pdf'] }}"
                            data-report-title="{{ $report['title'] }}"
                            onclick="openReportPopup(this)"
                            aria-label="Download {{ $report['title'] }}"
                        >
                            DOWNLOAD
                        </button>

                    </div>

                </article>

            @endforeach

        </div>

    </div>

</section>



{{-- =========================================================
     REPORT DOWNLOAD POPUP
========================================================= --}}

<div
    id="reportDownloadModal"
    class="def-report-modal"
    aria-hidden="true"
>

    {{-- POPUP OVERLAY --}}

    <div
        class="def-report-modal-overlay"
        onclick="closeReportPopup()"
    ></div>


    {{-- POPUP CONTENT --}}

    <div
        class="def-report-modal-box"
        role="dialog"
        aria-modal="true"
        aria-labelledby="reportModalTitle"
    >

        {{-- CLOSE BUTTON --}}

        <button
            type="button"
            class="def-report-modal-close"
            onclick="closeReportPopup()"
            aria-label="Close popup"
        >
            &times;
        </button>


        {{-- TITLE --}}

        <h2 id="reportModalTitle">
            Detailed Report
        </h2>


        {{-- DOWNLOAD FORM --}}

        <form
            id="reportDownloadForm"
            method="POST"
            action="{{ route('reports.submit') }}"
        >

            @csrf


            {{-- SELECTED REPORT --}}

            <input
                type="hidden"
                name="report"
                id="selectedReport"
            >


            <input
                type="hidden"
                name="report_title"
                id="selectedReportTitle"
            >


            {{-- NAME --}}

            <div class="def-report-form-group">

                <input
                    type="text"
                    name="name"
                    id="reportName"
                    placeholder="Name*"
                    autocomplete="name"
                    maxlength="150"
                    required
                >

            </div>


            {{-- EMAIL --}}

            <div class="def-report-form-group">

                <input
                    type="email"
                    name="email"
                    id="reportEmail"
                    placeholder="E-mail*"
                    autocomplete="email"
                    maxlength="255"
                    required
                >

            </div>


            {{-- PHONE --}}

            <div class="def-report-form-group">

                <input
                    type="tel"
                    name="phone"
                    id="reportPhone"
                    placeholder="Phone"
                    autocomplete="tel"
                    maxlength="30"
                >

            </div>


            {{-- COMPANY NAME --}}

            <div class="def-report-form-group">

                <input
                    type="text"
                    name="company_name"
                    id="reportCompany"
                    placeholder="Company name"
                    maxlength="255"
                >

            </div>


            {{-- ERROR MESSAGE --}}

            <div
                id="reportFormError"
                class="def-report-form-error"
                role="alert"
                style="display:none;"
            ></div>


            {{-- SUBMIT BUTTON --}}

            <button
                type="submit"
                id="reportSubmitBtn"
                class="def-report-submit-btn"
            >
                DOWNLOAD
            </button>

        </form>

    </div>

</div>



{{-- =========================================================
     REPORT POPUP JAVASCRIPT
========================================================= --}}

<script>

document.addEventListener('DOMContentLoaded', function () {

    const modal = document.getElementById('reportDownloadModal');

    const form = document.getElementById('reportDownloadForm');

    const errorBox = document.getElementById('reportFormError');

    const submitBtn = document.getElementById('reportSubmitBtn');

    const reportInput = document.getElementById('selectedReport');

    const titleInput = document.getElementById('selectedReportTitle');

    let previousFocus = null;


    /* =====================================================
       OPEN REPORT POPUP
    ===================================================== */

    window.openReportPopup = function (button) {

        previousFocus = document.activeElement;

        form.reset();

        reportInput.value = button.dataset.report;

        titleInput.value = button.dataset.reportTitle;

        errorBox.textContent = '';

        errorBox.style.display = 'none';

        modal.classList.add('active');

        modal.setAttribute('aria-hidden', 'false');

        document.body.style.overflow = 'hidden';

        document.getElementById('reportName').focus();

    };


    /* =====================================================
       CLOSE REPORT POPUP
    ===================================================== */

    window.closeReportPopup = function () {

        modal.classList.remove('active');

        modal.setAttribute('aria-hidden', 'true');

        document.body.style.overflow = '';

        errorBox.style.display = 'none';

        if (previousFocus) {
            previousFocus.focus();
        }

    };


    /* =====================================================
       ESCAPE KEY CLOSE
    ===================================================== */

    document.addEventListener('keydown', function (event) {

        if (
            event.key === 'Escape' &&
            modal.classList.contains('active')
        ) {

            closeReportPopup();

        }

        // Keep keyboard focus inside the open dialog.
        if (
            event.key === 'Tab' &&
            modal.classList.contains('active')
        ) {

            const focusable = Array.from(
                modal.querySelectorAll(
                    'button:not([disabled]), input:not([disabled])'
                )
            ).filter(element => element.getClientRects().length);

            if (!focusable.length) {
                return;
            }

            const first = focusable[0];
            const last = focusable[focusable.length - 1];

            if (event.shiftKey && document.activeElement === first) {
                event.preventDefault();
                last.focus();
            } else if (!event.shiftKey && document.activeElement === last) {
                event.preventDefault();
                first.focus();
            }
        }

    });


    /* =====================================================
       FORM SUBMISSION
    ===================================================== */

    form.addEventListener('submit', async function (event) {

        event.preventDefault();

        if (!form.reportValidity()) {
            return;
        }

        submitBtn.disabled = true;

        submitBtn.textContent = 'PLEASE WAIT...';

        errorBox.style.display = 'none';

        errorBox.textContent = '';


        /*
         * Open a blank tab during the user click.
         * This helps avoid popup blockers after AJAX submission.
         */

        const reportWindow = window.open('about:blank', '_blank');


        try {

            const response = await fetch(form.action, {

                method: 'POST',

                body: new FormData(form),

                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },

                credentials: 'same-origin'

            });


            const result = await response.json();


            /* =================================================
               HANDLE VALIDATION ERRORS
            ================================================= */

            if (!response.ok || !result.success) {

                let message = result.message || 'Unable to submit form.';

                if (result.errors) {

                    message = Object.values(result.errors)
                        .flat()
                        .join(' ');

                }

                throw new Error(message);

            }


            /* =================================================
               OPEN SELECTED REPORT PDF
            ================================================= */

            if (!result.report_url) {

                throw new Error('Report URL is missing.');

            }


            if (reportWindow && !reportWindow.closed) {

                reportWindow.location.replace(result.report_url);

            } else {

                window.location.assign(result.report_url);

            }


            /* =================================================
               CLOSE POPUP AFTER SUCCESS
            ================================================= */

            closeReportPopup();


        } catch (error) {

            if (reportWindow && !reportWindow.closed) {
                reportWindow.close();
            }

            errorBox.textContent = error.message ||
                'Something went wrong. Please try again.';

            errorBox.style.display = 'block';

        } finally {

            submitBtn.disabled = false;

            submitBtn.textContent = 'DOWNLOAD';

        }

    });

});

</script>

@endsection