@extends('Staff.layout')
<style>
    .dt-search { display: none !important; }
</style>
@section('content')
    <div class="row align-items-center justify-content-between mb-1 mt-0">
        <div class="col-auto">
            <h5 class="mb-0">
                <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                    style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('staff_task') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>My Assigned Bugs
            </h5>
        </div>
    </div>

    {{-- Summary cards --}}
    <div class="row g-2 mt-0 mb-2">
        <div class="col-lg-3 col-md-6">
            <div class="card shadow-sm border-0 h-100"><div class="card-body d-flex align-items-center justify-content-between">
                <div><p class="text-muted mb-1">Total Bugs</p><h4 class="fw-bold mb-0">{{ $totalBugs }}</h4></div>
                <div class="bg-label-primary rounded p-3"><i class="ti tabler-bug text-danger fs-3"></i></div>
            </div></div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="card shadow-sm border-0 h-100"><div class="card-body d-flex align-items-center justify-content-between">
                <div><p class="text-muted mb-1">Pending Bugs</p><h4 class="fw-bold mb-0">{{ $pendingBugs }}</h4></div>
                <div class="bg-label-warning rounded p-3"><i class="ti tabler-clock text-warning fs-3"></i></div>
            </div></div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="card shadow-sm border-0 h-100"><div class="card-body d-flex align-items-center justify-content-between">
                <div><p class="text-muted mb-1">Developer Completed</p><h4 class="fw-bold mb-0">{{ $developerCompleted }}</h4></div>
                <div class="bg-label-success rounded p-3"><i class="ti tabler-code text-success fs-3"></i></div>
            </div></div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="card shadow-sm border-0 h-100"><div class="card-body d-flex align-items-center justify-content-between">
                <div><p class="text-muted mb-1">Testing Completed</p><h4 class="fw-bold mb-0">{{ $testingCompleted }}</h4></div>
                <div class="bg-label-success rounded p-3"><i class="ti tabler-circle-check text-success fs-3"></i></div>
            </div></div>
        </div>
    </div>

    {{-- Filters --}}
    <div class="card p-3 shadow-sm border-0 mb-2">
        <h6 class="d-flex align-items-center mb-3"><i class="ti tabler-filter text-primary me-2"></i> Filter</h6>
        <div class="row g-3 align-items-end">

            <div class="col-12 col-md-6 col-lg">
                <label class="form-label">Project</label>
                <select id="filterProject" class="form-select">
                    <option value="">All Projects</option>
                    @foreach($projects as $project)
                        <option value="{{ $project->id }}">{{ $project->project_name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-12 col-md-6 col-lg">
                <label class="form-label">Status</label>
                <select id="filterStatus" class="form-select">
                    <option value="">Select</option>
                    <option>Developer Completed</option>
                    <option>Testing Completed</option>
                    <option>Pending</option>
                    <option>Need Discussion</option>
                </select>
            </div>

            <div class="col-12 col-md-6 col-lg">
                <label class="form-label">Type</label>
                <select id="filterType" class="form-select">
                    <option value="">Select</option>
                    <option>Functionality</option>
                    <option>App</option>
                    <option>Design</option>
                    <option>UI Issue</option>
                    <option>Deploy</option>
                </select>
            </div>

            <div class="col-12 col-md-6 col-lg">
                <label class="form-label">Identified By</label>
                <select id="filterEmployee" class="form-select">
                    <option value="">Select</option>
                    @foreach($staffs as $staff)
                        <option value="{{ $staff->id }}">{{ $staff->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-12 col-md-6 col-lg">
                <label class="form-label">Priority</label>
                <select id="filterPriority" class="form-select">
                    <option value="">Select</option>
                    <option>High</option>
                    <option>Medium</option>
                    <option>Low</option>
                </select>
            </div>

            <div class="col-12 col-md-6 col-lg-2 d-flex gap-2 align-items-end">
                <button id="filterBtn" class="btn btn-primary w-100">Filter</button>
                <button id="resetBtn" class="btn btn-label-secondary w-100">Reset</button>
            </div>
        </div>
    </div>

    {{-- Table --}}
    <div class="card p-0 mt-3">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 p-3">
            <div style="width:90px;">
                <select id="pageLength" class="form-select form-select-sm">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>
            <div class="d-flex align-items-center gap-2 ms-auto">
                <input type="text" id="searchBox" class="form-control form-control-sm" placeholder="Search" style="width:200px;">
                <button class="btn btn-label-secondary btn-sm d-flex align-items-center gap-1" id="btnexport">
                    <i class="ti tabler-upload"></i> Excel
                </button>
            </div>
        </div>

        <div class="table-responsive pt-0 pb-2">
            <table class="table table-hover align-middle mb-0" id="usersTable">
                <thead class="table-light">
                    <tr>
                        <th class="text-nowrap">Sno</th>
                        <th class="text-nowrap">Created Date</th>
                        <th class="text-nowrap">Project</th>
                        <th class="text-nowrap">Identified By</th>
                        <th class="text-nowrap">Panel</th>
                        <th class="text-nowrap">Priority</th>
                        <th class="text-nowrap">Bug Type</th>
                        <th class="text-nowrap">Bug Title</th>
                        <th class="text-nowrap">Module</th>
                        <th class="text-nowrap">Debug By</th>
                        <th class="text-nowrap">Bug Status</th>
                        <th class="text-nowrap">Solved By</th>
                        <th class="text-nowrap">View</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {

            const table = $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('separate_bugs_data') }}",
                    data: function (d) {
                        d.project  = $('#filterProject').val();
                        d.status   = $('#filterStatus').val();
                        d.type     = $('#filterType').val();
                        d.employee = $('#filterEmployee').val();
                        d.priority = $('#filterPriority').val();
                        d.search   = $('#searchBox').val();
                    }
                },
                searching: false,
                paging: true,
                info: true,
                lengthChange: false,
                pageLength: 10,
                ordering: false,
                columns: [
                    {
                        data: null,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    { data: 'date' },
                    { data: 'project' },
                    {
                        data: 'name',
                        render: function (name) { return `<span class="text-nowrap">${name}</span>`; }
                    },
                    { data: 'panel' },
                    {
                        data: 'priority',
                        render: function (priority) { return `<span class="text-danger">${priority}</span>`; }
                    },
                    { data: 'type' },
                    { data: 'title' },
                    { data: 'module' },
                    { data: 'debug' },
                    { data: 'sts' },
                    { data: 'solved_by' },
                    {
                        data: 'id',
                        render: function (id) {
                            return `<a href="/staff/view_bug_detail/${id}"><i class="ti tabler-eye menu-icon"></i></a>`;
                        }
                    }
                ]
            });

            $('#filterBtn').on('click', function () { table.ajax.reload(); });

            // Filters apply automatically when a dropdown changes
            $('#filterProject, #filterStatus, #filterType, #filterEmployee, #filterPriority')
                .on('change', function () { table.ajax.reload(); });

            $('#resetBtn').on('click', function () {
                $('#filterProject, #filterStatus, #filterType, #filterEmployee, #filterPriority, #searchBox').val('');
                table.ajax.reload();
            });

            // Debounced search so it doesn't fire a request on every keystroke
            let timer;
            $('#searchBox').on('keyup', function () {
                clearTimeout(timer);
                timer = setTimeout(function () { table.ajax.reload(); }, 300);
            });

            $('#pageLength').on('change', function () { table.page.len(this.value).draw(); });

            // Excel export (current page rows; see note below)
            $('#btnexport').on('click', function () {
                const data = table.rows().data().toArray();
                const headers = ["Sno","Created At","Project","Identified By","Panel","Priority","Bug Type",
                    "Bug Title","Module","Debug By","Bug Status","Solved By","Testing Scenario",
                    "Current Output","Expected Output","Reopen Count","Suggestion"];

                const csv = [headers.join(",")];
                data.forEach((row, i) => {
                    const cells = [i + 1, row.date, row.project, row.name, row.panel, row.priority, row.type,
                        row.title, row.module, row.debug, row.sts, row.solved_by, row.testing_scenario,
                        row.current_output, row.expected_output, row.reopen_count, row.suggestion];
                    csv.push(cells.map(v => `"${String(v ?? '').replace(/"/g, '""')}"`).join(","));
                });

                const blob = new Blob([csv.join("\n")], { type: 'text/csv;charset=utf-8;' });
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.download = 'my_assigned_bugs.csv';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        });
    </script>
@endsection