@extends('layouts.app')

@section('title', 'Fill Data')
<br>
<br>
@section('content')
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6" id="pdf-container">
            <div class="card">
                <div class="card-header">
                    <h3>Selected PDF from {{ $folder }} of {{ $filename }} Folder</h3>
                </div>
                <div class="card-body">
                    @if(isset($pdf))
                        <iframe id="pdf-frame" src="{{ asset('storage/input/' . $filename . '/' . $folder . '/' . $pdf) }}"></iframe>
                    @else
                        <p>No PDF selected</p>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-6" id="form-container">
            <div class="card">
                <div class="card-header">
                    <h3>Fill Data</h3>
                </div>
                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if($txtContent)
                        @php
                            $lines = explode("\n", $txtContent);
                        @endphp
                        <label for="batchContent" style="font-weight: bold; font-size: 1.2em;">Batch Content</label>
                        @foreach($lines as $line)
                            @if (strpos($line, ':') !== false)
                                @php
                                    list($key, $value) = explode(':', $line, 2);
                                @endphp
                                <div class="form-group">
                                    <label for="{{ trim($key) }}">{{ ucfirst(trim($key)) }}</label>
                                    <div id="{{ trim($key) }}" class="form-control" readonly>{{ trim($value) }}</div>
                                </div>
                            @endif
                        @endforeach
                    @endif

                    <form method="POST" action="{{ route('recordtype1.store', ['filename' => $filename, 'pdf' => $pdf, 'folder' => $folder]) }}">
                        @csrf
                        <br>
                        <label for="fileContent" style="font-weight: bold; font-size: 1.2em;">File Content</label>
                        @forelse ($indexfields as $indexfield)
                            <div class="form-group">
                                <label for="{{ $indexfield->name }}">{{ $indexfield->name }}</label>
                                <input type="{{ $indexfield->type }}"
                                       id="{{ $indexfield->name }}"
                                       name="data[{{ $indexfield->name }}]"
                                       class="form-control"
                                       placeholder="Enter {{ $indexfield->name }}"
                                       maxlength="{{ $indexfield->length }}"
                                       value="{{ old('data.' . $indexfield->name, $existingData ? $existingData->{$indexfield->name} : '') }}">
                            </div>
                        @empty
                            <div class="form-group">
                                <label for="filename">Filename</label>
                                <div id="filename" class="form-control" readonly>{{ $filename }}</div>
                            </div>
                            <div class="form-group">
                                <label for="batch">Batch</label>
                                <div id="batch" class="form-control" readonly>{{ $folder }}</div>
                            </div>
                        @endforelse
                        @if($indexfields->isNotEmpty())
                            <button type="button" id="editing-button" class="btn btn-custom-orange">Editing</button>
                            <button type="submit" class="btn btn-primary">Submit and Next</button>
                        @endif
                    </form>

                    <form method="GET" action="{{ route('recordtype1.previous', ['filename' => $filename, 'pdf' => $pdf, 'folder' => $folder]) }}">
                        @csrf
                        <button type="submit" class="btn btn-secondary mt-2">Previous file</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    #pdf-container {
        position: fixed;
        top: 60px; /* adjust this value based on your header height */
        bottom: 0;
        width: 50%;
        overflow-y: auto;
    }

    #pdf-frame {
        width: 100%;
        height: 100vh; /* set the height of the iframe to take full height */
    }

    #form-container {
        margin-left: 50%; /* push the form to the right of the fixed PDF container */
    }

    .btn-custom-orange {
        background-color: orange;
        color: white;
    }

    .btn-custom-orange:hover {
        background-color: darkorange;
        color: white;
    }
</style>

@endsection


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const inputFields = document.querySelectorAll('.form-control');

        inputFields.forEach(input => {
            input.addEventListener('input', function () {
                if (this.value.length > parseInt(this.getAttribute('maxlength'))) {
                    this.value = this.value.slice(0, parseInt(this.getAttribute('maxlength')));
                }
            });
        });

        document.getElementById('editing-button').addEventListener('click', function() {
            const pdfFrame = document.getElementById('pdf-frame');
            const pdfUrl = pdfFrame.src;

            Swal.fire({
                title: 'Loading...',
                html: 'Opening PDF in Adobe Acrobat in <b></b> milliseconds.',
                timer: 3000,
                timerProgressBar: true,
                didOpen: () => {
                    Swal.showLoading();
                    const b = Swal.getHtmlContainer().querySelector('b');
                    let timerInterval = setInterval(() => {
                        b.textContent = Swal.getTimerLeft();
                    }, 100);
                    Swal._timerInterval = timerInterval;
                },
                willClose: () => {
                    clearInterval(Swal._timerInterval);
                    window.open(pdfUrl, '_blank');
                    // extract($_REQUEST);
                    // $filename = realpath($filename);
                    // //replace internal server path to network path
                    // $filename = str_replace("C:\xampp\htdocs\Cloud-Indexing-Laravel\public\storage\input\PO Agro\batch\TRANSKRIP_MINI_AMEEN-1.pdf"); 
                    // function acrobat($filename) {
                    // header("Content-type: text/plain");
                    // header("Content-Disposition: attachment; filename=acrobat.cmd");
                    // print $filename; //dowload file called acrobat.cmd
                    // }
                    // //call the function with the command to open pdf by default program.
                    // acrobat( "start \"\" \"$filename\" ".PHP_EOL." DEL \"%~f0\"");
                }
            });
        });
    });
</script>