@extends('crm.layouts.master')
@section('title', 'Binary Options')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
    <style>
        /* ── Direction badges ── */
        .dir-call { background: rgba(34,197,94,.15); color: #22c55e; padding: .18rem .55rem; border-radius: 4px; font-size: .72rem; font-weight: 800; display:inline-block; letter-spacing:.04em; }
        .dir-put  { background: rgba(239,68,68,.13);  color: #ef4444; padding: .18rem .55rem; border-radius: 4px; font-size: .72rem; font-weight: 800; display:inline-block; letter-spacing:.04em; }

        /* ── Status badges ── */
        .binary-gradient-status { min-width:82px; padding:.35rem .55rem; border-radius:0 !important; color:#fff !important; font-size:.72rem; font-weight:700; display:inline-block; text-align:center; background-image:var(--theme-gradient, linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0))) !important; }
        .s-open             { background-color:#5b9cf6; }
        .s-won              { background-color:#22c55e; }
        .s-lost             { background-color:#ef4444; }
        .s-push             { background-color:#6c757d; }
        .s-cancelled        { background-color:#8b949e; }
        .s-manually_settled { background-color:#f59e0b; }

        /* ── Settings panel ── */
        .binary-card, .settings-card { background:#fff; border:1px solid var(--bs-border-color, #e7e9eb); border-radius:.65rem; box-shadow:0 1px 3px rgba(25,35,50,.04); overflow:hidden; }
        .binary-filter .card-body { padding:1rem; }
        .binary-filter .form-label { color:#667085; font-weight:700; }
        .binary-filter .form-control, .binary-filter .form-select { min-height:36px; background:#fff; border-color:#dfe3e8; color:#344054; }
        .settings-card .card-header { background:#fff; color:#26303d; border-bottom:1px solid transparent; padding:1rem 1.15rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
        .settings-card .card-header[aria-expanded=true] { border-bottom-color:var(--bs-border-color, #e7e9eb); }
        .settings-card .card-body { background:#fff; color:#344054; }
        .settings-table th, .binary-table thead th { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.045em; color:#84909e; white-space:nowrap; background:#f8fafc; border-bottom:1px solid #e7e9eb; padding:.75rem .8rem; }
        .settings-table td { vertical-align: middle; padding: .45rem .6rem; }
        .expiry-checks { display: flex; flex-wrap: wrap; gap: .35rem; }
        .expiry-checks label { display:flex; align-items:center; gap:.25rem; font-size:.72rem; color:#667085; cursor:pointer; background:#f8fafc; padding:.25rem .5rem; border-radius:4px; border:1px solid #e4e7ec; }
        .expiry-checks input { cursor:pointer; }
        .payout-input { width:70px; background:#fff; border:1px solid #dfe3e8; color:#344054; border-radius:5px; padding:.3rem .5rem; text-align:center; }
        .enabled-toggle { width:38px; height:20px; position:relative; display:inline-block; }
        .enabled-toggle input { opacity:0; width:0; height:0; }
        .toggle-slider { position:absolute; inset:0; background:#374151; border-radius:99px; cursor:pointer; transition:.2s; }
        .toggle-slider:before { content:''; position:absolute; height:14px; width:14px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
        .enabled-toggle input:checked + .toggle-slider { background:#22c55e; }
        .enabled-toggle input:checked + .toggle-slider:before { transform: translateX(18px); }

        /* ── Settle modal ── */
        #settleModal .modal-content { background:#fff; color:#344054; border:1px solid #e7e9eb; }
        #settleModal .modal-header  { border-bottom:1px solid #e7e9eb; }
        #settleModal .modal-footer  { border-top:1px solid #e7e9eb; }
        .result-radio label { display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border-radius:8px; border:2px solid #e4e7ec; cursor:pointer; margin-bottom:.5rem; transition:border-color .15s; }
        .result-radio input[type=radio]:checked + label.won-lbl  { border-color:#22c55e; background:rgba(34,197,94,.08); }
        .result-radio input[type=radio]:checked + label.lose-lbl { border-color:#ef4444; background:rgba(239,68,68,.07); }
        .result-radio input[type=radio]:checked + label.manual-lbl { border-color:#f59e0b; background:rgba(245,158,11,.07); }
        .binary-table { color:#344054; }
        .binary-table tbody td { padding:.75rem .8rem; vertical-align:middle; border-color:#eef1f4; }
        .binary-table tbody tr:hover { background:#fafbfc; }
        .binary-empty { color:#98a2b3 !important; background:#fff !important; padding:2.5rem 1rem !important; }
        @media(max-width:767px) { .binary-filter .col-auto { width:50%; } .binary-filter .col-auto:last-child { width:100%; } }
    </style>
@endsection

@section('main-content')
<div class="breadcrumb d-flex align-items-center justify-content-between w-100">
    <h3>Binary Options</h3>
</div>
<div class="separator-breadcrumb border-top"></div>

@if($leadId)
<div class="alert alert-info d-flex align-items-center justify-content-between py-2">
    <span>Showing records for client #{{ $leadId }}</span>
    <a href="{{ route('trading.binary') }}" class="btn btn-sm btn-outline-secondary">Clear filter</a>
</div>
@endif

{{-- ══ Filters ══ --}}
<div class="card binary-card binary-filter mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-auto">
                <label class="form-label form-label-sm mb-1">Client ID</label>
                <input type="number" name="lead_id" class="form-control form-control-sm"
                       value="{{ request('lead_id') }}" placeholder="Lead ID" style="width:110px">
            </div>
            <div class="col-auto">
                <label class="form-label form-label-sm mb-1">Symbol</label>
                <select name="symbol_id" class="form-select form-select-sm" style="width:140px">
                    <option value="">All</option>
                    @foreach($symbols as $sym)
                        <option value="{{ $sym->id }}" {{ request('symbol_id') == $sym->id ? 'selected' : '' }}>{{ $sym->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto">
                <label class="form-label form-label-sm mb-1">Status</label>
                <select name="status" class="form-select form-select-sm" style="width:140px">
                    <option value="">All</option>
                    @foreach(['open','won','lost','push','cancelled','manually_settled'] as $s)
                        <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto">
                <label class="form-label form-label-sm mb-1">From</label>
                <input type="date" name="date_from" class="form-control form-control-sm" value="{{ request('date_from') }}">
            </div>
            <div class="col-auto">
                <label class="form-label form-label-sm mb-1">To</label>
                <input type="date" name="date_to" class="form-control form-control-sm" value="{{ request('date_to') }}">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-sm btn-primary">Filter</button>
                <a href="{{ route('trading.binary') }}" class="btn btn-sm btn-outline-secondary ms-1">Reset</a>
            </div>
        </form>
    </div>
</div>

{{-- ══ Trades Table ══ --}}
<div class="card binary-card mb-4">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-sm align-middle mb-0 binary-table" id="boTable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Client</th>
                        <th>Symbol</th>
                        <th>Dir</th>
                        <th>Stake</th>
                        <th>Payout%</th>
                        <th>Potential</th>
                        <th>Strike</th>
                        <th>Close</th>
                        <th>Expiry</th>
                        <th>Expires At</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($options as $opt)
                    <tr id="row-{{ $opt->id }}">
                        <td class="text-muted" style="font-size:.72rem">{{ $opt->id }}</td>
                        <td>
                            @if($opt->lead)
                                <a href="{{ route('lead_detail', $opt->lead_id) }}" class="text-info fw-semibold" style="font-size:.82rem">
                                    {{ $opt->lead->fname }} {{ $opt->lead->lname }}
                                </a>
                                <div style="font-size:.68rem;color:#9ca3af">{{ $opt->lead->email }}</div>
                            @else
                                <span class="text-muted">#{{ $opt->lead_id }}</span>
                            @endif
                        </td>
                        <td class="fw-semibold">{{ $opt->symbol->name ?? '—' }}</td>
                        <td>
                            <span class="dir-{{ $opt->direction }}">{{ strtoupper($opt->direction) }}</span>
                        </td>
                        <td>{{ $opt->currency }} {{ number_format($opt->stake, 2) }}</td>
                        <td>{{ $opt->payout_pct }}%</td>
                        <td style="color:#22c55e;font-weight:600">{{ $opt->currency }} {{ number_format($opt->potential_return, 2) }}</td>
                        <td>{{ number_format($opt->strike_price, $opt->strike_price < 10 ? 5 : 2) }}</td>
                        <td>{{ $opt->close_price ? number_format($opt->close_price, $opt->close_price < 10 ? 5 : 2) : '—' }}</td>
                        <td style="font-size:.75rem;white-space:nowrap">{{ $opt->expiry_label }}</td>
                        <td style="font-size:.72rem;white-space:nowrap;color:#9ca3af">
                            {{ $opt->expires_at->format('d M y H:i') }}
                            @if($opt->status === 'open')
                                <br><span style="color:{{ $opt->is_expired ? '#ef4444' : '#22c55e' }}">
                                    {{ $opt->is_expired ? 'EXPIRED' : 'Active' }}
                                </span>
                            @endif
                        </td>
                        <td>
                            <span class="s-{{ $opt->status }} bg-gradient binary-gradient-status">{{ ucfirst(str_replace('_',' ',$opt->status)) }}</span>
                            @if($opt->settled_by && $opt->settler)
                                <div style="font-size:.65rem;color:#9ca3af;margin-top:2px">by {{ $opt->settler->name }}</div>
                            @endif
                        </td>
                        <td style="white-space:nowrap">
                            @if($opt->status === 'open')
                            <button class="btn btn-xs btn-success btn-settle me-1"
                                    data-id="{{ $opt->id }}"
                                    data-name="{{ $opt->symbol->name ?? '' }}"
                                    data-dir="{{ $opt->direction }}"
                                    data-stake="{{ $opt->stake }}"
                                    data-currency="{{ $opt->currency }}"
                                    data-strike="{{ $opt->strike_price }}"
                                    style="font-size:.7rem;padding:.2rem .55rem">
                                <i class="fas fa-gavel me-1"></i>Settle
                            </button>
                            <button class="btn btn-xs btn-danger btn-cancel"
                                    data-id="{{ $opt->id }}"
                                    style="font-size:.7rem;padding:.2rem .55rem">
                                <i class="fas fa-ban me-1"></i>Cancel
                            </button>
                            @else
                            <span style="color:#4b5563;font-size:.72rem">—</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="13" class="text-center binary-empty">No binary options found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($options->hasPages())
        <div class="px-3 py-2">{{ $options->links() }}</div>
        @endif
    </div>
</div>

{{-- ══ Settings Panel ══ --}}
<div class="settings-card mb-4" id="settingsCard">
    <div class="card-header" data-bs-toggle="collapse" data-bs-target="#settingsBody">
        <span><i class="fas fa-sliders me-2"></i>Per-Symbol Settings</span>
        <i class="fas fa-chevron-down" id="settingsChevron"></i>
    </div>
    <div class="collapse" id="settingsBody">
        <div class="card-body p-3">
            <p class="text-muted mb-3" style="font-size:.82rem">
                Configure payout percentage, enable/disable binary options, and available expiry times for each symbol.
                Changes take effect immediately for new trades.
            </p>
            <form id="settingsForm">
                <div class="table-responsive">
                    <table class="table table-sm settings-table align-middle mb-3">
                        <thead>
                            <tr>
                                <th>Symbol</th>
                                <th>Enabled</th>
                                <th>Payout %</th>
                                <th>Available Expiries</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($symbols as $sym)
                            @php
                                $st       = $settings->get($sym->id);
                                $enabled  = $st ? $st->enabled : true;
                                $pct      = $st ? $st->payout_pct : 80;
                                $expiries = $st ? $st->available_expiries : \App\Models\BinaryOptionSetting::supportedExpiryKeys();
                            @endphp
                            <tr>
                                <td class="fw-semibold" style="font-size:.82rem">{{ $sym->name }}</td>
                                <td>
                                    <label class="enabled-toggle">
                                        <input type="checkbox" class="sym-enabled" data-id="{{ $sym->id }}"
                                               {{ $enabled ? 'checked' : '' }}>
                                        <span class="toggle-slider"></span>
                                    </label>
                                </td>
                                <td>
                                    <input type="number" class="payout-input sym-payout" data-id="{{ $sym->id }}"
                                           value="{{ $pct }}" min="1" max="999" step="0.5">%
                                </td>
                                <td>
                                    <div class="expiry-checks">
                                        @foreach(\App\Models\BinaryOptionSetting::$expiryOptions as $key => $label)
                                        <label>
                                            <input type="checkbox" class="sym-expiry"
                                                   data-id="{{ $sym->id }}"
                                                   data-key="{{ $key }}"
                                                   {{ in_array((string) $key, $expiries, true) ? 'checked' : '' }}>
                                            {{ $label }}
                                        </label>
                                        @endforeach
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <button type="button" class="btn btn-primary btn-sm" id="saveSettingsBtn">
                    <i class="fas fa-save me-1"></i>Save All Settings
                </button>
                <span id="settingsSaveStatus" class="ms-2" style="font-size:.82rem"></span>
            </form>
        </div>
    </div>
</div>

{{-- ══ Settle Modal ══ --}}
<div class="modal fade" id="settleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Settle Binary Option</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 p-3 bg-light border" style="border-radius:8px;font-size:.85rem">
                    <div><strong id="sm-name"></strong></div>
                    <div class="text-muted" id="sm-meta"></div>
                </div>

                <div class="result-radio mb-3">
                    <input type="radio" name="sm_result" id="r-won" value="won">
                    <label for="r-won" class="won-lbl">
                        <i class="fas fa-trophy" style="color:#22c55e"></i>
                        <div>
                            <div class="fw-bold" style="color:#22c55e">Won</div>
                            <div class="text-muted" style="font-size:.75rem">Client receives stake + payout</div>
                        </div>
                    </label>

                    <input type="radio" name="sm_result" id="r-lost" value="lost" checked>
                    <label for="r-lost" class="lose-lbl">
                        <i class="fas fa-times-circle" style="color:#ef4444"></i>
                        <div>
                            <div class="fw-bold" style="color:#ef4444">Lost</div>
                            <div class="text-muted" style="font-size:.75rem">Stake was already debited — no change</div>
                        </div>
                    </label>

                    <input type="radio" name="sm_result" id="r-manual" value="manually_settled">
                    <label for="r-manual" class="manual-lbl">
                        <i class="fas fa-hand-holding-usd" style="color:#f59e0b"></i>
                        <div>
                            <div class="fw-bold" style="color:#f59e0b">Manually Settled (Won)</div>
                            <div class="text-muted" style="font-size:.75rem">Agent override — treats as a win</div>
                        </div>
                    </label>
                </div>

                <div class="mb-3">
                    <label class="form-label" style="font-size:.78rem;font-weight:700">Close Price (optional)</label>
                    <input type="number" id="sm-close-price" class="form-control form-control-sm"
                           step="any" placeholder="Leave blank to use strike price">
                </div>
                <div class="mb-0">
                    <label class="form-label" style="font-size:.78rem;font-weight:700">Note (optional)</label>
                    <textarea id="sm-note" class="form-control form-control-sm" rows="2"
                              placeholder="Internal note…"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary btn-sm" id="confirmSettleBtn">
                    <i class="fas fa-gavel me-1"></i>Confirm Settlement
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
<script>
(function () {
    'use strict';

    const CSRF = document.querySelector('meta[name="csrf-token"]')?.content ?? '';

    // ── DataTable ───────────────────────────────────────────
    if (document.getElementById('boTable')) {
        $('#boTable').DataTable({
            order: [[0, 'desc']],
            pageLength: 25,
            dom: '<"top"f>rt<"bottom"lip>',
            language: { search: '' },
        });
    }

    // ── Settings chevron toggle ──────────────────────────────
    document.getElementById('settingsBody')?.addEventListener('show.bs.collapse', () => {
        document.getElementById('settingsChevron').style.transform = 'rotate(180deg)';
    });
    document.getElementById('settingsBody')?.addEventListener('hide.bs.collapse', () => {
        document.getElementById('settingsChevron').style.transform = '';
    });

    // ── Save settings ────────────────────────────────────────
    document.getElementById('saveSettingsBtn')?.addEventListener('click', () => {
        const rows  = document.querySelectorAll('.sym-payout');
        const batch = [];

        rows.forEach(inp => {
            const sid      = inp.dataset.id;
            const enabled  = document.querySelector(`.sym-enabled[data-id="${sid}"]`)?.checked ?? true;
            const pct      = parseFloat(inp.value) || 80;
            const expiries = [];
            document.querySelectorAll(`.sym-expiry[data-id="${sid}"]:checked`).forEach(cb => {
                expiries.push(cb.dataset.key);
            });
            batch.push({ symbol_id: sid, enabled: enabled ? 1 : 0, payout_pct: pct, available_expiries: expiries });
        });

        const status = document.getElementById('settingsSaveStatus');
        status.textContent = 'Saving…';

        fetch('{{ route("trading.binary.settings") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
            body: JSON.stringify({ settings: batch }),
        })
        .then(r => r.json())
        .then(d => {
            if (d.success) {
                status.textContent = '✓ Saved ' + d.saved + ' symbols.';
                status.style.color = '#22c55e';
            } else {
                status.textContent = 'Error: ' + JSON.stringify(d.errors ?? d);
                status.style.color = '#ef4444';
            }
        })
        .catch(e => { status.textContent = 'Network error.'; status.style.color = '#ef4444'; });
    });

    // ── Settle modal ─────────────────────────────────────────
    let settleId = null;

    document.querySelectorAll('.btn-settle').forEach(btn => {
        btn.addEventListener('click', () => {
            settleId = btn.dataset.id;
            document.getElementById('sm-name').textContent = btn.dataset.name + ' — ' + btn.dataset.dir.toUpperCase();
            document.getElementById('sm-meta').textContent =
                'Stake: ' + btn.dataset.currency + ' ' + parseFloat(btn.dataset.stake).toFixed(2) +
                ' · Strike: ' + parseFloat(btn.dataset.strike).toFixed(5);
            document.getElementById('sm-close-price').value = '';
            document.getElementById('sm-note').value = '';
            document.getElementById('r-lost').checked = true;
            new bootstrap.Modal(document.getElementById('settleModal')).show();
        });
    });

    document.getElementById('confirmSettleBtn')?.addEventListener('click', () => {
        if (!settleId) return;
        const result     = document.querySelector('input[name=sm_result]:checked')?.value ?? 'lost';
        const closePrice = document.getElementById('sm-close-price').value;
        const note       = document.getElementById('sm-note').value;

        fetch(`/trading/binary-options/${settleId}/settle`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
            body: JSON.stringify({ result, close_price: closePrice || null, note }),
        })
        .then(r => r.json())
        .then(d => {
            if (d.success) {
                bootstrap.Modal.getInstance(document.getElementById('settleModal')).hide();
                // Update row visually
                const row = document.getElementById('row-' + settleId);
                if (row) {
                    const statusCell = row.querySelector('td:nth-child(12)');
                    if (statusCell) statusCell.innerHTML = `<span class="s-${d.status}">${d.status.replace('_',' ')}</span>`;
                    const actionCell = row.querySelector('td:last-child');
                    if (actionCell) actionCell.innerHTML = '<span style="color:#4b5563;font-size:.72rem">—</span>';
                }
                Swal && Swal.fire({ icon: 'success', title: 'Settled', text: 'Option marked as ' + d.status, timer: 2000, showConfirmButton: false });
            } else {
                alert(d.error ?? 'Settlement failed.');
            }
        })
        .catch(() => alert('Network error.'));
    });

    // ── Cancel button ────────────────────────────────────────
    document.querySelectorAll('.btn-cancel').forEach(btn => {
        btn.addEventListener('click', () => {
            const id = btn.dataset.id;
            if (!confirm('Cancel this option and refund the stake to the client?')) return;
            fetch(`/trading/binary-options/${id}/cancel`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
                body: JSON.stringify({}),
            })
            .then(r => r.json())
            .then(d => {
                if (d.success) {
                    const row = document.getElementById('row-' + id);
                    if (row) {
                        const statusCell = row.querySelector('td:nth-child(12)');
                        if (statusCell) statusCell.innerHTML = '<span class="s-cancelled">Cancelled</span>';
                        const actionCell = row.querySelector('td:last-child');
                        if (actionCell) actionCell.innerHTML = '<span style="color:#4b5563;font-size:.72rem">—</span>';
                    }
                    Swal && Swal.fire({ icon: 'info', title: 'Cancelled', text: 'Stake refunded to client.', timer: 2000, showConfirmButton: false });
                } else {
                    alert(d.error ?? 'Cancellation failed.');
                }
            })
            .catch(() => alert('Network error.'));
        });
    });
})();
</script>
@endpush