@extends('root')
@section('title', 'Reseller Pricing')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Reseller Pricing',
        'links' => [],
        'current' => 'Reseller Pricing'
    ])

    <div class="card card-body">
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <div>
                <h5 class="mb-1 d-flex align-items-center gap-2">
                    <i class="ti ti-currency-dollar text-primary"></i>
                    Pricing Reseller
                </h5>
                <p class="mb-0 text-muted small">
                    Atur markup harga per paket & tipe pesan. Harga akhir = default price + markup.
                </p>
            </div>
            <div>
                <a href="javascript:void(0)" class="btn btn-primary btn-create" data-url="{{ route('reseller.pricing.create') }}">
                    <i class="ti ti-plus text-white me-1 fs-5"></i> Tambah Pricing
                </a>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-striped" id="datatable-reseller-pricing">
                <thead>
                    <tr>
                        <th>Paket</th>
                        <th>Kategori Pesan</th>
                        <th>Default Price</th>
                        <th>Markup</th>
                        <th>Harga Akhir</th>
                        <th>Opsi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    $('#datatable-reseller-pricing').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        ajax: {
            url: '{{ route('reseller.pricing.data') }}',
            dataSrc: 'data'
        },
        columns: [
            {
                data: 'package',
                name: 'package',
                render: function (data) {
                    if (!data) return '-';
                    var labels = {
                        dedicated: 'Dedicated',
                        shared: 'Shared',
                        self_service: 'Self Service'
                    };
                    var classes = {
                        dedicated: 'bg-warning text-dark',
                        shared: 'bg-info',
                        self_service: 'bg-success'
                    };
                    var label = labels[data] || data;
                    var cls = classes[data] || 'bg-secondary';
                    return '<span class="badge rounded-pill ' + cls + '">' + label + '</span>';
                }
            },
            {
                data: 'message_category',
                name: 'message_category',
                render: function (data) {
                    var labels = {
                        marketing: 'Marketing',
                        utility: 'Utility',
                        authentication: 'Authentication',
                        otp: 'OTP',
                        service: 'Service Message',
                    };
                    return '<span class="badge rounded-pill bg-light text-dark">' + (labels[data] || data || '-') + '</span>';
                }
            },
            {
                data: 'default_price',
                name: 'default_price',
                render: function (data) {
                    return 'Rp ' + parseFloat(data).toLocaleString('id-ID');
                }
            },
            {
                data: 'markup',
                name: 'markup',
                render: function (data) {
                    return 'Rp ' + parseFloat(data).toLocaleString('id-ID');
                }
            },
            {
                data: 'final_price',
                name: 'final_price',
                render: function (data) {
                    return 'Rp ' + parseFloat(data).toLocaleString('id-ID');
                }
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                className: 'text-center fit-column',
                render: function (data, type, row) {
                    var editUrl = '{{ route('reseller.pricing.edit', ':id') }}'.replace(':id', row.id);
                    var deleteUrl = '{{ route('reseller.pricing.destroy', ':id') }}'.replace(':id', row.id);

                    return `
                        <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>
                    `;
                }
            },
        ]
    });
});
</script>
@endpush