@extends('website.layouts.app')

@section('content')
    <div class="container">
        <div class="pb-5">
            <div class="back_page">
                <i class="fa-solid fa-arrow-left"></i>
                <a href="{{ route('customer.dashboard') }}">Back to dashboard</a>
            </div>

            <div class="mandatory-form-container">
                <div class="card">
                    <div class="card-header">
                        <div class="h5 mb-0">Documents Upload</div>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('customer.saveDocumentsForm') }}" class="form-horizontal" method="POST">
                            @csrf
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="aadhar_document" class="form-label">Aadhar Card <span class="text-danger">*</span></label>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="preview">
                                            <img id="aadharPreview" src="{{ isset($aadharDocument) ? asset('storage/'.$aadharDocument['path']) : '' }}" alt="Aadhar Document" style="max-width: 100%; display: {{ isset($aadharDocument) ? 'block' : 'none' }};">
                                        </div>
                                        <input type="file" name="aadhar_document" id="aadhar_document" class="form-control document-upload" data-preview="aadharPreview" data-folder="aadhar_documents" required>
                                        @error('aadhar_document')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4">
                                        <div class="preview">
                                            <img id="panPreview" src="{{ isset($panDocument) ? '' : '' }}" alt="Pan Document" style="max-width: 100%; display: {{ isset($panDocument) ? 'block' : 'none' }};">
                                        </div>
                                        <input type="file" name="pan_document" id="pan_document" class="form-control document-upload" data-preview="panPreview" data-folder="pan_documents" required>
                                        @error('pan_document')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4">
                                        <div class="preview">
                                            <img id="dlPreview" src="{{ isset($dlDocument) ? asset('storage/'.$dlDocument['path']) : '' }}" alt="Driving Liscense Document" style="max-width: 100%; display: {{ isset($panDocument) ? 'block' : 'none' }};">
                                        </div>
                                        <input type="file" name="pan_document" id="pan_document" class="form-control document-upload" data-preview="panPreview" data-folder="pan_documents" required>
                                        @error('pan_document')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('inline-script')
<script>
    $(document).ready(function() {
    $('.document-upload').on('change', function(event) {
        var input = event.target;
        var previewId = $(this).data('preview');
        var folder = $(this).data('folder');

        // Preview the uploaded image
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#' + previewId).attr('src', e.target.result).show();
            }

            reader.readAsDataURL(input.files[0]);
        }

        // Auto-upload the file via AJAX
        var formData = new FormData();
        formData.append(input.name, input.files[0]);
        formData.append('folder', folder); // Custom folder name

        $.ajax({
            url: '{{ route('customer.saveDocumentsForm') }}',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}' // Include CSRF token
            },
            success: function(response) {
                alert('File uploaded successfully!');

                // Handle additional logic, like saving file_id if necessary
            },
            error: function(xhr) {
                alert('File upload failed!');
            }
        });
    });
});

    </script>
@endpush