@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">Overall 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">Overall 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" required>
                                <option  value="">Choose Terminal</option>               
                                @foreach($terminal as $state)
                                <option value="{{ $state->id }}">{{ $state->terminal ?? null }}</option>
                                @endforeach
                            </select>
                        </div>
          
                            <div class="col-xxl-2 col-lg-2">
                                <select name="category" class="form-control select2" required>
                                    <option value=''>Select...</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="/reportdetails" class="btn btn-light"><i class="mdi mdi-refresh"></i></a>
                            </div>
                        </div>
                    </div>
                                    <table id="datatable-buttons" class="table table-bordered dt-responsive nowrap w-100">
    <thead class="table-light">
        <tr>
            <th class="align-middle">Date Of Report</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">Destination</th>
            <th class="align-middle">Passenger Comment</th>
            <th class="align-middle">Rating</th>
            <th class="align-middle">Problems</th>
            <th class="align-middle">Assigned To</th>
            <th class="align-middle">Action Start</th>
            <th class="align-middle">Closed By</th>
            <th class="align-middle">Action Closed</th>
        </tr>
    </thead>
    <tbody>
    @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>