@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush

@section('content')
<div class="container my-1">
    <div class="row mb-3">
        <div class="col-lg-12">
            <h1 class="display-6 mb-1">Online Ticketing System</h1>
            <p class="lead text-muted">
                Monitor, review, and manage all support tickets efficiently. 
                Keep track of reported issues, update statuses, and ensure smooth resolution of all technical requests.
            </p>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Ticket Management Table</h6>
                    <p class="text-muted mb-3">
                        Use this table to view, update, and manage all submitted tickets. 
                    </p>
                    <div class="table-responsive">
                        <table id="dataTableExample" class="table table-hover table-striped table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Subject</th>
                                    <th>Level</th>
                                    <th>Status</th>
                                    <th>View</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($tickets as $ticket)
                                    <tr>
                                    <td>{{ $ticket->id }}</td>
                                    <td>{{ $ticket->subject }}</td>

                                        <!-- SEVERITY LEVEL BADGE WITH COLOR -->
                                        <td>
                                            @if(strtoupper($ticket->severity_level) == 'P1')
                                                <span class="badge bg-danger text-white px-2 py-1">P1</span>
                                            @elseif(strtoupper($ticket->severity_level) == 'P2')
                                                <span class="badge bg-warning text-dark px-2 py-1">P2</span>
                                            @elseif(strtoupper($ticket->severity_level) == 'P3')
                                                <span class="badge bg-success text-white px-2 py-1">P3</span>
                                            @elseif($ticket->severity_level == 'OUT')
                                                <span class="badge bg-secondary text-white">Out Of Service</span>
                                            @else
                                                <span class="badge bg-secondary text-white px-2 py-1">{{ strtoupper($ticket->severity_level) }}</span>
                                            @endif
                                        </td>

                                        <td>
                                            <span class="badge 
                                                {{ $ticket->status == 'solved' ? 'bg-success text-white' : '' }}
                                                {{ $ticket->status == 'in progress' ? 'bg-warning text-dark' : '' }}
                                                {{ $ticket->status == 'pending' ? 'bg-danger text-white' : '' }} px-2 py-1">
                                                {{ ucfirst($ticket->status) }}
                                            </span>
                                        </td>

                                        <!-- ACTION BUTTONS -->
                                        <td class="text-center">
                                            <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#ticketModal{{ $ticket->id }}">
                                                View
                                            </button>
                                        </td>
                                    </tr>

                                    <!-- MODAL -->
                                    <div class="modal fade" id="ticketModal{{ $ticket->id }}" tabindex="-1" aria-labelledby="ticketModalLabel{{ $ticket->id }}" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header bg-light">
                                                    <h5 class="modal-title fw-bold" id="ticketModalLabel{{ $ticket->id }}">
                                                        Ticket #{{ $ticket->id }}
                                                    </h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <p><strong>ID:</strong> {{ $ticket->id }}</p>
                                                            <p><strong>Subject:</strong> {{ $ticket->subject }}</p>
                                                            <p><strong>Technician Name:</strong> {{ $ticket->technician_name ?? 'N/A' }}</p>
                                                            <p><strong>Description:</strong> {{ $ticket->description }}</p>
                                                        </div>
                                                        <div class="col-md-6">
                                                        <p><strong>Level:</strong>
                                                                <span class="badge 
                                                                    {{ strtoupper($ticket->severity_level) == 'P1' ? 'bg-danger text-white' : '' }}
                                                                    {{ strtoupper($ticket->severity_level) == 'P2' ? 'bg-warning text-dark' : '' }}
                                                                    {{ strtoupper($ticket->severity_level) == 'P3' ? 'bg-success text-white' : '' }}
                                                                    {{ strtoupper($ticket->severity_level) == 'OUT' ? 'bg-secondary text-white' : '' }} px-2 py-1">
                                                                    {{ strtoupper($ticket->severity_level) }}
                                                                </span>
                                                            </p>
                                                            <p><strong>Status:</strong>
                                                                <span class="badge 
                                                                    {{ $ticket->status == 'solved' ? 'bg-success text-white' : '' }}
                                                                    {{ $ticket->status == 'in progress' ? 'bg-warning text-dark' : '' }}
                                                                    {{ $ticket->status == 'pending' ? 'bg-danger text-white' : '' }} px-2 py-1">
                                                                    {{ ucfirst($ticket->status) }}
                                                                </span>
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    <form action="{{ route('admin.tickets.update', $ticket->id) }}" method="POST">
                                                        @csrf
                                                        @method('PATCH')

                                                        <!-- Komen -->
                                                        <div class="mb-3">
                                                            <label for="comment" class="form-label">Comment</label>
                                                            <textarea name="comment" id="comment" class="form-control">{{ old('comment', $ticket->comment) }}</textarea>
                                                        </div>

                                                        <!-- Status -->
                                                        <div class="mb-3">
                                                            <label for="status" class="form-label">Status</label>
                                                            <select name="status" id="status" class="form-select">
                                                                <option value="in progress" {{ old('status', $ticket->status) == 'in progress' ? 'selected' : '' }}>In Progress</option>
                                                                <option value="solved" {{ old('status', $ticket->status) == 'solved' ? 'selected' : '' }}>Solved</option>
                                                            </select>
                                                        </div>

                                                        <button type="submit" class="btn btn-primary">Update</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </tbody>
                        </table>
                    </div> <!-- table-responsive -->
                </div> <!-- card-body -->
            </div> <!-- card -->
        </div> <!-- col-md-12 -->
    </div> <!-- row -->
</div> <!-- container -->

@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
@endpush