@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.2.5/css/buttons.bootstrap5.min.css">
<style>
    .link {
        text-decoration: underline;
    }
</style>
@section('content')

<div class="row align-items-center mb-3">
    <div class="col d-flex align-items-center gap-3">
        <h5 class="mb-0">Intern Management</h5>


    </div>


</div>


<div class="card">
    <div class="card-datatable table-responsive pt-0">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 px-3">
            <div class="justify-content-between dt-layout-table">
                <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                    <table id="staff" class="table">
                        <thead>
                            <tr>
                                <th>SNO</th>
                                <th>NAME</th>
                                <th>TASKS</th>
                                <th>WEEKLY REPORT</th>
                                <th>COUNT</th>
                                <th>MOBILE</th>
                                <th>OFFICE EMAIL</th>
                                <th>PERSONAL EMAIL</th>
                                <th>ROLE</th>
                                <th>TYPE</th>
                                <th>BANK</th>

                                <th>TOTAL AMOUNT</th>
                                <th>PAID AMOUNT</th>
                                <th>PAYMENT STATUS</th>
                                <th>UPDATE PAYMENT</th>
                                <th>VIEW PAYMENT HISTORY</th>

                                <th>ACTIVE STATUS</th>
                                <th>ACTIONS</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="delete_staff" 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 id="delete_form" method="POST" action="{{ route('delete_staff') }}">
                @csrf
                <input type="hidden" name="id" id="deleteId">
                <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" class="btn btn-danger p-3 ms-2 fw-semibold" id="submit_btn">
                        Yes, Sure
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- toggle status -->
<div class="modal fade" id="toggle_status" 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" id="toggle_status_text"></p>
            <form id="ToggleForm" method="POST" action="{{ route('toggle_status') }}">
                @csrf
                <input type="hidden" name="id" id="toggle_staff_id">
                <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  me-3" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="submit_toggle" class="btn btn-gray p-3 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="paymentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">

            <form action="{{ route('student_payment_store') }}"
                method="POST"
                enctype="multipart/form-data">

                @csrf

                <input type="hidden"
                    name="user_id"
                    id="payment_user_id">

                <div class="modal-header">
                    <h5 class="modal-title">Update Payment</h5>
                    <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="mb-2">
                        <label>Total Amount</label>
                        <input type="text"
                            name="total_amount"
                            id="total_amount"
                            class="form-control"
                            readonly>
                    </div>

                    <div class="mb-2">
                        <label>Paid Amount</label>

                        <input type="number"
                            name="amount_paid"
                            id="amount_paid"
                            class="form-control"
                            min="0"
                            step="0.01"
                            required>

                    </div>

                    <div class="mb-2">
                        <label>Balance Amount</label>
                        <input type="text"
                            id="balance_amount"
                            class="form-control"
                            readonly>
                    </div>
                    <div class="mb-2">
                        <label>Payment Mode</label>
                        <select name="payment_mode" class="form-control" required>
                            <option value="">Select Payment Mode</option>
                            <option value="Account">Account</option>
                            <option value="By Hand">By Hand</option>
                        </select>
                    </div>

                    <div class="mb-2">
                        <label>Payment Date</label>
                        <input type="date"
                            name="payment_date"
                            class="form-control"
                            required>
                    </div>

                    <div class="mb-2">
                        <label>Receipt</label>
                        <input type="file"
                            name="receipt"
                            class="form-control">
                    </div>

                    <div class="mb-2">
                        <label>Remarks</label>
                        <textarea name="remarks"
                            class="form-control"></textarea>
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-primary">
                        Save
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.5/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.5/js/buttons.html5.min.js"></script>
<script>
    var jq = jQuery.noConflict();
</script>

<script>
    jq(document).on('click', '[data-bs-target="#paymentModal"]', function() {

        let userId = jq(this).data('user');
        let total = parseFloat(jq(this).data('total')) || 0;
        let paid = parseFloat(jq(this).data('paid')) || 0;

        console.log('TOTAL=', total);
        console.log('PAID=', paid);

        jq('#payment_user_id').val(userId);
        jq('#total_amount').val(total);

        jq('#balance_amount').val((total - paid).toFixed(2));

        jq('#amount_paid').off('input').on('input', function() {

            let newPaid = parseFloat(jq(this).val()) || 0;

            let balance = total - paid - newPaid;

            jq('#balance_amount').val(balance.toFixed(2));
        });

    });
</script>
<script>
    var jq = jQuery.noConflict();

    jq(document).ready(function() {

        jq('#staff').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('inactive_intern_data') }}",

            layout: {
                topStart: {
                    search: {
                        placeholder: 'Search Intern...'
                    }
                },
                topEnd: {
                    buttons: [{
                        text: '<i class="fa fa-file-excel"></i> Excel Export',
                        className: 'btn btn-success',
                        action: function() {
                            window.location.href = "{{ route('intern_export') }}";
                        }
                    }]
                }
            },

            columnDefs: [{
                targets: '_all',
                className: 'text-nowrap'
            }],

            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'task',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'report',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'tasks_count',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'mobile',
                    name: 'mobile'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'personal_email',
                    name: 'personal_email'
                },
                {
                    data: 'designation',
                    name: 'designation'
                },
                {
                    data: 'type',
                    name: 'type'
                },
                {
                    data: 'bank',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'total_amount',
                    name: 'total_amount'
                },
                {
                    data: 'paid_amount',
                    name: 'paid_amount'
                },
                {
                    data: 'payment_status',
                    name: 'payment_status'
                },
                {
                    data: 'update_payment',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'payment_history',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'is_active',
                    name: 'is_active'
                },
                {
                    data: 'actions',
                    orderable: false,
                    searchable: false
                }
            ],

            order: [
                [1, 'asc']
            ],

            lengthMenu: [
                [10, 25, 50, 100, -1],
                ["10", "25", "50", "100", "All"]
            ],

            language: {
                search: "",
                searchPlaceholder: "Search",
                lengthMenu: "_MENU_"
            }
        });

    });

    // Delete Modal
    function setDeleteId(button) {
        document.getElementById('deleteId').value = button.getAttribute('data-id');
    }

    // Toggle Status
    function setToggleId(button) {

        const staffId = button.getAttribute('data-id');
        const isActive = button.getAttribute('data-active') === '1';

        document.getElementById('toggle_staff_id').value = staffId;

        document.getElementById('toggle_status_text').textContent =
            isActive ?
            "Are you sure you want to block this staff?" :
            "Are you sure you want to unblock this staff?";
    }

    document.getElementById('ToggleForm').addEventListener('submit', function() {

        const btn = document.getElementById('submit_toggle');

        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
</script>

@endsection