@extends('layout.app')
@section('content')
<link href="assets/libs/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css" />
    <!-- Bootstrap Css -->
    <link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
    <!-- Icons Css -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
    <!-- App js -->
    <script src="assets/js/plugin.js"></script>
<div class="main-content">
  <div class="page-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0 font-size-18"></h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Report</a></li>
                            <li class="breadcrumb-item active">Overview Reports</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Overview Feedback Reports</h4>
                      <div class="card-body border-bottom">
                    <form action="filters" method="get">
                        <div class="row g-3">

                        <div class="col-xxl-2 col-lg-2">
                          

                                <select id="terminal" name="terminal" class="form-control select2" >
                                <option  value="">Choose Terminal</option>               
                                @foreach($terminal as $state)
                                                <option value="{{ $state->id ?? null }}">{{ $state->terminal ?? null }}</option>
                                                @endforeach
                                            </select>
                                
                            </div>
          
                            <div class="col-xxl-2 col-lg-2">
                            
                                <select name="category" class="form-control select2">
                                            <option value=''>Select...</option>
                                                </select>
                            </div>

                            <!-- <div class="col-xxl-2 col-lg-2">
                                <select name="option" class="form-control select2" >
                                      <option value="">Select Options</option>
                                </select>
                            </div> -->
                            <div class="col-xxl-2 col-lg-2">
                                <div id="datepicker1">
                                    <input type="date" name="from" class="form-control" placeholder="Select date" data-date-format="dd M, yyyy" data-date-autoclose="true" data-date-container='#datepicker1' data-provide="datepicker">
                                </div>
                            </div>
                            <div class="col-xxl-2 col-lg-2">
                                <div id="datepicker1">
                                    <input type="date" name="to" class="form-control" placeholder="Select date" data-date-format="dd M, yyyy" data-date-autoclose="true" data-date-container='#datepicker1' data-provide="datepicker">
                                </div>
                            </div>
                            <div class="col-xxl-2 col-lg-3">
                                <button type="submit" class="btn btn-soft-info w-100"><i class="mdi mdi-filter-outline align-middle"></i> Filter</button>
                            </div>
                            <div class="col-xxl-2 col-lg-1">
                            <a href="/reports" class="btn btn-light"><i class="mdi mdi-refresh"></i></a>
                            </div>
                        </div>
                    </div>
                    
                    <table  class="table table-bordered dt-responsive nowrap w-100">
                        <thead class="table-light">
                          <tr>
                            <th class="align-middle">Date</th>
                            <th class="align-middle">Feedback ID</th>
                            <th class="align-middle">Terminal</th>
                            <th class="align-middle">Restroom</th>
                            <th class="align-middle">Name</th>
                            <th class="align-middle">Contact</th>
                            <th class="align-middle">Email</th>
                            <th class="align-middle">Destination</th>
                            <th class="align-middle">Passenger Comment</th>
                            <th class="align-middle">Rating</th>
                              <!-- <th class="align-middle">Image</th> -->
                            <th class="align-middle">Reports</th>
                            <!-- <th class="align-middle">Assigned To</th>
                            <th class="align-middle">Closed By</th> -->
                          </tr>
                        </thead>
                        <tbody>
    @if($customerfeedbacks->isEmpty())
        <tr>
            <td colspan="10" class="text-center">No Records Found</td>
        </tr>
    @else
                          @foreach($customerfeedbacks as $customerfeedback)
                          <tr>
                          <td><a href="javascript:void(0);" class="text-body fw-bold">{{ $customerfeedback->created_at->addHours(5)->addMinutes(30)->format('Y-m-d H:i:s') }}</a></td>
                          <td>{{ date('dmyHi', strtotime($customerfeedback->created_at)) }}{{$customerfeedback->feedback_id}}</td>