<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AMEA</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

</head>

<body>
    <div class="container-fluid mt-4">
        <div class="row">
            <img class="img-fluid" style="width: 300px" src="{{ asset('img/amea2.png') }}" alt="">
        </div>
        <div class="row mt-2">
            <div class="col-12">
                <div class="card mb-3">
                    <div class="card-body">
                        <form action="{{ $url }}" id="myForm" method="post" enctype="multipart/form-data">
                            @csrf
                            <h2>
                                Merci de Saisir les Document Nécessaire
                            </h2>
                            @foreach ($docs->typedocument as $type)
                                <div class=" form-group mb-3">
                                    <label for="simpleinput" style="font-size: 18px;font-weight: bold" class="form-label text-dark">{{ $type->type }} :</label>
                                    <input multiple type="file" accept="image/*" onchange="onUpload(this.files,{{ $type->id }})"
                                        value="{{ $type->id }}" id="{{ $type->type }}"
                                        name="{{ $type->type }}[]"
                                        class="form-control @error('{{ $type->type }}') is-invalid  @enderror">

                                    @error('{{ $type->type }}')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                @if ($type->id == 4)
                                    <div class=" form-group mb-3">
                                        <label for="simpleinput" class="form-label">Montant Devis :</label>
                                        <input type="number" min="1" required name="montant_devis"
                                            class="form-control @error('montant_devis') is-invalid  @enderror">

                                        @error('montant_devis')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                @endif
                                @if ($type->id == 8)
                                    <div class=" form-group mb-3">
                                        <label for="simpleinput" class="form-label">montant_facture</label>
                                        <input type="number" min="1" required name="montant_facture"
                                            class="form-control @error('montant_facture') is-invalid  @enderror">
                                        @error('montant_facture')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                @endif
                            @endforeach
                            <input type="hidden" name="pdf" id="pdf" class="pdf" value="">

                            <div class="mr-3">
                                <button class="btn btn-primary" id="btn" type="submit">Télecharger</button>
                            </div>
                        </form>
                    </div>
                </div>

                <p class="text-danger"><span>&#9888;</span>
                    Ce lien est Temporaire Aprés le télechargement des Photo , Il ne sera Pas Accéssible . </p>
            </div>
        </div>
            <input type="file" name="images[]" accept="image/*" capture="camera" multiple>

    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js"></script>
    <script>


        function onUpload(files,type) {
            for (let i = 0; i < files.length; i++) {
                var file = files[i];
                var reader = new FileReader();
                console.log(type);
                reader.onload = e => {
                    var data = atob(e.target.result.replace(/.*base64,/, ''));
                    renderPDF(data ,type);
                }
                reader.readAsDataURL(file);

            }
        }
        var table =[];
        async function renderPDF(data,type) {
            const pdf = await pdfjsLib.getDocument({
                data
            }).promise;
            for (let i = 1; i <= pdf.numPages; i++) {
                const image = document.createElement('img');
                const page = await pdf.getPage(i);
                const viewport = page.getViewport({
                    scale: 2
                });
                const canvas = document.createElement('canvas');
                const canvasContext = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                await page.render({
                    canvasContext,
                    viewport
                }).promise;
                const data = canvas.toDataURL('image/png');
                image.src = data;
                image.classList.add('img');
                table.push(data);
                table.push(type);

            }
            console.log(table);
            let btn = document.getElementById('btn');
            btn.addEventListener('click', (e) => {
                e.preventDefault();
                console.log(table);

                document.getElementById('pdf').value = table;
                document.getElementsByClassName('pdf');
                document.getElementById("myForm").submit();
            });

        }
    </script>
    <script>
        // window.onload = function() {
        //     var form = document.getElementById('uploadForm'),
        //         imageInput = document.getElementById('pv');

        //     form.onsubmit = function() {
        //         var isValid = /\.jpe?g$/i.test(imageInput.value);

        //         if (!isValid) {
        //             alert('Only jpg files allowed!');
        //         }

        //         return isValid;
        //     };
        // };
    </script>
</body>

</html>
