@extends('layouts.app')

@section('title', 'Remove Shares')


@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>Remove Shares From a Member</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="shareremovemodule" tabindex="-1" aria-labelledby="shareremovemodule"
                aria-hidden="true">
                <div class="modal-dialog modal-halfscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="shareremovemodule">Remove Shares</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="shareRemoveForm">
    @csrf
    <input type="hidden" name="member_id">
    <input type="hidden" name="share_value">

    <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" name="member_no" readonly>
            </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" name="full_name" readonly>
            </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" name="nic" readonly>
            </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" name="phone" readonly>
            </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" name="current_shares" readonly>
                <span class="input-group-text">LKR</span>
            </div>
        </div>

        <hr>

        <div class="col-4">
            <label class="form-label">Receipt Number</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" name="receipt_no" placeholder="">
            </div>
        </div>
        <div class="col-4">
            <label class="form-label">Remove Shares</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" name="share_amount_lkr" placeholder="">
                <span class="input-group-text">LKR</span>
            </div>
        </div>
        <div class="col-4">
            <label class="form-label">New Share Total</label>
            <div class="input-group form-group-alt mb-3">
                <input type="text" class="form-control" name="new_share_total" readonly>
                <span class="input-group-text">LKR</span>
            </div>
        </div>

        <div class="col-12">
            <div class="form-group">
                <label class="form-label">Share Remove Date</label>
                <input type="date" class="form-control" name="share_issue_date">
            </div>
        </div>

        <div class="col-12">
            <label class="form-label">Remark</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" name="share_remark" placeholder="">
            </div>
        </div>
    </div>
</form>


                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="card">
                                        <div class="card-header d-flex justify-content-between">
                                            <div class="header-title mb-4">
                                               <h4 class="card-title">Share History</h4>
                                            </div>
                                         </div>
                                        <div class="table-responsive">
                                            <table id="shareRemoveHistoryTable" class="table table-striped" data-toggle="data-table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Receipt #</th>
            <th>Type</th>
            <th>Amount (LKR)</th>
            <th>Remark</th>
            <th>User</th>
        </tr>
    </thead>
    <tbody id="shareRemoveHistoryBody">
        <!-- Will be populated by JS -->
    </tbody>
</table>

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

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" id="removeShareSubmit" class="btn btn-warning">Remove Shares</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>Available Shares (LKR)</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach($members as $member)
        <tr>
            <td>{{ $member->member_number }}</td>
            <td>{{ $member->member_full_name }}</td>
            <td>{{ $member->member_nic }}</td>
            <td>{{ $member->member_phone_number }}</td>
            <td>{{ number_format(optional($member->share)->share_amount_current, 2) ?? '0.00' }}</td>
            <td>
                <button class="btn btn-icon btn-warning remove-share-btn"
                    type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#shareremovemodule"
                    data-member-id="{{ $member->member_id }}">
                    <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 d="M14.3955 9.59497L9.60352 14.387"
                                stroke="currentColor" stroke-width="1.5"
                                stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M14.3971 14.3898L9.60107 9.59277"
                                stroke="currentColor" stroke-width="1.5"
                                stroke-linecap="round" stroke-linejoin="round"></path>
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M16.3345 2.75024H7.66549C4.64449 2.75024 2.75049 4.88924 2.75049 7.91624V16.0842C2.75049 19.1112 4.63549 21.2502 7.66549 21.2502H16.3335C19.3645 21.2502 21.2505 19.1112 21.2505 16.0842V7.91624C21.2505 4.88924 19.3645 2.75024 16.3345 2.75024Z"
                                stroke="currentColor" stroke-width="1.5"
                                stroke-linecap="round" stroke-linejoin="round">
                            </path>
                        </svg>
                    </span>
                </button>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection



