@extends('root')
@section('title', 'WA Resellers')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'WA Resellers',
        'links' => [
            ['url' => route('dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'WA Resellers'
    ])

    <div class="widget-content searchable-container list">
        <div class="card card-body">
            <div class="row">
                <div class="col-md-4 col-xl-3">
                    <form class="position-relative">
                        <input type="text" class="form-control product-search ps-5" id="input-search" placeholder="Cari Reseller">
                        <i class="ti ti-search position-absolute top-50 start-0 translate-middle-y fs-6 text-dark ms-3"></i>
                    </form>
                </div>
                <div class="col-md-8 col-xl-9 text-end d-flex justify-content-md-end justify-content-center mt-3 mt-md-0">
                    <a href="javascript:void(0)" class="btn btn-primary d-flex align-items-center btn-create" data-url="{{ route('admin.resellers.create') }}">
                        <i class="ti ti-plus text-white me-1 fs-5"></i> Tambah Reseller
                    </a>
                </div>
            </div>
        </div>

        <div class="card card-body">
            <div class="table-responsive">
                <table class="table table-striped" id="datatable-resellers">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Username</th>
                            <th>Dapat Set Harga</th>
                            <th>Status</th>
                            <th>Opsi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    var datatable = $('#datatable-resellers').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        ajax: {
            url: '{{ route('admin.resellers.data') }}',
            dataSrc: 'data'
        },
        columns: [
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            {
                data: 'can_set_price',
                name: 'can_set_price',
                render: function (data) {
                    return data
                        ? '<span class="badge bg-primary">Ya</span>'
                        : '<span class="badge bg-secondary">Tidak</span>';
                }
            },
            {
                data: 'is_active',
                name: 'is_active',
                render: function (data) {
                    return data
                        ? '<span class="badge bg-success">Aktif</span>'
                        : '<span class="badge bg-secondary">Nonaktif</span>';
                }
            },
            {
                data: null,
                name: 'action',
                orderable: false,
                searchable: false,
                className: 'text-center fit-column',
                render: function (data, type, row) {
                    var editUrl = '{{ route('admin.resellers.edit', ':id') }}'.replace(':id', row.id);
                    var deleteUrl = '{{ route('admin.resellers.destroy', ':id') }}'.replace(':id', row.id);
                    var regenUrl = '{{ route('admin.resellers.regenerate-api-key', ':id') }}'.replace(':id', row.id);
                    var impersonateUrl = '{{ route('admin.resellers.impersonate', ':id') }}'.replace(':id', row.id);

                    return `
                        <button class="btn btn-info btn-sm btn-impersonate" data-url="${impersonateUrl}" data-name="${row.name}" title="Login sebagai Reseller">
                            <i class="ti ti-user-check"></i>
                        </button>
                        <button class="btn btn-warning btn-sm btn-create" data-url="${editUrl}">
                            <i class="ti ti-pencil"></i>
                        </button>
                        <button class="btn btn-danger btn-sm btn-delete" data-url="${deleteUrl}">
                            <i class="ti ti-trash"></i>
                        </button>
                        <button class="btn btn-secondary btn-sm btn-regenerate-key" data-url="${regenUrl}" title="Regenerate API Key">
                            <i class="ti ti-key"></i>
                        </button>
                    `;
                }
            },
        ]
    });

    $('#input-search').on('keyup', function () {
        datatable.search(this.value).draw();
    });

    // Impersonate button handler
    $('#datatable-resellers').on('click', '.btn-impersonate', function (e) {
        e.preventDefault();
        var url = $(this).data('url');
        var name = $(this).data('name');

        Swal.fire({
            title: 'Impersonate Reseller?',
            html: `Anda akan login sebagai reseller: <strong>${name}</strong><br><br>` +
                  `<small class="text-muted">Gunakan tombol "Kembali ke Admin" untuk keluar dari mode impersonation.</small>`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#0d6efd',
            cancelButtonColor: '#6c757d',
            confirmButtonText: '<i class="ti ti-user-check me-1"></i> Ya, Login sebagai Reseller',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                // Create and submit form
                var form = $('<form>', {
                    method: 'POST',
                    action: url
                });
                form.append($('<input>', {
                    type: 'hidden',
                    name: '_token',
                    value: '{{ csrf_token() }}'
                }));
                form.appendTo('body').submit();
            }
        });
    });

    $(document).on('click', '.btn-regenerate-key', function (e) {
        e.preventDefault();
        var url = $(this).data('url');

        if (!confirm('Yakin ingin me-regenerate API Key reseller ini?')) {
            return;
        }

        $.post(url, {
            _token: '{{ csrf_token() }}'
        })
            .done(function (res) {
                if (res.meta && res.meta.status === 'success') {
                    window.toastr && toastr.success(res.meta.message || 'API Key berhasil diregenerate');
                } else {
                    window.toastr && toastr.error(res.meta && res.meta.message ? res.meta.message : 'Gagal regenerate API Key');
                }
            })
            .fail(function (xhr) {
                var msg = 'Gagal regenerate API Key';
                if (xhr.responseJSON && xhr.responseJSON.meta && xhr.responseJSON.meta.message) {
                    msg = xhr.responseJSON.meta.message;
                }
                window.toastr && toastr.error(msg);
            });
    });
});
</script>
@endpush