@extends('Admin.layout')
<style>
    .dt-search {
        display: none !important;
    }
</style>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">


<h5>
    <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
        <a href="{{ route('micro_level_payout_history') }}"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" class="icon icon-tabler">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M15 6l-6 6l6 6" />
            </svg>
        </a>
    </button>

    View Micro Level Payout Report
</h5>

<div class="card p-0 m-2">

    <div class="row mb-3 align-items-center p-3 g-2">

        <div class="col-auto">
            <select id="pageLength" class="form-select">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>

        <div class="col-auto ms-auto d-flex gap-2 align-items-center">

            <div class="position-relative">
                <input type="text" id="toDate" class="form-control ps-7" placeholder="Search...">
                <i class="ti tabler-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
            </div>
            <button class="btn btn-label-secondary" id="excelExport">
                <i class="ti tabler-upload"></i>
                <span class="d-none d-sm-inline">&nbsp; Excel</span>
            </button>

        </div>

    </div>


    <div class="table-responsive pt-0 pb-2">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
            <div class="justify-content-between dt-layout-table">
                <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                    <table id="depositTable" class="table custom-table w-100">
                        <thead>
                            <tr>
                                <th>SNO</th>
                                <th>DATE</th>
                                <th>User id</th>
                                <th>User Name</th>
                                <th>Total Amount</th>
                                <th>Service Charge</th>
                                <th>payable Amount</th>
                                <th>Bank Name</th>
                                <th>Account Number</th>
                                <th>IFSC</th>
                                <th>Account Holder</th>
                                <th>Branch Name</th>
                                <th>status</th>
                                <th>View</th>
                                <!-- <th>Action</th> -->
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- edit -->
<div class="modal fade" id="editPayout" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">

            <!-- Header -->
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">
                    <i class="ti tabler-edit me-2 text-primary"></i> Edit Payout
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- Body -->
            <div class="modal-body pt-2">

                <form action="#" method="POST">
                    @csrf

                    <!-- Hidden ID -->
                    <input type="hidden" name="id" id="edit_id">

                    <!-- Amount & Service -->
                    <div class="row g-3">

                        <!-- Amount -->
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Amount</label>
                            <div class="input-group">
                                <input type="number" step="0.01" name="amount" id="edit_amount"
                                    class="form-control" placeholder="Enter amount" required>
                            </div>
                        </div>

                        <!-- Service Charge -->
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Service Charge</label>
                            <div class="input-group">
                                <input type="number" step="0.01" name="service_charge" id="edit_service"
                                    class="form-control" placeholder="Enter charge" required>
                            </div>
                        </div>

                    </div>

                    <!-- Total -->
                    <div class="mt-3">
                        <label class="form-label fw-semibold">Total Amount</label>
                        <input type="text" id="edit_total"
                            class="form-control bg-light fw-semibold text-primary" readonly>
                    </div>

                    <!-- Reason -->
                    <div class="mt-3">
                        <label class="form-label fw-semibold">Reason <span class="text-danger">*</span></label>
                        <textarea name="edit_reason" class="form-control"
                            rows="3" placeholder="Enter reason for update..." required></textarea>

                        @error('edit_reason')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <!-- Footer Buttons -->
                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <button type="button" class="btn btn-light border px-4"
                            data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="ti tabler-check me-1"></i> Update
                        </button>
                    </div>

                </form>

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


<!-- delete -->
<div class="modal fade" id="deletePayout" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to delete?</p>
            <form action="#" id="DeleteForm" method="post">
                @csrf
                <input type="hidden" name="id" id="payout_id" value="{{ old('id') }}">

                <div class="mb-3 text-start">
                    <label class="form-label fw-semibold">Reason</label>
                    <textarea name="reason" class="form-control" rows="3" placeholder="Enter reason for deletion">{{ old('reason') }}</textarea>
                    @error('reason')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror

                </div>

                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="submit_delete" class="btn btn-danger p-3 ms-2 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="markPaidModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" action="{{ route('micro_payout_given_status') }}" id="payoutForm">
            @csrf

            <input type="hidden" name="id" id="payment_id">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Income Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body text-center">
                    <p class="mb-0" id="status_message">
                       Are you sure you want to disable income for this user?
                    </p>
                </div>

                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="submit" id="submit_btn" class="btn btn-primary">
                             Yes, Disable Income
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


<script>
    function setEditId(el) {
        let amount = parseFloat(el.getAttribute('data-amount')) || 0;
        let service = parseFloat(el.getAttribute('data-service')) || 0;

        document.getElementById('edit_id').value = el.getAttribute('data-id');
        document.getElementById('edit_amount').value = amount;
        document.getElementById('edit_service').value = service;

        calculateTotal();
    }

    function calculateTotal() {
        let amount = parseFloat(document.getElementById('edit_amount').value) || 0;
        let service = parseFloat(document.getElementById('edit_service').value) || 0;

        document.getElementById('edit_total').value = (amount + service).toFixed(2);
    }

    document.getElementById('edit_amount').addEventListener('input', calculateTotal);
    document.getElementById('edit_service').addEventListener('input', calculateTotal);
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        @if($errors -> any())
        var modalEl = document.getElementById('deletePayout');
        if (modalEl) {
            var myModal = new bootstrap.Modal(modalEl);
            myModal.show();
        }
        @endif
    });
