@extends('layouts.dashboard.main')

@section('title')
    Transaksi
@endsection

@section('content')
    <div class="nk-content nk-content-fluid">
        <div class="container-xl wide-xl">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between g-3">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">Transaksi {{ $type }}</h3>
                        </div>
                        <div class="nk-block-head-content">
                            <div class="toggle-wrap nk-block-tools-toggle">
                                <a href="javascript:void(0)" class="btn btn-icon btn-trigger toggle-expand me-n1"
                                    data-target="pageMenu"><em class="icon ni ni-menu-alt-r"></em></a>
                                <div class="toggle-expand-content" data-content="pageMenu">
                                    <ul class="nk-block-tools g-3">
                                        <li>
                                            <a href="#" class="btn btn-white btn-dim btn-outline-light">
                                                <em class="icon ni ni-download-cloud"></em>
                                                <span>Export</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="nk-block">
                    <div class="card card-stretch">
                        <div class="card-inner-group">
                            <div class="card-inner">
                                <div class="card-title-group">
                                    <div class="card-title">
                                        <div class="nk-block-des text-soft">
                                            <p>Total 12.835 data.</p>
                                        </div>
                                    </div>
                                    <div class="card-tools me-n1">
                                        <ul class="btn-toolbar gx-1">
                                            <li>
                                                <a href="#" class="search-toggle toggle-search btn btn-icon"
                                                    data-target="search"><em class="icon ni ni-search"></em></a>
                                            </li>
                                            <li class="btn-toolbar-sep"></li>
                                            <li>
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-trigger btn-icon dropdown-toggle"
                                                        data-bs-toggle="dropdown">
                                                        <div class="badge badge-circle bg-primary">4</div>
                                                        <em class="icon ni ni-filter-alt"></em>
                                                    </a>
                                                    <div class="filter-wg dropdown-menu dropdown-menu-xl dropdown-menu-end">
                                                        <div class="dropdown-head">
                                                            <span class="sub-title dropdown-title">Filter</span>
                                                            <div class="dropdown">
                                                                <a href="#" class="link link-light">
                                                                    <em class="icon ni ni-more-h"></em>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="dropdown-body dropdown-body-rg">
                                                            <div class="row gx-6 gy-4">
                                                                <div class="col-6">
                                                                    <div class="form-group">
                                                                        <label
                                                                            class="overline-title overline-title-alt">Type</label>
                                                                        <select class="form-select js-select2">
                                                                            <option value="any">Any Type</option>
                                                                            <option value="deposit">Deposit</option>
                                                                            <option value="buy">Buy Coin</option>
                                                                            <option value="sell">Sell Coin</option>
                                                                            <option value="transfer">Transfer</option>
                                                                            <option value="withdraw">Withdraw</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-6">
                                                                    <div class="form-group">
                                                                        <label
                                                                            class="overline-title overline-title-alt">Status</label>
                                                                        <select class="form-select js-select2">
                                                                            <option value="any">Any Status</option>
                                                                            <option value="pending">Pending</option>
                                                                            <option value="cancel">Cancel</option>
                                                                            <option value="process">Process</option>
                                                                            <option value="completed">Completed</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-6">
                                                                    <div class="form-group">
                                                                        <label class="overline-title overline-title-alt">Pay
                                                                            Currency</label>
                                                                        <select class="form-select js-select2">
                                                                            <option value="any">Any Coin</option>
                                                                            <option value="bitcoin">Bitcoin</option>
                                                                            <option value="ethereum">Ethereum</option>
                                                                            <option value="litecoin">Litecoin</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-6">
                                                                    <div class="form-group">
                                                                        <label
                                                                            class="overline-title overline-title-alt">Method</label>
                                                                        <select class="form-select js-select2">
                                                                            <option value="any">Any Method</option>
                                                                            <option value="paypal">PayPal</option>
                                                                            <option value="bank">Bank</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-6">
                                                                    <div class="form-group">
                                                                        <div
                                                                            class="custom-control custom-control-sm custom-checkbox">
                                                                            <input type="checkbox"
                                                                                class="custom-control-input"
                                                                                id="includeDel">
                                                                            <label class="custom-control-label"
                                                                                for="includeDel"> Including Deleted</label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="dropdown-foot between">
                                                            <a class="clickable" href="#">Reset</a>
                                                            <a href="#savedFilter" data-bs-toggle="modal">Filter</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="dropdown">
                                                    <a href="#" class="btn btn-trigger btn-icon dropdown-toggle"
                                                        data-bs-toggle="dropdown">
                                                        <em class="icon ni ni-setting"></em>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-xs dropdown-menu-end">
                                                        <ul class="link-check">
                                                            <li><span>Show</span></li>
                                                            <li class="active"><a href="#">10</a></li>
                                                            <li><a href="#">20</a></li>
                                                            <li><a href="#">50</a></li>
                                                        </ul>
                                                        <ul class="link-check">
                                                            <li><span>Order</span></li>
                                                            <li class="active"><a href="#">DESC</a></li>
                                                            <li><a href="#">ASC</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-search search-wrap" data-search="search">
                                        <div class="search-content">
                                            <a href="#" class="search-back btn btn-icon toggle-search"
                                                data-target="search"><em class="icon ni ni-arrow-left"></em></a>
                                            <input type="text" class="form-control border-transparent form-focus-none"
                                                placeholder="Quick search by transaction">
                                            <button class="search-submit btn btn-icon"><em
                                                    class="icon ni ni-search"></em></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-inner p-0">
                                <div class="nk-tb-list nk-tb-tnx">
                                    <div class="nk-tb-item nk-tb-head">
                                        <div class="nk-tb-col"><span>Detail</span></div>
                                        <div class="nk-tb-col tb-col-xxl"><span>Rekening</span></div>
                                        <div class="nk-tb-col tb-col-lg"><span>Transaksi</span></div>
                                        <div class="nk-tb-col text-end"><span>Jumlah</span></div>
                                        <div class="nk-tb-col nk-tb-col-status"><span
                                                class="sub-text d-none d-md-block">Status</span></div>
                                        <div class="nk-tb-col nk-tb-col-tools"></div>
                                    </div>
                                    <div class="nk-tb-item">
                                        <div class="nk-tb-col">
                                            <div class="nk-tnx-type">
                                                <div class="nk-tnx-type-icon bg-success-dim text-success">
                                                    <em class="icon ni ni-arrow-up-right"></em>
                                                </div>
                                                <div class="nk-tnx-type-text">
                                                    <span class="tb-lead">Jual</span>
                                                    <span class="tb-date">18/10/2024 13:04</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="nk-tb-col tb-col-xxl">
                                            <span class="tb-lead-sub">BCA</span>
                                            <span class="tb-sub">1098******3343</span>
                                        </div>
                                        <div class="nk-tb-col tb-col-lg">
                                            <span class="tb-lead-sub">CRUSDT52JG73</span>
                                            <span class="badge badge-dot bg-success">Jual</span>
                                        </div>
                                        <div class="nk-tb-col text-end">
                                            <span class="tb-amount">15,732,331.93 <span>IDR</span></span>
                                            <span class="tb-amount-sm">1000 USDT</span>
                                        </div>
                                        <div class="nk-tb-col nk-tb-col-status">
                                            <div class="dot dot-success d-md-none"></div>
                                            <span
                                                class="badge badge-sm badge-dim bg-outline-success d-none d-md-inline-flex">Selesai</span>
                                        </div>
                                        <div class="nk-tb-col nk-tb-col-tools">
                                            <ul class="nk-tb-actions gx-2">
                                                <li class="nk-tb-action-hidden">
                                                    <a href="#"
                                                        class="bg-white btn btn-sm btn-outline-light btn-icon"
                                                        data-bs-toggle="tooltip" data-bs-placement="top"
                                                        title="Menyetujui"><em class="icon ni ni-done"></em></a>
                                                </li>
                                                <li class="nk-tb-action-hidden">
                                                    <a href="#tranxDetails" data-bs-toggle="modal"
                                                        class="bg-white btn btn-sm btn-outline-light btn-icon btn-tooltip"
                                                        title="Lihat Detail"><em class="icon ni ni-eye"></em></a>
                                                </li>
                                                <li>
                                                    <div class="dropdown">
                                                        <a href="#"
                                                            class="dropdown-toggle bg-white btn btn-sm btn-outline-light btn-icon"
                                                            data-bs-toggle="dropdown"><em
                                                                class="icon ni ni-more-h"></em></a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <ul class="link-list-opt">
                                                                <li>
                                                                    <a href="#">
                                                                        <em class="icon ni ni-done"></em>
                                                                        <span>Menyetujui</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <em class="icon ni ni-cross-round"></em>
                                                                        <span>Menolak</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#tranxDetails" data-bs-toggle="modal">
                                                                        <em class="icon ni ni-eye"></em>
                                                                        <span>Lihat Detail</span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="nk-tb-item">
                                        <div class="nk-tb-col">
                                            <div class="nk-tnx-type">
                                                <div class="nk-tnx-type-icon bg-warning-dim text-warning">
                                                    <em class="icon ni ni-arrow-up-right"></em>
                                                </div>
                                                <div class="nk-tnx-type-text">
                                                    <span class="tb-lead">Beli</span>
                                                    <span class="tb-date">18/10/2024 13:04</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="nk-tb-col tb-col-xxl">
                                            <span class="tb-lead-sub">Alamat USDT</span>
                                            <span class="tb-sub">e43d******98ve</span>
                                        </div>
                                        <div class="nk-tb-col tb-col-lg">
                                            <span class="tb-lead-sub">CRUSDT52JG73</span>
                                            <span class="badge badge-dot bg-warning">Beli</span>
                                        </div>
                                        <div class="nk-tb-col text-end">
                                            <span class="tb-amount">15,732,331.93 <span>IDR</span></span>
                                            <span class="tb-amount-sm">1000 USDT</span>
                                        </div>
                                        <div class="nk-tb-col nk-tb-col-status">
                                            <div class="dot dot-success d-md-none"></div>
                                            <span
                                                class="badge badge-sm badge-dim bg-outline-warning d-none d-md-inline-flex">
                                                Menunggu Pembayaran
                                            </span>
                                        </div>
                                        <div class="nk-tb-col nk-tb-col-tools">
                                            <ul class="nk-tb-actions gx-2">
                                                <li class="nk-tb-action-hidden">
                                                    <a href="#"
                                                        class="bg-white btn btn-sm btn-outline-light btn-icon"
                                                        data-bs-toggle="tooltip" data-bs-placement="top"
                                                        title="Menyetujui"><em class="icon ni ni-done"></em></a>
                                                </li>
                                                <li class="nk-tb-action-hidden">
                                                    <a href="#tranxDetails" data-bs-toggle="modal"
                                                        class="bg-white btn btn-sm btn-outline-light btn-icon btn-tooltip"
                                                        title="Lihat Detail"><em class="icon ni ni-eye"></em></a>
                                                </li>
                                                <li>
                                                    <div class="dropdown">
                                                        <a href="#"
                                                            class="dropdown-toggle bg-white btn btn-sm btn-outline-light btn-icon"
                                                            data-bs-toggle="dropdown"><em
                                                                class="icon ni ni-more-h"></em></a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <ul class="link-list-opt">
                                                                <li>
                                                                    <a href="#">
                                                                        <em class="icon ni ni-done"></em>
                                                                        <span>Menyetujui</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <em class="icon ni ni-cross-round"></em>
                                                                        <span>Menolak</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#tranxDetails" data-bs-toggle="modal">
                                                                        <em class="icon ni ni-eye"></em>
                                                                        <span>Lihat Detail</span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-inner">
                                <ul class="pagination justify-content-center justify-content-md-start">
                                    <li class="page-item"><a class="page-link" href="#">Prev</a></li>
                                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><span class="page-link"><em
                                                class="icon ni ni-more-h"></em></span></li>
                                    <li class="page-item"><a class="page-link" href="#">6</a></li>
                                    <li class="page-item"><a class="page-link" href="#">7</a></li>
                                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" tabindex="-1" id="tranxDetails">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <em class="icon ni ni-cross"></em>
                </a>
                <div class="modal-body modal-body-md">
                    <div class="nk-modal-head mb-3 mb-sm-5">
                        <h4 class="nk-modal-title title">
                            Transaksi
                            <small class="text-primary">CRUSDT52JG73</small>
                        </h4>
                    </div>
                    <div class="nk-tnx-details">
                        <div class="nk-block-between flex-wrap g-3">
                            <div class="nk-tnx-type">
                                <div class="nk-tnx-type-icon bg-warning text-white">
                                    <em class="icon ni ni-arrow-up-right"></em>
                                </div>
                                <div class="nk-tnx-type-text">
                                    <h5 class="title">1000 USDT</h5>
                                    <span class="sub-text mt-n1">18 Okt, 2024 13:04</span>
                                </div>
                            </div>
                            <ul class="align-center flex-wrap gx-3">
                                <li>
                                    <span class="badge badge-sm bg-success">Selesai</span>
                                </li>
                            </ul>
                        </div>
                        <div class="nk-modal-head mt-sm-5 mt-4 mb-4">
                            <h5 class="title">Info</h5>
                        </div>
                        <div class="row gy-3">
                            <div class="col-lg-6">
                                <span class="sub-text">Kode Transaksi</span>
                                <span class="caption-text">CRUSDT52JG73</span>
                            </div>
                            <div class="col-lg-6">
                                <span class="sub-text">Type</span>
                                <span class="caption-text text-break">Jual</span>
                            </div>
                            <div class="col-lg-6">
                                <span class="sub-text">Transaksi Fee</span>
                                <span class="caption-text">15,632,331.93 IDR</span>
                            </div>
                            <div class="col-lg-6">
                                <span class="sub-text">Total</span>
                                <span class="caption-text">15,732,331.93 IDR</span>
                            </div>
                        </div>
                        <div class="nk-modal-head mt-sm-5 mt-4 mb-4">
                            <h5 class="title">Detail</h5>
                        </div>
                        <div class="row gy-3">
                            <div class="col-lg-6">
                                <span class="sub-text">Transaction Type</span>
                                <span class="caption-text">Deposit</span>
                            </div>
                            <div class="col-lg-6">
                                <span class="sub-text">Pembayaran</span>
                                <span class="caption-text align-center">
                                    BCA
                                    <span class="badge bg-primary ms-2 text-white">Manual Transfer</span>
                                </span>
                            </div>
                            <div class="col-lg-6">
                                <span class="sub-text">Dari rekening</span>
                                <span class="caption-text text-break">1xA058106537340385c87d264f93</span>
                            </div>
                            <div class="col-lg-6">
                                <span class="sub-text">Dikirim ke</span>
                                <span class="caption-text text-break">1x0385c87d264A05810653734f93</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection