@extends('layouts.admin')

@section('content')

<div class="page-wrapper"> 
	<div class="content">
		<div class="page-header">
			<div class="add-item d-flex">
				<div class="page-title">
					<h4>{{ __('messages.Rental Income Type') }}</h4>
					<h6>{{ __('messages.Manage your Income Types') }}</h6>
				</div>
			</div>

		</div>
		@include('layouts.errors')
		<div class="card table-list-card">
			<div class="card-body">
				<div class="table-responsive product-list">
					<form method="post" action="{{ route('incomeTypes.store') }}">
					@csrf
						<input type="hidden" name="client_plans_id" value="{{ $plan->id }}">
						<div class="row">
							<div class="col-md-6">
								<div class="add-product">
									<label class="form-label">{{ __('messages.Name (Address, apartment 1, 2,3 etc., Rent 1, 2 etc.)') }}</label>
									<input type="text" class="form-control" name="name" id="name" value="{{ old('name') }}" required>
								</div>
								<div class="col-lg-6 mt-3">
									<div class="btn-addproduct" style="float: left;">
										<button type="submit" class="btn btn-submit ">{{ __('messages.Save') }}</button>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>

				<div class="table-top">
					<div class="search-set">
						<div class="search-input">
							<a href="javascript:void(0);" class="btn btn-searchset"><i data-feather="search" class="feather-search"></i></a>
						</div>
					</div>
				</div>

				<div class="table-responsive product-list">
					<table class="table datanew">
						<thead>
							<tr>
								<th>{{ __('messages.Name') }}</th>
								<th class="no-sort">{{ __('messages.Action') }}</th>
							</tr>
						</thead>
						<tbody>
							@foreach($types as $type)
							<tr>
								<td>{{ $type->name }}</td>

								<td class="action-table-data">
                                    <div class="edit-delete-action">
                                        <a class="me-2 p-2" href="{{ route('incomeTypes.edit', $type->id) }}" >
                                            <i data-feather="edit" class="feather-edit"></i>
                                        </a>  

                                        <form action="{{ route('incomeTypes.destroy', $type->id) }}" method="POST" class="deleteBtnForm">
				                            @csrf
				                            @method('DELETE')
				                            <button type="button" class="deleteBtn">
				                                <i data-feather="trash-2" class="feather-trash-2" 
				                                style="width: 14px;height: 14px;"></i>
				                            </button>
				                        </form>
                                    </div>
                                </td>
							</tr>
							@endforeach
						</tbody>
					</table>
				</div>
			</div>
		</div>

	</div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const deleteButtons = document.querySelectorAll('.deleteBtn');

        deleteButtons.forEach(button => {
            button.addEventListener('click', function () {
                if (confirm('Are you sure you want to delete this type?')) {
                    // Find the parent form and submit it
                    this.closest('form').submit();
                }
            });
        });
    });
</script>
@endsection