@extends('layouts.app')

@section('title')
    {{ __('Tài khoản rút mẫu') }}
@endsection

@section('withdraw_accounts', 'active')

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Tài khoản rút mẫu') }}</h1>
                    <small class="text-muted">
                        {{ __('Lưu sẵn tài khoản ngân hàng và ví USDT để chọn nhanh khi tạo lệnh rút.') }}
                    </small>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('app.index') }}">{{ __('home') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('Tài khoản rút mẫu') }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="container-fluid">

            @if (Session::has('success'))
                <div id="message-alert" class="alert alert-success">{{ Session::get('success') }}</div>
            @endif
            @if (Session::has('error'))
                <div id="message-alert" class="alert alert-danger">{{ Session::get('error') }}</div>
            @endif
            @if ($errors->any())
                <div class="alert alert-danger">
                    @foreach ($errors->all() as $error)
                        <div>{{ $error }}</div>
                    @endforeach
                </div>
            @endif

            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#pane-bank" role="tab">
                        <i class="fas fa-university mr-1"></i> {{ __('Tài khoản ngân hàng') }}
                        <span class="badge badge-secondary">{{ $bankAccounts->count() }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#pane-usdt" role="tab">
                        <i class="fas fa-coins mr-1"></i> {{ __('Ví USDT') }}
                        <span class="badge badge-secondary">{{ $usdtAccounts->count() }}</span>
                    </a>
                </li>
            </ul>

            <div class="tab-content">

                {{-- ========================= NGÂN HÀNG ========================= --}}
                <div class="tab-pane fade show active" id="pane-bank" role="tabpanel">
                    <div class="row wa-row">
                        <div class="col-lg-5">
                            <div class="card card-info card-outline shadow-sm">
                                <div class="card-header border-0">
                                    <h3 class="card-title font-weight-bold mb-0">
                                        <i class="fas fa-plus mr-1"></i> {{ __('Thêm tài khoản ngân hàng') }}
                                    </h3>
                                </div>
                                <div class="card-body">
                                    <form action="{{ route('app.addTemplateWithdrawAccount') }}" method="POST">
                                        @csrf

                                        <div class="form-group">
                                            <label for="bank_name">{{ __('bank_name') }} <span class="text-danger">*</span></label>
                                            <select name="bank_name" id="bank_name" class="form-control select2"
                                                    data-placeholder="{{ __('select_bank_name') }}">
                                                <option value="">{{ __('select_bank_name') }}</option>
                                                @foreach (config('bank') as $bank)
                                                    <option value="{{ $bank['bank_code'] }}"
                                                        @if (old('bank_name') == $bank['bank_code']) selected @endif>
                                                        {{ $bank['bank_name'] }} ({{ $bank['display_name'] }})
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="bank_account">{{ __('bank_account') }} <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="bank_account" id="bank_account"
                                                   value="{{ old('bank_account') }}"
                                                   placeholder="{{ __('insert_bank_account') }}">
                                        </div>

                                        <div class="form-group">
                                            <label for="customer_name">{{ __('customer_name') }} <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="customer_name" id="customer_name"
                                                   value="{{ old('customer_name') }}"
                                                   placeholder="{{ __('insert_customer_name') }}">
                                        </div>

                                        <div class="text-center">
                                            <button class="btn btn-info px-4" type="submit">
                                                <i class="fas fa-save mr-1"></i> {{ __('submit') }}
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-7">
                            <div class="card card-secondary card-outline shadow-sm">
                                <div class="card-header border-0">
                                    <h3 class="card-title font-weight-bold mb-0">
                                        {{ __('Danh sách tài khoản ngân hàng đã lưu') }}
                                    </h3>
                                </div>
                                <div class="card-body">
                                    @forelse ($bankAccounts as $item)
                                        <div class="wa-item">
                                            <div class="wa-info">
                                                <div class="wa-name">{{ $item->customer_name }}</div>
                                                <div class="wa-sub">{{ $item->bank_name }}</div>
                                                <div class="wa-acc">{{ $item->bank_account }}</div>
                                            </div>
                                            <form action="{{ route('app.withdraw.deleteAccount', ['id' => $item->id]) }}"
                                                  method="POST" class="wa-del">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger"
                                                        onclick="return confirm('{{ __('Xoá tài khoản mẫu này?') }}')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    @empty
                                        <p class="text-muted text-center mb-0 py-3">
                                            {{ __('Chưa lưu tài khoản ngân hàng nào.') }}
                                        </p>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- =========================== VÍ USDT ========================== --}}
                <div class="tab-pane fade" id="pane-usdt" role="tabpanel">
                    <div class="row wa-row">
                        <div class="col-lg-5">
                            <div class="card card-info card-outline shadow-sm">
                                <div class="card-header border-0">
                                    <h3 class="card-title font-weight-bold mb-0">
                                        <i class="fas fa-plus mr-1"></i> {{ __('Thêm ví USDT') }}
                                    </h3>
                                </div>
                                <div class="card-body">
                                    <form action="{{ route('app.addTemplateWithdrawUsdtAccount') }}" method="POST">
                                        @csrf

                                        <div class="form-group">
                                            <label for="asset">{{ __('Loại tài sản') }}</label>
                                            <select name="asset" id="asset" class="form-control">
                                                <option value="USDT">USDT</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="network">{{ __('Mạng lưới') }}</label>
                                            <select name="network" id="network" class="form-control">
                                                <option value="TRC20">TRC20</option>
                                                <option value="ERC20">ERC20</option>
                                                <option value="BEP20">BEP20</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="address">{{ __('Địa chỉ ví') }} <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="address" id="address"
                                                   value="{{ old('address') }}" placeholder="{{ __('Nhập địa chỉ ví') }}">
                                        </div>

                                        <div class="form-group">
                                            <label for="label">{{ __('Ghi chú') }}</label>
                                            <input type="text" class="form-control" name="label" id="label"
                                                   value="{{ old('label') }}" placeholder="{{ __('Tên gợi nhớ cho ví này') }}">
                                        </div>

                                        <div class="text-center">
                                            <button class="btn btn-info px-4" type="submit">
                                                <i class="fas fa-save mr-1"></i> {{ __('submit') }}
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-7">
                            <div class="card card-secondary card-outline shadow-sm">
                                <div class="card-header border-0">
                                    <h3 class="card-title font-weight-bold mb-0">
                                        {{ __('Danh sách ví USDT đã lưu') }}
                                    </h3>
                                </div>
                                <div class="card-body">
                                    @forelse ($usdtAccounts as $item)
                                        <div class="wa-item">
                                            <div class="wa-info">
                                                <div class="wa-name">{{ $item->label ?: __('(không ghi chú)') }}</div>
                                                <div class="wa-sub">{{ $item->asset }} · {{ $item->network }}</div>
                                                <div class="wa-acc">{{ $item->address }}</div>
                                            </div>
                                            <form action="{{ route('app.withdraw.deleteUsdtAccount', ['id' => $item->id]) }}"
                                                  method="POST" class="wa-del">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger"
                                                        onclick="return confirm('{{ __('Xoá ví mẫu này?') }}')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    @empty
                                        <p class="text-muted text-center mb-0 py-3">
                                            {{ __('Chưa lưu ví USDT nào.') }}
                                        </p>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection

@section('styles')
    <style>
        .wa-row { margin-top: 1rem; }

        .wa-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            border: 1px solid #e3e6ea;
            border-radius: .35rem;
            padding: .6rem .8rem;
            margin-bottom: .6rem;
            background: #fff;
        }

        .wa-item:hover { border-color: #b8c2cc; background: #fafbfc; }

        .wa-info { min-width: 0; }
        .wa-name { font-weight: 600; }
        .wa-sub  { font-size: 12px; color: #7a869a; }
        .wa-acc  { font-family: monospace; font-size: 13px; word-break: break-all; }
        .wa-del  { margin: 0; flex: 0 0 auto; }
    </style>
@endsection

@section('scripts')
    <script>
        jQuery(function ($) {
            if ($.fn.select2) {
                $('.select2').select2({ width: '100%' });
            }
        });
    </script>
@endsection