@extends('layouts.game')
@section('content')
<style>
    @media only screen and (max-width: 600px) {
        .mobileh {
            margin-top: 70px !important;
        }
        .card {
            width: 100% !important;
        }
    }
</style>
    <div class="container align-items-center justify-content-center my-3">
        <div class="card shadow text-white mobileh" style="overflow: scroll">
            <div class="card-header bg-transparent text-warning fw-bold text-center">
                <h1>Deposit</h1>
            </div>
            <div class="card-body" style="width: 286px;">
                <div class="row mb-2">
                    <div class="col-5 fw-bold">Bank Name :</div>
                    <div class="col-6" id="bankName">Please Select Counter</div>
                    <div class="col-1 text-end">
                        <button class="btn btn-sm btn-outline-secondary" onclick="this.parentElement.nextElementSibling.style.display='block';copyText(document.getElementById('bankName').innerText)">
                            <i class="bi bi-clipboard"></i>
                        </button>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-5 fw-bold">A/C No :</div>
                    <div class="col-6" id="accountNo">Please Select Counter</div>
                    <div class="col-1 text-end">
                        <button class="btn btn-sm btn-outline-secondary" onclick="copyText(this.parentElement.previousElementSibling.innerText)">
                            <i class="bi bi-clipboard"></i>
                        </button>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-5 fw-bold">IFSC Code :</div>
                    <div class="col-6" id="ifsc">Please Select Counter</div>
                    <div class="col-1 text-end">
                        <button class="btn btn-sm btn-outline-secondary" onclick="copyText(this.parentElement.previousElementSibling.innerText)">
                            <i class="bi bi-clipboard"></i>
                        </button>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-5 fw-bold">UPI :</div>
                    <div class="col-6" id="upi">Please Select Counter</div>
                    <div class="col-1 text-end">
                        <button class="btn btn-sm btn-outline-secondary" onclick="copyText(this.parentElement.previousElementSibling.innerText)">
                            <i class="bi bi-clipboard"></i>
                        </button>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-5 fw-bold">Account Name :</div>
                    <div class="col-6" id="accountName">Please Select Counter</div>
                    <div class="col-1 text-end">
                        <button class="btn btn-sm btn-outline-secondary" onclick="copyText(this.parentElement.previousElementSibling.innerText)">
                            <i class="bi bi-clipboard"></i>
                        </button>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-5 fw-bold">Min Amount :</div>
                    <div class="col-7">100</div>
                </div>
                <div class="row">
                    <div class="col-5 fw-bold">Max Amount :</div>
                    <div class="col-7">50000</div>
                </div>
            </div>
        </div>
        <div class="container my-4 text-center">
            <form action="{{ url('deposit') }}" method="post" enctype="multipart/form-data">
                <div class="row">
                    @csrf
                    <input type="hidden" name="transaction_type" value="deposit">
                    <div class="col-md-12 text-center text-white">
                        <h1>Deposit</h1>
                    </div>
                    <div class="col-md-6 text-white mt-3">
                        <label for="" class="form-label">Amount</label>
                        <input type="text" class="form-control" id="amount" name="amount"
                            value="{{ $amount }}" readonly>
                        @if ($errors->has('amount'))
                            <div class="text-danger">{{ $errors->first('amount') }}</div>
                        @endif
                    </div>
                    <div class="col-md-6 text-white mt-3">
                        <label for="" class="form-label">Transection ID/UTR</label>
                        <input type="text" class="form-control" name="transectionid">
                        @if ($errors->has('transectionid'))
                            <div class="text-danger">{{ $errors->first('transectionid') }}</div>
                        @endif
                    </div>
                    <div class="col-md-6 text-white mt-3">
                        <label for="transectionimage" class="form-label">Upload Your Payment Proof</label>
                        <input type="file" class="form-control" name="transectionimage" placeholder="">
                        @if ($errors->has('transectionimage'))
                            <div class="text-danger">{{ $errors->first('transectionimage') }}</div>
                        @endif
                    </div>
                    <div class="col-md-6 text-white mt-3">
                        <label for="transectionimage" class="form-label">Payment Method</label>
                        <select name="payment_method" id="payment_method" class="form-control">
                            <option value="" selected>Select Payment Method</option>
                            @foreach ($counter as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                        @if ($errors->has('payment_method'))
                            <div class="text-danger">{{ $errors->first('payment_method') }}</div>
                        @endif
                    </div>
                    <div class="col-md-6 text-white mt-3">
                        <label for="transectionimage" class="form-label">Description</label>
                        <textarea name="description" id="description" class="form-control"></textarea>
                        @if ($errors->has('description'))
                            <div class="text-danger">{{ $errors->first('description') }}</div>
                        @endif
                    </div>
                    <div class="col-md-12 text-center mt-3">
                        <button type="submit" class="btn btn-primary">Deposit</button>
                    </div>
                </div>
            </form>
        </div>
    @endsection
    @section('js')
        <script>
            function copyText(text) {
                navigator.clipboard.writeText(text);
                alert("Copied: " + text);
            }
            $('#whatsapp-deposit').click(function() {
                window.location.href =
                    'https://wa.me/+918602300402?text=Hello%20I%20want%20to%20deposit%20money%20in%20my%20account';
            })
            $('#account-info').hide();
            $('#gpay-info').hide();
            $('#usdt-info').hide();
            $('#account-deposit').click(function() {
                $('#account-info').show();
                $('#gpay-info').hide();
                $('#usdt-info').hide();
            })
            $('#gpay-deposit').click(function() {
                $('#gpay-info').show();
                $('#account-info').hide();
                $('#usdt-info').hide();
            })
            $('#usdt-deposit').click(function() {
                $('#usdt-info').show();
                $('#gpay-info').hide();
                $('#account-info').hide();
            })
        </script>
        <script>
            $("#payment_method").change(function() {
                var selectedMethod = $(this).val();
                console.log(selectedMethod);
                if (selectedMethod) {
                    $.ajax({
                        url: '/getpaymentdetails/' + selectedMethod,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.status === 'success') {
                                var details = response.data;
                                console.log(details);
                                $('#bankName').text(details.bank_name);
                                $('#accountNo').text(details.account_number);
                                $('#ifsc').text(details.ifsc_code);
                                $('#upi').text(details.upi_id);
                                $('#accountName').text(details.account_name);
                                $('#accountNameCopy').text(details.account_name);
                            } else {
                                alert('Failed to fetch payment details.');
                            }
                        },
                        error: function() {
                            alert('Error occurred while fetching payment details.');
                        }
                    });
                } else {
                    $('#bankName').text('');
                    $('#accountNo').text('');
                    $('#ifsc').text('');
                    $('#upi').text('');
                    $('#accountName').text('');
                }
            });
        </script>
    @endsection
    @section('css')
        <style>
            .nav-buttons .btn {
                margin: 5px;
                padding: 10px 20px;
            }

            .active-tab {
                background-color: #d92332;
                color: white;
            }

            .gpay-info {
                background: #f8f9fa;
                padding: 20px;
                border-radius: 10px;
                margin-top: 20px;
            }

            .copy-icon {
                cursor: pointer;
                color: #007bff;
            }

            @media (min-width:310px) and (max-width:768px) {
                .nav-buttons .btn {
                    width: 100%;
                    margin: 5px 0;
                }

                .gpay-info {
                    width: 100%;
                    margin: 0 auto;
                }

                .main-buttons {
                    margin-top: 80px
                }
            }
        </style>
    @endsection