@include('layouts.header')

<div class="container-fluid">
        <a href="{{ url('show_proof') }}" class="cancel">Back</a>
        <button type="button" id="showphotobtn" class="btn btn-primary">Add Photo</button>
        
        
        <div id="uploadsection" style="display:none">
            <div class="section-title">Employee Photo Upload</div>
                   <form id="photo" method="POST" action="{{ url('uploadPhoto') }}" enctype="multipart/form-data">
                    @csrf
                 <!--Employee Photo Upload -->
                    <label for="photo">PHOTO</label>
                    <input type="file" name="photo" id="photo" accept=".jpg"><br>
                    <button type="submit" id="uploadsection" class="btn btn-info">Upload</button>
     </form>
        </div>

        <div class="section-title">Employee Proof Upload</div>
            <form id="bulkproof" method="POST" class="form-split" enctype="multipart/form-data">
                @csrf
                    <label for="aadhaar" class="form-label">Upload Aadhaar(s):</label>
                    <input type="file" name="aadhaar" id="aadhaar" accept=".jpg,.jpeg" /></br>

                    <label for="pan" class="form-label">Upload PAN(s):</label>
                    <input type="file" name="pan" id="pan" accept=".jpg,.jpeg" /></br>

                    <label for="voter" class="form-label">Upload Voter(s):</label>
                    <input type="file" name="voter" id="voter" accept=".jpg,.jpeg" /></br>

                    <label for="dl" class="form-label"> Upload DL(s):</label>
                    <input type="file" name="dl" id="dl" accept=".jpg,.jpeg" /></br>

                    <label for="passport" class="form-label ">Upload Passport(s):</label>
                    <input type="file" name="passport" id="passport" accept=".jpg,.jpeg" /></br>

                    <button type="submit" name="submit" class="btn btn-light">Upload</button>
                </form>
                                
            <div id="show-proof">
                @if(session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif
            </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#bulkproof').on('submit', function(e) {
        e.preventDefault();

        var formData = new FormData(this);
     
        // Add CSRF token to the AJAX request headers
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            type: 'POST',  // Method: POST
            url: '{{ url('aproof') }}',  //target the correct route
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data) {
                $('#show-proof').html('<div class="alert alert-success">Proof uploaded successfully!</div>');
            },
            error:function(xhr, status, error) {
                $('#show-proof').html('<div class="alert alert-danger">Error uploading Proof.</div>');
            }
        });
    });
      // Toggle visibility of the upload form when the "Upload Photo" is clicked
      $('#showphotobtn').click(function() {
        $('#uploadsection').toggle(); // Show or hide the form
    });
});
</script>
  @include('layouts.footer')