@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;
    }

    .summary-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 8px;
        padding: 25px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .summary-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 15px;
    }

    .summary-item {
        background: rgba(255,255,255,0.2);
        border-radius: 8px;
        padding: 15px 20px;
        flex: 1;
        min-width: 200px;
        backdrop-filter: blur(10px);
    }

    .summary-label {
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 5px;
        opacity: 0.9;
    }

    .summary-value {
        font-size: 2rem;
        font-weight: bold;
    }

    .user-closures {
        background: #fff;
        padding: 15px;
        border-left: 4px solid #007bff;
        margin: 10px 0;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .user-section {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 15px;
    }

    .badge-new {
        background-color: #28a745;
    }

    .badge-reopened {
        background-color: #dc3545;
    }

    .agent-stat {
        background: #fff;
        padding: 12px;
        border-radius: 6px;
        margin-bottom: 10px;
        border-left: 3px solid #17a2b8;
    }
</style>

<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Tickets Closure Report (Default: Today's Tickets)</h3>
        </div>
        <div class="card-body">
            <!-- Main Summary Section -->
            <div class="summary-card">
                <h4 style="margin-bottom: 20px;">Overall Summary</h4>
                <div class="summary-row">
                    <div class="summary-item">
                        <div class="summary-label">Total Tickets</div>
                        <div class="summary-value">{{ $summary['total_tickets'] ?? 0 }}</div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-label">New Tickets</div>
                        <div class="summary-value">{{ $summary['total_new_tickets'] ?? 0 }}</div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-label">Reopened Tickets</div>
                        <div class="summary-value">{{ $summary['total_reopened_tickets'] ?? 0 }}</div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-label">Total Reopens</div>
                        <div class="summary-value">{{ $summary['total_reopens'] ?? 0 }}</div>
                    </div>
                </div>
                
                <div class="summary-row">
                    <div class="summary-item">
                        <div class="summary-label">Total Closures</div>
                        <div class="summary-value">{{ $summary['total_closures'] ?? 0 }}</div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-label">New Tickets Closures</div>
                        <div class="summary-value">{{ $summary['new_tickets_closures'] ?? 0 }}</div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-label">Reopened Tickets Closures</div>
                        <div class="summary-value">{{ $summary['reopened_tickets_closures'] ?? 0 }}</div>
                    </div>
                </div>
            </div>

            <!-- Agent-wise Ticket Count -->
            @if(!empty($summary['agent_wise_ticket_count']))
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">Agent-wise Ticket Count</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        @foreach($summary['agent_wise_ticket_count'] as $agentStat)
                        <div class="col-md-4 mb-3">
                            <div class="agent-stat">
                                <h6><strong>{{ $agentStat['agent_name'] }}</strong></h6>
                                <div class="mt-2">
                                    <span class="badge badge-primary">Total: {{ $agentStat['total_tickets'] }}</span>
                                    <span class="badge badge-success ml-1">New: {{ $agentStat['new_tickets'] }}</span>
                                    <span class="badge badge-danger ml-1">Reopened: {{ $agentStat['reopened_tickets'] }}</span>
                                </div>
                                <div class="mt-2">
                                    <span class="badge badge-secondary">Closed: {{ $agentStat['closed_tickets'] }}</span>
                                    <span class="badge badge-warning ml-1">Open: {{ $agentStat['open_tickets'] }}</span>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <!-- User-wise Closure Summary -->
            @if(!empty($summary['users_closure_summary']))
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Overall Closures by Users</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        @foreach($summary['users_closure_summary'] as $userSummary)
                        <div class="col-md-6 mb-3">
                            <div class="user-closures">
                                <h6><strong>{{ $userSummary['user_name'] ?? 'Unknown User' }}</strong></h6>
                                <div class="mt-2">
                                    <span class="badge badge-primary">Total: {{ $userSummary['total_closures'] }}</span>
                                    <span class="badge badge-success ml-2">New: {{ $userSummary['new_tickets_closures'] ?? 0 }}</span>
                                    <span class="badge badge-danger ml-2">Reopened: {{ $userSummary['reopened_tickets_closures'] ?? 0 }}</span>
                                </div>
                                <small class="text-muted d-block mt-2">Tickets Closed: {{ count($userSummary['tickets_closed']) }}</small>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <!-- Filter Section -->
            <form method="GET" action="{{ url()->current() }}" class="mb-4" id="filterForm">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Date Range</label>
                            <select name="date_filter" class="form-control" id="dateFilterSelect" onchange="toggleCustomDates()">
                                <option value="today" {{ request('date_filter', 'today') == 'today' ? 'selected' : '' }}>Today</option>
                                <option value="yesterday" {{ request('date_filter') == 'yesterday' ? 'selected' : '' }}>Yesterday</option>
                                <option value="last_7_days" {{ request('date_filter') == 'last_7_days' ? 'selected' : '' }}>Last 7 Days</option>
                                <option value="last_15_days" {{ request('date_filter') == 'last_15_days' ? 'selected' : '' }}>Last 15 Days</option>
                                <option value="last_30_days" {{ request('date_filter') == 'last_30_days' ? 'selected' : '' }}>Last 30 Days</option>
                                <option value="custom" {{ request('date_filter') == 'custom' ? 'selected' : '' }}>Custom Range</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="col-md-2" id="customFromDate" style="display: {{ request('date_filter') == 'custom' ? 'block' : 'none' }};">
                        <div class="form-group">
                            <label>From Date</label>
                            <input type="date" name="created_from" class="form-control"
                                value="{{ request('created_from') }}">
                        </div>
                    </div>
                    
                    <div class="col-md-2" id="customToDate" style="display: {{ request('date_filter') == 'custom' ? 'block' : 'none' }};">
                        <div class="form-group">
                            <label>To Date</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>User</label>
                            <select name="user_id" class="form-control">
                                <option value="">All Users</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    
                    <!-- <div class="col-md-2">
                        <div class="form-group">
                            <label>Min Reopens</label>
                            <input type="number" name="min_reopens" class="form-control" 
                                value="{{ request('min_reopens', 1) }}" min="1">
                        </div>
                    </div> -->
                    
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <div>
                                <button type="submit" class="btn btn-primary btn-block">Filter</button>
                                <a href="{{ url()->current() }}" class="btn btn-secondary btn-sm">Reset All Filters</a>
                            </div>
                        </div>
                    </div>
                </div>
                
            </form>

            <!-- Export Button -->
            <div class="mb-3">
                <button onclick="exportAllToExcel()" 
                        id="exportBtn" class="btn btn-success">
                    Export All to Excel
                </button>
                <small class="text-muted ml-2">
                    (Exports all {{ count($tickets) > 0 ? $tickets->total() : 0 }} records with current filters)
                </small>
            </div>

            <!-- Detailed Report Table -->
            <div class="table-responsive">
                <table id="ticketsTable" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>SL No</th>
                            <th>Ticket Type</th>
                            <th>Ticket Number</th>
                            <th>Ticket Name</th>
                            <th>Created Date</th>
                            <th>Assigned To</th>
                            <th>Responded By</th>
                            <th>Times Reopened</th>
                            <th>Closed By</th>
                            <th>Closure Details</th>
                            <th>Closure Status</th>
                            <th>Closure Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $startIndex = ($tickets->currentPage() - 1) * $tickets->perPage();
                        @endphp
                        @forelse($tickets as $index => $ticket)
                        <tr>
                            <td>{{ $startIndex + $index + 1 }}</td>
                            <td>
                                @if($ticket['ticket_type'] == 'New')
                                    <span class="badge badge-new">New</span>
                                @else
                                    <span class="badge badge-reopened">Reopened</span>
                                @endif
                            </td>
                            <td>{{ $ticket['ticket_number'] ?? 'N/A' }}</td>
                            <td>{{ $ticket['ticket_name'] ?? 'N/A' }}</td>
                            <td>{{ $ticket['created_date'] ? \Carbon\Carbon::parse($ticket['created_date'])->format('d-m-Y H:i') : 'N/A' }}</td>
                            <td>
                                @if(!empty($ticket['assigned_to']))
                                    @foreach($ticket['assigned_to'] as $agent)
                                        <span class="badge badge-info mb-1">{{ $agent }}</span><br>
                                    @endforeach
                                @else
                                    <span class="text-muted">Not Assigned</span>
                                @endif
                            </td>
                            <td>
                                @if(!empty($ticket['responded_by']))
                                    @foreach($ticket['responded_by'] as $responder)
                                        <span class="badge badge-secondary mb-1">{{ $responder }}</span><br>
                                    @endforeach
                                @else
                                    <span class="text-muted">No Response</span>
                                @endif
                            </td>
                            <td>
                                @if($ticket['reopen_count'] > 0)
                                    <span class="badge badge-warning">{{ $ticket['reopen_count'] }}</span>
                                @else
                                    <span class="badge badge-secondary">0</span>
                                @endif
                            </td>
                            <td>
                                @if($ticket['closed_by'])
                                    <span class="badge badge-success">{{ $ticket['closed_by'] }}</span>
                                @else
                                    <span class="text-muted">Not Closed</span>
                                @endif
                            </td>
                            <td>
                                @if(!empty($ticket['closed_by_users']))
                                    @foreach($ticket['closed_by_users'] as $userName => $count)
                                        <div class="mb-1">
                                            <strong>{{ $userName }}:</strong> 
                                            <span class="badge badge-secondary">{{ $count }} time(s)</span>
                                        </div>
                                    @endforeach
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                            <td>
                                @if($ticket['closure_status'] == 'Closed')
                                    <span class="badge badge-success">Closed</span>
                                @else
                                    <span class="badge badge-warning">{{ $ticket['closure_status'] }}</span>
                                @endif
                            </td>
                            <td>{{ $ticket['closure_date'] ? \Carbon\Carbon::parse($ticket['closure_date'])->format('d-m-Y H:i') : 'N/A' }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="12" class="text-center">No tickets found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="d-flex justify-content-center mt-4">
                {{ $tickets->links('pagination.custom') }}
            </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>
    // Store all ticket data for export
    const allTicketsData = @json($tickets->items());
    
    function toggleCustomDates() {
        const dateFilter = document.getElementById('dateFilterSelect').value;
        const customFromDate = document.getElementById('customFromDate');
        const customToDate = document.getElementById('customToDate');
        
        if (dateFilter === 'custom') {
            customFromDate.style.display = 'block';
            customToDate.style.display = 'block';
        } else {
            customFromDate.style.display = 'none';
            customToDate.style.display = 'none';
        }
    }

    function exportAllToExcel() {
        const button = document.getElementById('exportBtn');
        
        if (typeof XLSX === 'undefined') {
            alert('Error: XLSX library not loaded.');
            return;
        }

        try {
            if (button) {
                button.disabled = true;
                button.textContent = 'Downloading...';
            }

            // Get current filters to fetch all data
            const urlParams = new URLSearchParams(window.location.search);
            const exportUrl = '{{ route("tickets.reopen.export") }}?' + urlParams.toString();

            // Fetch all data with current filters
            fetch(exportUrl)
                .then(response => response.json())
                .then(data => {
                    if (!data.tickets || data.tickets.length === 0) {
                        alert('No data to export');
                        if (button) {
                            button.disabled = false;
                            button.textContent = 'Export All to Excel';
                        }
                        return;
                    }

                    // Create data array for Excel
                    let excelData = [];
                    
                    // Headers
                    const headers = [
                        'SL No',
                        'Ticket Type',
                        'Ticket Number',
                        'Ticket Name',
                        'Created Date',
                        'Assigned To',
                        'Responded By',
                        'Times Reopened',
                        'Closed By',
                        'Closure Details',
                        'Closure Status',
                        'Closure Date'
                    ];
                    excelData.push(headers);

                    // Data rows
                    data.tickets.forEach((ticket, index) => {
                        const row = [
                            index + 1,
                            ticket.ticket_type,
                            ticket.ticket_number || 'N/A',
                            ticket.ticket_name || 'N/A',
                            ticket.created_date ? formatDate(ticket.created_date) : 'N/A',
                            ticket.assigned_to && ticket.assigned_to.length > 0 ? ticket.assigned_to.join(', ') : 'Not Assigned',
                            ticket.responded_by && ticket.responded_by.length > 0 ? ticket.responded_by.join(', ') : 'No Response',
                            ticket.reopen_count || 0,
                            ticket.closed_by || 'Not Closed',
                            formatClosureDetails(ticket.closed_by_users),
                            ticket.closure_status || 'N/A',
                            ticket.closure_date ? formatDate(ticket.closure_date) : 'N/A'
                        ];
                        excelData.push(row);
                    });

                    // Create worksheet
                    const ws = XLSX.utils.aoa_to_sheet(excelData);

                    // Set column widths
                    ws['!cols'] = [
                        { wch: 8 },  // SL No
                        { wch: 12 }, // Ticket Type
                        { wch: 15 }, // Ticket Number
                        { wch: 30 }, // Ticket Name
                        { wch: 18 }, // Created Date
                        { wch: 25 }, // Assigned To
                        { wch: 25 }, // Responded By
                        { wch: 15 }, // Times Reopened
                        { wch: 20 }, // Closed By
                        { wch: 30 }, // Closure Details
                        { wch: 15 }, // Closure Status
                        { wch: 18 }  // Closure Date
                    ];

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

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

                    // Download
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `tickets_closure_report_${new Date().toISOString().slice(0,10)}.xlsx`;
                    document.body.appendChild(a);
                    a.click();

                    // Cleanup
                    setTimeout(() => {
                        document.body.removeChild(a);
                        URL.revokeObjectURL(url);
                        if (button) {
                            button.disabled = false;
                            button.textContent = 'Export All to Excel';
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                    alert('Error exporting data. Please try again.');
                    if (button) {
                        button.disabled = false;
                        button.textContent = 'Export All to Excel';
                    }
                });

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

    function formatDate(dateString) {
        if (!dateString) return 'N/A';
        const date = new Date(dateString);
        const day = String(date.getDate()).padStart(2, '0');
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const year = date.getFullYear();
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${day}-${month}-${year} ${hours}:${minutes}`;
    }

    function formatClosureDetails(closedByUsers) {
        if (!closedByUsers || Object.keys(closedByUsers).length === 0) {
            return 'N/A';
        }
        
        const details = [];
        for (const [userName, count] of Object.entries(closedByUsers)) {
            details.push(`${userName}: ${count} time(s)`);
        }
        return details.join(', ');
    }
</script>

@endsection