@extends('layouts.admin')
@section('title')
    Logbook
@endsection
@section('customStyle')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
@endsection
@section('content')
<div class="container-fluid">
    <!-- Content Row -->


    <div class="row justify-content-center">
        <div class="col-md-12 mt-5">
            <!-- Basic Card Example -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex">
                    {{-- <h6 class="font-weight-bold text-primary">Slideshow</h6>
                    <a href="admin/slideshow/create" class="btn btn-primary">Tambah</a> --}}
                    <h5 class="font-weight-bold text-primary">Logbook</h5>
                    {{-- <a href="logbook/create" class="btn btn-primary ml-auto">Tambah</a> --}}
                </div>
                <div class="card-body">
                    {{-- <a href="{{ url('/admin/participant/create') }}" class="btn btn-primary mb-3">Tambah Peserta</a> --}}
                    <div class="table table-responsive">
                        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th>
                                    <th>Tanggal</th>
                                    <th>Judul</th>
                                    <th width="10%">Foto</th>
                                    <th>Ringkasan</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                    
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $no=1;
                                @endphp
                                @foreach ($data as $data)
                                <tr>
                                    <td>{{$no++}}</td>
                                    <td>{{$data->name_user}}</td>
                                    <td>{{$data->tanggal_logbook}}</td>
                                    <td>{{$data->judul_logbook}}</td>
                                    <td><a href="{{asset('logbook/'.$data->foto_logbook)}}" target="_blank"><img style="width: 100%" src="{{asset('logbook/'.$data->foto_logbook)}}"></a></td>
                                    <td>{{$data->ringkasan_logbook}}</td>
                                    <td>
                                        @if ($data->status_logbook == 'M')
                                            <button class="btn btn-dark text-white">Menunggu</button>
                                        @endif
                                        @if ($data->status_logbook == 'S')
                                            <button class="btn btn-success text-white">Disetujui</button>
                                        @endif
                                        @if ($data->status_logbook == 'T')
                                            <button class="btn btn-danger text-white">Ditolak</button>
                                        @endif
                                    </td>
                                    <td>

                                        <!-- Button trigger modal -->
                                        <button type="button" class="btn btn-success open-modal" data-toggle="modal" data-target="#validasiModal" data-id="{{$data->id_logbook}}" title="Validasi Data">
                                            <i class="fas fa-check"></i>
                                        </button>
                                    
                                        <a href="{{ url('/admin/logbook/show/'.$data->id_logbook) }}">
                                            <button type="button" class="btn btn-info btn-rounded btn-icon" data-toggle="tooltip" data-custom-class="tooltip-dark" data-placement="top" title="Detail Data">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </a>
                                    
                                        <form onsubmit="return confirm('Apakah anda yakin ingin menghapus data ini?')"
                                            class="d-inline"
                                            action="{{ url('/admin/logbook/delete/'.$data->id_logbook) }}"
                                            method="POST">
                                            @csrf
                                                <input
                                                type="hidden"
                                                name="_method"
                                                value="DELETE">

                                                <button type="submit" class="btn btn-danger btn-rounded btn-icon" data-toggle="tooltip" data-custom-class="tooltip-danger" data-placement="top" title="Hapus Data">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                        </form>
                                    
                                    </td>
                                    
                                </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <div class="modal fade" id="validasiModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Form Validasi</h5>
                                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                                </div>
                                <div class="modal-body">
                                    <form enctype="multipart/form-data" class="forms-sample form" method="POST" action="">
                                        @csrf
                                        @method('post')
                                        <div class="form-group">
                                            <label for="name">Nama</label>
                                            <div class="text-dark nama"></div>
                                        </div>

                                        <div class="form-group">
                                            <label for="tanggal">Tanggal</label>
                                            <div class="text-dark tanggal"></div>
                                        </div>
                    
                                        <div class="form-group">
                                            <label for="judul">Judul</label>
                                            <div class="text-dark judul"></div>
                                        </div>

                                        <div class="form-group">
                                            <label for="ringkasan">Ringkasan</label>
                                            <div class="text-dark ringkasan"></div>
                                        </div>
                    
                                        <div class="form-group">
                                            <label for="foto">Foto</label>
                                            <a class="link_foto" href="" target="_blank">
                                                <img class="foto" style="width: 100%" src="" alt="foto">
                                            </a>
                                            
                                        </div>
                    
                                        <div class="form-group">
                                            <label for="status">Status</label>
                                            <select name="status_logbook" id="status_logbook" class="form-control status">
                                                <option value="">Pilih Status</option>
                                                <option value="M">Menunggu</option>
                                                <option value="S">Disetujui</option>
                                                <option value="T">Ditolak</option>
                                            </select>
                                        </div>
                    
                    
                                        @if ($errors->any())
                                        <div class="alert alert-danger">
                                            <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                            </ul>
                                        </div>
                                        @endif
                    
                                        <div class="modal-footer">
                                            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                                            <button type="submit" class="btn btn-primary mr-2">Update</button>
                                            {{-- <a href="/admslideshow" class="btn btn-light">Kembali</a> --}}
                                        </div>
                                    </form>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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>
    @if (Session::has('status') && Session::get('status') == 'logbook-done')
    <script>
         Swal.fire({
            icon: 'success',
            title: 'Selamat!',
            text: 'Status Logbook Berhasil Di Perbaharui.',
            // showConfirmButton: false,
            timer: 2000
        })
    </script>
    @endif
    <script>
        $(document).ready( function () {
            $('#dataTable').DataTable({
                stateSave: true,
            });

            $(document).on('click', '.open-modal', function() {
                var logbookId = $(this).data('id');
                $.ajax({
                    type: 'GET',
                    url: '{{ route('admLogbook.ajaxShowModal') }}',
                    data: {id: logbookId}, // Melewatkan ID sebagai parameter
                    success: function(response) {
                        console.log("CEK", response);
                        $(".nama").text(response.data.user_name);
                        $(".tanggal").text(response.data.tanggal_logbook);
                        $(".judul").text(response.data.judul_logbook);
                        $(".ringkasan").text(response.data.ringkasan_logbook);
                        var imageUrl = response.data.foto_logbook;
                        $(".foto").attr("src", '/logbook/' + imageUrl);
                        $(".link_foto").attr("href", '/logbook/' + imageUrl);
                        $(".status").val(response.data.status_logbook);



                         // Mendapatkan id dari response ajax
                        var id = response.data.id_logbook;

                        // Menggabungkan id dengan action url
                        var actionUrl = '{{ url('admin/logbook/updateModal') }}/' + id;

                        // Set action form dengan actionUrl yang telah digabungkan
                        $('.form').attr('action', actionUrl);
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            });
        } );
    </script>
@endsection