@extends('layouts.master')

@section('content')
<div class="card">
    <div class="card-header card-custom-bg d-flex flex-row align-items-center justify-content-between">
        <h5>Income List</h5>
        @can('accounting-finance.income.create')
            <button class="btn btn-primary" id="add-category-btn" data-toggle="modal" data-target="#dataStoreModal">New Income</button>
        @endcan
    </div>
    <div class="card-body">
        <table class="table mt-3" id="dataTable">
            <thead class="thead-light">
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Invoice No</th>
                    <th>Head</th>
                    <th>Amount</th>
                    <th>Date</th>
                    <th>Note</th>
                    <th>Attachment</th>
                    <th>Payment method</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @php
                    $sn = 0;
                @endphp
                @foreach($incomes as $income)
                    <tr>
                        <td>{{ ++$sn }}</td>
                        <td>{{ $income->title }}</td>
                        <td>{{ $income->invoice_no }}</td>
                        <td>
                            {{  $incomeHeads[$income->accounting_head_id] }}
                        </td>
                        <td>{{ $income->amount }}</td>
                        <td>{{ $income->income_date }}</td>
                        <td>{{ $income->description }}</td>
                        <td>
                            @if ($income->attachment)
                                <a class="btn btn-sm btn-info" href="{{ asset($income->attachment) }}" target="_blank">Attachment</a>
                            @else
                                N/A
                            @endif
                        </td>
                        <td>{{ $income->payment_method ?? "N/A"}}</td>
                        <td class="d-flex justify-content-start">
                            @can('accounting-finance.income.edit')
                                <button class="btn btn-sm btn-warning edit-category-btn mr-1" data-toggle="modal" data-target="#dataStoreModal"
                                data-id="{{ $income->id }}" data-title="{{ $income->title }}" data-accounting_head_id="{{ $income->accounting_head_id }}"
                                data-amount="{{ $income->amount }}" data-income_date="{{ $income->income_date }}" data-description="{{ $income->description }}"
                                data-attachment="{{ asset($income->attachment) }}" data-payment_method="{{ $income->payment_method }}" data-invoice_no="{{ $income->invoice_no }}"
                                >Edit</button>
                            @endcan

                            @can('accounting-finance.income.delete')
                                <form action="{{ route('income.destroy', $income->id) }}" method="POST" style="display:inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
                                </form>
                            @endcan
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="dataStoreModal" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form role="form" id="incomeForm" method="POST" enctype="multipart/form-data">
                @csrf
                @method('POST')
                <input type="hidden" name="_method" id="formMethod">
                <div class="modal-header">
                    <h4 class="modal-title" id="modalTitle">Create Income</h4>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="title">Title *</label>
                        <input type="text" name="title" class="form-control" id="title" placeholder="Enter income title" required>
                    </div>
                    <div class="form-group">
                        <label for="accounting_head_id">Income Head *</label>
                        {{ generateDropdown($incomeHeads, 'class="form-control" name="accounting_head_id" id="accounting_head_id" required', '', 'Select Head') }}
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="amount">Amount *</label>
                                <input type="number" name="amount" class="form-control" id="amount" placeholder="Enter amount" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="income_date">Income Date *</label>
                                <input type="date" name="income_date" class="form-control income_date" id="date1" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="invoice_no">Invoice No</label>
                                <input type="text" name="invoice_no" class="form-control invoice_no" id="invoice_no" placeholder="Enter Invoice No">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="attachment">Attachment</label> <span id="attachment-link"></span>
                                <input type="file" name="attachment" class="form-control" id="attachment">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="description">Note</label>
                        <textarea name="description" cols="30" rows="2" class="form-control description" id="description" placeholder="Enter Note"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary submitBtn">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    $(document).ready(function () {
        $('#dataStoreModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var id = button.data('id') || '';
            var title = button.data('title') || '';
            var invoice_no = button.data('invoice_no') || '';
            var accounting_head_id = button.data('accounting_head_id') || '';
            var income_date = button.data('income_date') || '';
            var amount = button.data('amount') || '';
            var description = button.data('description') || '';
            var payment_method = button.data('payment_method') || '';
            var attachment_file_path = button.data('attachment') || '';
            var attachment_link = id ? '<a href="'+attachment_file_path+'" class="btn btn-sm btn-info" id="existing-attachment-link" target="_blank">Attachment </a>' : '';
            var modal = $(this);
            var form = modal.find('form');
            var actionUrl = id ? '/income/update/' + id : '/income/store';
            var method = id ? 'PUT' : 'POST';

            form.attr('action', actionUrl);
            modal.find('#title').val(title);
            modal.find('#invoice_no').val(invoice_no);
            modal.find('#accounting_head_id option[value="' + accounting_head_id + '"]').prop('selected', true);
            modal.find('.income_date').val(income_date);
            modal.find('#amount').val(amount);
            modal.find('#description').text(description);
            modal.find('#payment_method').val(payment_method);
            modal.find('#attachment-link').html(attachment_link);
            modal.find('#formMethod').val(method);
            modal.find('#modalTitle').text(id ? 'Edit Income' : 'Create Income');
            modal.find('[name="_method"]').val(method);
        });

        $('#add-category-btn').on('click', function () {
            resetModal();
        });

        function resetModal() {
            var modal = $('#dataStoreModal');
            var form = modal.find('form');
            form.attr('action', '/income-category');
            modal.find('#title').val('');
            modal.find('#formMethod').val('POST');
            modal.find('[name="_method"]').val('POST');
            modal.find('#modalTitle').text('Create Income Category');
        }
    });
</script>
@endsection