@extends('layout.mainlayout')
@section('content')
<div class="page-wrapper">
    <div class="content">
        @component('components.breadcrumb')
                @slot('title')
                    Expense List
                @endslot
                @slot('li_1')
                    Manage Your Expenses
                @endslot
                @slot('li_2')
                    Add New Expenses 
                @endslot
            @endcomponent       

        <!-- /product list -->
        <div class="card table-list-card">
            <div class="card-body">
                <div class="table-top">
                    <div class="search-set">
                        <div class="search-input">
                            <a href="" class="btn btn-searchset"><i data-feather="search" class="feather-search"></i></a>
                        </div>
                    </div>
                    <div class="search-path">
                        <div class="d-flex align-items-center">
                            <a class="btn btn-filter" id="filter_search">
                                <i data-feather="filter" class="filter-icon"></i>
                                <span><img src="{{ URL::asset('/build/img/icons/closes.svg')}}" alt="img"></span>
                            </a>
                            
                        </div>
                        
                    </div>
                    <div class="form-sort">
                        <i data-feather="sliders" class="info-img"></i>
                        <select class="select">
                            <option>Sort by Date</option>
                            <option>11 09 23</option>
                            <option>20 09 23</option>
                        </select>
                    </div>
                </div>
                <!-- /Filter -->
                <div class="card" id="filter_inputs">
                    <div class="card-body pb-0">
                        <div class="row">
                            <div class="col-lg-2 col-sm-6 col-12">
                                <div class="input-blocks">
                                    <i data-feather="user" class="info-img"></i>
                                    <select class="select">
                                        <option>Choose Name</option>
                                        <option>Macbook pro</option>
                                        <option>Orange</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-2 col-sm-6 col-12">
                                <div class="input-blocks">
                                    <i data-feather="stop-circle" class="info-img"></i>
                                    <select class="select">
                                        <option>Choose Status</option>
                                        <option>Computers</option>
                                        <option>Fruits</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-2 col-sm-6 col-12">
                                <div class="input-blocks">
                                    <i data-feather="calendar" class="info-img"></i>
                                    <div class="input-groupicon">
                                        <input type="text" class="datetimepicker" placeholder="From Date - To Date" >
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-2 col-sm-6 col-12">
                                <div class="input-blocks">
                                    <i data-feather="file-text" class="info-img"></i>
                                    <div class="input-groupicon">
                                        <input type="text" class="datetimepicker" placeholder="Enter Reference" >
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="input-blocks">
                                    <a class="btn btn-filters ms-auto"> <i data-feather="search" class="feather-search"></i> Search </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /Filter -->
                @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            <ul>
                @foreach ($errors->all() as $error)
                    <li style="color: red">{{ $error }}</li>
                @endforeach
            </ul>
                <div class="table-responsive">
                    <table class="table  datanew">
                        <thead>
                            <tr>
                                <th class="no-sort">
                                    <label class="checkboxs">
                                        <input type="checkbox" id="select-all">
                                        <span class="checkmarks"></span>
                                    </label>
                                </th>
                                <th>Category name</th>
                                <th>Amount</th>
                                <th>Expense Date</th>
                                
                                <th>Description</th>
                                <th>Status</th>
                         
                                <th class="no-sort">Action</th>
                            </tr>
                        </thead>
                        <tbody class="Expense-list-blk">
                                                      
                         
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- /product list -->
    </div>
