@extends('layouts.app')

@push('styles')
    <!-- DataTables -->
    <link
        href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}"
        rel="stylesheet" type="text/css" />
    <link
        href="{{ asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}"
        rel="stylesheet" type="text/css" />
<style>
    body {
        font-family: Arial, sans-serif;
    }

    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
    }

    .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 500px;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

</style>
@endpush

@section('content')
<!-- Start Page-content-Wrapper -->
<div class="page-content-wrapper">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if (Auth::user()->hasRole('Admin') && !isset($_GET['siswa_id']))
                        <div class="row">
                            <div class="col-md-6">
                                <!-- This column takes half of the width -->
                                <h4 class="card-title">Jadwal Kegiatan Harian Siswa</h4>
                                {{-- <button id="openModal">Open Modal</button> --}}
                            </div>
                        </div>

                        <table id="datatable" class="table table-bordered dt-responsive nowrap"
                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th>
                                    <th>Username</th>
                                    <th>No Identitas</th>
                                    <th>Jenis Kelamin</th>
                                    <th>No Telp</th>
                                    <th>Tempat / Tanggal Lahir</th>
                                    <th>Pendidikan Terakhir</th>
                                    <th>Alamat</th>
                                    <th>Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach($siswa as $data)
                                    <tr>
                                        <td> {{ $loop->iteration }} </td>
                                        <td> {{ $data->siswa->nama_siswa }} </td>
                                        <td> {{ $data->username }} </td>
                                        <td> {{ $data->siswa->no_identitas }} </td>
                                        <td> {{ $data->siswa->jenis_kelamin }} </td>
                                        <td> {{ $data->siswa->no_hp_siswa }} </td>
                                        <td> {{ $data->siswa->tempat_lahir }} / {{ $data->siswa->tanggal_lahir }} </td>
                                        <td> {{ $data->siswa->tingkatan_sekolah }} </td>
                                        <td> {{ $data->siswa->alamat_siswa }} </td>
                                        <td>
                                            @can('edit '.$menu)
                                                <a href="{{ url("/jadwal_kegiatan_harian") }}?siswa_id={{$data->id}}"
                                                    class="btn btn-sm btn-primary"><i class="fa fa-eye"> </i> Show</a>
                                            @endcan
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @else
                        <div class="row">
                            <div class="col-md-6">
                                <!-- This column takes half of the width -->
                                <h4 class="card-title">Jadwal Kegiatan Harian</h4>
                                {{-- <button id="openModal">Open Modal</button> --}}

                                <div id="myModal" class="modal">
                                    <div class="modal-content">
                                        <div class="d-flex justify-content-between">
                                            <div class="p-1">
                                                <h3>Target Capaian</h3>
                                            </div>
                                            <div class="p-1"></div>
                                            <div class="p-1">
                                                <span class="close" id="closeModal">&times;</span>
                                            </div>
                                        </div>
                                        <form action="{{url('/jadwal_kegiatan_harian/target_capaian')}}" method="post">
                                            @csrf
                                            <input type="hidden" name="jadwal_kegiatan_harian_id" id="jadwal_kegiatan_harian_id" value="">
                                            <div class="mb-3">
                                                <label class="form-label">Jadwal</label>
                                                <input type="text" name="jadwal" id="jadwal" class="form-control" required readonly placeholder="Jadwal" />
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Jenis Kegiatan</label>
                                                <input type="text" name="jenis_kegiatan" id="jenis_kegiatan" class="form-control" required readonly placeholder="Jenis Kegiatan" />
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Nama Kegiatan</label>
                                                <input type="text" name="nama_kegiatan" id="nama_kegiatan" class="form-control" required value="" readonly placeholder="Nama Kegiatan" />
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Target Tercapai</label>
                                                <input type="datetime-local" name="target_tercapai" id="target_tercapai" class="form-control" required required value="" placeholder="Target Tercapai" />
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Keterangan</label>
                                                <textarea name="keterangan" id="keterangan" class="form-control" cols="30" rows="10" required></textarea>
                                            </div>
                                            <div class="mb-3">
                                                <div class="d-flex justify-content-between">
                                                    <div class="p-1"></div>
                                                    <div class="p-1">
                                                        <button type="submit" class="btn btn-sm btn-primary">Submit Data ></button>
                                                    </div>
                                                    <div class="p-1"></div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6 text-end">
                                <!-- This column takes the other half and aligns content to the right -->
                                    <a href="{{ route('jadwal_kegiatan_harian.create') }}"
                                        class="btn btn-sm btn-success mb-2"><i class="fa fa-plus"> </i>Tambah Data</a>
                            </div>
                        </div>

                        <table id="datatable" class="table table-bordered dt-responsive nowrap"
                            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th width="10px">No</th>
                                    <th>Jenis Kegiatan</th>
                                    <th>Kegiatan</th>
                                    <th>Waktu</th>
                                    <th>Hari</th>
                                    <th>Pengawas</th>
                                    <th>Dibuat</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach($jadwalKegiatan as $jadwal)
                                <tr>
                                    <td> {{ $loop->iteration }} </td>
                                    <td>{{ $jadwal->jenisKegiatan->nama_jenis_kegiatan }}</td>
                                    <td>{{ $jadwal->kegiatan }}</td>
                                    <td>{{ $jadwal->waktu }}</td>
                                    <td>{{ $jadwal->hari }}</td>
                                    <td>{{ $jadwal->pengawas->nama_petugas }}</td>
                                    <td>{{date('d F Y : h i s', strtotime($jadwal->created_at))}}</td>
                                    <td>
                                        <button class="btn btn-sm btn-primary openModal" data-targettercapai="{{$jadwal->target_tercapai}}" data-keterangan="{{$jadwal->keterangan}}" data-id="{{$jadwal->id}}" data-jadwal="{{$jadwal->hari}}, {{$jadwal->waktu}}" data-kegiatan="{{ $jadwal->kegiatan }}" data-JenisKegiatan="{{ $jadwal->jenisKegiatan->nama_jenis_kegiatan }}">Target Capaian</button>
                                        <a href="{{ route('jadwal_kegiatan_harian.edit', $jadwal->id) }}" class="btn btn-sm btn-primary"><i class="fa fa-pen"> </i>
                                            Edit</a>
                                        <form action="{{ route('jadwal_kegiatan_harian.destroy', $jadwal->id) }}" method="POST" style="display:inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i>
                                                Hapus</button>
                                        </form>
                                    </td>
                                </tr>

                                @endforeach
                            </tbody>
                        </table>
                    @endif


                </div>
            </div>
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->
</div>
<!-- End Page-content -->
@endsection

