@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Finance Records</h1>
        <table id="financeTable" class="table table-striped">
            <thead>
            <tr>
                <th>Product</th>
                <th>Monthly Premium</th>
                <th>Due Commission</th>
                <th>Received Commission</th>
                <th>Total Commission</th>
                <th>Renewals</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            @foreach($finances as $finance)
                <tr data-id="{{ $finance->id }}">
                    <td>{{ $finance->product->name }}</td>
                    <td>{{ $finance->product->monthly_premium }}</td>
                    <td>{{ number_format($finance->due_commission, 2) }}</td>
                    <td>{{ number_format($finance->received_commission, 2) }}</td>
                    <td>{{ number_format($finance->total_commission, 2) }}</td>
                    <td>{{ number_format($finance->renewals, 2) }}</td>
                    <td><button class="btn btn-primary edit" data-id="{{ $finance->id }}">Edit</button></td>
                </tr>
            @endforeach
            </tbody>
        </table>

        <!-- Modal for Editing -->
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editModalLabel">Edit Finance Record</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Form will be dynamically filled -->
                        <form id="editFinanceForm">
                            @csrf
                            @method('PUT')
                            <!-- Add your form fields here -->
                            <!-- Example: -->
                            <input type="hidden" name="id" id="finance_id">
                            <div class="form-group">
                                <label for="monthly_premium">Monthly Premium</label>
                                <input type="text" class="form-control" name="monthly_premium" id="monthly_premium">
                            </div>

                            <!-- Add other fields similarly -->

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Save changes</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection

@section('scripts')
    <script src="{{ asset('js/jquery.js') }}"></script>
    <script src="{{ asset('js/datatables.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var table = $('#financeTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("finances.data") }}',
                columns: [
                    { data: 'product.name', name: 'product.name' },
                    { data: 'monthly_premium', name: 'monthly_premium' },
                    { data: 'due_commission', name: 'due_commission' },
                    { data: 'received_commission', name: 'received_commission' },
                    { data: 'total_commission', name: 'total_commission' },
                    { data: 'renewals', name: 'renewals' },
                    { data: 'action', orderable: false, searchable: false }
                ]
            });

            // Edit button functionality
            $('#financeTable tbody').on('click', '.edit', function() {
                var id = $(this).data('id');

                // Fetch the record details using AJAX
                $.ajax({
                    url: '/finances/' + id + '/edit',
                    method: 'GET',
                    success: function(data) {
                        $('#finance_id').val(data.id);
                        $('#monthly_premium').val(data.monthly_premium);

                        // Populate other fields similarly

                        $('#editModal').modal('show');
                    }
                });
            });

            // Handle form submission
            $('#editFinanceForm').on('submit', function(e) {
                e.preventDefault();

                var id = $('#finance_id').val();

                $.ajax({
                    url: '/finances/' + id,
                    method: 'PUT',
                    data: $(this).serialize(),
                    success: function(response) {
                        $('#editModal').modal('hide');
                        table.ajax.reload();
                        alert(response.message); // Show success message
                    }
                });
            });
        });
    </script>

@endsection