@extends('layouts.app')
@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-12">
                <h1 class="float-left">Detail Laporan Perkara</h1>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">

            <div class="col-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title mb-0">Upload File</h3>
                    </div>
                    <form action="{{url('laporan-perkara/timeline/upload')}}" method="POST" id="kt_form" class="form">
                        <input type="hidden" class="form-control" name="lp_id" value="{{$lp->id}}">
                        <div class="card-body">
                            <input type="file" class="file" name="file" multiple data-allow-reorder="true">
                        </div>

                        <div class="card-footer d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">Kirim File</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="col-12">
                <form>
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Ketik Pesan">
                            <span class="input-group-append">
                                <button class="btn btn-primary btn-flat" type="button" id="button-addon2">Kirim</button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</section>

<section class="content">

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="timeline">
                    <ul>
                        
                        <li>{{asset($dt->file)}}</li>
                        @endforeach
                    </ul>

                    <ul>
                        @foreach($lp->media as $i) 
                        <li>{{asset('storage/'.$i->id.'/'.$i->file_name)}}</li>
                        @endforeach
                    </ul>
                    @php
                        $tanggalAktif = '';
                    @endphp

                    @foreach($lp->detail as $dt)
                        @if($tanggalAktif == '')
                            <div class="time-label">
                                <span class="bg-red">{{$dt->created_at->format('d M Y')}}</span>
                            </div>
                            @php
                                $tanggalAktif = $dt->created_at->format('d M Y');
                            @endphp
                        @else
                        @if($tanggalAktif == $dt->created_at->format('d M Y'))

                        @else
                            <div class="time-label">
                                <span class="bg-red">{{$dt->created_at->format('d M Y')}}</span>
                            </div>
                            @php
                                $tanggalAktif = $dt->created_at->format('d M Y');
                            @endphp
                        @endif

                    <div>
                        <i class="fas fa-envelope bg-blue"></i>
                        <div class="timeline-item">
                            <span class="time"><i class="fas fa-clock"></i> 12:05</span>
                            <h3 class="timeline-header"><a href="#">{{$}}</a> upload file</h3>
                            <div class="timeline-body">
                                Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
                                weebly ning heekya handango imeem plugg dopplr jibjab, movity
                                jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
                                quora plaxo ideeli hulu weebly balihoo...
                            </div>
                            <div class="timeline-footer">
                                <a class="btn btn-primary btn-sm">Download</a>
                            </div>
                        </div>
                    </div>


                    <div>
                        <i class="fas fa-user bg-green"></i>
                        <div class="timeline-item">
                            <span class="time"><i class="fas fa-clock"></i> 5 mins ago</span>
                            <h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend
                                request</h3>
                        </div>
                    </div>


                    <div>
                        <i class="fas fa-comments bg-yellow"></i>
                        <div class="timeline-item">
                            <span class="time"><i class="fas fa-clock"></i> 27 mins ago</span>
                            <h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>
                            <div class="timeline-body">
                                Take me to your leader!
                                Switzerland is small and neutral!
                                We are more like Germany, ambitious and misunderstood!
                            </div>
                            <div class="timeline-footer">
                                <a class="btn btn-warning btn-sm">View comment</a>
                            </div>
                        </div>
                    </div>


                    <div class="time-label">
                        <span class="bg-green">3 Jan. 2014</span>
                    </div>


                    <div>
                        <i class="fa fa-camera bg-purple"></i>
                        <div class="timeline-item">
                            <span class="time"><i class="fas fa-clock"></i> 2 days ago</span>
                            <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
                            <div class="timeline-body">
                                <img src="https://placehold.it/150x100" alt="...">
                                <img src="https://placehold.it/150x100" alt="...">
                                <img src="https://placehold.it/150x100" alt="...">
                                <img src="https://placehold.it/150x100" alt="...">
                                <img src="https://placehold.it/150x100" alt="...">
                            </div>
                        </div>
                    </div>


                    <div>
                        <i class="fas fa-video bg-maroon"></i>
                        <div class="timeline-item">
                            <span class="time"><i class="fas fa-clock"></i> 5 days ago</span>
                            <h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
                            <div class="timeline-body">
                                <div class="embed-responsive embed-responsive-16by9">
                                    <iframe class="embed-responsive-item"
                                        src="https://www.youtube.com/embed/tMWkeBIohBs" allowfullscreen=""></iframe>
                                </div>
                            </div>
                            <div class="timeline-footer">
                                <a href="#" class="btn btn-sm bg-maroon">See comments</a>
                            </div>
                        </div>
                    </div>

                    <div>
                        <i class="fas fa-clock bg-gray"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>


</section>
@endsection


@section('js')

<script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>
<script>
    // Get a reference to the file input element
    const inputElement = document.querySelector('input[type="file"]');

    // Create a FilePond instance
    const pond = FilePond.create(inputElement);

    FilePond.setOptions({
        server: {
            url: "{{url('laporan-shift-upload')}}",
            process: {
                ondata: (formData) => {
                    formData.append('folderid', "{{uniqid().'_'.now()->timestamp}}");
                    return formData;
                },
            },

            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        }
    });

    pond.on('processfilestart', (error, file) => {
        document.getElementById("kt_submit").disabled = true;
        console.log('Process Start');
    });

    pond.on('processfiles', (error, file) => {
        document.getElementById("kt_submit").disabled = false;
        console.log('Process End');
    });

</script>
@endsection