@extends('layouts.app')

@section('title', 'Batch Data')
<br>
<br>
@section('content')
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary" style="font-size: 24px;">Batch Data</h6>
                </div>
                <div class="card-body">
                    @if (session('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif
                    <form action="{{ route('recordtype1.saveBatchData', ['filename' => $filename, 'folder' => $folder]) }}" method="POST">
                        @csrf
                        <div class="form-group">
                            <label for="folder">Selected Folder</label>
                            <input type="text" class="form-control" id="folder" name="folder" value="{{ $folder }}" readonly>
                        </div>

                        @foreach ($indexFields as $indexField)
                            <div class="form-group">
                                <label for="{{ $indexField->name }}">{{ ucfirst($indexField->name) }}</label>
                                @if ($indexField->type == 'string')
                                    <input type="text" class="form-control" id="{{ $indexField->name }}" name="{{ $indexField->name }}" maxlength="{{ $indexField->length }}" value="{{ $batchData->{$indexField->name} ?? '' }}">
                                @elseif ($indexField->type == 'date')
                                    <input type="date" class="form-control" id="{{ $indexField->name }}" name="{{ $indexField->name }}" value="{{ $batchData->{$indexField->name} ?? '' }}">
                                @endif
                            </div>
                        @endforeach

                        <div class="form-group">
                            <label for="pdfFiles">PDF Files in Batch</label>
                            <ul>
                                @foreach ($pdfFiles as $pdfFile)
                                    <li><a href="#" class="pdf-link" data-pdf="{{ asset("storage/input/{$filename}/{$folder}/{$pdfFile}") }}">{{ $pdfFile }}</a></li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="card-footer text-right">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <iframe id="pdfViewer" style="width: 100%; height: 800px; border: none;"></iframe>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const pdfLinks = document.querySelectorAll('.pdf-link');
        const pdfViewer = document.getElementById('pdfViewer');

        pdfLinks.forEach(link => {
            link.addEventListener('click', function (event) {
                event.preventDefault();
                const pdfUrl = this.dataset.pdf;
                pdfViewer.src = pdfUrl;
            });
        });
    });
</script>
@endsection