@extends('layouts.participant')
@section('title')
    Logbook
@endsection

@section('customStyle')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/user_home.css') }}" />
@endsection

@section('content')
<div class="container">
    <div style="margin-top: 120px;">
        <div class="d-flex align-items-center justify-content-between">
            <h2>Data Lobook</h2>
            <div class="d-sm-flex align-items-center">
                <a href="{{ url('/home') }}" class="mr-lg-2">
                    <button type="button" class="btn btn-warning btn-rounded btn-icon" data-toggle="tooltip" data-custom-class="tooltip-dark" data-placement="top" title="Detail Data">
                        Kembali
                    </button>
                </a>
                <a href="{{ url('/participant/logbook/create') }}">
                    <button type="button" class="btn btn-success btn-rounded btn-icon" data-toggle="tooltip" data-custom-class="tooltip-dark" data-placement="top" title="Detail Data">
                        Tambah Data
                    </button>
                </a>
            </div>
        </div>
        <div class="card-body shadow-sm mt-2">
            <div class="table table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Tanggal</th>
                            <th>Judul</th>
                            <th width="10%">Foto</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $no=1;
                        @endphp
                        @foreach ($data as $item)
                        <tr>
                            <th scope="row">{{$no++}}</th>
                            <td>{{ \Carbon\Carbon::parse($item->tanggal_logbook)->format('d M Y') }}</td>
                            <td>{{$item->judul_logbook}}</td>
                            <td><a href="{{asset('logbook/'.$item->foto_logbook)}}" target="_blank"><img style="width: 100%" src="{{asset('logbook/'.$item->foto_logbook)}}"></a></td>
                            <td>
                                @if ($item->status_logbook == 'M')
                                    <button class="btn btn-dark text-white">Menunggu</button>
                                @endif
                                @if ($item->status_logbook == 'S')
                                    <button class="btn btn-success text-white">Disetujui</button>
                                @endif
                                @if ($item->status_logbook == 'T')
                                    <button class="btn btn-danger text-white">Ditolak</button>
                                @endif
                            </td>
                            <td>
                                <div class="d-sm-flex align-items-center">
                                    <a href="{{ url('/participant/logbook/detail/'. $item->id_logbook) }}">
                                        <button type="button" class="btn btn-info btn-rounded btn-icon mr-lg-2" data-toggle="tooltip" data-custom-class="tooltip-dark" data-placement="top" title="Detail Data">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </a>
                                    @if ($item->status_logbook == 'M')
                                        <a href="{{ url('/participant/logbook/edit/'. $item->id_logbook) }}">
                                            <button type="button" class="btn btn-dark btn-rounded btn-icon" data-toggle="tooltip" data-custom-class="tooltip-dark" data-placement="top" title="Edit Data">
                                                <i class="fas fa-pencil-alt"></i>
                                            </button>
                                        </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('js/sweetalert2.js') }}"></script>
    <script>
        $(document).ready( function () {
            $('#dataTable').DataTable();
        } );
    </script>
    @if (Session::has('status') && Session::get('status') == 'logbook-done')
    <script>
         Swal.fire({
            icon: 'success',
            title: 'Selamat!',
            text: 'Logbook berhasil tersimpan.',
            showConfirmButton: false,
            timer: 1000
        })
    </script>
    @endif
@endsection