@extends('layouts.header')
@section('content')

<style>
    .pagination {
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 0;
    }

    .pagination li {
        margin: 0 5px;
    }

    .pagination a,
    .pagination span {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid #ddd;
        color: #007bff;
        text-decoration: none;
        border-radius: 4px;
    }

    .pagination a:hover {
        background-color: #f0f0f0;
    }

    .pagination .active span {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
    }

    .pagination .disabled span {
        color: #ccc;
        pointer-events: none;
    }

    .ticket-description {
        padding: 15px;
        width: 100%;
        white-space: pre-wrap;
        /* Preserves line breaks and spaces */
        word-wrap: break-word;
        /* Breaks long words */
        line-height: 1.5;
        background-color: #f8f9fa;
        border-radius: 4px;
    }

    /* Style for paragraphs within description */
    .ticket-description p {
        margin-bottom: 10px;
    }

    /* Style for lists within description */
    .ticket-description ul,
    .ticket-description ol {
        padding-left: 20px;
        margin-bottom: 10px;
    }
    
</style>



<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Tickets List</h3>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('HealthandGlow.CustomReport') }}" class="mb-4">
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Created From</label>
                            <input type="date" name="created_from" class="form-control"
                                value="{{ request('created_from') }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Created To</label>
                            <input type="date" name="created_to" class="form-control"
                                value="{{ request('created_to') }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>City</label>
                            <select name="city" class="form-control customDropdown">
                                <option value="">All Cities</option>
                                @foreach($cities as $city)
                                <option value="{{ $city->DropDownListId }}"
                                    {{ request('city') == $city->DropDownListId ? 'selected' : '' }}>
                                    {{ $city->DropDownListName }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Department</label>
                            <select name="department" class="form-control customDropdown">
                                <option value="">All Departments</option>
                                @foreach($departments as $dept)
                                <option value="{{ $dept->DropDownListId }}"
                                    {{ request('department') == $dept->DropDownListId ? 'selected' : '' }}>
                                    {{ $dept->DropDownListName }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Status</label>
                            <select name="status[]" class="form-control customDropdown" multiple>
                                <option value="">All Statuses</option>
                                @foreach($statuses as $status)
                                <option value="{{ $status->DropDownListId }}"
                                    {{ in_array($status->DropDownListId, request('status', [])) ? 'selected' : '' }}>
                                    {{ $status->DropDownListName }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <div>
                                <button type="submit" class="btn btn-primary">Filter</button>
                                <a href="{{ route('HealthandGlow.CustomReport') }}" class="btn btn-secondary">Reset</a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div>
                <a href="{{ route('tickets.export.excel', request()->all()) }}" class="btn btn-success">
                    Export to Excel
                </a>



                <div class="table-responsive">
                    <table id="ticketsTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>SL No</th>
                                <th>Date Created</th>
                                <th>Created By</th>
                                <th>Store Name</th>
                                <th>Ticket Number</th>
                                <th>Department Name</th>
                                <th>Issue</th>
                                <th>Subject</th>
                                <th>City</th>
                                <th>Banner</th>
                                <th>Description</th>
                                <th>Current Status</th>
                                <th>Re-Assigned On</th>
                                <th>Re-Assigned By</th>
                                <th>Working Progress On</th>
                                <th>Working Progress By</th>
                                <th>Pending Approval Made on</th>
                                <th>Pending Approval Changed By</th>
                                <th>Overdue On</th>
                                <th>Changed to Overdue By</th>
                                <th>Progress Description</th>
                                <th>Resolution</th>
                                <th>Date Resolved</th>
                                <th>Resolved By</th>
                                <th>Date Closed</th>
                                <th>Closed By</th>
                                <th>SLA</th>
                                <th>Resolved within TAT?</th>
                                <th>Assigned User</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($tickets as $ticket)
                            <tr>
                                <td>{{ ($tickets->currentPage() - 1) * $tickets->perPage() + $loop->iteration }}</td>
                                <td>{{ $ticket->CreatedDate }}</td>
                                <td>{{ $ticket->CreatedBy }}</td>
                                <td>{{ $ticket->StoreName }}</td>
                                <td>{{ $ticket->TicketNumber }}</td>
                                <td>{{ $ticket->DepartmentHG }}</td>
                                <td>{{ $ticket->Issues }}</td>
                                <td>{{ $ticket->TicketName }}</td>
                                <td>{{ $ticket->PrimaryAddress_City }}</td>
                                <td>{{ $ticket->Banner }}</td>
                                <td>{{ str_replace(["\r", "\n"], ' ', $ticket->DescriptionHG) }}</td>
                                <td>{{ $ticket->Status }}</td>
                                <td>{{ $ticket->ReassignedOn }}</td>
                                <td>{{ $ticket->ReassignedBy }}</td>
                                <td>{{ $ticket->WorkingProgressOn }}</td>
                                <td>{{ $ticket->WorkingProgressBy }}</td>
                                <td>{{ $ticket->PendingApprovalMadeOn }}</td>
                                <td>{{ $ticket->PendingApprovalChangedBy }}</td>
                                <td>{{ $ticket->OverdueOn }}</td>
                                <td>{{ $ticket->ChangedToOverdueBy }}</td>
                                <td>{{ str_replace(["\r", "\n"], ' ', $ticket->ProgressDesc) }}</td>
                                <td>{{ str_replace(["\r", "\n"], ' ', $ticket->Resolution) }}</td>
                                <td>{{ $ticket->DateResolved }}</td>
                                <td>{{ $ticket->ResolvedBy }}</td>
                                <td>{{ $ticket->DateClosed }}</td>
                                <td>{{ $ticket->ClosedBy }}</td>
                                <td>{{ $ticket->SLA }}</td>
                                <td>{{ $ticket->ResolvedwithinTAT }}</td>
                                <td>{{ $ticket->AssignedUserId }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="d-flex justify-content-center mt-4">
                    {{ $tickets->links('pagination.custom') }}
                </div>
            </div>


        </div>
    </div>
</div>

<!-- Include xlsx library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

<script>
    function exportReportToExcel(tableId, buttonId) {
        const table = document.getElementById(tableId);
        const button = document.getElementById(buttonId);

        if (!table || typeof XLSX === 'undefined') {
            console.error('Table not found or XLSX library not loaded');
            alert('Error: Table not found or XLSX library not loaded.');
            return;
        }

        try {
            // Show loading state
            if (button) {
                button.disabled = true;
                button.textContent = 'Downloading...';
            }

            let data = [];

            // Extract headers from <thead>
            const headerCells = table.querySelectorAll('thead tr th');
            let headers = [];
            headerCells.forEach(th => {
                headers.push(th.textContent.trim());
            });
            data.push(headers);

            // Extract rows from <tbody>
            const rows = table.querySelectorAll('tbody tr');
            rows.forEach(row => {
                let rowData = [];
                row.querySelectorAll('td').forEach(cell => {
                    rowData.push(cell.textContent.trim());
                });
                data.push(rowData);
            });

            // Create worksheet from extracted data
            const ws = XLSX.utils.aoa_to_sheet(data);

            // Set column widths based on content length
            const colWidths = headers.map(() => ({
                wch: 20
            }));
            ws['!cols'] = colWidths;

            // Create workbook and append worksheet
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Tickets_Report");

            // Generate Excel file and trigger download
            const wbout = XLSX.write(wb, {
                bookType: 'xlsx',
                type: 'array'
            });
            const blob = new Blob([wbout], {
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            });

            // Create download link and trigger it
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `tickets_report.xlsx`;
            document.body.appendChild(a);
            a.click();

            // Cleanup
            setTimeout(() => {
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
                if (button) {
                    button.disabled = false;
                    button.textContent = 'Export to Excel';
                }
            }, 100);

        } catch (error) {
            console.error('Error exporting Excel:', error);
            alert('Error exporting data. Please try again.');
            if (button) {
                button.disabled = false;
                button.textContent = 'Export to Excel';
            }
        }
    }
</script>

@endsection