@extends('authenticated')

@section('title', 'Transaction')

@section('content')
            <!-- Main Content -->
            <div id="content">

                @include('commons.topbar')

                                <!-- Begin Page Content -->
                <div class="container-fluid">
                    <div class="row mb-4">
                        <div class="col-lg-6">
                            <h1 class="h3 mb-2 text-gray-800">Transaction</h1>
                            <p class="mb-4">Check list or create and update for transactions.</p>
                        </div>
                        @if($user->role != 'customer')
                        <div class="col-lg-2">
                            <button type="button" class="btn btn-block btn-md btn-primary call-user-form mb-2">Create Transaction</button>
                        </div>
                        <div class="col-lg-2">
                            <button type="button" class="btn btn-block btn-md btn-success scan-form mb-2">Scan QR</button>
                        </div>
                        <div class="col-lg-2">
                            <button type="button" class="btn btn-block btn-md btn-info mobile-form mb-2">Input Mobile</button>
                        </div>
                        @endif
                    </div>
                    <div id="transaction-table-container">
                        <div class="table-responsive">
                            @if($user->role != 'customer')
                            <table class="table table-bordered" id="transaction-table-list">
                                <thead>
                                    <tr>
                                        <th>Service</th>
                                        <th>Amount</th>
                                        <th>Customer</th>
                                        <th>Cashier</th>
                                        <th>Points Earned</th>
                                        <th>Service Done</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="6">Fetching data...</td>
                                    </tr>
                                </tbody>
                            </table>
                            @else
                            <table class="table table-bordered" id="transaction-table-list">
                                <thead>
                                    <tr>
                                        <th>Service</th>
                                        <th>Amount</th>
                                        <th>Customer</th>
                                        <th>Cashier</th>
                                        <th>Points Earned</th>
                                        <th>Service Done</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="5">Fetching data...</td>
                                    </tr>
                                </tbody>
                            </table>
                            @endif
                        </div>
                    </div>


                </div>
                <!-- /.container-fluid -->

            </div>
            <!-- End of Main Content -->
            @include('commons.modal', ['modal_id'=>'user-modal', 'save_btn_classes' => 'save-user'])

@endsection
@section('modulescript')
    @parent
    <script type="text/javascript">
        var user = @json($user);
    </script>
    <script type="text/javascript" src="{{ mix('/js/jquery.dataTables.min.js') }}?ver{{env('APP_ASSETS')}}"></script>
    <script type="text/javascript" src="{{ mix('/js/dataTables.buttons.min.js') }}?ver{{env('APP_ASSETS')}}"></script>
    <script type="text/javascript" src="{{ mix('/js/dataTables.bootstrap4.min.js') }}?ver{{env('APP_ASSETS')}}"></script>
    <script type="text/javascript" src="{{ mix('/js/html5-qrcode.min.js') }}?ver{{env('APP_ASSETS')}}"></script>
    <script type="text/javascript" src="{{ mix('/js/modules/transaction.js') }}?ver{{env('APP_ASSETS')}}"></script>

@endsection