@extends('layouts.app')

@section('content')
<div class="container" ><!-- style="width: 600px;" -->
    <h2>Edit Investment</h2>

    <form action="{{ route('investments.update', $investment->id) }}" method="POST">
        @csrf
        @method('PUT')

        <!-- Investor -->
        <div class="mb-3">
            <label for="investor_id" class="form-label">Investor</label>
            <select name="investor_id" id="investor_id" class="form-control" required>
                @foreach($investors as $inv)
                    <option value="{{ $inv->id }}" 
                        {{ $inv->id == $investment->investor_id ? 'selected' : '' }}>
                        {{ $inv->name }}
                    </option>
                @endforeach
            </select>
        </div>


        <!-- Type -->
        <div class="mb-3">
            <label for="type" class="form-label">Type</label>
            <select name="type" id="type" class="form-control" required>
                <option value="">Select Option</option>
                <option value="car" {{ old('type', $investment->type ?? '') == 'car' ? 'selected' : '' }}>Car</option>
                <option value="in" {{ old('type', $investment->type ?? '') == 'in' ? 'selected' : '' }}>IN</option>
                <option value="out" {{ old('type', $investment->type ?? '') == 'out' ? 'selected' : '' }}>OUT</option>
            </select>
        </div>

        <!-- Car dropdown (hidden by default, shown if type=car) -->
        <div class="mb-3" id="car-section" style="display: none;">
            <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->id == $investment->car_id ? 'selected' : '' }}>
                        {{ $car->make }} / {{ $car->model }} / {{ $car->varient }} / {{ $car->color }} / {{ $car->registration_no }}
                    </option>
                @endforeach
            </select>
        </div>


        <!-- Amount -->
        <div class="mb-3">
            <label for="amount" class="form-label">Amount</label>
            <input type="number" name="amount" class="form-control" value="{{ $investment->amount }}" required>
        </div>

        <!-- Date -->
        <div class="mb-3">
            <label for="date" class="form-label">Date</label>
            <input type="date" name="date" class="form-control" value="{{ $investment->date }}" required>
        </div>

        <!-- Remarks -->
        <div class="mb-3">
            <label for="remarks" class="form-label">Remarks</label>
            <textarea name="remarks" class="form-control">{{ $investment->remarks }}</textarea>
        </div>

        <!-- Buttons -->
        <button type="submit" class="btn btn-success">Update</button>
        <a href="{{ route('investments.index') }}" class="btn btn-secondary">Cancel</a>
    </form>
</div>

<!-- Show/hide car dropdown dynamically -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const typeSelect = document.getElementById('type');
    const carSection = document.getElementById('car-section');

    function toggleCarSection() {
        if (typeSelect.value === 'car') {
            carSection.style.display = 'block';
            document.getElementById('car_id').setAttribute('required', 'required');
        } else {
            carSection.style.display = 'none';
            document.getElementById('car_id').removeAttribute('required');
        }
    }

    // Run on page load
    toggleCarSection();

    // Run when type changes
    typeSelect.addEventListener('change', toggleCarSection);
});
</script>
@endsection
