@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 Customers</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">Customer</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('customer.list') }}">
            <div class="row">
                <div class="col-lg-6"></div>
                <div class="col-lg-6">
                    <div class="row">

                        <div class="col-lg-9">
                            <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 datatable" id="customer-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Mobile</th>
                            <th>Total Spend</th>
                            <th>Available Amount</th>
                            {{-- <th>Status</th> --}}
                            <th>Created On</th>
                            <th>Deleted On</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('wallet.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="1">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>
@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) => {
                    console.log("result", 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("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');
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            var table = $('#customer-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: [[5, 'desc']],
                ajax: '{{ route('customer.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: 'total_spend',
                        name: 'total_spend',
                        orderable: true,
                        searchable: false,
                        render: function(data, type, row) {
                            return `$${parseFloat(data).toFixed(2)}`;
                        }
                    },
                    {
                        data: 'wallet_amount',
                        name: 'wallet_amount',
                        render: function(data, type, row) {
                            return `$${parseFloat(data).toFixed(2)}`;
                        }
                    },
                    // {
                    //     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: 'created_at',
                        name: 'created_at',
                    },
                    {
                        data: 'deleted_at',
                        name: 'deleted_at',
                    },
                    {
                        data: null,
                        name: 'actions',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            let editUrl = `{{ route('customer.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>`;
                        }
                    }
                ]
            });
            $('#customer-table_filter').hide();
            $('#customer-table_length').hide();
            $('#searchBtn').on('click', function() {
                table.search($('#searchTerm').val()).draw(); // Use DataTable's search method
            });
            $('#searchTerm').on('keyup', function() {
                table.search(this.value).draw(); // Use DataTable's search method
            });
        });
    </script>
@endsection