@extends('client.layouts.client')
@section('title', 'Nạp tiền thẻ cào')
@section('content')
<div class="row">
    <div class="col-md-12 mb-3">
        <div class="card">
            <div class="card-body">

                {{-- Thông báo --}}
                @if (session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif
                @if (session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif

                {{-- Chuyển tab --}}
                <div class="row mb-3">
                    <div class="col-6 d-grid gap-2">
                        <a href="{{ route('account.recharge')}}" class="btn btn-outline-primary col-md-12">Ngân hàng</a>
                    </div>
                    <div class="col-6 d-grid gap-2">
                        <a href="{{ route('account.card')}}" class="btn btn-outline-primary active col-md-12">Thẻ cào</a>
                    </div>
                </div>

                {{-- Form nạp thẻ --}}
                <form action="{{ route('account.card.post') }}" method="POST">
                    @csrf
                    <div class="row">

                        <div class="col-md-12 mb-3">
                            <label class="form-label">Loại thẻ</label>
                            <select name="card_type" class="form-control @error('card_type') is-invalid @enderror">
                                <option value="VIETTEL">Viettel (Chiết khấu: {{ siteValue('percent')}}%)</option>
                                <option value="MOBIFONE">Mobifone (Chiết khấu: {{ siteValue('percent')}}%)</option>
                                <option value="VINAPHONE">Vinaphone (Chiết khấu: {{ siteValue('percent')}}%)</option>
                                <option value="VIETNAMMOBILE">Vietnamobile (Chiết khấu: {{ siteValue('percent')}}%)</option>
                            </select>
                            @error('card_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12 mb-3">
                            <label class="form-label">Mệnh giá</label>
                            <select name="card_value" class="form-control @error('card_value') is-invalid @enderror">
                                <option value="10000">10,000 VNĐ</option>
                                <option value="20000">20,000 VNĐ</option>
                                <option value="50000">50,000 VNĐ</option>
                                <option value="100000">100,000 VNĐ</option>
                                <option value="200000">200,000 VNĐ</option>
                                <option value="500000">500,000 VNĐ</option>
                                <option value="1000000">1,000,000 VNĐ</option>
                            </select>
                            @error('card_value')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12 mb-3">
                            <label class="form-label">Mã thẻ</label>
                            <input type="text" name="card_code" class="form-control @error('card_code') is-invalid @enderror" placeholder="Nhập mã thẻ...">
                            @error('card_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12 mb-3">
                            <label class="form-label">Seri</label>
                            <input type="text" name="card_seri" class="form-control @error('card_seri') is-invalid @enderror" placeholder="Nhập seri...">
                            @error('card_seri')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12">
                            <button type="submit" class="btn btn-primary col-12">Nạp thẻ cào</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Lịch sử nạp --}}
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title">LỊCH SỬ NẠP THẺ CÀO</div>
            </div>
            <div class="card-body">
                <div class="dt-responsive table-responsive">
                    <table class="table table-striped table-bordered nowrap">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Loại thẻ</th>
                                <th>Mệnh giá</th>
                                <th>Seri</th>
                                <th>Mã thẻ</th>
                                <th>Thực nhận</th>
                                <th>Trạng thái</th>
                                <th>Thời gian gửi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($card as $item)
                                <tr>
                                    <td>{{ $item['id'] }}</td>
                                    <td>{{ $item['card_type'] }}</td>
                                    <td>{{ number_format($item['card_amount']) }} đ</td>
                                    <td>{{ $item['card_serial'] }}</td>
                                    <td>{{ $item['card_code'] }}</td>
                                    <td>{{ number_format($item['card_real_amount']) }} đ</td>
                                    <td>{!! statusCard($item['status']) !!}</td>
                                    <td>{{ $item['created_at'] }}</td>
                                </tr>
                            @empty
                                @include('admin.components.table-search-not-found', ['colspan' => 8])
                            @endforelse
                        </tbody>
                    </table>
                    <div class="d-flex justify-content-center align-items-center">
                        {{ $card->appends(request()->all())->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection