@extends('layouts.app')
@section('title')
    All Brands
@endsection
@section('content')
    <div class="card card-white">
        <div class="formwizard">
            <div class="form-header d-flex mb-4"> <span class="stepIndicator finish">Registration</span> <span
                    class="stepIndicator active">Application</span> <span class="stepIndicator">Payment</span> </div>
        </div>
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-normal text-head-color">
            Document Details
            </h6>
        </div>
        <div class="card-body">
            <!-- Loader Start-->
            <div class="overlay">
                <div id="loader"><img src="{{ asset('assets/images/loader.gif') }}" width="200" alt="Loading...">
                </div>
            </div>
            <!-- Loader end-->
            <div class="row col-md-12 justify-content-md-center">
                @csrf
                <table class="table table-responsive table-bordered" style="display: inline-table;">
                    <tbody>
                        <tr>
                            <th width="5%">S.No.</th>
                            <th width="20%">Required Document</th>
                            <th width="25%">Document Specifications</th>
                            <th width="30%">Upload</th>
                            <th width="20%">View</th>
                        </tr>
                        @php $i = 1; @endphp
                        @foreach ($finalArray as $document)
                            <tr>
                                <td>{{ $i++ }}</td>
                                <td>{{ $document['DocumentName'] }} <span class="astric-sign">*</span></td>
                                <td>Document Format:{{ strtoupper($document['DocumentType']) }} <br> Min
                                    Size(KB):{{ $document['DocumentMinSize'] / 1024 }}<br> Max
                                    Size(KB):{{ $document['DocumentMaxSize'] / 1024 }}</td>
                                <td>
                                    <form autocomplete="off" id="{{ $document['DocumentCode'] }}-form" class=""
                                        method="post" enctype="multipart/form-data">
                                        <!-- custom file code end -->
                                        <div class="custom-file mb-3">
                                            <input type="file" class="custom-file-input"
                                                id="file_{{ $document['DocumentCode'] }}"
                                                name="file_{{ $document['DocumentCode'] }}"
                                                data="{{ $document['DocumentCode'] }}-form"
                                                accept="@if($document['DocumentType'] == 'jpg,jpeg') image/jpg,image/jpeg @endif @if($document['DocumentType'] == 'pdf') 
                                                application/pdf
                                                @endif"
                                                >
                                            <label class="custom-file-label"
                                                for="file_{{ $document['DocumentCode'] }}">{{ @$document['UploadDocument'] ?? 'Choose File' }}</label>
                                        </div>

                                        <input type="hidden" id="documentID-{{ $document['DocumentCode'] }}"
                                            name="documentID" value="{{ $document['ID'] }}">
                                        <input type="hidden" name="oldFile" id="oldFile_{{ $document['DocumentCode'] }}"
                                            value="{{ isset($document['UploadID']) ? $document['UploadID'] : '' }}">
                                        <input type="hidden" name="oldFileName"
                                            id="oldFileName{{ $document['DocumentCode'] }}"
                                            value="{{ isset($document['UploadDocument']) ? $document['UploadDocument'] : '' }}">
                                    </form>
                                </td>
                                <td>
                                    @php

                                        $ext = explode(',', $document['DocumentType']);
                                        if (isset($document['UploadDocument'])) {
                                            // $filepath = @Auth::user()->ApplicationNumber . '/' . $document['UploadDocument'];
                                            $filepath = $document['UploadDocument'];
                                            // $fileUrl = asset('uploads/' . $filepath);
                                            // $fileUrl = env('documentPathAPI').$filepath;
                                            $fileUrl = @Config::get('constants.documentPathAPI').$filepath;
                                            $fileName = base64_encode($document['UploadDocument']);

                                            $imagePath = $fileUrl;
                                            $imageData = @base64_encode(file_get_contents($fileUrl));
                                            //  $imageData = base64_encode($fileUrl);
                                            $imageType = pathinfo($imagePath, PATHINFO_EXTENSION);
                                            $imageSrc = 'data:image/' . $imageType . ';base64,' . $imageData;
                                        }
                                    @endphp
                                    @if ((in_array('jpg', $ext) || in_array('jpeg', $ext)) && isset($document['UploadDocument']) && !empty($document['UploadDocument']))
                                    <img src="{{$imageSrc}}" height="100" width="100" id="protected-image">
                                    {{-- <a href="{{ route('fileDownload', ['fileName' => $fileName]) }}"
                                            target="_blank">View</a> --}}
                                    @else
                                        @if (isset($document['UploadDocument']) && !empty($document['UploadDocument']) && $document['DocumentType'] == 'pdf')
                                            <a href="{{ route('fileDownload', ['fileName' => $fileName]) }}"
                                                target="_blank">View</a>
                                        @endif
                                    @endif
                                </td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>

                <div class="row mb-3 justify-content-center">
                    <div class="col-sm-6">
                        <a href="{{ route('apply-post') }}" class="btn btn-sm btn-warning"><i
                                class="ri-arrow-left-circle-line float-start me-1"></i> Previous</a>
                    </div>
                    <div class="col-sm-6">
                        @if (isset($nextbuttonvisible) && $nextbuttonvisible == 1)
                            <form action="{{ route('documentsubmit') }}" method="get">
                                <button type="submit" class="btn btn-sm btn-warning float-end" id="submitButton"><i
                                        class="ri-save-line float-start me-1"></i> Submit</button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            $('input[type="file"]').on('change', function(e) {

                e.preventDefault();
                const fileInputName = $(this).attr('data');
                let documentCodeArr = fileInputName.split("-");
                const fileInputId = $(this).attr('id');

                const formData = new FormData($('#' + documentCodeArr[0] + '-form')[0]);
                let documentID = $('#documentID-' + documentCodeArr[0]).val();
                let oldFileID = $('#oldFile_' + documentCodeArr[0]).val();
                let oldFileName = $('#oldFileName' + documentCodeArr[0]).val();
                formData.append('file', 'file_' + documentCodeArr[0]);
                formData.append('documentCode', documentCodeArr[0]);
                formData.append('documentID', documentID);
                formData.append('oldFileID', oldFileID);
                formData.append('oldFileName', oldFileName);

                $.ajax({
                    url: "{{ route('documentupload') }}",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        $('.overlay').show();
                    },
                    complete: function() {
                        $('.overlay').hide();
                    },
                    success: function(response) {
                        console.log(response); 
                        if (response.status == true) {
                            window.location.href = '{{ route('document') }}';
                            Swal.fire({
                                icon: 'success',
                                text: response.message
                            })
                        } else {
                            Swal.fire({
                                icon: 'error',
                                text: response.message
                            })
                            $('#' + fileInputId).val('');
                        }
                    },
                    error: function(response) {
                        var errors = response.responseJSON.errors;
                        Swal.fire({
                            icon: 'error',
                            text: errors,
                        })
                    }
                });
            });
        });

        $(document).ready(function() {
            // Add the following code if you want the name of the file appear on select
            $(".custom-file-input").on("change", function() {
                var fileName = $(this).val().split("\\").pop();
                $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
            });

        });
    </script>
@endpush