@extends('layouts.admin.index')

@section('content')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Home - <span class="fw-normal">Deleted Advisors</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item">Home</a>
                    <span class="breadcrumb-item active">Advisor</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="content">

        @include('error-success')

        <form action="{{ route('advisor.list') }}">
            <div class="row">
                <div class="col-lg-6">
               
                </div>
                <div class="col-lg-6">
                    <div class="row justify-content-end">
                        <div class="col-lg-4 mb-3">
                            {{ Form::select('filter_type', $filterOptions, $selectedFilterName, ['class' => 'form-select', 'id' => 'filter-type']) }}
                        </div>
                        <div class="col-lg-5">
                            <div class="mb-3">
                                <input type="text" name="q" id="searchTerm" class="form-control"
                                    placeholder="Search..." value="{{ $searchTerm ?? '' }}">
                            </div>
                        </div>

                        <div class="col-lg-3" style="text-align: right">
                            <div class="mb-3">
                                <button type="button" id="searchBtn" class="btn btn-primary"
                                    style="width: 100%">Search</button>
                            </div>
                        </div>

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


        <div class="card">
            <div class="table-responsive">
                <table class="table table-bordered" id="advisor-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Mobile</th>
                            {{-- <th>Status</th>
                            <th>Approve Profile</th> --}}
                            <th>Created On</th>
                            <th>Deleted On</th>
                            <th>Amount</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>


        <div id="wallet-transaction-modal" class="modal fade" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Wallet</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <form action="{{ route('advisor.payment.transaction.admin') }}" method="POST">
                        {!! csrf_field() !!}
                        <input type="hidden" id="user-id" name="user_id" value="" />
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">Transaction Type:</label>
                                <select class="form-control" name="transaction_type" required=""
                                    id="transaction-type" required>
                                    <option value="" selected="" disabled="">Select Transaction Type</option>
                                    <option value="0">Credit</option>
                                    <option value="2">Debit</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Amount:</label>
                                <input type="text" name="amount" class="form-control" placeholder="Enter amount"
                                    required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Description:</label>
                                <textarea rows="3" cols="3" class="form-control" name="description" placeholder="Enter description"
                                    required></textarea>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div id="view-profile-update-logs-modal" class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Details - #<span id="view-profile-update-user-id"></span></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <form action="{{ route('accept.reject.log') }}" method="POST">
                        {!! csrf_field() !!}
                        <input type="hidden" id="user-id" name="user_id" value="" />
                        <div class="modal-body">

                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary"
                                id="profile-update-logs-submit-btn">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $("body").on("change", ".customer-status-change", function(e) {
                e.preventDefault();

                const userId = $(this).attr("data-id");

                const status = $(this).is(':checked');

                Swal.fire({
                    title: 'Are you sure that you want to change status of this record?',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, change it!',
                    cancelButtonText: 'No, cancel please!'
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('update.user.status') }}",
                            type: 'POST',
                            dataType: 'JSON',
                            data: {
                                user_id: userId,
                                status: status ? 1 : 0,
                                _token: token
                            },
                            success: function(response, textStatus, jqXHR) {
                                showToast(response.message)
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                showToast(
                                    'Oops! some error occured, please try again', {
                                        type: 'error',
                                        icon: 'error'
                                    });
                            }
                        });
                    }

                    if (result.isDismissed) {
                        $(this).prop("checked", !status)
                    }
                })
            });

            $("body").on("change", ".approve-details", function(e) {
                e.preventDefault();

                const userId = $(this).attr("data-id");

                const status = $(this).is(':checked');

                Swal.fire({
                    title: 'Are you sure that you want to change status of this record?',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, change it!',
                    cancelButtonText: 'No, cancel please!'
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('approve.details') }}",
                            type: 'POST',
                            dataType: 'JSON',
                            data: {
                                user_id: userId,
                                status: status ? 1 : 0,
                                _token: token
                            },
                            success: function(response, textStatus, jqXHR) {
                                showToast(response.message)
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                showToast(
                                    'Oops! some error occured, please try again', {
                                        type: 'error',
                                        icon: 'error'
                                    });
                            }
                        });
                    }

                    if (result.isDismissed) {
                        $(this).prop("checked", !status)
                    }
                })
            });

            $("body").on("click", ".recover-resource", function(e) {
                e.preventDefault();

                const formId = $(this).attr("data-form-id");
                console.log("formId", formId)

                Swal.fire({
                    title: 'Are you sure that you want to recover this record?',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, recover it!',
                    cancelButtonText: 'No, cancel please!'
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        document.getElementById(formId).submit();
                    }
                })
            });

            $("body").on('click', ".wallet-transaction-btn", function(e) {
                e.preventDefault();

                const userId = $(this).attr('data-id');
                const amount = $(this).attr('data-amount');
                //const amount = 0;

                $("#user-id").val(userId);

                /* if (amount > 0) {
                    $("#transaction-type option[value]").show();
                } else {
                    $("#transaction-type option[value]").filter(function() {
                        return +$(this).val() != 0;
                    }).hide();
                } */

                $("#wallet-transaction-modal").modal('show');
            });

            /* var table = $('#example').DataTable({
                responsive: true,
                buttons: {
                    dom: {
                        button: {
                            className: 'btn btn-light'
                        }
                    },
                    buttons: [{
                            extend: 'copy'
                        },
                        {
                            extend: 'csv'
                        },
                        {
                            extend: 'excel'
                        },
                        {
                            extend: 'pdf'
                        },
                        {
                            extend: 'print'
                        }
                    ]
                },
                "bPaginate": false,
                "aaSorting": [],
            }); */

            $("body").on('click', "#view-profile-update-logs", function(e) {
                e.preventDefault();

                const userId = $(this).attr('data-id');

                $("#view-profile-update-user-id").text(userId);

                $.ajax({
                    url: "{{ route('get.advisor.profile.update.logs.ajax') }}",
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        user_id: userId,
                        _token: token,
                    },
                    success: function(response, textStatus, jqXHR) {
                        console.log("response.html", response.html);
                        $("#view-profile-update-logs-modal .modal-body").html(response.html);

                        $("#view-profile-update-logs-modal").modal('show');

                        const showSubmitButton = response.show_submit_button;

                        if (!showSubmitButton) {
                            $("#profile-update-logs-submit-btn").hide()
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        showToast(
                            'Oops! some error occured, please try again', {
                                type: 'error',
                                icon: 'error'
                            });
                    }
                });


            });

            $('body').on('change', 'input[type=radio][name=profile-image-accepted]', function() {
                // Get the selected value
                var selectedValue = $(this).val();

                // Display the selected value (you can modify this part based on your requirement)
                console.log("Selected value: " + selectedValue);

                if (selectedValue == '0') {
                    $("#reject-reason-image").show();
                } else {
                    $("#reject-reason-image").hide();
                }
            });

            $('body').on('change', 'input[type=radio][name=description-accepted]', function() {
                // Get the selected value
                var selectedValue = $(this).val();

                // Display the selected value (you can modify this part based on your requirement)
                console.log("Selected value: " + selectedValue);

                if (selectedValue == '0') {
                    $("#reject-reason-description").show();
                } else {
                    $("#reject-reason-description").hide();
                }
            });
        });
    </script>


