@extends('layouts.master')
@section('title') {{$title}} @lang('translation.starter')  @endsection
@section('css')
    <link href="{{ URL::asset('build/libs/quill/quill.core.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/quill/quill.bubble.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/quill/quill.snow.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Pages @endslot
@slot('title') {{$title}}  @endslot
@endcomponent
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">
                                   {{ $title }} : {{ $kegiatan->nama_kegiatan }} , {{ App\Helpers\CustomHelper::Hari($kegiatan->tanggal) }} {{ App\Helpers\CustomHelper::format_tanggal($kegiatan->tanggal) }}
                                </h4>
                                <div class="flex-shrink-0">
                                    <div class="form-check form-switch form-switch-right form-switch-md">
                                        {{-- <a href="{{ route('program.sdm.index') }}" class="btn btn-sm btn-info">Cancel Create</a> --}}
                                    </div>
                                </div>
                            </div><!-- end card header -->
                            <div class="card-body">
                                @php
                                    $peserta =0;
                                    if(isset($manual->jumlah_peserta)){
                                        $peserta=$manual->jumlah_peserta;
                                    }
                                @endphp
                                <form method="POST" action="{{ route('kehadiran.kegiatan.dokumentasisave') }}" enctype="multipart/form-data">
                                    <input type="hidden" name="kehadiran_kegiatan_id" value="{{ $kegiatan->id }}">
                                     @if (isset($manual->file))
                                        <input type="hidden" name="foto_old" value="{{ $manual->file }}">
                                     @endif
                                    @csrf
                                    <div class="row gy-4">
                                        <div id="uploadStatus"></div>
                                        <div id="imagePreview"></div>
                                        @if (isset($manual->file))
                                            <div class="col-md-12" id="lama">
                                                <div class="form-group">
                                                    @php
                                                        $fileExtension = pathinfo($manual->file, PATHINFO_EXTENSION);
                                                    @endphp
                                        
                                                    @if ($fileExtension == 'pdf')
                                                        <iframe src="{{ URL::asset('images/kehadirankegiatan').'/'.$manual->file }}" width="100%" height="800px"></iframe>
                                                    @else
                                                        <img src="{{ URL::asset('images/kehadirankegiatan').'/'.$manual->file }}" height="500" alt="">
                                                    @endif
                                                </div>
                                            </div>
                                        @endif
                                    
                                        <div class="col-md-12">
                                            <div>
                                                <label for="basiInput" class="form-label">File upload <small><i class="text-danger">maksimal 1mb</i></small> @error('foto') <span class="text-danger">{{ $message }}</span> @enderror</label>
                                                {{-- <input type="file" name="foto" id="foto" class="form-control" id="basiInput" accept=".pdf,.jpg,.jpeg,.png"> --}}
                                                <input type="file" name="foto[]" id="foto" class="form-control" accept=".pdf,.jpg,.jpeg,.png" multiple>
                                            </div>
                                        </div>
                                        

                                        <div class="col-md-12">
                                            <div>
                                                <label for="basiInput" class="form-label">Link Foto Dokumentasi Kegiatan</label>
                                                
                                                <input type="text" name="link" class="form-control">
                                            </div>
                                        </div>
                                        


                                        <div class="col-lg-6 col-md-6">
                                            <div>
                                                <button type="submit" class="btn btn-outline-success waves-effect waves-light full">Simpan</button>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <a href="{{ route('kehadiran.kegiatan.index') }}" class="btn btn-outline-danger waves-effect waves-light full">Batal</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
    
<script src="{{ URL::asset('build/js/external/jquery364.min.js') }}"></script>
<script src="{{ URL::asset('build/js/external/swal.js') }}"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>

    <script>
        $(document).ready(function(){
            $("#sideProgKeps").attr('aria-expanded',true);
            $("#sideProgKep").addClass('show');
            $("#kehadiran_kegiatan").addClass('active');
            $("#visimisi").removeClass('active');
        });
    </script>


<script>
    $(document).ready(function() {
        $('#foto').on('change', function(event) {
            const file = event.target.files[0];
            
            if (file && file.size <= 1048576) { // 1MB limit
                var formData = new FormData();
                formData.append('foto', file);
                formData.append('kehadiran_kegiatan_id', '{{ $kegiatan->id }}'); // Add any other form data here
                formData.append('_token', '{{ csrf_token() }}'); // Add CSRF token for Laravel
                
                $.ajax({
                    url: '{{ route('kehadiran.kegiatan.dokumentasisave') }}', // Your Laravel route
                    type: 'POST',
                    data: formData,
                    contentType: false, // Let the browser determine the content type
                    processData: false, // Don't process the data (let jQuery handle the file)
                    beforeSend: function() {
                        $('#uploadStatus').html('Uploading...');
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#uploadStatus').html('Upload successful!');
                            $("#lama").hide();
                            // Display the uploaded image or file preview
                            var fileUrl = '{{ asset('images/kehadirankegiatan') }}/' + response.file;
                            console.log(fileUrl);
                            
                            // Check if the file is an image or PDF
                            if (response.file.endsWith('.pdf')) {
                                $('#imagePreview').html('<iframe src="' + fileUrl + '" width="100%" height="800px"></iframe>');
                            } else {
                                $('#imagePreview').html('<img src="' + fileUrl + '" alt="Uploaded Image" class="img-fluid">');
                            }
                        } else {
                            $('#uploadStatus').html('Upload failed: ' + response.error);
                        }
                    },
                    error: function(xhr, status, error) {
                        $('#uploadStatus').html('An error occurred while uploading the file.');
                    }
                });
            } else {
                alert('Maksimal upload file adalah 1MB.');
                event.target.value = ''; // Reset the file input
            }
        });
    });


    // $(document).ready(function() {
    //     $('#foto').on('change', function(event) {
    //         const files = event.target.files;

    //         if (files.length > 0) {
    //             let formData = new FormData();
    //             formData.append('kehadiran_kegiatan_id', '{{ $kegiatan->id }}');
    //             formData.append('_token', '{{ csrf_token() }}');

    //             // Append each file to the formData
    //             $.each(files, function(index, file) {
    //                 formData.append('foto[]', file);
    //             });

    //             $.ajax({
    //                 url: '{{ route('kehadiran.kegiatan.dokumentasisave') }}',
    //                 type: 'POST',
    //                 data: formData,
    //                 contentType: false,
    //                 processData: false,
    //                 beforeSend: function() {
    //                     $('#uploadStatus').html('Uploading...');
    //                 },
    //                 success: function(response) {
    //                     if (response.success) {
    //                         $('#uploadStatus').html('Upload successful!');
    //                         $("#lama").hide();

    //                         // Display the uploaded files
    //                         $.each(response.files, function(index, fileUrl) {
    //                             // Check if the file is an image or PDF and display accordingly
    //                             if (fileUrl.endsWith('.pdf')) {
    //                                 $('#imagePreview').append('<iframe src="' + fileUrl + '" width="100%" height="800px"></iframe>');
    //                             } else {
    //                                 $('#imagePreview').append('<img src="' + fileUrl + '" alt="Uploaded Image" class="img-fluid">');
    //                             }
    //                         });
    //                     } else {
    //                         $('#uploadStatus').html('Upload failed: ' + response.error);
    //                     }
    //                 },
    //                 error: function(xhr, status, error) {
    //                     $('#uploadStatus').html('An error occurred while uploading the file.');
    //                 }
    //             });
    //         }
    //     });
    // });

    </script>

@endsection