@extends('layouts.app')

@section('title', 'Update Paid Dividends')


@section('nav-header')

<div class="iq-navbar-header" style="height: 215px;">
                <div class="container-fluid iq-container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="flex-wrap d-flex justify-content-between align-items-center">
                                <div>
                                    <h1>Update Paid Dividends</h1>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="iq-header-img">
                    <img src="../assets/images/dashboard/top-header.png" alt="header"
                        class="theme-color-default-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header1.png" alt="header"
                        class="theme-color-purple-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header2.png" alt="header"
                        class="theme-color-blue-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header3.png" alt="header"
                        class="theme-color-green-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header4.png" alt="header"
                        class="theme-color-yellow-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header5.png" alt="header"
                        class="theme-color-pink-img img-fluid w-100 h-100 animated-scaleX">
                </div>
            </div> <!-- Nav Header Component End -->
            <!--Nav End-->

@endsection



@section('content')

<!-- Table -->
        <div class="conatiner-fluid content-inner mt-n5 py-0">



            <div class="modal fade" id="paiddividendsmodule" tabindex="-1" aria-labelledby="paidDividendsModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-halfscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="paidDividendsModalLabel">Paid Dividends Update</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="row">
                                    <div class="col-3">
                                        <label class="form-label">Member Number</label>
                                        <div class="input-group form-group-alt mb-3">
                                            <input type="text" class="form-control" readonly="" value="115-23562">
                                        </div>
                                    </div>
                                    <div class="col-9">
                                        <label class="form-label">Full Name</label>
                                        <div class="input-group form-group-alt mb-3">
                                            <input type="text" class="form-control" readonly="" value="Ayesh Madushan">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">NIC No:</label>
                                        <div class="input-group form-group-alt mb-3">
                                            <input type="text" class="form-control" readonly="" value="19952362652">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Phone Number</label>
                                        <div class="input-group form-group-alt mb-3">
                                            <input type="text" class="form-control" readonly="" value="0223654125">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Current Shares</label>
                                        <div class="input-group form-group-alt mb-3">
                                            <input type="text" class="form-control" readonly="" value="500.00">
                                            <span class="input-group-text" id="basic-addon1">LKR</span>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="col-4">
                                        <label class="form-label">Available Dividends</label>
                                        <div class="input-group form-group-alt mb-3">
                                            <input type="text" class="form-control" placeholder="" value="105.50" readonly>
                                            <span class="input-group-text" id="basic-addon1">LKR</span>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Dividends Paid</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="" name="paid_amount">
                                            <span class="input-group-text" id="basic-addon1">LKR</span>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">New Dividend Balance</label>
                                        <div class="input-group form-group-alt mb-3">
                                            <input type="text" class="form-control" readonly="" value="">
                                            <span class="input-group-text" id="basic-addon1">LKR</span>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Reciept No:</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="" name="receipt_number">
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <label class="form-label">Remark</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="" name="remark">
                                        </div>
                                    </div>
                                </div>
                            </form>

                            

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-info">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>



            <div class="row">
                <div class="col-sm-12">
                    <div class="card">

                        <div class="card-body">

                            <div class="table-responsive">
                                <table id="datatable" class="table table-striped" data-toggle="data-table">
                                    <thead>
                                        <tr>
                                            <th>Member No:</th>
                                            <th>Name</th>
                                            <th>NIC</th>
                                            <th>Phone No:</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="dividend-member-table-body"></tbody>


                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>





        </div>
@endsection


@section('scripts')
<script>
function payDividends() {
    const form = document.querySelector('#paiddividendsmodule form');
    const data = {
        dividents_id: selectedDividentId,
        paid_amount: parseFloat(form.querySelector('input[name="paid_amount"]').value),
        receipt_number: form.querySelector('input[name="receipt_number"]').value,
        remark: form.querySelector('input[name="remark"]').value,
    };

    fetch('/api/dividends/pay', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify(data)
    })
    .then(res => res.json())
    .then(response => {
        if (response.success) {
            Swal.fire('Success', 'Dividends paid successfully.', 'success').then(() => location.reload());
        } else {
            Swal.fire('Error', response.error || 'Something went wrong.', 'error');
        }
    })
    .catch(async (err) => {
        const res = await err.response?.json?.();
        const message = res?.error || 'Failed to connect to server.';
        Swal.fire('Error', message, 'error');
    });
}


// Connect to "Save changes" button
document.querySelector('#paiddividendsmodule .btn-info').addEventListener('click', payDividends);





let selectedDividentId = null;

function loadDividendMembers() {
    fetch('/api/dividends/member-list')
        .then(res => res.json())
        .then(data => {
            const tbody = document.getElementById('dividend-member-table-body');
            tbody.innerHTML = '';

            data.forEach(member => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${member.member_number}</td>
                    <td>${member.full_name}</td>
                    <td>${member.nic}</td>
                    <td>${member.phone}</td>
                    <td>
                        <button class="btn btn-icon btn-info" type="button" onclick='openPaidModal(decodeURIComponent("${encodeURIComponent(JSON.stringify(member))}"))'>
                            <span class="btn-inner">
                                <svg class="icon-35" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M21.25 16.334V7.665C21.25 4.645 19.111 2.75 16.084 2.75H7.916C4.889 2.75 2.75 4.635 2.75 7.665L2.75 16.334C2.75 19.364 4.889 21.25 7.916 21.25H16.084C19.111 21.25 21.25 19.364 21.25 16.334Z"
                                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    </path>
                                    <path d="M16.0861 12H7.91406" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round"></path>
                                    <path d="M12.3223 8.25205L16.0863 12L12.3223 15.748" stroke="currentColor" stroke-width="1.5"
                                        stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </span>
                        </button>
                    </td>
                `;
                tbody.appendChild(row);
            });
        });
}

function openPaidModal(memberDataJson) {
    const member = JSON.parse(memberDataJson);
    selectedDividentId = member.dividents_id;

    const form = document.querySelector('#paiddividendsmodule form');
    const inputs = form.querySelectorAll('input');

    // Assign values
    inputs[0].value = member.member_number;
    inputs[1].value = member.full_name;
    inputs[2].value = member.nic;
    inputs[3].value = member.phone;
    inputs[4].value = member.share_amount;
    inputs[5].value = member.dividend_available.toFixed(2);
    inputs[6].value = ''; // paid amount
    inputs[7].value = ''; // new balance (calculated)
    inputs[8].value = ''; // receipt
    inputs[9].value = ''; // remark

    // Listen for paid amount change to calculate balance
    inputs[6].addEventListener('input', () => {
        const paid = parseFloat(inputs[6].value || 0);
        const available = parseFloat(inputs[5].value || 0);
        inputs[7].value = (available - paid).toFixed(2);
    });

    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('paiddividendsmodule'));
    modal.show();
}


loadDividendMembers();

</script>

@endsection