@extends('layouts.app')

@section('title', 'End Dividend Payout')


@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>End Dividend Payout</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="card">
                <div class="card-body">


                    <form id="endDividendForm">
                @csrf
                <div class="row">
                    <div class="col">
                        <label class="form-label">Fiscal Year</label>
                        <input type="text" class="form-control" id="fiscal-year-field" readonly value="Loading...">
                    </div>
                    <div class="col">
                        <label class="form-label">Total Paid Dividends</label>
                        <input type="text" class="form-control" id="paid-dividends-field" readonly value="Loading...">
                    </div>
                    <div class="col">
                        <label class="form-label">Total Unpaid Dividends</label>
                        <input type="text" class="form-control" id="unpaid-dividends-field" readonly value="Loading...">
                    </div>
                </div>


                <div class="form-group mb-2 mt-4">
                    <label class="text-danger"><b>This Process Cannot Be Reversed Once Done</b></label>
                </div>

                <br>

                <div class="row">
                    <div class="col">
                        <label class="form-label">Username</label>
                        <input type="text" class="form-control" readonly value="{{ session('username') ?? 'N/A' }}">
                    </div>
                    <div class="col">
                        <label class="form-label">Password</label>
                        <input type="password" class="form-control" id="password" required>
                    </div>
                    <div class="col">
                        <label class="form-label">Confirm Password</label>
                        <input type="password" class="form-control" id="confirm_password" required>
                    </div>
                </div>

                <div class="form-group mt-4 col-12">
                    <button type="submit" class="btn btn-danger">End Dividend Payout</button>
                </div>
            </form>


                </div>
            </div>


            <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>Fiscal Year</th>
                                    <th>Dividend Rate</th>
                                    <th>Total Paid Dividends (LKR)</th>
                                    <th>Total Unpaid Dividends (LKR)</th>

                                </tr>
                            </thead>
                            <tbody id="dividend-history-body">

                            </tbody>

                        </table>
                    </div>


                </div>
            </div>



        </div>
@endsection


@section('scripts')
<script>
document.addEventListener("DOMContentLoaded", function () {
    fetch("/api/dividends/history")
        .then(response => response.json())
        .then(data => {
            const tbody = document.getElementById("dividend-history-body");
            tbody.innerHTML = "";

            if (data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="4">No records found.</td></tr>';
            } else {
                data.forEach(row => {
                    tbody.innerHTML += `
                        <tr>
                            <td>${row.fiscal_year_name}</td>
                            <td>${(parseFloat(row.dividend_rate) * 100).toFixed(2)}%</td>
                            <td>${parseFloat(row.total_paid).toLocaleString('en-US', {minimumFractionDigits: 2})} LKR</td>
                            <td>${parseFloat(row.total_unpaid).toLocaleString('en-US', {minimumFractionDigits: 2})} LKR</td>
                        </tr>
                    `;
                });
            }
        })
        .catch(err => {
            document.getElementById("dividend-history-body").innerHTML =
                '<tr><td colspan="4">Error loading history.</td></tr>';
            console.error(err);
        });
});
</script>

<script>
fetch("/api/dividends/current-summary")
    .then(res => res.json())
    .then(data => {
        document.getElementById("fiscal-year-field").value = data.fiscal_year_name;
        document.getElementById("paid-dividends-field").value = parseFloat(data.total_paid).toLocaleString('en-US', {minimumFractionDigits: 2}) + " LKR";
        document.getElementById("unpaid-dividends-field").value = parseFloat(data.total_unpaid).toLocaleString('en-US', {minimumFractionDigits: 2}) + " LKR";
    })
    .catch(err => {
        console.error("Failed to load summary", err);
    });
</script>


<script>
document.getElementById('endDividendForm').addEventListener('submit', function (e) {
    e.preventDefault();

    const password = document.getElementById("password").value;
    const confirmPassword = document.getElementById("confirm_password").value;

    if (password !== confirmPassword) {
        Swal.fire({
            icon: 'error',
            title: 'Password Mismatch',
            text: 'Password and Confirm Password do not match.',
        });
        return;
    }

    Swal.fire({
        title: 'Ending Dividend Cycle...',
        html: '<b>Please wait while the system updates records.</b><br><br><div class="spinner-border text-primary" role="status"></div>',
        allowOutsideClick: false,
        showConfirmButton: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    fetch("/api/dividends/end-cycle", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": document.querySelector('input[name="_token"]').value
        },
        body: JSON.stringify({
            password: password
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            Swal.fire({
                icon: 'success',
                title: 'Cycle Ended',
                text: data.message,
            }).then(() => location.reload());
        } else {
            throw new Error(data.message || 'Something went wrong.');
        }
    })
    .catch(err => {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: err.message || 'Failed to complete the process.',
        });
    });
});
</script>



@endsection