@extends('backend.layouts.app')

@section('content')
    <div class="container">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center text-white" style="background:linear-gradient(135deg, #4599cd, #267bbd);">
                <h4>Edit Income</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('income.update', $income->id) }}" method="POST" id="ajax_form_data">
                    @csrf
                    @method('PUT')
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <label for="income_type_id" class="form-label">Income Type</label>
                            <select name="income_type_id" class="form-select" required>
                                <option value="">Select Type</option>
                                @foreach ($incomeTypes as $id => $name)
                                    <option value="{{ $id }}"
                                        {{ old('income_type_id', $income->income_type_id) == $id ? 'selected' : '' }}>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3 col-md-6">
                            <label for="title" class="form-label">Title</label>
                            <input type="text" name="title" class="form-control"
                                value="{{ old('title', $income->title) }}" required>
                        </div>

                        <div class="mb-3 col-md-6">
                            <label for="amount" class="form-label">Amount</label>
                            <input type="number" step="0.01" name="amount" class="form-control"
                                value="{{ old('amount', $income->amount) }}" required>
                        </div>

                        <div class="mb-3 col-md-6">
                            <label for="income_date" class="form-label">Income Date</label>
                            <input type="date" name="income_date" class="form-control"
                                value="{{ old('income_date', $income->income_date) }}" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-medium text-dark">Payment Type</label>
                            <select name="payment_type" id="payment_type" class="form-select rounded-3 shadow-sm">
                                <option value="">Select Type</option>
                                <option value="mobile_bank" {{ old('payment_type', $income->payment_type) === 'mobile_bank' ? 'selected' : '' }}>Mobile Bank</option>
                                <option value="bank" {{ old('payment_type', $income->payment_type) === 'bank' ? 'selected' : '' }}>Bank</option>
                                <option value="cash" {{ old('payment_type', $income->payment_type) === 'cash' ? 'selected' : '' }}>Cash</option>
                            </select>
                        </div>

                        <div class="col-md-6" id="account_box" style="display: none;">
                            <label class="form-label fw-medium text-dark">Select Account</label>
                            <select name="account_id" id="account_id" class="form-select rounded-3 shadow-sm">
                                <option value="">-- Choose Account --</option>
                                @foreach ($gateways as $type => $group)
                                    <optgroup label="{{ $type }}">
                                        @foreach ($group as $gateway)
                                            <option value="{{ $gateway->id }}"
                                                {{ old('account_id', $income->account_id) == $gateway->id ? 'selected' : '' }}>
                                                @if ($type === 'Mobile Bank')
                                                    {{ $gateway->company_name }} ({{ $gateway->mobile_number }})
                                                @else
                                                    {{ $gateway->bank_name }} - {{ $gateway->account_number }}
                                                @endif
                                            </option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>
                         <div class="col-md-6">
                            <label class="form-label fw-medium text-dark">Payment Status <span
                                    class="text-danger">*</span></label>
                            <select name="payment_status" class="form-select rounded-3 shadow-sm" required>
                                <option value="paid" {{ $income->payment_status === 'paid' ? 'selected' : '' }}>Paid</option>
                                <option value="unpaid" {{ $income->payment_status === 'unpaid' ? 'selected' : '' }}>Unpaid</option>
                            </select>
                        </div>

                        <div class="mb-3 col-md-6">
                            <label for="payment_date" class="form-label">Payment Date</label>
                            <input type="date" name="payment_date" class="form-control"
                                value="{{ old('payment_date', $income->payment_date) }}">
                        </div>

                        <div class="mb-3 col-md-6">
                            <label for="transaction_no" class="form-label">Transaction No</label>
                            <input type="text" name="transaction_no" class="form-control"
                                value="{{ old('transaction_no', $income->transaction_no) }}">
                        </div>

                        <div class="mb-3 col-md-6">
                            <label for="received_by" class="form-label">Received By</label>
                            <input type="text" name="received_by" class="form-control"
                                value="{{ old('received_by', $income->received_by) }}">
                        </div>

                        <div class="mb-3 col-md-6">
                            <label for="received_date" class="form-label">Received Date</label>
                            <input type="date" name="received_date" class="form-control"
                                value="{{ old('received_date', $income->received_date) }}">
                        </div>

                        <div class="mb-3 col-md-6">
                            <label for="payment_remark" class="form-label">Payment Remark</label>
                            <textarea name="payment_remark" class="form-control" rows="2">{{ old('payment_remark', $income->payment_remark) }}</textarea>
                        </div>

                        <div class="mb-3 col-md-12">
                            <label for="description" class="form-label">Description</label>
                            <textarea name="description" class="form-control" rows="3">{{ old('description', $income->description) }}</textarea>
                        </div>
                    </div>

                    <div class="text-end">
                        <button type="submit" class="btn btn-primary">Update Income</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            function toggleAccountBox() {
                var type = $('#payment_type').val();
                var box = $('#account_box');
                if (type === 'mobile_bank' || type === 'bank') {
                    box.show();
                } else {
                    box.hide();
                }
            }

            $('#payment_type').on('change', toggleAccountBox);
            toggleAccountBox(); // Call on page load
        });
    </script>
@endpush