@extends('layouts.app')

@section('title')
    History Pendaftaran | PRAU
@endsection

@section('content')
    <main>
        <section class="section-details-header"></section>
        <section class="section-details-content">
            <div class="container">
                <!-- Breadcrumb -->
                <div class="row">
                    <div class="col p-0 pl-3 pl-lg-0 mt-3">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-4 mt-5">
                                <li class="breadcrumb-item" aria-current="page">
                                    <a href="{{ route('home') }}">
                                        Home
                                    </a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    History
                                </li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <!-- End Breadcrumb -->
                <!-- Content -->
                <div class="row">
                    <h4 class="font-semi-bold">History Pendaftaran Pendakian</h4>
                    <div class="col-12 mb-4 mt-4">
                        @foreach ($item as $transaction)
                            <div class="card shadow-sm rounded-lg mb-3 p-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <div class="d-flex align-items-center">
                                            {{-- <img src="{{ asset('icons/lightning-bolt.svg') }}" alt="PLN" width="24"
                                                class="mr-2">
                                            <strong class="mr-2">Listrik PLN</strong> --}}
                                            <span>{{ \Carbon\Carbon::parse($transaction->created_at)->format('d M Y') }}</span>
                                            <span class="badge ml-2"
                                                style="
                                                    @if ($transaction->transaction_status == 'PENDING') background-color: #fef3c7; color: #d97706;
                                                    @elseif($transaction->transaction_status == 'DITERIMA')
                                                        background-color: #bfdbfe; color: #1d4ed8;
                                                    @elseif($transaction->transaction_status == 'MENDAKI')
                                                        background-color: #cffafe; color: #0e7490;
                                                    @elseif($transaction->transaction_status == 'SELESAI')
                                                        background-color: #d1fae5; color: #065f46;
                                                    @elseif($transaction->transaction_status == 'DITOLAK')
                                                        background-color: #fee2e2; color: #b91c1c;
                                                    @else
                                                        background-color: #f3f4f6; color: #6b7280; @endif
                                                ">
                                                {{ $transaction->transaction_status }}
                                            </span>
                                        </div>
                                        <div class="mt-2">
                                            <div class="font-weight-bold">{{ $transaction->track_mount->title }}</div>
                                            {{-- <div class="text-muted">53751464****</div> --}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>
                {{-- End Section Content --}}
        </section>
    </main>
@endsection