@extends('layouts.admin')

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

<div class="d-flex justify-content-between mb-3">
    <h3>All Trade Symbols</h3>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addSymbolModal">
        Add Symbol
    </button>
</div>

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

<div class="card">
<div class="table-responsive">
<table class="table table-bordered align-middle">
<thead>
<tr>
    <th>Base</th>
    <th>Quote</th>
    <th>Symbol</th>
    <th>Category</th>
    <th>Name</th>
    <th>Trade View</th>
    <th>Digits</th>
    <th>Spread</th>
    <th>Status</th>
    <th width="150">Actions</th>
</tr>
</thead>

<tbody>
@forelse($trades as $trade)
<tr>
    <td>{{ $trade->base_curr }}</td>
    <td>{{ $trade->quote_curr }}</td>
    <td>{{ $trade->symbol }}</td>
    <td>{{ $trade->cat }}</td>
    <td>{{ $trade->name }}</td>
    <td>{{ $trade->trade_view }}</td>
    <td>{{ $trade->digits }}</td>
    <td>{{ $trade->spread }}</td>
    <td>
        <span class="badge {{ $trade->is_active ? 'bg-success' : 'bg-danger' }}">
            {{ $trade->is_active ? 'Active' : 'Inactive' }}
        </span>
    </td>
    <td>
        <button class="btn btn-sm btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#editSymbol{{ $trade->id }}">
            Edit
        </button>

        <a href="{{ secure_url('admin/symbols/delete/'.$trade->id) }}"
           class="btn btn-sm btn-danger"
           onclick="return confirm('Delete {{ $trade->symbol }}?')">
            Delete
        </a>
    </td>
</tr>

{{-- EDIT MODAL --}}
<div class="modal fade" id="editSymbol{{ $trade->id }}" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content p-4">
<form method="POST" action="{{ route('admin.symbols.edit') }}">
@csrf

<input type="hidden" name="id" value="{{ $trade->id }}">

<div class="row g-3">
    <div class="col-md-6">
        <label>Base Currency</label>
        <input name="base_curr" value="{{ $trade->base_curr }}" class="form-control">
    </div>

    <div class="col-md-6">
        <label>Quote Currency</label>
        <input name="quote_curr" value="{{ $trade->quote_curr }}" class="form-control">
    </div>

    <div class="col-md-6">
        <label>Symbol</label>
        <input name="symbol" value="{{ $trade->symbol }}" class="form-control">
    </div>

    <div class="col-md-6">
        <label>Category</label>
        <select name="cat" class="form-select">
            @foreach(['forex','crypto','stock','cfd'] as $cat)
                <option value="{{ $cat }}" @selected($trade->cat === $cat)>
                    {{ ucfirst($cat) }}
                </option>
            @endforeach
        </select>
    </div>

    <div class="col-md-6">
        <label>Name</label>
        <input name="name" value="{{ $trade->name }}" class="form-control">
    </div>

    <div class="col-md-6">
        <label>Trade View</label>
        <input name="trade_view" value="{{ $trade->trade_view }}" class="form-control">
    </div>

    <div class="col-md-6">
        <label>Spread</label>
        <input name="spread" value="{{ $trade->spread }}" class="form-control">
    </div>

    <div class="col-md-6">
        <label>Digits</label>
        <input name="digits" value="{{ $trade->digits }}" class="form-control">
    </div>

    <div class="col-md-6">
        <label>Status</label>
        <select name="is_active" class="form-select">
            <option value="1" @selected($trade->is_active)>Active</option>
            <option value="0" @selected(!$trade->is_active)>Inactive</option>
        </select>
    </div>
</div>

<div class="text-center mt-4">
    <button class="btn btn-primary">Update</button>
</div>

</form>
</div>
</div>
</div>

@empty
<tr>
    <td colspan="10" class="text-center text-muted">No trades found</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<div class="modal fade" id="addSymbolModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-simple">
        <div class="modal-content p-4">
            <div class="modal-body">
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>

                <h4 class="text-center mb-3">Add Trade Symbol</h4>

                <form method="POST" action="{{ route('admin.symbols.add') }}">
                    @csrf

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Base Currency</label>
                            <input type="text" name="base_curr" class="form-control" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Quote Currency</label>
                            <input type="text" name="qcurr" class="form-control" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Symbol</label>
                            <input type="text" name="symbol" class="form-control" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Category</label>
                            <select name="cat" class="form-select">
                                <option value="forex">Forex</option>
                                <option value="crypto">Crypto</option>
                                <option value="stock">Stock</option>
                                <option value="cfd">CFD</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Name</label>
                            <input type="text" name="name" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Trade View</label>
                            <input type="text" name="tview" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Spread</label>
                            <input type="number" name="spread" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Digits</label>
                            <input type="text" name="digits" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Active</label>
                            <select name="acts" class="form-select">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>

                        <div class="col-12 text-center mt-3">
                            <button type="submit" class="btn btn-primary">Create Symbol</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                Cancel
                            </button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

<div class="mt-3">
    {{ $trades->links() }}
</div>
</div>
</div>
</main>
@endsection


@section('script')
<script>
    $(function(){
        
        $('.delete_plan').on('click' , function(){
        var dataid = $(this).attr('data-id'); 
        var dataname = $(this).attr('data-name'); 
       

        if (confirm(`are you sure want to delete ${dataname}?`)) {

            window.location.href = "{{secure_url('admin/symbols/delete')}}/"+dataid;
            

        }
        })
        
       
    })
</script>

@endsection