@extends('root')
@section('title', 'Custom Packages')

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

    <div class="card card-body mb-4">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h4 class="mb-1">Custom Packages per Client</h4>
                <p class="text-muted mb-0">
                    Modul ini hanya untuk admin: membuat, mengelola, dan meng-assign paket custom enterprise tanpa mengubah paket publik.
                </p>
            </div>
            <div class="col-md-4 text-end">
                <a href="{{ route('admin.custom-packages.create') }}" class="btn btn-primary">
                    <i class="ti ti-plus me-1"></i> Tambah Custom Package
                </a>
            </div>
        </div>
    </div>

    <div class="card card-body">
        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label mb-1">Client</label>
                <select class="form-select" id="filter-client">
                    <option value="">Semua Client</option>
                    @foreach($clients as $client)
                        <option value="{{ $client->id }}">{{ $client->name }} ({{ $client->account_name }})</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label mb-1">Type</label>
                <select class="form-select" id="filter-type">
                    <option value="">Semua</option>
                    <option value="dedicated">Dedicated</option>
                    <option value="shared">Shared</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label mb-1">Status</label>
                <select class="form-select" id="filter-status">
                    <option value="">Semua</option>
                    <option value="1">Active</option>
                    <option value="0">Disabled</option>
                </select>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped" id="datatable">
                <thead>
                    <tr>
                        <th>Client</th>
                        <th>Nama Paket</th>
                        <th>Type</th>
                        <th>Max Agents</th>
                        <th>Harga Bulanan</th>
                        <th>Harga Tahunan</th>
                        <th>Durasi (hari)</th>
                        <th>Grace (hari)</th>
                        <th>Dipakai</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- Assign Modal --}}