@push('scripts')
    <!-- Required datatable js -->
    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}">
    </script>
    <script
        src="{{ asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}">
    </script>
    <!-- Buttons examples -->
    <script
        src="{{ asset('assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}">
    </script>
    <script
        src="{{ asset('assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}">
    </script>
    <script src="{{ asset('assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/build/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/build/vfs_fonts.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.html5.min.js') }}">
    </script>
    <script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.print.min.js') }}">
    </script>
    <script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.colVis.min.js') }}">
    </script>
    <!-- Responsive examples -->
    <script
        src="{{ asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}">
    </script>
    <script
        src="{{ asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}">
    </script>

    <!-- Datatable init js -->
    <script src="{{ asset('assets/js/pages/datatables.init.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Open the modal
            $('.openModal').click(function() {
                $('#jadwal').val($(this).data('jadwal'));
                $('#jenis_kegiatan').val($(this).data('jeniskegiatan'));
                $('#nama_kegiatan').val($(this).data('kegiatan'));
                $('#jadwal_kegiatan_harian_id').val($(this).data('id'));

                $('#target_tercapai').val($(this).data('targettercapai'));
                $('#keterangan').val($(this).data('keterangan'));

                $('#myModal').fadeIn();
            });

            // Close the modal when the close button is clicked
            $('#closeModal').click(function() {
                $('#myModal').fadeOut();
            });

            // Close the modal when clicking outside of the modal content
            $(window).click(function(event) {
                if ($(event.target).is('#myModal')) {
                    $('#myModal').fadeOut();
                }
            });

            // Confirm button action
            $('#confirm').click(function() {
                alert('Confirmed!');
                $('#myModal').fadeOut();
            });
        });

    </script>
@endpush