@extends('crm.layouts.master')
@section('title','Symbols')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
    <style>
        #tv_crm_chart { width: 100%; height: 520px; }
        .tv-hint { font-size: .75rem; color: #6c757d; margin-top: .25rem; }
    </style>
@endsection
@section('main-content')
<div class="breadcrumb">
    <h3>Symbols & Prices</h3>
</div>
<div class="separator-breadcrumb border-top"></div>

<div class="row">
    {{-- Add symbol --}}
    <div class="col-md-4 mb-4">
        <div class="card text-left">
            <div class="card-body">
                <h5 class="mb-3">Add Symbol</h5>
                <form method="POST" action="{{ route('trading.symbols.store') }}">
                    @csrf
                    <div class="form-group mb-2">
                        <label class="form-label">TradingView Symbol <small class="text-muted">e.g. BINANCE:BTCUSDT</small></label>
                        <input type="text" name="tv_symbol" class="form-control" required placeholder="BINANCE:BTCUSDT">
                        <div class="tv-hint">
                            Crypto: <code>BINANCE:BTCUSDT</code> &nbsp;|&nbsp;
                            Forex: <code>FX:EURUSD</code> &nbsp;|&nbsp;
                            Stocks: <code>NASDAQ:AAPL</code> &nbsp;|&nbsp;
                            Commodities: <code>COMEX:GC1!</code>
                        </div>
                    </div>
                    <div class="form-group mb-2">
                        <label class="form-label">Display Name</label>
                        <input type="text" name="name" class="form-control" required placeholder="Bitcoin / Tether">
                    </div>
                    <div class="form-group mb-2">
                        <label class="form-label">Category</label>
                        <select name="category" class="form-control" required>
                            <option value="crypto">Crypto</option>
                            <option value="forex">Forex</option>
                            <option value="stocks">Stocks</option>
                            <option value="commodities">Commodities</option>
                        </select>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group mb-2">
                                <label class="form-label">Base</label>
                                <input type="text" name="base_currency" class="form-control" placeholder="BTC">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group mb-2">
                                <label class="form-label">Quote</label>
                                <input type="text" name="quote_currency" class="form-control" placeholder="USDT">
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-2">
                        <label class="form-label">Price Feed ID</label>
                        <input type="text" name="price_feed_id" class="form-control" placeholder="bitcoin / EURUSD / AAPL / GC=F">
                        <div class="tv-hint">
                            <strong>Crypto:</strong> CoinGecko ID (e.g. <code>bitcoin</code>, <code>ethereum</code>)<br>
                            <strong>Forex:</strong> Pair code (e.g. <code>EURUSD</code>, <code>GBPUSD</code>)<br>
                            <strong>Stocks:</strong> Yahoo Finance ticker (e.g. <code>AAPL</code>, <code>TSLA</code>)<br>
                            <strong>Commodities:</strong> Yahoo ticker (e.g. <code>GC=F</code> gold, <code>CL=F</code> oil)
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Decimal Places</label>
                        <input type="number" name="decimal_places" class="form-control" value="2" min="0" max="8" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Add Symbol</button>
                </form>
            </div>
        </div>
    </div>

    {{-- Symbols table --}}
    <div class="col-md-8 mb-4">
        <div class="card text-left">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="display table table-bordered" id="symbols_table" style="width:100%">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>TV Symbol</th>
                            <th>Name</th>
                            <th>Category</th>
                            <th>Latest Price</th>
                            <th>Status</th>
                            <th>Trades</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($symbols as $sym)
                        <tr>
                            <td>{{ $sym->id }}</td>
                            <td><code>{{ $sym->tv_symbol }}</code></td>
                            <td>{{ $sym->name }}</td>
                            <td>{{ ucfirst($sym->category) }}</td>
                            <td>
                                @if($sym->latestPrice)
                                    <span class="fw-bold">{{ number_format($sym->latestPrice->price, $sym->decimal_places) }}</span>
                                    <br><small class="text-muted">{{ $sym->latestPrice->priced_at?->diffForHumans() }}</small>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge bg-{{ $sym->is_active ? 'success' : 'secondary' }}">
                                    {{ $sym->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td>{{ $sym->trades_count }}</td>
                            <td>
                                @if($sym->tv_symbol)
                                @php
                                    // Some TVC indices are restricted in TradingView's embeddable widget.
                                    // Keep the configured CRM symbol and use an equivalent embeddable feed for its chart.
                                    $embeddedChartSymbol = [
                                        'TVC:DXY' => 'CAPITALCOM:DXY',
                                    ][$sym->tv_symbol] ?? $sym->tv_symbol;
                                @endphp
                                <button type="button"
                                        class="btn btn-sm btn-outline-info mb-1 js-view-chart"
                                        data-chart-symbol="{{ $embeddedChartSymbol }}"
                                        data-source-symbol="{{ $sym->tv_symbol }}"
                                        data-symbol-name="{{ $sym->name }}">
                                    <i class="fa fa-chart-line"></i> Chart
                                </button>
                                @endif
                                <button class="btn btn-sm btn-outline-primary mb-1" onclick="setPrice({{ $sym->id }}, '{{ addslashes($sym->name) }}')">Set Price</button>
                                <button class="btn btn-sm btn-outline-secondary mb-1" onclick="editSymbol({{ $sym->id }}, '{{ addslashes($sym->name) }}', {{ $sym->is_active ? 1 : 0 }}, '{{ $sym->price_feed_id ?? "" }}')">Edit</button>
                            </td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- TradingView Chart Modal --}}
<div class="modal fade" id="chart_modal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"><i class="fa fa-chart-line me-2"></i><span id="chart_modal_title"></span></h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body p-0">
                <div id="tv_crm_chart"></div>
            </div>
            <div class="modal-footer justify-content-between py-2">
                <small id="chart_feed_note" class="text-muted"></small>
                <a id="chart_external_link" class="btn btn-sm btn-outline-primary" href="#" target="_blank" rel="noopener noreferrer">
                    <i class="fa fa-external-link-alt me-1"></i> Open on TradingView
                </a>
            </div>
        </div>
    </div>
</div>

{{-- Set Price Modal --}}
<div class="modal" id="set_price_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Set Price — <span id="price_symbol_name"></span></h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('trading.symbols.set_price') }}">
                    @csrf
                    <input type="hidden" name="symbol_id" id="price_symbol_id">
                    <div class="form-group mb-3">
                        <label class="form-label">Current Price</label>
                        <input type="number" name="price" id="price_value" class="form-control" step="any" min="0" required placeholder="0.00">
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Save Price</button>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Edit Symbol Modal --}}
<div class="modal" id="edit_symbol_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Edit Symbol</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('trading.symbols.update') }}">
                    @csrf
                    <input type="hidden" name="id" id="edit_symbol_id">
                    <div class="form-group mb-2">
                        <label class="form-label">Name</label>
                        <input type="text" name="name" id="edit_symbol_name" class="form-control" required>
                    </div>
                    <div class="form-group mb-2">
                        <label class="form-label">Price Feed ID</label>
                        <input type="text" name="price_feed_id" id="edit_symbol_feed_id" class="form-control" placeholder="bitcoin / EURUSD / AAPL / GC=F">
                    </div>
                    <div class="form-group mb-2">
                        <label class="form-label">Active</label>
                        <select name="is_active" id="edit_symbol_active" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Update</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

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

function setPrice(id, name) {
    $('#price_symbol_id').val(id);
    $('#price_symbol_name').text(name);
    $('#price_value').val('');
    $('#set_price_modal').modal('show');
}

function editSymbol(id, name, active, feedId) {
    $('#edit_symbol_id').val(id);
    $('#edit_symbol_name').val(name);
    $('#edit_symbol_active').val(active);
    $('#edit_symbol_feed_id').val(feedId || '');
    $('#edit_symbol_modal').modal('show');
}

function viewChart(chartSymbol, sourceSymbol, name) {
    $('#chart_modal_title').text(name + '  (' + sourceSymbol + ')');
    $('#chart_feed_note').text(
        chartSymbol === sourceSymbol ? '' : 'Embedded chart feed: ' + chartSymbol
    );
    $('#chart_external_link').attr(
        'href',
        'https://www.tradingview.com/chart/?symbol=' + encodeURIComponent(sourceSymbol)
    );
    $('#tv_crm_chart').empty();
    $('#chart_modal').modal('show');

    // Slight delay to allow modal to finish opening before widget init
    setTimeout(function () {
        new TradingView.widget({
            container_id:        "tv_crm_chart",
            autosize:            true,
            symbol:              chartSymbol,
            interval:            "D",
            timezone:            "Etc/UTC",
            theme:               "light",
            style:               "1",
            locale:              "en",
            enable_publishing:   false,
            allow_symbol_change: true,
            hide_top_toolbar:    false,
            save_image:          false,
        });
    }, 200);
}

$(document).on('click', '.js-view-chart', function () {
    viewChart(
        String($(this).data('chart-symbol')),
        String($(this).data('source-symbol')),
        String($(this).data('symbol-name'))
    );
});

// Clean up widget when modal closes
$('#chart_modal').on('hidden.bs.modal', function () {
    $('#tv_crm_chart').empty();
});
</script>
@endsection