@extends('layouts.customer')

@section('title', 'Welcome')

@push('css')
    <style>
        .profile-userpic img {
            float: none;
            margin: 0 auto;
            width: 50%;
            height: 50%;
            -webkit-border-radius: 50% !important;
            -moz-border-radius: 50% !important;
            border-radius: 50% !important;
        }
    </style>
@endpush

@section('content')
<h1 class="page-header d-print-none">Invoices</h1>
<div class="row">
    @cannot('access-admin-panel')
    <div class="col-md-3 d-print-none">
        @include('profile.menu')
    </div>
    @endcannot
    <div class="col-md-9">
        <div class="card">
            <div class="card-header bg-none p-3 fw-bolder h6 m-0 d-flex justify-content-between align-items-center">
                List Requests
            </div>
            <div class="card-body">
                <div class="text-end mb-3">
                    <div class="dropdown">
                        <a class="btn btn-sm btn-green dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-plus"></i> New request
                        </a>

                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item" href="{{ route('issue.apply') }}">
                                    New Season Parking Card
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('issue.replacement') }}">
                                    Season Parking Card Replacement
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('issue.change') }}">
                                    Season Parking Card Upgrade/Downgrade Space
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('issue.suspension') }}">
                                    Season Parking Card Suspension
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('issue.termination') }}">
                                    Season Parking Card Termination
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                @if ($user->seasonRequests->isNotEmpty())
                <table class="table border mb-2">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Request for</th>
                            <th>Request date</th>
                            <th>Document</th>
                            <th>Card no.</th>
                            <th>Approval</th>
                        </tr>
                    </thead>
                    <tbody class="table-group-divider">
                        @forelse ($user->seasonRequests as $index => $request )
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $request->action }}</td>
                                <td>{{ $request->request_time?->format('Y-m-d') ?? '-' }}</td>
                                <td>
                                    @if ($request->hasMedia($request->action->media()))
                                        <ul>
                                            @foreach($request->getMedia($request->action->media()) as $media)
                                                <li>
                                                    <a href="{{ route('media.download', $media)  }}">
                                                        {{ $media?->file_name ?? '--' }}
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @else
                                        --
                                    @endif
                                </td>
                                <td>{{ $request->card_no ?? '--' }}</td>
                                <td>
                                    <span class="badge bg-{{ $request->approval->color() }}">
                                        {{ $request->approval->label() }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td class="text-muted text-center" colspan="6">No request found</td>
                            </tr>
                        @endforelse

                    </tbody>
                </table>
                @else
                    <div class="border-muted text-center p-4" style="border-radius: 8px; border-style:dashed; border-width:1px;">
                        <div class="text-muted text-center mb-2">
                            No request found
                        </div>
                        <a href="{{ route('issue.apply') }}" class="btn btn-primary">Request new card</a>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection