@extends('layouts.admin')

@section('content')
<main class="content">
    <div class="container-fluid p-0">

        <div class="row mb-3">
            <div class="col-auto">
                <h3>My Traders</h3>
                @if(!blank($client))
							<p><a href='{{route("admin.user.single", $client->username)}}'>Back to User Page</a></p>
							@endif
							<input type="hidden" id="clid" value="@if(!blank($client)) ({{$client->id}}) @endif" />
            </div>
        </div>

        @include('components.admin.error-message')

        <div class="card">
            <div class="card-body table-responsive">
                <table class="table table-bordered align-middle">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>User ID</th>
                            <th>Copy Trader</th>
                            <th>Status</th>
                            <th>Created At</th>
                            <th width="220">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($myTraders as $trader)
                            <tr>
                                <td>{{ $trader->id }}</td>
                                <td>{{ $trader->user_id }}</td>
                                <td>{{ $trader->copyTrader?->name ?? '-' }}</td>
                                <td>
                                    <span class="badge {{ $trader->status == 'active' ? 'bg-success' : ($trader->status == 'paused' ? 'bg-warning' : 'bg-danger') }}">
                                        {{ ucfirst($trader->status ?? 'inactive') }}
                                    </span>
                                </td>
                                <td>{{ $trader->created_at->toDayDateTimeString() }}</td>
                                <td>
                                    <div class="d-flex gap-2">
                                      <button type="button" class="btn btn-sm btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#tradePanelModal{{ $trader->id }}">
    Enter Trade
</button>

<!-- Trade Panel Modal -->
<div class="modal fade" id="tradePanelModal{{ $trader->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form method="POST" action="{{ route('admin.mytraders.submitTrade', $trader->id) }}" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5>Enter Trade - {{ $trader->copyTrader?->name ?? '-' }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body row g-3">
                <div class="col-md-6">
                    <label>Symbol / Trade</label>
                    <select name="symbol" class="form-select search-select" required>
                        @foreach(\App\Models\Trade::where('is_active',1)->get() as $trade)
                            <option value="{{ $trade->id }}">
                                {{ $trade->symbol }} - {{ $trade->name }} (${{
                                $trade->ask_price }})
                            </option>
                        @endforeach
                    </select>
                </div>
        

                <div class="col-md-6">
                    <label>Type</label>
                    <select name="type" class="form-select" required>
                        <option value="buy">Buy</option>
                        <option value="sell">Sell</option>
                    </select>
                </div>

                <div class="col-md-6">
                    <label>Volume</label>
                    <input type="number" step="0.0001" name="amount" class="form-control" required>
                </div>

                <div class="col-md-6">
                    <label>Interval</label>
                    <input type="text" name="interval" class="form-control" placeholder="e.g. 1h" required>
                </div>

                <div class="col-md-6">
                    <label>Leverage</label>
                    <input type="text" name="leverage" class="form-control" placeholder="e.g. 1x">
                </div>

                <div class="col-md-6">
                    <label>Payout</label>
                    <input type="text" name="payout" class="form-control" placeholder="Optional">
                </div>
                <div class="mb-3">
        <label class="form-label" for="inputTStatus">Status</label>
        <select class="form-control" name="status" id="inputTStatus" required>
            {!!get_order_edit_select()!!}
        </select>
    </div>
    
    <div class="mb-3">
        <label class="form-label" for="inputTStatus">Win Status</label>
        <select class="form-control" name="wstatus" id="inputTStatus" >
            <option value="" >none</option>
            <option value="won"  >won</option>
            <option  value="loss" >loss</option>
        </select>
    </div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-primary">Submit Trade</button>
            </div>
        </form>
    </div>
</div>


                                        @if($trader->status != 'paused')
                                        <form method="POST" action="{{ route('admin.mytraders.pause', $trader->id) }}">
                                            @csrf
                                            <button class="btn btn-sm btn-warning" type="submit">Pause</button>
                                        </form>
                                        @endif
                                        
                                        @if($trader->status != 'active' && $trader->status != 'cancelled')
                                        <form method="POST" action="{{ route('admin.mytraders.resume', $trader->id) }}">
                                            @csrf
                                            <button class="btn btn-sm btn-warning" type="submit">Resume</button>
                                        </form>
                                        @endif

                                        @if($trader->status != 'cancelled')
                                        <form method="POST" action="{{ route('admin.mytraders.cancel', $trader->id) }}">
                                            @csrf
                                            <button class="btn btn-sm btn-danger" type="submit">Cancel</button>
                                        </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted">No traders found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>

                <div class="mt-3">
                    {{ $myTraders->links() }}
                </div>
            </div>
        </div>

    </div>
</main>

@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).on('shown.bs.modal', '.modal', function () {
    console.log(typeof $.fn.select2); 
    const $modal = $(this); // modal container

    // find all select elements inside the modal
    $modal.find('select.search-select').each(function () {
        const $select = $(this); // the actual select inside modal

        // init only if not already initialized
        if (!$select.hasClass('select2-hidden-accessible')) {
            $select.select2({
                dropdownParent: $modal, // VERY important for modal
                width: '100%',
                placeholder: 'Search symbol...',
                allowClear: true
            });
        }
    });
});


</script>
@endsection