@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">
                Submit, track, and manage your support requests all in one place. Use the system to report issues, request assistance, and monitor the progress of your tickets.
            </p>
        </div>
    </div>

    <!-- SUCCESS MESSAGE -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row mb-3">
        <div class="col-lg-12 ">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title mb-4">Create a New Ticket</h3>
                    <form action="{{ route('admin.tickets.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf  <!-- CSRF token for security -->
                        <div class="mb-3">
                            <label for="ticketTechnician" class="form-label">Technician Name</label>
                            <input type="text" class="form-control" name="technician_name" id="ticketTechnician" placeholder="Enter technician's name">
                        </div>
                        <div class="mb-3">
                            <label for="ticketSubject" class="form-label">Subject</label>
                            <input type="text" class="form-control" name="subject" id="ticketSubject" placeholder="Enter ticket subject">
                        </div>
                        <div class="mb-3">
                            <label for="ticketDescription" class="form-label">Description</label>
                            <textarea class="form-control" name="description" id="ticketDescription" rows="4" placeholder="Describe the issue or request in detail"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="ticketPriority" class="form-label">Severity Level</label>
                            <select class="form-select" name="severity_level" id="ticketPriority">
                                <option value="P1">P1</option>
                                <option value="P2">P2</option>
                                <option value="P3">P3</option>
                                <option value="OUT">Out Of Services</option>
                            </select>
                        </div>

                        <!-- INPUT FILE UPLOAD -->
                        <div class="mb-3">
                            <label for="image" class="form-label">Upload Image (Optional)</label>
                            <input type="file" name="image" class="form-control">
                        </div>

                        <button type="submit" class="btn btn-primary">Submit Ticket</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

     <!-- TICKET HISTORY TABLE -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title mb-0">Ticket History</h3>
                    <p class="lead text-muted">You can also review your past tickets and their status to see how quickly your issues were addressed.</p>

                    <div class="table-responsive">
                        <table id="dataTableExample" class="table table-striped mt-3">
                            <thead>
                                <tr>
                                    <th>Ticket ID</th>
                                    <th>Subject</th>
                                    <th>Severity Level</th>
                                    <th>Status</th>
                                    <th>Created At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($tickets as $ticket)
                                    <tr>
                                        <td>{{ $ticket->id }}</td>
                                        <td>{{ $ticket->subject }}</td>
                                        <td>
                                            @if($ticket->severity_level == 'P1')
                                                <span class="badge bg-danger text-white">P1</span>
                                            @elseif($ticket->severity_level == 'P2')
                                                <span class="badge bg-warning text-dark">P2</span>
                                            @elseif($ticket->severity_level == 'P3')
                                                <span class="badge bg-success text-white">P3</span>
                                            @elseif($ticket->severity_level == 'OUT')
                                                <span class="badge bg-secondary text-white">Out Of Service</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($ticket->status == 'solved')
                                                <span class="badge bg-success">Resolved</span>
                                            @else
                                                <span class="badge bg-warning text-dark">In Progress</span>
                                            @endif
                                        </td>
                                        <td>{{ $ticket->created_at->format('d M Y, H:i') }}</td>
                                        
                                        <td>
                                            <!-- View Button -->
                                            <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#viewModal{{ $ticket->id }}">
                                                <i class="bi bi-eye"></i> View
                                            </button>

                                            <!-- Edit Button -->
                                            <button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editModal{{ $ticket->id }}">
                                                <i class="bi bi-pencil"></i> Edit
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div> <!-- table-responsive -->
                </div> <!-- card-body -->
            </div> <!-- card -->
        </div> <!-- col-lg-12 -->
    </div> <!-- row -->
</div>

<!-- Modal for Viewing Ticket Details -->
@foreach($tickets as $ticket)
<div class="modal fade" id="viewModal{{ $ticket->id }}" tabindex="-1" aria-labelledby="viewModalLabel{{ $ticket->id }}" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="viewModalLabel{{ $ticket->id }}">Ticket ID #{{ $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">
                    <!-- Left Column: Subject, Description -->
                    <div class="col-md-6">
                        <p><strong>Subject:</strong> {{ $ticket->subject }}</p>
                        <p><strong>Description:</strong> {{ $ticket->description }}</p>
                    </div>

                    <!-- Right Column: Created At, Technician Name (Closer together) -->
                    <div class="col-md-6 text-md">
                        <p><strong>Created At:</strong> {{ $ticket->created_at->format('d M Y, H:i') }}</p>
                        <p><strong>Technician Name:</strong> {{ $ticket->technician_name ?? 'No technician assigned' }}</p>
                    </div>
                </div>

                <!-- Garisan Pemisah -->
                <hr>

                <div class="row mt-3">
                    <!-- Status and Comments in a new row -->
                    <div class="col-md-6">
                        <p><strong>Status:</strong>
                            <span class="badge {{ $ticket->status == 'solved' ? 'bg-success' : 'bg-warning text-dark' }}">
                                {{ ucfirst($ticket->status) }}
                            </span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Comments:</strong> {{ $ticket->comment ?? 'No comment' }}</p>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div> 
@endforeach

<!-- Modal for Editing Ticket -->
@foreach($tickets as $ticket)
<div class="modal fade" id="editModal{{ $ticket->id }}" tabindex="-1" aria-labelledby="editModalLabel{{ $ticket->id }}" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title" id="editModalLabel{{ $ticket->id }}">Edit Ticket ID #{{ $ticket->id }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('user.tickets.update', $ticket->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PATCH')
                <div class="modal-body">
                    
                    <!-- Technician Name -->
                    <div class="mb-3">
                        <label for="technician_name_{{ $ticket->id }}" class="form-label fw-bold">Technician Name</label>
                        <input type="text" name="technician_name" id="technician_name_{{ $ticket->id }}" class="form-control" value="{{ $ticket->technician_name }}">
                    </div>

                    <!-- Subject -->
                    <div class="mb-3">
                        <label for="subject_{{ $ticket->id }}" class="form-label fw-bold">Subject</label>
                        <input type="text" name="subject" id="subject_{{ $ticket->id }}" class="form-control" value="{{ $ticket->subject }}">
                    </div>

                    <!-- Description -->
                    <div class="mb-3">
                        <label for="description_{{ $ticket->id }}" class="form-label fw-bold">Description</label>
                        <textarea name="description" id="description_{{ $ticket->id }}" rows="3" class="form-control">{{ $ticket->description }}</textarea>
                    </div>

                    <!-- Severity Level -->
                    <div class="mb-3">
                        <label for="severity_level_{{ $ticket->id }}" class="form-label fw-bold">Severity Level</label>
                        <select name="severity_level" id="severity_level_{{ $ticket->id }}" class="form-select">
                            <option value="P1" {{ old('severity_level', $ticket->severity_level) == 'P1' ? 'selected' : '' }}>P1</option>
                            <option value="P2" {{ old('severity_level', $ticket->severity_level) == 'P2' ? 'selected' : '' }}>P2</option>
                            <option value="P3" {{ old('severity_level', $ticket->severity_level) == 'P3' ? 'selected' : '' }}>P3</option>
                            <option value="OUT" {{ old('severity_level', $ticket->severity_level) == 'OUT' ? 'selected' : '' }}>Out Of Service</option>
                        </select>
                    </div>
                    
                    <!-- Comment (Now it's readonly) -->
                    <div class="mb-3">
                        <label for="comment_{{ $ticket->id }}" class="form-label fw-bold">Comment</label>
                        <textarea name="comment" id="comment_{{ $ticket->id }}" rows="3" class="form-control" readonly>{{ $ticket->comment }}</textarea>
                    </div>

                    <!-- Status (Status will be placed outside the form input box) -->
                    <div class="mb-3">
                        <label for="status_{{ $ticket->id }}" class="form-label fw-bold">Status</label>
                        <input type="text" name="status" id="status_{{ $ticket->id }}" value="{{ $ticket->status }}" class="form-control" readonly>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-warning">Update</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach


@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