@section('scripts')
<script>
$(document).ready(function () {
    $('.remove-share-btn').on('click', function () {
        const memberId = $(this).data('member-id');

        // 1. Load member info
        $.ajax({
            url: `/api/shares/member/${memberId}`,
            type: 'GET',
            success: function (data) {
                const m = data.member;
                const s = data.share || {};
                const shareValue = parseFloat(data.share_value).toFixed(2);

                $('#shareRemoveForm input[name="member_id"]').val(m.member_id);
                $('#shareRemoveForm input[name="member_no"]').val(m.member_number);
                $('#shareRemoveForm input[name="full_name"]').val(m.member_full_name);
                $('#shareRemoveForm input[name="nic"]').val(m.member_nic);
                $('#shareRemoveForm input[name="phone"]').val(m.member_phone_number);
                $('#shareRemoveForm input[name="current_shares"]').val(parseFloat(s.share_amount_current || 0).toFixed(2));
                $('#shareRemoveForm input[name="new_share_total"]').val('');
                $('#shareRemoveForm input[name="share_value"]').val(shareValue);
            },
            error: function () {
                alert('Failed to fetch member share data.');
            }
        });

        // 2. Load share history
        $.ajax({
            url: `/api/shareshistory/member/${memberId}`,
            type: 'GET',
            success: function (logs) {
                let historyHtml = '';

                if (logs.length > 0) {
                    logs.forEach(log => {
                        const typeBadge = log.type == 1
                            ? '<span class="badge bg-success">Share Add</span>'
                            : '<span class="badge bg-danger">Share Remove</span>';

                        const amt = log.type == 1
                            ? `+${parseFloat(log.amount).toFixed(2)}`
                            : `-${parseFloat(log.amount).toFixed(2)}`;

                        historyHtml += `
                            <tr>
                                <td>${log.date}</td>
                                <td>${log.receipt || '-'}</td>
                                <td>${typeBadge}</td>
                                <td>${amt}</td>
                                <td>${log.remark || '-'}</td>
                                <td>${log.user || 'N/A'}</td>
                            </tr>
                        `;
                    });
                } else {
                    historyHtml = '<tr><td colspan="6" class="text-center text-muted">No history available.</td></tr>';
                }

                $('#shareRemoveHistoryBody').html(historyHtml);
            },
            error: function () {
                $('#shareRemoveHistoryBody').html('<tr><td colspan="6" class="text-center text-danger">Failed to load share history.</td></tr>');
            }
        });
    });
});
</script>


<script>
$(document).ready(function () {
    $('#shareRemoveForm input[name="share_amount_lkr"]').on('input', function () {
        const current = parseFloat($('#shareRemoveForm input[name="current_shares"]').val()) || 0;
        const remove = parseFloat($(this).val()) || 0;
        const newTotal = Math.max(0, current - remove); // Prevent negative
        $('#shareRemoveForm input[name="new_share_total"]').val(newTotal.toFixed(2));
    });
});
</script>


<script>
$(document).ready(function () {
    $('#removeShareSubmit').on('click', function () {
        const form = $('#shareRemoveForm');
        const formData = form.serialize();

        Swal.fire({
            title: 'Remove Shares?',
            text: 'Are you sure you want to remove these shares from this member?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, remove!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/api/shares/remove',
                    type: 'POST',
                    data: formData,
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Removed!',
                            text: response.message,
                            confirmButtonText: 'OK'
                        }).then(() => {
                            location.reload();
                        });
                    },
                    error: function (xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: xhr.responseJSON?.message || 'Something went wrong.',
                        });
                    }
                });
            }
        });
    });
});
</script>


<script>
    $(document).ready(function () {
        $('#shareremovemodule').on('hidden.bs.modal', function () {
            // Clear form fields
            $('#shareRemoveForm')[0].reset();

            // Clear readonly values
            $('#shareRemoveForm input[type="text"], #shareRemoveForm input[type="date"]').val('');

            // Clear hidden fields
            $('#shareRemoveForm input[type="hidden"]').val('');

            // Clear share history
            $('#shareRemoveHistoryBody').html('<tr><td colspan="6" class="text-center text-muted">No history available.</td></tr>');
        });
    });
</script>


@endsection