@extends('crm.layouts.master')
@section('title','Trades')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
@endsection
@section('main-content')
<div class="breadcrumb d-flex align-items-center justify-content-between w-100">
    <h3>Trade Execution</h3>
    <button class="btn btn-primary btn-sm ms-auto" data-toggle="modal" data-target="#trade_modal">
        <i class="fa fa-exchange-alt"></i> New Trade
    </button>
</div>
<div class="separator-breadcrumb border-top"></div>

@if(session('status'))
<div class="alert alert-info alert-dismissible fade show">
    {{ session('status') }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
@endif


<div class="row">
    <div class="col-12 mb-4">
        <div class="card text-left">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="display table table-bordered" id="trades_table" style="width:100%">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Client</th>
                            <th>Symbol</th>
                            <th>Side</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Total</th>
                            <th>Currency</th>
                            <th>Executed By</th>
                            <th>Date</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($trades as $trade)
                        <tr>
                            <td>{{ $trade->id }}</td>
                            <td>
                                <a href="{{ route('trading.portfolio', $trade->lead->id ?? 0) }}" class="fw-bold">
                                    {{ $trade->lead->fname ?? '' }} {{ $trade->lead->lname ?? '' }}
                                </a>
                            </td>
                            <td>
                                <span class="fw-bold">{{ $trade->symbol->name ?? '—' }}</span>
                                <br><small class="text-muted">{{ $trade->symbol->tv_symbol ?? '' }}</small>
                            </td>
                            <td>
                                <span class="badge bg-{{ $trade->side === 'buy' ? 'success' : 'danger' }}">
                                    {{ strtoupper($trade->side) }}
                                </span>
                            </td>
                            <td>{{ rtrim(rtrim(number_format($trade->quantity, 8), '0'), '.') }}</td>
                            <td>{{ number_format($trade->price, 2) }}</td>
                            <td class="fw-bold">{{ number_format($trade->total_cost, 2) }}</td>
                            <td>{{ $trade->currency }}</td>
                            <td>{{ $trade->executor->name ?? '—' }}</td>
                            <td>{{ $trade->traded_at->format('Y-m-d H:i') }}</td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Trade Ticket Modal --}}
<div class="modal" id="trade_modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Trade Ticket</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('trading.trades.store') }}" id="trade_form">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Client</label>
                                <select name="lead_id" id="trade_lead_id" class="form-control" required>
                                    <option value="">-- Select client --</option>
                                    @foreach($leads as $lead)
                                    <option value="{{ $lead->id }}">{{ $lead->fname }} {{ $lead->lname }} ({{ $lead->email }})</option>
                                    @endforeach
                                </select>
                            </div>
                            {{-- Client balances --}}
                            <div id="client_balances" class="mb-3" style="display:none">
                                <label class="form-label">Available Balances</label>
                                <div id="balance_display" class="p-2 bg-light rounded" style="font-size:.85rem"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Symbol</label>
                                <select name="symbol_id" id="trade_symbol_id" class="form-control" required>
                                    <option value="">-- Select symbol --</option>
                                    @foreach($symbols as $sym)
                                    <option value="{{ $sym->id }}">{{ $sym->name }} ({{ $sym->tv_symbol }})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div id="symbol_price_info" class="mb-3" style="display:none">
                                <label class="form-label">Latest Price</label>
                                <div id="symbol_price_display" class="p-2 bg-light rounded" style="font-size:.85rem"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label class="form-label">Side</label>
                                <select name="side" class="form-control" required>
                                    <option value="buy">BUY</option>
                                    <option value="sell">SELL</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label class="form-label">Currency</label>
                                <select name="currency" class="form-control" required>
                                    <option>USD</option><option>EUR</option><option>CAD</option><option>AUD</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label class="form-label">Quantity</label>
                                <input type="number" name="quantity" id="trade_qty" class="form-control" step="any" min="0.00000001" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label class="form-label">Price Override <small class="text-muted">(leave blank = latest)</small></label>
                                <input type="number" name="price" id="trade_price" class="form-control" step="any" min="0" placeholder="auto">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label class="form-label">Fee</label>
                                <input type="number" name="fee" class="form-control" step="any" min="0" value="0">
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="form-group mb-3">
                                <label class="form-label">Note</label>
                                <input type="text" name="note" class="form-control" placeholder="Optional note">
                            </div>
                        </div>
                    </div>
                    {{-- Estimated cost --}}
                    <div id="estimated_cost" class="alert alert-info py-2 mb-3" style="display:none;font-size:.88rem"></div>

                    <button type="submit" class="btn btn-primary w-100">Execute Trade</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-js')
<script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
<script>
$(document).ready(function () {
    $('#trades_table').DataTable({ order: [[0, 'DESC']] });

    // Load client balances when client changes
    $('#trade_lead_id').on('change', function () {
        const id = $(this).val();
        if (!id) { $('#client_balances').hide(); return; }
        $.getJSON('{{ url("trading/trades/client-balances") }}/' + id, function (data) {
            let html = '';
            $.each(['USD','EUR','CAD','AUD'], function(i, cur) {
                const bal = data[cur] ? parseFloat(data[cur].balance).toFixed(2) : '0.00';
                html += `<span class="me-3"><strong>${cur}:</strong> ${bal}</span>`;
            });
            $('#balance_display').html(html || 'No wallets yet.');
            $('#client_balances').show();
        });
    });

    // Load latest price when symbol changes
    $('#trade_symbol_id').on('change', function () {
        const id = $(this).val();
        if (!id) { $('#symbol_price_info').hide(); return; }
        $.getJSON('{{ url("trading/trades/symbol-price") }}/' + id, function (data) {
            if (data.price) {
                $('#trade_price').attr('placeholder', data.price);
                $('#symbol_price_display').html(`<strong>${parseFloat(data.price).toFixed(8)}</strong> <span class="text-muted">as of ${data.priced_at ?? 'N/A'}</span>`);
                $('#symbol_price_info').show();
            } else {
                $('#symbol_price_display').html('<span class="text-warning">No price set for this symbol.</span>');
                $('#symbol_price_info').show();
            }
        });
    });

    // Estimated cost
    function updateEstimate() {
        const qty   = parseFloat($('#trade_qty').val()) || 0;
        const price = parseFloat($('#trade_price').val()) || parseFloat($('#trade_price').attr('placeholder')) || 0;
        if (qty && price) {
            $('#estimated_cost').text(`Estimated total: ${(qty * price).toFixed(2)}`).show();
        } else {
            $('#estimated_cost').hide();
        }
    }
    $('#trade_qty, #trade_price').on('input', updateEstimate);
});
</script>
@endsection