@extends('layouts.app')

@section('content')
<div class="container">
<div class="col-md-3"><a href="{{ route('investments.index') }}"><button class="btn btn-success w-100">View Inestement data</button></a></div>

    <h2>Investors</h2>

    <!-- Add Investor Form -->
    <form method="POST" action="{{ route('investors.store') }}" class="row g-2 mb-4">
        @csrf
        <div class="col-md-3"><input type="text" name="name" class="form-control" placeholder="Name" required></div>
        <div class="col-md-3"><input type="text" name="father_name" class="form-control" placeholder="Father Name" required></div>
        <div class="col-md-2"><input type="text" name="cnic" class="form-control cnic-format" placeholder="CNIC" required></div>
        <div class="col-md-3"><input type="text" name="address" class="form-control" placeholder="Address"></div>
        <div class="col-md-1"><button type="submit" class="btn btn-success w-100">Add</button></div>
    </form>

    <!-- Investors List -->
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Father Name</th>
                <th>CNIC</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        @foreach($investors as $investor)
            <tr>
                <td>{{ $investor->name }}</td>
                <td>{{ $investor->father_name }}</td>
                <td>{{ $investor->cnic }}</td>
                <td>
                    <!-- Buttons only -->
                    <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#inModal{{ $investor->id }}">
                        IN
                    </button>

                    <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#outModal{{ $investor->id }}">
                        OUT
                    </button>

                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#carModal{{ $investor->id }}">
                        CAR
                    </button>

                    <a href="{{ route('investors.statement', $investor->id) }}" class="btn btn-info btn-sm">View</a>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

<!-- ===================== MODALS OUTSIDE THE TABLE ===================== -->
@foreach($investors as $investor)
    <!-- IN Modal -->
    <div class="modal fade" id="inModal{{ $investor->id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ route('investors.addInvestment', $investor->id) }}" method="POST" class="modal-content bg-white">
                @csrf
                <input type="hidden" name="type" value="in">
                <div class="modal-header">
                    <h5 class="modal-title">Add Investment (IN) - {{ $investor->name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>Amount</label>
                        <input type="number" name="amount" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Date</label>
                        <input type="date" name="date" class="form-control" value="{{ old('date', date('Y-m-d')) }}" required>
                    </div>        
                    <!-- Remarks -->
                    <div class="mb-3">
                        <label>Remarks</label>
                        <textarea name="remarks" class="form-control" rows="2" placeholder="Optional remarks..."></textarea>
                    </div>
                    </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Save IN</button>
                </div>
            </form>
        </div>
    </div>

    <!-- OUT Modal -->
    <div class="modal fade" id="outModal{{ $investor->id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ route('investors.addInvestment', $investor->id) }}" method="POST" class="modal-content bg-white">
                @csrf
                <input type="hidden" name="type" value="out">
                <div class="modal-header">
                    <h5 class="modal-title">Add Payment (OUT) - {{ $investor->name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>Amount</label>
                        <input type="number" name="amount" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Date</label>
                        <input type="date" name="date" class="form-control" 
                            value="{{ old('date', date('Y-m-d')) }}" required>
                    </div>
                    <!-- Remarks -->
                    <div class="mb-3">
                        <label>Remarks</label>
                        <textarea name="remarks" class="form-control" rows="2" placeholder="Optional remarks..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger">Save OUT</button>
                </div>
            </form>
        </div>
    </div>


    <!-- CAR Modal -->
<div class="modal fade" id="carModal{{ $investor->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('investors.addInvestment', $investor->id) }}" method="POST" class="modal-content bg-white">
            @csrf
            <input type="hidden" name="type" value="car">
            <div class="modal-header">
                <h5 class="modal-title">Add Car Investment (CAR) - {{ $investor->name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <!-- Car Selection -->
                <div class="mb-3"  >
                    <label>Select Car (Active Only)</label>
                    <select name="car_id" id="car_id" class="form-control">
                        <option value="">-- Select Car --</option>
                        @foreach($cars as $car)
                            <option value="{{ $car->id }}">
                                {{ $car->make }} / {{ $car->model }} / {{ $car->varient }} / {{ $car->color }} / {{ $car->registration_no }}
                            </option>
                        @endforeach
                    </select>
                </div>


                <!-- Amount -->
                <div class="mb-3">
                    <label>Amount</label>
                    <input type="number" name="amount" class="form-control" required>
                </div>

                <!-- Date -->
                <div class="mb-3">
                    <label>Date</label>
                    <input type="date" name="date" class="form-control"
                        value="{{ old('date', date('Y-m-d')) }}" required>
                </div>

                <!-- Remarks -->
                <div class="mb-3">
                    <label>Remarks</label>
                    <textarea name="remarks" class="form-control" rows="2" placeholder="Optional remarks..."></textarea>
                </div>
            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save Car Investment</button>
            </div>
        </form>
    </div>
</div>

@endforeach
@endsection