</script>
<script>
    function setPaymentId(button) {
        document.getElementById('payment_id').value = button.getAttribute('data-id');

        const status = button.getAttribute('data-status');
        const message = document.getElementById('status_message');
        const submitBtn = document.getElementById('submit_btn');

        if (status == "1") {
            message.textContent = 'Are you sure you want to disable income for this user?';
            submitBtn.textContent = 'Yes, Disable Income';
        } else {
            message.textContent = 'Are you sure you want to enable income for this user?';
            submitBtn.textContent = 'Yes, Enable Income';
        }
    }

    document.getElementById('payoutForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const btn = document.getElementById('submit_btn');
        btn.disabled = true;
        btn.innerText = 'Processing...';

        const form = this;
        const formData = new FormData(form);

        fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(res => res.json())
            .then(response => {

                bootstrap.Modal.getInstance(document.getElementById('markPaidModal')).hide();

                $('#depositTable').DataTable().ajax.reload(null, false);

                btn.disabled = false;
                btn.innerText = 'Yes, Disable Income';

                toastr.success(response.message);
            })
            .catch(() => {
                btn.disabled = false;
                btn.innerText = 'Yes, Disable Income';
                toastr.error('Something went wrong.');
            });
    });
</script>
<script>
    function setDeleteId(button) {
        document.getElementById('payout_id').value = button.getAttribute('data-id');
    }

    document.getElementById('DeleteForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_delete');
        btn.disabled = true;
        btn.innerText = 'Deleting...';
    });

    // function setPaymentId(button) {
    //     document.getElementById('payment_id').value = button.getAttribute('data-id');
    // }

    // document.getElementById('payoutForm').addEventListener('submit', function() {
    //     const btn = document.getElementById('submit_btn');
    //     btn.disabled = true;
    //     btn.innerText = 'Processing...';
    // });
</script>

<script>
    $(document).ready(function() {
        const table = $('#depositTable').DataTable({

            ajax: "{{route('view_micro_level_payout_data', $payout->id)}}",
            paging: true,
            searching: true,
            info: true,
            ordering: false,

            lengthChange: false,
            pageLength: 10,
            columnDefs: [{
                targets: '_all',
                className: 'text-nowrap'
            }],
            buttons: [{
                extend: 'excelHtml5',
                title: 'OG24- Micro Level Payout Report',

                filename: function() {
                    return 'OG24- Micro Level Payout Report - {{ \Carbon\Carbon::parse($payout->generate_date)->format("d-m-Y") }}';
                },

                // filename: function() {
                //     var now = new Date();
                //     var date =
                //         String(now.getDate()).padStart(2, '0') + '-' +
                //         String(now.getMonth() + 1).padStart(2, '0') + '-' +
                //         String(now.getFullYear()).slice(-2);

                //     return 'OG24 Payout Report - ' + date;
                // },

                exportOptions: {
                   columns: ':not(:last-child)',
                     rows: function(idx, data) {
                        return data.is_given == 1;
                    },
                    format: {
                        body: function(data, row, column, node) {
                            if (column === 8) {
                                return "\u200C" + data;
                            }
                            // if (column === 12) {
                            //     if ($(data).find('button').length) {
                            //         return 'Not Given';
                            //     }

                            //     return $(data).text().trim();
                            // }
                            return $('<div>').html(data).text().trim();
                        }
                    }
                },
                className: 'd-none'
            }],

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'generate_date',
                    name: 'generate_date'
                },
                {
                    data: 'user_id',
                    name: 'user_id'
                },
                {
                    data: 'user_name',
                    name: 'user_name'
                },
                {
                    data: 'total_amount',
                    name: 'total_amount'
                },
                {
                    data: 'service_charge',
                    name: 'service_charge'
                },
                {
                    data: 'payable_amount',
                    name: 'amount'
                },
                {
                    data: 'bank_name',
                    name: 'bank_name'
                },
                {
                    data: 'account_number',
                    name: 'account_number'
                },
                {
                    data: 'ifsc',
                    name: 'ifsc'
                },
                {
                    data: 'account_holder_name',
                    name: 'account_holder_name'
                },
                {
                    data: 'branch_name',
                    name: 'branch_name'
                },
                {
                    data: 'status',
                    name: 'status',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'view',
                    name: 'view',
                    orderable: false,
                    searchable: false
                },
                // {
                //     data: 'action',
                //     name: 'action',
                //     orderable: false,
                //     searchable: false
                // }

            ]
        });

        //  Search
        $('#toDate').on('keyup change', function() {
            table.search(this.value).draw();
        });

        //  Page Length
        $('#pageLength').on('change', function() {
            table.page.len(this.value).draw();
        });

        $('#excelExport').click(function() {
            table.button('.buttons-excel').trigger();
        });


    });
</script>

@endsection