@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.2.5/css/buttons.bootstrap5.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .link {
        text-decoration: underline;
    }

    .select2-container .select2-selection--single {
        height: 38px !important;
        border: 1px solid #d9dee3;
        border-radius: 0.375rem;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }
</style>
@section('content')

    <div class="row align-items-center mb-3">
        <div class="col d-flex align-items-center justify-content-between">
            <h5 class="mb-0">Trainee Management</h5>

            <button id="exportExcel" class="btn btn-success">
                <i class="fa fa-file-excel"></i> Export Excel
            </button>
        </div>
    </div>
    <!-- Filters -->
    <div class="card mb-3 mt-3">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <label class="form-label">Staff Name</label>
                    <select id="filter_name" class="form-select">
                        <option value="">All Staff</option>
                        @foreach($staffs as $staff)
                            <option value="{{ $staff->id }}">{{ $staff->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Role</label>
                    <select id="filter_role" class="form-select">
                        <option value="">All Roles</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->designation }}">{{ $role->designation }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4 d-flex align-items-end">
                    <button class="btn btn-secondary" id="resetFilter">Reset</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-datatable table-responsive pt-0">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 px-3">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table id="staff" class="table">
                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th>NAME</th>
                                    <th>TASKS</th>
                                    <th class="text-nowrap">Weekly Report</th>
                                    <th>COUNT</th>
                                    <th>MOBILE</th>
                                    <th>OFFICE EMAIL</th>
                                    <th>PERSONAL EMAIL</th>
                                    <th>ROLE</th>
                                    <th>TYPE</th>
                                    <th>Bank</th>
                                    <th>STATUS</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="delete_staff" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <h5 class="fw-bold mb-2">Are you sure!!</h5>
                <p class="text-muted">Are you confirm to delete?</p>
                <form id="delete_form" method="POST" action="{{ route('delete_staff') }}">
                    @csrf
                    <input type="hidden" name="id" id="deleteId">
                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-danger p-3 ms-2 fw-semibold" id="submit_btn">
                            Yes, Sure
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- toggle status -->
    <div class="modal fade" id="toggle_status" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <h5 class="fw-bold mb-2">Are you sure!!</h5>
                <p class="text-muted" id="toggle_status_text"></p>
                <form id="ToggleForm" method="POST" action="{{ route('toggle_status') }}">
                    @csrf
                    <input type="hidden" name="id" id="toggle_staff_id">
                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold  me-3" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" id="submit_toggle" class="btn btn-gray p-3 fw-semibold">
                            Yes, Sure
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/3.2.5/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.5/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.5/js/buttons.html5.min.js"></script>
    <script>
        var jq = jQuery.noConflict();

        jq(document).ready(function () {

            // Select2 on the filter dropdowns
            jq('#filter_name, #filter_role').select2({width: '100%'});

            var table = jq('#staff').DataTable({
                processing: true,
                serverSide: true,

                ajax: {
                    url: "{{ route('inactive_trainee_data') }}",
                    data: function (d) {
                        d.staff_id = jq('#filter_name').val();
                        d.role = jq('#filter_role').val();
                    }
                },

                dom: 'Bfrtip',

                buttons: [{
                    extend: 'excelHtml5',
                    title: 'Inactive Trainee Management',
                    exportOptions: {
                        columns: [0, 1, 4, 5, 6, 7, 8, 9, 10, 11]
                    }
                }],

                columnDefs: [{targets: '_all', className: 'text-nowrap'}],

                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'name', name: 'name'},
                    {data: 'task', name: 'task', orderable: false, searchable: false},
                    {data: 'report', name: 'report', orderable: false, searchable: false},
                    {data: 'tasks_count', name: 'tasks_count', orderable: false, searchable: false},
                    {data: 'mobile', name: 'mobile'},
                    {data: 'email', name: 'email'},
                    {data: 'personal_email', name: 'personal_email'},
                    {data: 'designation', name: 'designation'},
                    {data: 'type', name: 'type'},
                    {data: 'bank', name: 'bank', orderable: false, searchable: false},
                    {data: 'is_active', name: 'is_active'},
                    {data: 'actions', name: 'actions', orderable: false, searchable: false}
                ],

                order: [[1, 'asc']]
            });

            // hide default button, use custom one
            table.buttons().container().hide();

            jq('#exportExcel').on('click', function () {
                table.button('.buttons-excel').trigger();
            });

            // Reload on filter change
            jq('#filter_name, #filter_role').on('change', function () {
                table.ajax.reload();
            });

            // Reset
            jq('#resetFilter').on('click', function () {
                jq('#filter_name').val('').trigger('change.select2');
                jq('#filter_role').val('').trigger('change.select2');
                table.ajax.reload();
            });
        });

        function setDeleteId(button) {
            var staffId = button.getAttribute('data-id');
            document.getElementById('deleteId').value = staffId;
        }
        document.getElementById('submitDeleteBtn').addEventListener('click', function (e) {
            e.preventDefault();
            this.disabled = true;
            this.innerText = 'Deleting...';
            document.getElementById('deleteForm').submit();
        });
        //toggle_status
        function setToggleId(button) {
            const staffId = button.getAttribute('data-id');
            const isActive = button.getAttribute('data-active') === '1';
            document.getElementById('toggle_staff_id').value = staffId;
            const statusText = document.getElementById('toggle_status_text');
            const submitBtn = document.getElementById('submit_toggle');
            if (isActive) {
                statusText.textContent = "Are you sure you want to block this staff?";
            } else {
                statusText.textContent = "Are you sure you want to unblock this staff?";
            }
            const icon = document.querySelector(`#toggle_icon_${staffId}`);
            if (icon) {
                icon.setAttribute('fill', isActive ? '#FF0000' : '#28a745');
                icon.setAttribute('fill-opacity', '1');
            }
        }
        document.getElementById('ToggleForm').addEventListener('submit', function () {
            const btn = document.getElementById('submit_toggle');
            btn.disabled = true;
            btn.innerText = 'Processing...';
        });
        document.getElementById("exp").addEventListener("click", function () {
            let table = document.getElementById("staff");
            let rows = Array.from(table.querySelectorAll("tr"));
            let csv = rows.map(row => {
                let cells = Array.from(row.querySelectorAll("th, td"));
                return cells.map(cell => `"${cell.innerText}"`).join(",");
            }).join("\n");
            let blob = new Blob([csv], {
                type: "text/csv"
            });
            let url = URL.createObjectURL(blob);
            let a = document.createElement("a");
            a.href = url;
            a.download = "modules.csv"; // File name
            a.click();
            URL.revokeObjectURL(url);
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const weekSelect = document.getElementById('weekSelect');
            const totalWeeksBadge = document.getElementById('totalWeeksBadge');
            const year = new Date().getFullYear();
            // Get ISO week number
            function getISOWeek(date) {
                const tempDate = new Date(date);
                tempDate.setHours(0, 0, 0, 0);
                tempDate.setDate(tempDate.getDate() + 3 - (tempDate.getDay() + 6) % 7);
                const week1 = new Date(tempDate.getFullYear(), 0, 4);
                return 1 + Math.round(
                    ((tempDate - week1) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7
                );
            }
            // Get Monday of a given ISO week
            function getDateOfISOWeek(week, year) {
                const simple = new Date(year, 0, 1 + (week - 1) * 7);
                const dow = simple.getDay();
                const ISOweekStart = simple;
                if (dow <= 4)
                    ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);
                else
                    ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
                return ISOweekStart;
            }
            // Get total ISO weeks in a year
            function getTotalWeeks(year) {
                const d = new Date(year, 11, 31);
                return getISOWeek(d);
            }
            const totalWeeks = getTotalWeeks(year);
            totalWeeksBadge.innerHTML = `Total Weeks: <strong>${totalWeeks}</strong>`;
            const currentWeek = getISOWeek(new Date());
            for (let week = 1; week <= totalWeeks; week++) {
                const startDate = getDateOfISOWeek(week, year);
                const endDate = new Date(startDate);
                endDate.setDate(startDate.getDate() + 6);
                const format = (date) =>
                    date.toLocaleDateString('en-GB', {
                        day: '2-digit',
                        month: 'short'
                    });
                const option = document.createElement('option');
                option.value = `${year}-W${week.toString().padStart(2, '0')}`;
                option.textContent =
                    `W${week.toString().padStart(2, '0')} (${format(startDate)} – ${format(endDate)})`;
                if (week === currentWeek) {
                    option.selected = true;
                }
                weekSelect.appendChild(option);
            }
        });
    </script>
    <script>
        const progressData = [{
            name: 'UI',
            spent: 12,
            total: 20
        },
        {
            name: 'Frontend',
            spent: 28,
            total: 40
        },
        {
            name: 'Backend',
            spent: 35,
            total: 30
        },
        {
            name: 'App Development',
            spent: 18,
            total: 25
        },
        {
            name: 'Testing',
            spent: 6,
            total: 15
        }
        ];

        function getProgressColor(percent) {
            if (percent <= 70) return 'bg-success';
            if (percent <= 100) return 'bg-warning';
            return 'bg-danger';
        }

        function renderProgressGrid() {
            const grid = document.getElementById('progressGrid');
            grid.innerHTML = '';
            progressData.forEach(item => {
                const percent = Math.round((item.spent / item.total) * 100);
                const width = Math.min(percent, 100);
                const color = getProgressColor(percent);
                const col = `
                                <div class="col-md-6 mb-3">
                                    <div class="p-2 border rounded-3 h-100">
                                        <div class="d-flex justify-content-between mb-1">
                                            <small class="fw-semibold">${item.name}</small>
                                            <small class="text-muted">${item.spent}h / ${item.total}h (${percent}%)</small>
                                        </div>
                                        <div class="progress" style="height: 8px;">
                                            <div class="progress-bar ${color}"
                                                 role="progressbar"
                                                 style="width: ${width}%">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `;
                grid.insertAdjacentHTML('beforeend', col);
            });
        }
        renderProgressGrid();
    </script>
@endsection