@extends('clients.common.layout')

@section('content')
<div class="page-content">
    <div class="page-container">
        <div class="page-title-box">
            <div class="d-flex align-items-sm-center flex-sm-row flex-column gap-2">
                <div class="flex-grow-1">
                    <h4 class="font-18 mb-0">Trade Details</h4>
                </div>
                <div class="text-end">
                    <ol class="breadcrumb m-0 py-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">MSL</a></li>
                        <li class="breadcrumb-item active">Trade Details</li>
                    </ol>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="row">
            <form method="GET" action="{{ route('trade.details') }}">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="fw-bold text-warning mb-3">Filter</h5>
                            <div class="row">
                                <!-- Filter fields -->
                                <div class="col-md-4">
                                    <label for="client_code">Client Code/Name</label>
                                    <input type="text" name="client_code" class="form-control" placeholder="Enter client code or name">
                                </div>
                                <div class="col-md-4">
                                    <label for="scrip_code">Scrip Code/Name</label>
                                    <input type="text" name="scrip_code" class="form-control" placeholder="Enter scrip code or name">
                                </div>
                                <div class="col-md-4">
                                    <label for="exchange">Exchange</label>
                                    <select name="exchange" class="form-control">
                                        <option value="">All</option>
                                        <option value="NSE">NSE</option>
                                        <option value="BSE">BSE</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="group">Company Group</label>
                                    <select name="group" class="form-control">
                                        <option value="">All Groups</option>
                                        <option value="Roll">Roll + T2T</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="year">Year</label>
                                    <select name="year" class="form-control">
                                        <option value="">All</option>
                                        <option value="2024">2024</option>
                                        <option value="2025">2025</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="start_date">Start Date</label>
                                    <input type="date" name="start_date" class="form-control">
                                </div>
                                <div class="col-md-4">
                                    <label for="end_date">End Date</label>
                                    <input type="date" name="end_date" class="form-control">
                                </div>
                                <div class="col-md-4 mt-4">
                                    <button type="submit" class="btn btn-success rounded-pill">Filter</button>
                                    <a href="{{ route('trade.details') }}" class="btn btn-secondary rounded-pill">Reset</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Trade Table -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="responsive-table-plugin">
                            <div class="table-rep-plugin">
                                <div class="table-responsive table-nowrap">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Sr. No</th>
                                                <th>Client Code</th>
                                                <th>Client Name</th>
                                                <th>Trade Date</th>
                                                <th>Scrip Code</th>
                                                <th>Scrip Name</th>
                                                <th>Buy Qty</th>
                                                <th>Sell Qty</th>
                                                <th>Market Rate</th>
                                                <th>Trade No.</th>
                                                <th>Exchange</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($trades as $key => $trade)
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td>{{ $trade->client_code }}</td>
                                                <td>{{ $trade->client_name }}</td>
                                                <td>{{ $trade->trade_date }}</td>
                                                <td>{{ $trade->scrip_code }}</td>
                                                <td>{{ $trade->scrip_name }}</td>
                                                <td>{{ $trade->buy_qty }}</td>
                                                <td>{{ $trade->sell_qty }}</td>
                                                <td>{{ $trade->market_rate }}</td>
                                                <td>{{ $trade->trade_no }}</td>
                                                <td>{{ $trade->exchange }}</td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        {{ $trades->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection