@extends('layouts.admin.base-dashboard')

@section('title', 'Riwayat Service Saya')

@push('style')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/dataTables.bootstrap4.min.css">
@endpush

@section('content')
<div class="container-fluid">
    <div class="card mt-4">
        <div class="card-header bg-primary text-white fw-bold">
            ✂️ Riwayat Service - {{ ucwords(auth()->user()->name) }}
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="dt-history" width="100%">
                    <thead>
                        <tr>
                            <th>Tanggal</th>
                            <th>Service</th>
                            <th>Harga</th>
                            <th>Diskon</th>
                            <th>Subtotal</th>
                            <th>Customer</th>
                            @if(auth()->user()->hasRole('cashier') || auth()->user()->hasRole('admin') || auth()->user()->hasRole('superadmin'))
                            <th>Capster</th>
                            @endif
                            <th>Approval</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.5/js/dataTables.bootstrap4.min.js"></script>
<script>
$(function() {
    var dt = $('#dt-history').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("capster.services.history.ajax") }}',
        columns: [
            { data: 'tanggal', name: 'created_at' },
            { data: 'layanan', name: 'service.name' },
            { data: 'harga', name: 'price', className:'text-end' },
            { data: 'diskon', name: 'discount', className:'text-end' },
            { data: 'subtotal', name: 'subtotal', className:'text-end' },
            { data: 'customer', name: 'transaction.customer.name' },
            @if(auth()->user()->hasRole('cashier') || auth()->user()->hasRole('admin') || auth()->user()->hasRole('superadmin'))
            { data: 'capster', name: 'transaction.capster.name' },
            @endif
            { data: 'approval', orderable: false, searchable: false },
        ],
        order: [[0, 'desc']],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.5/i18n/id.json'
        }
    });

    // Approval ComboBox Handler
    $('#dt-history').on('change', '.approval-combo', function() {
        var id = $(this).data('id');
        var status = $(this).val();
        var combo = $(this);
        combo.prop('disabled', true);
        $.ajax({
            url: '{{ route("capster.services.approval") }}',
            type: 'POST',
            data: {
                id: id,
                approval_status: status,
                _token: '{{ csrf_token() }}'
            },
            success: function(res) {
                dt.ajax.reload(null, false);
            },
            error: function() {
                alert('Gagal update status!');
                combo.prop('disabled', false);
            }
        });
    });
});
</script>
@endpush