@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">Customer</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">Customer</span>
                    <span class="breadcrumb-item active">Transaction</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')

        <div class="card">

            <div class="table-responsive">
                <table class="table table-bordered datatable-button-init-basic">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Transaction Type</th>
                            <th>Description</th>
                            <th>Transaction Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($data['data']) > 0)
                            @foreach ($data['data'] as $item)
                                <tr>
                                    <td>{{ $item['user_detail']['name'] }}</td>
                                    <td>${{ $item['amount'] }}</td>
                                    <td>
                                        @if ($item['status'] == 1)
                                            <span class="badge bg-success bg-opacity-10 text-success">Success</span>
                                        @elseif ($item['status'] == 2)
                                            <span class="badge bg-danger bg-opacity-10 text-danger">Suspended</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($item['transaction_type'] == 0)
                                            Added To Wallet
                                        @else
                                            Paid For Booking Request
                                        @endif
                                    </td>
                                    <td>{{ $item['description'] }}</td>
                                    <td>{{ time_by_timezone($item->created_at, 'd F, Y h:i A') }}</td>
                                </tr>
                            @endforeach
                        @else
                            <tr style="text-align: center">
                                <td colspan="7">No Record Found</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

        <div class="pagination-footer">
            {{ $data['data']->links('pagination::mobile-pagination') }}
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $(".customer-status-change").on("change", function() {
                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'
                                    });
                            }
                        });
                    }
                })
            });

            $(".delete-resource").on("click", 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 delete this record?',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, cancel please!'
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        document.getElementById(formId).submit();
                    }
                })
            });
        });
    </script>
@endsection