@extends('user.layouts.master')
@section('title', 'بازار ارزهای دیجیتال')

@section('content')
    @if(Session::has('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="mdi mdi-check-circle me-2"></i>{{ Session::get('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(Session::has('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="mdi mdi-alert-circle me-2"></i>{{ Session::get('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="mdi mdi-alert-circle me-2"></i>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">بازار ارزهای دیجتال</h4>

                <div class="page-title-right">
                    <ul class="nav nav-pills nav-justified" role="tablist">
                        <li class="nav-item waves-effect waves-light">
                            <a class="nav-link active" data-bs-toggle="tab" href="#home-1" role="tab">
                                <span><i class="bx bx-table font-size-18"></i></span>
                            </a>
                        </li>
                        <li class="nav-item waves-effect waves-light">
                            <a class="nav-link" data-bs-toggle="tab" href="#profile-1" role="tab">
                                <span><i class="bx bx-list-ul font-size-20"></i></span>
                            </a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
    {{-- بخش معامله تتر و تومان --}}
    @php
        $usdt = \App\Cryptocurrency::where('symbol', 'USDT')->orWhere('name', 'tether')->orWhere('name', 'usdt')->first();
        // Get base price (single rate) from CoinPriceService
        $priceService = new \App\Services\CoinPriceService();
        $usdtPriceData = $priceService->getPriceData('USDT');
        $usdtBasePrice = $usdtPriceData && isset($usdtPriceData->base_price) ? $usdtPriceData->base_price : (isset($result['fee_buy_'.$usdt->name]) ? str_replace(',', '', $result['fee_buy_'.$usdt->name]) : 50000);
        $userUsdtWallet = \App\UserWallet::whereUser(Auth::user()->id)->whereCurrency('USDT')->first();
        $usdtBalance = $userUsdtWallet ? $userUsdtWallet->balance : 0;
    @endphp
    
    @if($usdt)
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-primary">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="mdi mdi-swap-horizontal"></i> معامله تتر (USDT) و تومان
                    </h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3 mb-md-0">
                            <div class="card border-success h-100">
                                <div class="card-body text-center">
                                    <div class="mb-3">
                                        {!! coin_logo_image($usdt->name, [
                                            'alt' => 'USDT',
                                            'class' => 'rounded-circle avatar-lg',
                                            'width' => '60px',
                                            'loading' => 'eager'
                                        ]) !!}
                                    </div>
                                    <h5 class="mb-2">موجودی تتر</h5>
                                    <h3 class="text-success mb-3">{{ number_format($usdtBalance, 2) }} <small>USDT</small></h3>
                                    <div class="d-flex justify-content-center gap-2">
                                        <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#buyUsdtModal">
                                            <i class="mdi mdi-arrow-down"></i> خرید تتر
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#sellUsdtModal">
                                            <i class="mdi mdi-arrow-up"></i> فروش تتر
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card border-info h-100">
                                <div class="card-body text-center">
                                    <div class="mb-3">
                                        {!! coin_logo_image('iran', [
                                            'alt' => 'تومان',
                                            'class' => 'rounded-circle avatar-lg',
                                            'width' => '60px',
                                            'loading' => 'eager'
                                        ]) !!}
                                    </div>
                                    <h5 class="mb-2">موجودی تومان</h5>
                                    <h3 class="text-info mb-3">{{ number_format(Auth::user()->wallet) }} <small>تومان</small></h3>
                                    <div class="d-flex justify-content-center gap-2">
                                        <a href="{{ asset('') }}wallet" class="btn btn-primary btn-sm">
                                            <i class="mdi mdi-wallet-plus"></i> شارژ کیف پول
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="text-center p-3 bg-light rounded">
                                <p class="mb-1 text-muted">قیمت تتر (تک نرخ) <span id="priceUpdateStatus" class="badge bg-success">به‌روز</span></p>
                                <h4 class="text-primary mb-0" id="basePriceDisplay">{{ number_format($usdtBasePrice) }} <small>تومان</small></h4>
                                <small class="text-muted">قیمت‌های معامله بر اساس این نرخ با ضریب محاسبه می‌شود</small>
                                <br><small class="text-muted" id="lastUpdateTime">آخرین به‌روزرسانی: <span id="updateTime"></span></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <div class="row">
        <div class="tab-content p-3 text-muted">
            <div class="tab-pane active" id="home-1" role="tabpanel">
                <div class="row">
                    <div class="col-xl-4 col-sm-6">
                        <div class="card text-center">
                            <div class="card-body">
                                <div class="mb-4">
                                    {!! coin_logo_image('iran', [
                                        'alt' => 'ریال',
                                        'class' => 'rounded-circle avatar-sm',
                                        'loading' => 'lazy'
                                    ]) !!}
                                </div>
                                <h5 class="font-size-15 mb-1"><a href="javascript: void(0);" class="text-dark">واحد ریالی</a></h5>
                                <p class="text-muted">تومان</p>
                            </div>
                            <div class="card-footer bg-transparent border-top">
                                <div class="text-center">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="font-size-24 text-primary mb-1"><i class="bx bx-wallet"></i></div>
                                            <p class="text-muted mb-2">موجودی</p>
                                            <h5>{{number_format(Auth::user()->wallet)}} <small>تومان</small></h5>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="mt-4 mt-sm-0">
                                                <div class="mt-3">
                                                    <a href="{{ asset('') }}wallet" class="btn btn-primary btn-sm w-md">شارژ</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div>
                                                <div class="mt-3">
                                                    <a href="{{ asset('') }}wallet/withdraw" class="btn btn-primary btn-sm w-md">برداشت</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @foreach($cryptocurrencies as $cryptocurrency)
                        <div class="col-xl-4 col-sm-6">
                            <div class="card text-center">
                                <div class="card-body">
                                    <div class="mb-4">
                                        {!! coin_logo_image($cryptocurrency->name, [
                                            'alt' => $cryptocurrency->name_fa,
                                            'class' => 'rounded-circle avatar-sm',
                                            'loading' => 'lazy'
                                        ]) !!}
                                    </div>
                                    <h5 class="font-size-15 mb-1"><a href="javascript: void(0);" class="text-dark">{{ $cryptocurrency->name_fa }}</a></h5>
                                    <p class="text-muted">{{ $cryptocurrency->symbol }}</p>
                                </div>
                                <div class="card-footer bg-transparent border-top">
                                    <div class="text-center">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="mt-4 mt-sm-0">
                                                    <div class="font-size-24 text-primary mb-2"><i class="bx bx-import"></i></div>
                                                    <p class="text-muted mb-2">قیمت خرید</p>
                                                    <h5>{{ $result['fee_buy_'.$cryptocurrency->name] }}</h5>
                                                    <div class="mt-3">
                                                        <a href="{{ asset('') }}{{ $cryptocurrency->name }}" class="btn btn-primary btn-sm w-md">خرید</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div>
                                                    <div class="font-size-24 text-primary mb-2"><i class="bx bx-send"></i></div>
                                                    <p class="text-muted mb-2">قیمت فروش</p>
                                                    <h5>{{ $result['fee_sell_'.$cryptocurrency->name] }}</h5>
                                                    <div class="mt-3">
                                                        <a href="{{ asset('') }}{{ $cryptocurrency->name }}/sell" class="btn btn-primary btn-sm w-md">فروش</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="tab-pane" id="profile-1" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        <div class="col-md-3 d-flex">
                            <input type="text" id="myInput" class="form-control mb-3 bg-light me-2" onkeyup="myFunction()" placeholder="جست و جو کنید ...">
                        </div>
                        <div class="table-responsive">
                            <div class="col-md-12">
                                <div class="row justify-content-between">

                                </div>
                            </div>

                            <table class="table align-middle mb-0 table-nowrap" id="myTable">
                                <thead class="table-light">
                                <tr>
                                    <th></th>
                                    <th>نام ارز</th>
                                    <th>نام انگلیسی ارز</th>
                                    <th>نماد</th>
                                    <th>قیمت خرید</th>
                                    <th>قیمت فروش</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($cryptocurrencies as $cryptocurrency)
                                    <tr>
                                        <td>
                                            {!! coin_logo_image($cryptocurrency->name, [
                                                'alt' => $cryptocurrency->name_fa,
                                                'class' => 'rounded-circle',
                                                'width' => '35px',
                                                'loading' => 'lazy'
                                            ]) !!}
                                        </td>
                                        <td>{{ $cryptocurrency->name_fa }}</td>
                                        <td>{{ $cryptocurrency->name }}</td>
                                        <td>{{ $cryptocurrency->symbol }}</td>
                                        <td>{{ $result['fee_buy_'.$cryptocurrency->name] }} <small>تومان</small></td>
                                        <td>{{ $result['fee_sell_'.$cryptocurrency->name] }} <small>تومان</small></td>
                                        <td><a href="{{ asset('') }}{{ $cryptocurrency->name }}" class="btn btn-success btn-sm w-md">خرید</a></td>
                                        <td><a href="{{ asset('') }}{{ $cryptocurrency->name }}/sell" class="btn btn-danger btn-sm w-md">فروش</a></td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal خرید تتر --}}
    <div class="modal fade" id="buyUsdtModal" tabindex="-1" aria-labelledby="buyUsdtModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="buyUsdtModalLabel">
                        <i class="mdi mdi-arrow-down"></i> خرید تتر (USDT)
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="buyUsdtForm" action="{{ route('usdt.trade.buy') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="buyAmount" class="form-label">مبلغ تومان (برای خرید تتر)</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="buyAmount" name="amount" placeholder="مثال: 1000000" required>
                                <span class="input-group-text">تومان</span>
                            </div>
                            <small class="text-muted">حداقل مبلغ: 100,000 تومان</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">مقدار تتر دریافتی (تقریبی)</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="buyUsdtAmount" readonly style="background-color: #f8f9fa;">
                                <span class="input-group-text">USDT</span>
                            </div>
                            <small class="text-muted">قیمت لحظه‌ای خرید: <span id="buyPriceDisplay">{{ number_format($usdtBasePrice + 2) }}</span> تومان (نرخ پایه + 2 تومان)</small>
                        </div>
                        <div class="alert alert-info">
                            <i class="mdi mdi-information"></i> مبلغ از موجودی تومان شما کسر می‌شود و تتر به کیف پول شما اضافه می‌گردد.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">انصراف</button>
                        <button type="submit" class="btn btn-success">
                            <i class="mdi mdi-check"></i> تایید خرید
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal فروش تتر --}}
    <div class="modal fade" id="sellUsdtModal" tabindex="-1" aria-labelledby="sellUsdtModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="sellUsdtModalLabel">
                        <i class="mdi mdi-arrow-up"></i> فروش تتر (USDT)
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="sellUsdtForm" action="{{ route('usdt.trade.sell') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="sellUsdtAmount" class="form-label">مقدار تتر (برای فروش)</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="sellUsdtAmount" name="usdt_amount" placeholder="مثال: 10" required>
                                <span class="input-group-text">USDT</span>
                            </div>
                            <small class="text-muted">موجودی شما: <strong>{{ number_format($usdtBalance, 2) }} USDT</strong></small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">مبلغ تومان دریافتی (تقریبی)</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="sellTomanAmount" readonly style="background-color: #f8f9fa;">
                                <span class="input-group-text">تومان</span>
                            </div>
                            <small class="text-muted">قیمت لحظه‌ای فروش: <span id="sellPriceDisplay">{{ number_format($usdtBasePrice - 2) }}</span> تومان (نرخ پایه - 2 تومان)</small>
                        </div>
                        <div class="alert alert-info">
                            <i class="mdi mdi-information"></i> تتر از کیف پول شما کسر می‌شود و مبلغ تومان به موجودی شما اضافه می‌گردد.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">انصراف</button>
                        <button type="submit" class="btn btn-danger">
                            <i class="mdi mdi-check"></i> تایید فروش
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@section('script')
<script>
    $(document).ready(function() {
        // Base price from Tetherland (single rate)
        let basePrice = parseFloat('{{ $usdtBasePrice }}') || 0;
        
        // Function to update prices
        function updatePrices(priceData) {
            basePrice = parseFloat(priceData.base_price) || basePrice;
            const buyPrice = basePrice + 2;  // قیمت خرید = نرخ پایه + 2 تومان
            const sellPrice = Math.max(0, basePrice - 2);  // قیمت فروش = نرخ پایه - 2 تومان (حداقل 0)
            
            // Update price displays
            $('#basePriceDisplay').html(basePrice.toLocaleString() + ' <small>تومان</small>');
            $('#buyPriceDisplay').text(buyPrice.toLocaleString());
            $('#sellPriceDisplay').text(sellPrice.toLocaleString());
            
            // Update last update time
            const now = new Date();
            const timeStr = now.toLocaleTimeString('fa-IR');
            $('#updateTime').text(timeStr);
            $('#priceUpdateStatus').removeClass('bg-danger').addClass('bg-success').text('به‌روز');
            
            // Recalculate if forms have values
            const buyAmount = parseFloat($('#buyAmount').val().replace(/,/g, '')) || 0;
            if (buyAmount > 0) {
                const usdtAmount = (buyAmount / buyPrice).toFixed(6);
                $('#buyUsdtAmount').val(usdtAmount);
            }
            
            const sellUsdtAmount = parseFloat($('#sellUsdtAmount').val()) || 0;
            if (sellUsdtAmount > 0) {
                const tomanAmount = Math.floor(sellUsdtAmount * sellPrice);
                $('#sellTomanAmount').val(tomanAmount.toLocaleString());
            }
        }
        
        // Initial price update
        updatePrices({ base_price: basePrice });
        
        // Function to fetch latest price from API
        function fetchLatestPrice() {
            $.ajax({
                url: '{{ route("usdt.price") }}',
                method: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.status && response.base_price) {
                        updatePrices(response);
                    } else {
                        $('#priceUpdateStatus').removeClass('bg-success').addClass('bg-warning').text('خطا');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching USDT price:', error);
                    $('#priceUpdateStatus').removeClass('bg-success').addClass('bg-danger').text('خطا');
                }
            });
        }
        
        // Update price every 20 seconds
        setInterval(fetchLatestPrice, 20000); // 20 seconds = 20000 milliseconds
        
        // Calculate transaction prices with spread
        const buyPrice = basePrice + 2;
        const sellPrice = Math.max(0, basePrice - 2);
        
        // محاسبه خرید تتر
        $('#buyAmount').on('input', function() {
            const amount = parseFloat($(this).val().replace(/,/g, '')) || 0;
            if (amount > 0 && buyPrice > 0) {
                const usdtAmount = (amount / buyPrice).toFixed(6);
                $('#buyUsdtAmount').val(usdtAmount);
            } else {
                $('#buyUsdtAmount').val('');
            }
        });

        // محاسبه فروش تتر
        $('#sellUsdtAmount').on('input', function() {
            const usdtAmount = parseFloat($(this).val()) || 0;
            if (usdtAmount > 0 && sellPrice > 0) {
                const tomanAmount = Math.floor(usdtAmount * sellPrice);
                $('#sellTomanAmount').val(tomanAmount.toLocaleString());
            } else {
                $('#sellTomanAmount').val('');
            }
        });

        // Validation برای خرید
        $('#buyUsdtForm').on('submit', function(e) {
            const amount = parseFloat($('#buyAmount').val().replace(/,/g, '')) || 0;
            const userWallet = parseFloat('{{ Auth::user()->wallet }}') || 0;
            
            if (amount < 100000) {
                e.preventDefault();
                alert('حداقل مبلغ خرید 100,000 تومان است.');
                return false;
            }
            
            if (amount > userWallet) {
                e.preventDefault();
                alert('موجودی تومان شما کافی نیست.');
                return false;
            }
        });

        // Validation برای فروش
        $('#sellUsdtForm').on('submit', function(e) {
            const usdtAmount = parseFloat($('#sellUsdtAmount').val()) || 0;
            const userUsdtBalance = parseFloat('{{ $usdtBalance }}') || 0;
            
            if (usdtAmount <= 0) {
                e.preventDefault();
                alert('لطفا مقدار تتر را وارد کنید.');
                return false;
            }
            
            if (usdtAmount > userUsdtBalance) {
                e.preventDefault();
                alert('موجودی تتر شما کافی نیست.');
                return false;
            }
        });
    });
</script>
@stop