<div class="modal fade" id="assignModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Assign Custom Package ke Client</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="assignPackageId">
                <div class="mb-3">
                    <label class="form-label">Client</label>
                    <input type="text" class="form-control" id="assignClientName" readonly>
                </div>
                <div class="mb-3">
                    <label class="form-label">Custom Package</label>
                    <input type="text" class="form-control" id="assignPackageName" readonly>
                </div>
                <div class="mb-3">
                    <label class="form-label">Billing Cycle</label>
                    <select class="form-select" id="assignBillingCycle">
                        <option value="monthly">Bulanan</option>
                        <option value="yearly">Tahunan</option>
                        <option value="custom">Custom ({{ '{' }}duration_days{{ '}' }} hari)</option>
                    </select>
                    <small class="text-muted">Custom akan menggunakan harga bulanan dan durasi sesuai field durasi.</small>
                </div>
                <div class="form-check form-switch mb-2">
                    <input class="form-check-input" type="checkbox" id="assignAutoRenew" checked>
                    <label class="form-check-label" for="assignAutoRenew">Auto Renew</label>
                </div>
                <p class="text-muted small mb-0">
                    Saat assign: saldo client akan langsung dipotong dan paket aktif mulai hari ini.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="confirmAssign">
                    <i class="ti ti-check me-1"></i>Assign & Aktifkan
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let selectedAssignId = null;

    const table = $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route('admin.custom-packages.data') }}',
            data: function(d) {
                d.client_id = $('#filter-client').val();
                d.type = $('#filter-type').val();
                const status = $('#filter-status').val();
                if (status !== '') {
                    d.is_active = status;
                }
            }
        },
        columns: [
            {
                data: null,
                render: function(row) {
                    return `<strong>${row.client_name || '-'}</strong><br><small class="text-muted">${row.client_account || ''}</small>`;
                }
            },
            { data: 'name' },
            {
                data: 'type',
                render: function(data) {
                    const label = data === 'dedicated' ? 'Dedicated' : 'Shared';
                    const color = data === 'dedicated' ? 'bg-primary' : 'bg-success';
                    return `<span class="badge ${color}">${label}</span>`;
                }
            },
            {
                data: 'max_agents',
                className: 'text-center',
                render: function(data, type, row) {
                    if (row.type === 'shared') {
                        return '<span class="badge bg-info">Unlimited</span>';
                    }
                    return data ? `<span class="badge bg-secondary">${data}</span>` : '-';
                }
            },
            {
                data: 'price_monthly',
                render: function(data) {
                    return 'Rp ' + parseInt(data).toLocaleString('id-ID');
                }
            },
            {
                data: 'price_yearly',
                render: function(data) {
                    return 'Rp ' + parseInt(data).toLocaleString('id-ID');
                }
            },
            {
                data: 'duration_days',
                className: 'text-center'
            },
            {
                data: 'grace_period_days',
                className: 'text-center'
            },
            {
                data: 'assignments_count',
                className: 'text-center',
                render: function(data) {
                    return `<span class="badge bg-info">${data}</span>`;
                }
            },
            {
                data: 'is_active',
                className: 'text-center',
                render: function(data) {
                    return data
                        ? '<span class="badge bg-success"><i class="ti ti-check me-1"></i>Active</span>'
                        : '<span class="badge bg-danger"><i class="ti ti-x me-1"></i>Disabled</span>';
                }
            },
            {
                data: null,
                orderable: false,
                className: 'text-center',
                render: function(row) {
                    const editUrl = '{{ route('admin.custom-packages.edit', ':id') }}'.replace(':id', row.id);
                    const assignDisabled = row.is_active ? '' : 'disabled';
                    const deleteUrl = '{{ route('admin.custom-packages.destroy', ':id') }}'.replace(':id', row.id);

                    return `
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-info btn-assign" data-id="${row.id}" data-name="${row.name}"
                                    data-client="${row.client_name || ''}" data-duration="${row.duration_days}" ${assignDisabled}>
                                <i class="ti ti-badge me-1"></i>Assign
                            </button>
                            <a href="${editUrl}" class="btn btn-warning">
                                <i class="ti ti-pencil"></i>
                            </a>
                            <button class="btn btn-danger btn-disable" data-url="${deleteUrl}">
                                <i class="ti ti-ban"></i>
                            </button>
                        </div>
                    `;
                }
            }
        ],
        order: [[0, 'asc']]
    });

    $('#filter-client, #filter-type, #filter-status').on('change', function() {
        table.ajax.reload();
    });

    // Open assign modal
    $(document).on('click', '.btn-assign', function() {
        const btn = $(this);
        selectedAssignId = btn.data('id');

        $('#assignPackageId').val(selectedAssignId);
        $('#assignPackageName').val(btn.data('name'));
        $('#assignClientName').val(btn.data('client'));

        // Set placeholder text for custom option
        const duration = btn.data('duration');
        $('#assignBillingCycle option[value="custom"]').text(`Custom (${duration} hari)`);

        $('#assignAutoRenew').prop('checked', true);
        $('#assignModal').modal('show');
    });

    // Confirm assign
    $('#confirmAssign').on('click', function() {
        const id = $('#assignPackageId').val();
        const cycle = $('#assignBillingCycle').val();
        const autoRenew = $('#assignAutoRenew').is(':checked') ? 1 : 0;

        const btn = $(this);
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Memproses...');

        $.ajax({
            url: '{{ route('admin.custom-packages.assign', ':id') }}'.replace(':id', id),
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: {
                billing_cycle: cycle,
                auto_renew: autoRenew
            },
            success: function(res) {
                $('#assignModal').modal('hide');
                toastr.success(res.meta?.message || 'Custom package berhasil diassign');
                table.ajax.reload();
            },
            error: function(xhr) {
                toastr.error(xhr.responseJSON?.meta?.message || 'Gagal assign custom package');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ti ti-check me-1"></i>Assign & Aktifkan');
            }
        });
    });

    // Disable custom package (set is_active = false)
    $(document).on('click', '.btn-disable', function() {
        if (!confirm('Nonaktifkan custom package ini?')) return;
        const url = $(this).data('url');

        $.ajax({
            url: url,
            type: 'DELETE',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(res) {
                toastr.success(res.meta?.message || 'Custom package dinonaktifkan');
                table.ajax.reload();
            },
            error: function(xhr) {
                toastr.error(xhr.responseJSON?.meta?.message || 'Gagal menonaktifkan custom package');
            }
        });
    });
});
</script>
@endpush