@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_profit_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 Profit 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>TDS 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>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="{{ route('update_profit_payout') }}" 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="{{route('delete_profit_payout')}}" 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-secondary 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>

<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 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...';
    });
</script>

<script>
    $(document).ready(function() {

        const table = $('#depositTable').DataTable({

            ajax: "{{route('view_micro_profit_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 Profit Payout Report',


                filename: function() {
                    return 'OG24- Micro Profit Payout Report- {{ \Carbon\Carbon::parse($payout->generate_date)->format("F 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)',
                    format: {
                        body: function(data, row, column, node) {
                            if (column === 9) {
                                return "\u200C" + data;
                            }
                            return data;
                        }
                    }
                },
                className: 'd-none'
            }],

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    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: 'tds_charge',
                    name: 'tds_charge'
                },
                {
                    data: 'amount',
                    name: 'amount'
                },
                {
                    data: 'bank_name',
                    name: 'bank_name'
                },
                {
                    data: 'account_number',
                    name: 'account_number'
                },
                {
                    data: 'ifsc',
                    name: 'ifsc'
                },
                {
                    data: 'account_holder',
                    name: 'account_holder'
                },
                {
                    data: 'branch_name',
                    name: 'branch_name'
                },

                {
                    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