@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>Add New Income</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('income.store') }}" method="POST" id="ajax_form_data">
                    @csrf
                    <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') == $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') }}" 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') }}" 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') }}"
                                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">Mobile Bank
                                </option>
                                <option value="bank">Bank
                                </option>
                                <option value="cash">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 }}">
                                                @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">Paid</option>
                                <option value="unpaid">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') }}">
                        </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') }}">
                        </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') }}">
                        </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') }}">
                        </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') }}</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') }}</textarea>
                        </div>
                    </div>

                    <div class="text-end">
                        <button type="submit" class="btn btn-success">Save 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