<script>
    $(document).ready(function() {
        var table = $('#advisor-table').DataTable({
            buttons: {
                dom: {
                    button: {
                        className: 'btn btn-light'
                    }
                },
                buttons: [
                    { extend: 'copy' },
                    { extend: 'csv' },
                    { extend: 'excel' },
                    { extend: 'pdf' },
                    { extend: 'print' }
                ]
            },
            responsive: true,
            processing: true,
            serverSide: true,
            order: [[4, 'desc']],
            ajax: '{{ route('advisor.deleted') }}',
            columns: [
                {
                    data: 'name',
                    name: 'name',
                    render: function(data, type, row) {
                        let deletedStatus = row.deleted_at ? '<span style="color:red;">(Deleted)</span>' : '';
                        return data + ' ' + deletedStatus;
                    }
                },
                { data: 'email', name: 'email' },
                { data: 'mobile', name: 'mobile' },
                // {
                //     data: 'status',
                //     name: 'status',
                //     render: function(data, type, row) {
                //         return `<label class="form-check form-check-inline form-switch m-0">
                //                     <input type="checkbox" data-id="${row.id}" class="form-check-input customer-status-change" ${data == 1 ? 'checked' : ''}>
                //                 </label>`;
                //     }
                // },
                // {
                //     data: 'is_account_verified',
                //     name: 'is_account_verified',
                //     orderable: false,
                //     render: function(data, type, row) {
                //         return `<label class="form-check form-check-inline form-switch m-0">
                //                     <input type="checkbox" data-id="${row.id}" class="form-check-input approve-details" ${data == 1 ? 'checked' : ''}>
                //                 </label>`;
                //     }
                // },
                { data: 'created_at', name: 'created_at' , searchable: false },
                { data: 'deleted_at', name: 'deleted_at' , searchable: false },
                {   
                    data: null,
                    name: 'amount', 
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row){
                       return  `
                            <strong>Total Earning: </strong> ${data.paymentDetails.total_earnings} <br />
                            <strong>Available for withdraw: </strong>${data.paymentDetails.withdrawable_amount}<br />
                            <strong>Total Withdraw Amount: </strong> ${data.paymentDetails.withdrawn_amount}<br />
                            <strong>Pending Withdraw Amount: </strong> ${data.paymentDetails.pending_amount}<br />
                        `
                    }

                },
                {
                    data: null,
                    name: 'actions',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        let editUrl = `{{ route('advisor.edit', ':id') }}`.replace(':id', row.id);
                        let recoverFormId = `recover-form-${row.id}`;
                        let recoverUrl = `{{ route('recover.user', ':id') }}`.replace(':id', row.id);
                        let recoverAction = row.deleted_at ?
                            `<span class="badge badge-secondary recover-btn bg-dark recover-resource" style="cursor:pointer;"
                                             data-form-id="${recoverFormId}">Recover <i class="ph ph-archive" style="color:white;"></i></span>` :
                            `<a href="javascript:void(0)" data-form-id="${recoverFormId}" class="text-body mx-1 recover-resource" title="Delete"><i class="ph-trash"></i></a>`;
                            
                        return `<div class="d-inline-flex">
                                    ${recoverAction}
                                    <form id="${recoverFormId}" style="display:none" action="${recoverUrl}" method="POST">
                                        {{ csrf_field() }}
                                    
                                    </form>
                                </div>`;
                    }
                }

            ],
        });

        $('#advisor-table_filter').hide();
        $('#advisor-table_length').hide();
        $('#searchBtn').on('click', function() {
            table.search($('#searchTerm').val()).draw();
        });
        $('#filter-type').on('change', function() {
            var url = "{{ route('advisor.list') }}?filter_type=" + $('#filter-type').val();
            table.ajax.url(url).load();
            table.ajax.reload();
        });
        $('#searchTerm').on('keyup', function() {
            table.search(this.value).draw();
        });
    });
</script>

@endsection