@extends('backend.layouts.customer-horizontal')
@section('title','Wishlist')
@section('content')
    <div class="container-fluid">
        <div class="row ">
            <div class="col-xl-12 text-end">
                <a href="{{ route('customers.tickets.create') }}" class="btn btn-info"> Raise New Ticket</a>
            </div>
        </div>

        <div class="row mt-3 ">
            <div class="col-lg-12 ">
                <form>
                    <div class="row g-3">
                        <!--end col-->
                        <div class="col-xxl-2 col-lg-4">
                            <div class="position-relative">
                                <input type="search" name="search" id="search" class="form-control"
                                       placeholder="Ticket ID in Tickets">
                            </div>
                        </div>
                        <div class="col-xxl-2 col-lg-4">
                            <div class="position-relative">
                                <select name="status"  class="form-select">
                                    <option value="" @if(request('status') == '') selected @endif >
                                        Select Status
                                    </option>
                                    <option value="open"
                                            @if(request('status') == 'open') selected @endif >
                                        Opened
                                    </option>
                                    <option value="pending"
                                            @if(request('status') == 'pending') selected @endif >
                                        Pending
                                    </option>
                                    <option value="solved"
                                            @if(request('status') == 'solved') selected @endif >
                                        Solved
                                    </option>
                                </select>
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-xxl-2 col-lg-2">
                            <button type="submit" class="btn btn-primary "> Filter Tickets</button>
                        </div>
                    </div>
                    <!--end row-->
                </form>
            </div>

            <!--end col-->
        </div>
        <div class="row mt-3">
            <div class="col-xl-12">

                <div class="table-responsive">
                    <table class="table mb-0">

                        <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Ticket ID</th>
                            <th>Date</th>
                            <th>Subject</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($tickets as $ticket)
                            <tr>
                                <th scope="row">{{ $tickets->firstItem() + $loop->index }}</th>
                                <td>{{ $ticket->code }} </td>
                                <td>{{ $ticket->created_at->format('jS M Y, h:i A') }}</td>
                                <td>{{ $ticket->subject }} </td>
                                <td>
                                    <span class="{{ $ticket->status_color }}">{{ ucwords($ticket->status) }}</span>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">

                                        <a href="#" class="btn btn-outline-danger" data-bs-toggle="tooltip"
                                           title="Close Ticket"><i
                                                class="fa fa-door-closed"></i></a>
                                        <a href="#" class="btn btn-outline-secondary" data-bs-toggle="tooltip"
                                           title="Track Order"><i
                                                class="fa fa-thumbtack"></i></a>
                                        <a href="#" class="btn btn-outline-warning" data-bs-toggle="tooltip"
                                           title="Download Invoice"><i
                                                class="fa fa-cloud-download-alt"></i></a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr class="text-center text-warning">
                                <td colspan="7">No record found!</td>
                            </tr>
                        @endforelse
                        </tbody>

                    </table>

                </div>
                <div class="col-xl-12 mt-3">
                    {{ $tickets->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection