@extends('layout.master')
@section('parentPageTitle', 'Tahap Pelaksanaan')
@section('title', 'Tahap Pelaksanaan')


@section('content')
    <div class="section-body mt-3">
        <div class="container-fluid">
            <div class="tab-content mt-3">
                <div>
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title"><b>Tahap Pelaksanaan - Penelitian</b></h3>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <label for="selectYear">Pilih Tahun:</label>
                                    <select id="selectYear" class="form-control">
                                        <option value="">-- Pilih Tahun --</option>
                                        <option value="2020">2020</option>
                                        <option value="2021">2021</option>
                                        <option value="2022">2022</option>
                                        <option value="2023">2023</option>
                                        <option value="2024">2024</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="selectFaculty">Pilih Fakultas:</label>
                                    <select id="selectFaculty" class="form-control">
                                        <option disabled selected>-- Pilih Fakultas --</option>
                                        @foreach ($fakultas as $f)
                                            <option value="{{ $f->fakultas_id }}">{{ $f->nama_fakultas }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 align-self-end">
                                    <button id="btnSort" class="btn btn-primary">Sort</button>
                                </div>
                            </div>
                        </div>
                        <div class="table" style="overflow-x: auto;">
                            <table id="exampless" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th style="width: 2%;">#</th>
                                        <th style="width: 3%;">Tahun</th>
                                        <th style="width: 10%;">Fakultas</th>
                                        <th style="width: 10%;">Program Studi</th>
                                        <th style="width: 10%;">Nama Dosen</th>
                                        <th style="width: 10%;">NIDN</th>
                                        <th style="width: 40%;">Judul Proposal</th>
                                        <th style="width: 10%;">Status Proposal</th>
                                        <th style="width: 50%;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($allData as $data)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $data->tahun_pelaksanaan_hibah }}</td>
                                            <td>{{ $data->nama_fakultas }}</td>
                                            <td>{{ $data->nama_prodi }}</td>
                                            <td>{{ $data->nama_dosen }}</td>
                                            <td>{{ $data->nidn }}</td>
                                            <td>{{ $data->judul_proposal }}</td>
                                            <td>{{ $data->status_proposal }}</td>
                                            <td style="text-align: center;"><a href="/proposal_dosen/detailData/{{ $data->proposal_id }}" target="_blank"><i class="fa fa-eye"></i></a></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('page-styles')
    <style>
        #exampless {
            width: 100%;
            /* Ensure the table takes the full width of its container */
        }

        .card {
            padding: 15px;
            /* Adjust padding as needed */
        }

        .dt-buttons {
            margin-bottom: 15px;
            /* Add some space below the buttons */
            display: flex;
            /* Use flexbox for alignment */
            justify-content: flex-start;
            /* Align buttons to the left */
            align-items: center;
            /* Center vertically */
        }

        .dt-button {
            border-radius: 5px;
            /* Rounded corners */
            padding: 6px 12px;
            /* Adjust padding */
            margin-right: 5px;
            margin-left: 2px;
            /* Space between buttons */
            background-color: #007bff;
            /* Blue background */
            color: #fff;
            /* White text */
            border: none;
            /* Remove default border */
            transition: background-color 0.3s, color 0.3s;
            /* Smooth transition */
        }

        .dt-button:hover {
            background-color: #fff;
            /* White background on hover */
            color: #007bff;
            /* Blue text on hover */
        }

        .dt-button:active {
            background-color: #0056b3;
            /* Darker blue on active */
            color: #fff;
            /* White text */
        }

        .dt-button:focus {
            outline: 2px solid #007bff;
            /* Blue outline for focus */
            outline-offset: 2px;
            /* Space between outline and button */
        }

        /* Style for the DataTable search input */
        .dataTables_filter {
            margin-right: 20px;
            /* Margin on the right */
            display: flex;
            /* Use flex to align items */
            align-items: center;
            /* Center vertically */
        }

        .dataTables_filter label {
            margin-right: 10px;
            color: #007bff;
            /* Change label text color to blue */
            /* Space between label and input */
        }

        .dataTables_filter input {
            border: 1px solid #007bff;
            /* Border color */
            border-radius: 5px;
            /* Rounded corners */
            padding: 6px 10px;
            /* Padding for the input */
            background-color: #fff;
            /* Blue background */
            color: #fff;
            /* White text */
            transition: background-color 0.3s, color 0.3s;
            /* Smooth transition */
        }

        .dataTables_filter input:hover {
            background-color: #fff;
            /* Darker blue on hover */
            color: #007bff;
            /* White text on hover */
        }

        .dataTables_filter input:focus {
            outline: none;
            /* Remove default outline */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
            /* Add shadow for focus */
        }

        @media (max-width: 768px) {
            .dt-button {
                margin-left: 10px;
                /* Less space on smaller screens */
                padding: 4px 8px;
                /* Smaller padding */
            }

            .dataTables_filter input {
                width: 100%;
                /* Full width on smaller screens */
            }

            table {
                width: 100%;
                /* Full width for the table on smaller screens */
                margin-left: 0;
                /* No margin on smaller screens */
                margin-right: 0;
                /* No margin on smaller screens */
            }
        }

        .dataTables_info {
            margin-left: 20px !important;
            /* Add left margin to the pagination info */
        }
    </style>

    {{-- <link rel="stylesheet" href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/sweetalert/sweetalert.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/dropify/css/dropify.min.css') }}"> --}}
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
    <!-- Buttons CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap4.min.css">
@stop

@section('page-script')
    <!-- jQuery -->
    {{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}

    <!-- DataTables -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>

    <!-- Buttons Extension -->
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>


    <script src="{{ asset('assets/js/core.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Initialize the DataTable and store the instance
            var table = $('#exampless').DataTable({
                dom: 'Bfrtip', // Menambahkan tombol
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                searching: true,
                paging: true
            });

            $('#btnSort').click(function() {
                var selectedYear = $('#selectYear').val();
                var selectedFaculty = $('#selectFaculty').val();

                // Validate that at least one filter is selected
                if (!selectedYear && !selectedFaculty) {
                    alert("Please select at least one filter (Year or Faculty).");
                    return;
                }

                // Show loading indicator
                $('#loadingIndicator').show(); // Assuming you have a loading indicator

                // Perform AJAX request to fetch sorted data
                $.ajax({
                    url: '/sortingRekapAkhirPenelitian', // Replace with your route to handle sorting
                    method: 'GET',
                    data: {
                        year: selectedYear || '', // Send empty string if no year is selected
                        faculty: selectedFaculty ||
                            '' // Send empty string if no faculty is selected
                    },
                    success: function(response) {
                        // Clear the existing DataTable
                        table.clear();

                        // Populate the table with new data
                        $.each(response.data, function(index, data) {
                            table.row.add([
                                index + 1,
                                data.tahun_pelaksanaan_hibah,
                                data.nama_fakultas,
                                data.nama_prodi,
                                data.nama_dosen,
                                data.nidn,
                                data.judul_proposal,
                                data.status_proposal,
                                '<td style="text-align: center;"><a href="/proposal_dosen/detailData/' + data.proposal_id + '" target="_blank"><i class="fa fa-eye"></i></a></td>'
                            ]);
                        });

                        // Draw the table with the new data
                        table.draw();
                    },
                    error: function(err) {
                        console.error("Error fetching sorted data:", err);
                        alert("Failed to fetch data, please try again.");
                    },
                    complete: function() {
                        // Hide loading indicator
                        $('#loadingIndicator').hide(); // Assuming you have a loading indicator
                    }
                });
            });
        });
    </script>


@stop