@extends('layouts.admin_dynamic')

@section('content')
<div class="content-wrapper">
  
    <section class="content-header m-3">
        <h1>Tickets 
        </h1>
      </section>
    
        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-xs-12">
                <div class="box box-success">
                    <div class="box-header">       

      
                
         
                        <form method="get" action="{{ route('complaints.index') }}">
                            <div class="row g-3 mb-3">
                                <!-- Customer Name -->
                                <div class="col-md-3">
                                    <label for="customer_name" class="form-label">Customer Name</label>
                                    <select class="form-control" name="filter[customer_id]" id="customer_name">
                                        <option value="">---Select---</option>
                                        @foreach($customers as $customer)
                                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                
                                <!-- Complaint Type -->
                                <div class="col-md-3">
                                    <label for="complaint_type" class="form-label">Complain Type</label>
                                    <select class="form-control" name="filter[complaint_type]" id="complaint_type">
                                        <option value="technical">Technical Issue</option>
                                        <option value="billing">Billing Issue</option>
                                        <option value="general">General Inquiry</option>
                                        <!-- Add more as needed -->
                                    </select>
                                </div>
                
                                <!-- Complaint Status -->
                                <div class="col-md-3">
                                    <label for="complaint_status" class="form-label">Complain Status</label>
                                    <select class="form-control" name="filter[complaint_status]" id="complaint_status">
                                        <option value="">---Select---</option>
                                        <option value="open">Open</option>
                                        <option value="in_progress">In Progress</option>
                                        <option value="resolved">Resolved</option>
                                    </select>
                                </div>
                
                                <!-- Assign Person -->
                             <div class="col-md-3">
                                    <label for="assigned_person" class="form-label">Priority</label>
                                    <select class="form-control" name="filter[priority]" id="assigned_person">
                                        <option value="">---Select---</option>
                                        <option value="high">high</option>
                                        <option value="medium">medium</option>
                                        <option value="low">low</option>
                                        <!-- Add more as needed -->
                                    </select>
                                </div> 
                
                             
                
                                <!-- From Date -->
                                <div class="col-md-3">
                                    <label for="from_date" class="form-label">From Date</label>
                                    <input type="date" class="form-control" name="filter[start_date]"  id="from_date">
                                </div>
                
                                <!-- To Date -->
                                <div class="col-md-3">
                                    <label for="to_date" class="form-label">To Date</label>
                                    <input type="date" class="form-control" name="filter[end_date]"  id="to_date">
                                </div>
                            </div>
                
                            <div class="text-end">
                                <button type="submit" class="btn btn-primary">Filter</button>
                            </div>
                        </form>
                
                        <hr>
                
                        <!-- Summary Table -->
         
                            <table class="table table-bordered table-striped table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>Total</th>
                                        <th>Open</th>
                                        <th>In Progress</th>
                                        <th>Resolved</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>{{ $totalComplaints }}</td>
                                        <td>{{ $openComplaints }}</td>
                                        <td>{{ $inProgressComplaints }}</td>
                                        <td>{{ $resolvedComplaints }}</td>
                                    </tr>
                                </tbody>
                            </table>
                 

                    </div>
                    <div class="box-body">
                
                        <div id="ticketTable">
                        <!-- No Item Message -->
                        @if($totalComplaints == 0)
                            <p class="text-danger mt-3 fw-bold">There are NO Item Found ..</p>

                            @else
                           
                            <div class="table-responsive" id="ticketTable">
                            <table class="table table-bordered table-striped table-hover">
                                <thead class="bg-gray-100">
                                    <tr>
                                        <th class="py-2 px-4 text-left border-b">Ticket ID</th>
                                        <th class="py-2 px-4 text-left border-b">Title</th>
                                        <th class="py-2 px-4 text-left border-b">Category</th>
                                        <th class="py-2 px-4 text-left border-b">Priority</th>
                                        <th class="py-2 px-4 text-left border-b">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($complaints as $ticket)
                                    <tr class="border-t hover:bg-gray-100 cursor-pointer transition duration-150 ease-in-out" onclick="window.location='{{ route('complaints.show', $ticket->id) }}'">
                                        <td class="py-2 px-4 border-b">{{ $ticket->id }}</td>
                                            <td class="py-2 px-4 border-b">{{ $ticket->title }}</td>
                                            <td class="py-2 px-4 border-b capitalize">{{ $ticket->category }}</td>
                                            <td class="py-2 px-4 border-b capitalize">{{ $ticket->priority }}</td>
                                            <td class="py-2 px-4 border-b font-semibold 
                                                {{ $ticket->status == 'Resolved' ? 'text-green-600' : ($ticket->status == 'Pending' ? 'text-yellow-600' : 'text-red-600') }}">
                                                {{ $ticket->status }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            </div>
                     
                        @endif
                    </div>
                    </div>
                </div>
                
            </div>
            <!-- /.col -->
          </div>
          <!-- /.row -->
          
         
    
        </section>
        <!-- /.content -->
    </div>
@endsection