</div>
<!-- Add Expense -->
<div class="modal fade" id="add-units">
    <div class="modal-dialog modal-dialog-centered custom-modal-two">
        <div class="modal-content">
            <div class="page-wrapper-new p-0">
                <div class="content">
                    <div class="modal-header border-0 custom-modal-header">
                        <div class="page-title">
                            <h4>Add Expense</h4>
                        </div>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body custom-modal-body">
                        <form action="{{ route('save-expense') }}" method="POST">
                                @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label class="form-label">Expense Category</label>
                                    
                                    <select class="select" name="expensecategory">
                                        <option value="">------Select Category------</option>
                                        @foreach($expcategories as $categoryy)
                                            <option value="{{ $categoryy->id }}">{{ $categoryy->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="input-blocks date-group">
                                    <i data-feather="calendar" class="info-img"></i>
                                    <div class="input-groupicon">
                                        <input type="text" class="datetimepicker" name="expense_date" placeholder="Choose Date" >
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label class="form-label">Amount</label>
                                    <input type="text" class="form-control" name="amount" placeholder="Amount">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="edit-add card">
                                    <div class="edit-add">
                                        <label class="form-label">Description</label>
                                    </div>
                                    <div class="card-body-list input-blocks mb-0">
                                        <textarea class="form-control" name="description"></textarea>
                                    </div>
                                 
                                </div>
                            </div>
                            <!-- /Editor -->
                            
                        </div>							
                        <div class="modal-footer-btn">
                            <a href="javascript:void(0);" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</a>
                          
                            <button type="submit" class="btn btn-submit">Submit</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Add Expense -->


<!-- /view Expense -->
<div class="modal fade" id="viewExpenseModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Expense Details</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p><strong>Category:</strong> <span id="viewCategory"></span></p>
                <p><strong>Amount:</strong> <span id="viewAmount"></span></p>
                <p><strong>Date:</strong> <span id="viewDate"></span></p>
                <p><strong>Description:</strong> <span id="viewDescription"></span></p>
                <p><strong>Status:</strong> <span id="viewStatus"></span></p>
            </div>
        </div>
    </div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.view-expense').forEach(function(button) {
        button.addEventListener('click', function() {
            var expenseId = this.getAttribute('data-id');

           fetch(`{{ url('expenses') }}/${expenseId}`)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('viewCategory').textContent = data.name;
                    document.getElementById('viewAmount').textContent = data.amount;
                    document.getElementById('viewDate').textContent = data.expensedate;
                    document.getElementById('viewDescription').textContent = data.description;
                    document.getElementById('viewStatus').textContent = data.status == 1 ? 'Active' : 'Inactive';

                    var myModal = new bootstrap.Modal(document.getElementById('viewExpenseModal'));
                    myModal.show();
                });
        });
    });
});
</script>


<!-- /edit Expense -->
<div class="modal fade" id="editExpenseModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Expense</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editExpenseForm" method="POST">
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="editExpenseId" name="id">
                    
                    <div class="mb-3">
                        <label class="form-label">Category</label>
                        <select class="form-control" name="expensecategory" id="editCategory">
                            @foreach($expcategories as $categoryy)
                                <option value="{{ $categoryy->id }}">{{ $categoryy->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Amount</label>
                        <input type="text" class="form-control" name="amount" id="editAmount">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Date</label>
                        <input type="text" class="form-control datetimepicker" name="expensedate" id="editDate">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" name="description" id="editDescription"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Status</label>
                        <select class="form-control" name="status" id="editStatus">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">Update</button>
                </form>
            </div>
        </div>
    </div>
</div>



<script>
document.addEventListener('DOMContentLoaded', function() {
    // View Modal (tayari ipo)
    document.querySelectorAll('.view-expense').forEach(function(button) {
        button.addEventListener('click', function() {
            var expenseId = this.getAttribute('data-id');

            fetch(`{{ url('expenses') }}/${expenseId}`)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('viewCategory').textContent = data.name;
                    document.getElementById('viewAmount').textContent = data.amount;
                    document.getElementById('viewDate').textContent = data.expensedate;
                    document.getElementById('viewDescription').textContent = data.description;
                    document.getElementById('viewStatus').textContent = data.status == 1 ? 'Active' : 'Inactive';

                    var myModal = new bootstrap.Modal(document.getElementById('viewExpenseModal'));
                    myModal.show();
                });
        });
    });

    // Edit Modal
    document.querySelectorAll('.edit-expense').forEach(function(button) {
        button.addEventListener('click', function() {
            var expenseId = this.getAttribute('data-id');

            fetch(`{{ url('expenses') }}/${expenseId}`)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('editExpenseId').value = data.id;
                    document.getElementById('editCategory').value = data.expensecategory_id;
                    document.getElementById('editAmount').value = data.amount;
                    document.getElementById('editDate').value = data.expensedate;
                    document.getElementById('editDescription').value = data.description;
                    document.getElementById('editStatus').value = data.status;

                    // Weka action URL ya form
                    document.getElementById('editExpenseForm').action = `{{ url('expenses') }}/${expenseId}`;

                    var editModal = new bootstrap.Modal(document.getElementById('editExpenseModal'));
                    editModal.show();
                });
        });
    });
});
</script>







<script>
document.addEventListener('DOMContentLoaded', function() {
    // Delete
    document.querySelectorAll('.confirm-delete').forEach(function(button) {
        button.addEventListener('click', function() {
            var expenseId = this.getAttribute('data-id');

            if (confirm('Are you sure you want to delete this expense?')) {
                fetch(`{{ url('expenses') }}/${expenseId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                    },
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('Expense deleted successfully');
                        location.reload(); // reload table
                    } else {
                        alert('Failed to delete expense');
                    }
                });
            }
        });
    });
});
</script>
</body>


@endsection