@extends('layout.app')

@section('title', 'Tiket Gangguan')

@section('content')
<x-material-page-header 
    title="Tiket Gangguan" 
    :breadcrumbs="[
        ['name' => 'Tiket', 'url' => route('tiket.index')]
    ]"
>
    <a href="{{ route('tiket.create') }}" class="btn btn-sm bg-gradient-success mb-0">
        <i class="material-symbols-rounded me-1" style="font-size: 18px; line-height: 1;">add</i> Buat Tiket
    </a>
</x-material-page-header>

<div class="container-fluid py-4">
    <!-- Statistics Cards -->
    @php
        use App\Models\Ticket;
        $totalTiket = Ticket::count();
        $tiketBaru = Ticket::where('status', 'Baru')->count();
        $tiketDiproses = Ticket::where('status', 'Diproses')->count();
        $tiketSelesai = Ticket::where('status', 'Selesai')->count();
        $tiketMenunggu = Ticket::where('status', 'Menunggu')->count();
    @endphp
    <div class="row mb-4">
        <x-material-card-stat 
            title="Total Tiket" 
            :value="$totalTiket" 
            icon="support_agent" 
            color="primary" 
            growth="0" 
            growthColor="success" 
            period="Semua tiket gangguan"
        />
        <x-material-card-stat 
            title="Baru" 
            :value="$tiketBaru" 
            icon="notifications" 
            color="info" 
            growth="0" 
            growthColor="info" 
            period="Perlu ditangani"
        />
        <x-material-card-stat 
            title="Diproses" 
            :value="$tiketDiproses" 
            icon="settings" 
            color="warning" 
            growth="0" 
            growthColor="warning" 
            period="Sedang ditangani"
        />
        <div class="col-xl-3 col-lg-6">
            <div class="card card-stats mb-4 mb-xl-0">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="card-title text-uppercase text-muted mb-0">Selesai</h5>
                            <span class="h2 font-weight-bold mb-0">{{ $tiketSelesai }}</span>
                        </div>
                        <div class="col-auto">
                            <div class="icon icon-shape bg-gradient-success text-white rounded-circle shadow">
                                <i class="ni ni-check-bold"></i>
                            </div>
                        </div>
                    </div>
                    <p class="mt-3 mb-0 text-muted text-sm">
                        <span class="text-success mr-2"><i class="fa fa-check"></i></span>
                        <span class="text-nowrap">{{ $tiketMenunggu }} Menunggu</span>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Tiket Table Card -->
    <div class="row">
        <div class="col">
            <div class="card shadow">
                <div class="card-header border-0">
                    <h3 class="mb-0">
                        <i class="ni ni-support-16 text-primary"></i> Daftar Tiket Gangguan
                    </h3>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <span class="alert-icon"><i class="ni ni-like-2"></i></span>
                            <span class="alert-text">{{ session('success') }}</span>
                        </div>
                    @endif

                    <!-- Table -->
                    <div class="table-responsive">
                        <table class="table align-items-center table-flush">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col" style="width: 5%;">No</th>
                                    <th scope="col" style="width: 25%;">Judul</th>
                                    <th scope="col" style="width: 12%;">Prioritas</th>
                                    <th scope="col" style="width: 12%;">Status</th>
                                    <th scope="col" style="width: 15%;">Kategori</th>
                                    <th scope="col" style="width: 18%;">Dibuat</th>
                                    <th scope="col" style="width: 13%;" class="text-right">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($tickets as $index => $ticket)
                                <tr>
                                    <td>
                                        <span class="text-sm font-weight-bold">{{ $tickets->firstItem() + $index }}</span>
                                    </td>
                                    <th scope="row">
                                        <div class="media align-items-center">
                                            <div class="icon icon-shape bg-gradient-primary text-white rounded-circle shadow me-3">
                                                <i class="material-symbols-rounded opacity-10">support_agent</i>
                                            </div>
                                            <div class="media-body">
                                                <span class="name mb-0 text-sm font-weight-bold">{{ $ticket->judul }}</span>
                                            </div>
                                        </div>
                                    </th>
                                    <td>
                                        @if($ticket->prioritas == 'Kritis')
                                            <span class="badge badge-sm bg-gradient-danger">
                                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">priority_high</i> Kritis
                                            </span>
                                        @elseif($ticket->prioritas == 'Tinggi')
                                            <span class="badge badge-sm bg-gradient-warning">
                                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">priority_high</i> Tinggi
                                            </span>
                                        @elseif($ticket->prioritas == 'Sedang')
                                            <span class="badge badge-sm bg-gradient-info">
                                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">priority_high</i> Sedang
                                            </span>
                                        @else
                                            <span class="badge badge-sm bg-gradient-secondary">
                                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">priority_high</i> Rendah
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($ticket->status == 'Selesai')
                                            <span class="badge badge-sm bg-gradient-success">
                                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">check_circle</i> Selesai
                                            </span>
                                        @elseif($ticket->status == 'Diproses')
                                            <span class="badge badge-sm bg-gradient-warning">
                                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">settings</i> Diproses
                                            </span>
                                        @elseif($ticket->status == 'Menunggu')
                                            <span class="badge badge-sm bg-gradient-info">
                                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">schedule</i> Menunggu
                                            </span>
                                        @elseif($ticket->status == 'Dibatalkan')
                                            <span class="badge badge-sm bg-gradient-secondary">
                                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">cancel</i> Dibatalkan
                                            </span>
                                        @else
                                            <span class="badge badge-sm bg-gradient-primary">
                                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">notifications</i> Baru
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($ticket->kategori)
                                            <span class="text-sm">{{ $ticket->kategori }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="text-sm">{{ $ticket->created_at->format('d/m/Y') }}</span>
                                        <br>
                                        <small class="text-muted">{{ $ticket->created_at->format('H:i') }}</small>
                                    </td>
                                    <td class="text-end">
                                        <div class="dropdown">
                                            <a class="btn btn-sm btn-icon-only text-primary" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Menu Aksi">
                                                <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">more_vert</i>
                                            </a>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li><a class="dropdown-item" href="{{ route('tiket.show', $ticket) }}">
                                                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">visibility</i> Detail
                                                </a></li>
                                                <li><a class="dropdown-item" href="{{ route('tiket.edit', $ticket) }}">
                                                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">edit</i> Edit
                                                </a></li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li><a class="dropdown-item text-danger" href="#" onclick="confirmDelete('{{ route('tiket.destroy', $ticket) }}', '{{ $ticket->judul }}')">
                                                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">delete</i> Hapus
                                                </a></li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center">
                                        <div class="py-5">
                                            <i class="ni ni-support-16 fa-4x text-muted mb-3"></i>
                                            <h4 class="text-muted">Belum ada tiket</h4>
                                            <p class="text-muted mb-4">Mulai dengan membuat tiket pertama</p>
                                            <a href="{{ route('tiket.create') }}" class="btn btn-primary">
                                                <i class="ni ni-fat-add"></i> Buat Tiket Pertama
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    
                    @if($tickets->hasPages())
                    <div class="card-footer py-4">
                        <nav aria-label="...">
                            {{ $tickets->links() }}
                        </nav>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="ni ni-fat-remove text-danger"></i> Konfirmasi Hapus Tiket
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" role="alert">
                    <i class="ni ni-notification-70"></i> 
                    <strong>Peringatan!</strong> Tindakan ini tidak dapat dibatalkan.
                </div>
                <p>Apakah Anda yakin ingin menghapus tiket <strong id="tiketJudulToDelete"></strong>?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="ni ni-fat-remove"></i> Batal
                </button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="ni ni-fat-remove"></i> Ya, Hapus
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
function confirmDelete(url, judul) {
    document.getElementById('tiketJudulToDelete').textContent = judul || 'Tiket ini';
    document.getElementById('deleteForm').action = url;
    $('#deleteModal').modal('show');
}
</script>
@endsection