@extends('layouts.app')
@section('title', __('superadmin::lang.support_ticket_oversight'))

@section('content')
    @include('superadmin::layouts.nav')

    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
            @lang('superadmin::lang.support_ticket_oversight')
            <small class="tw-text-sm md:tw-text-base tw-text-gray-700">@lang('superadmin::lang.support_ticket_oversight_help')</small>
        </h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-4">
                <div class="info-box bg-yellow"><span class="info-box-icon"><i class="fa fa-folder-open"></i></span>
                    <div class="info-box-content"><span class="info-box-text">@lang('lang_v1.open')</span><span class="info-box-number">{{ $counts['open'] }}</span></div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="info-box bg-red"><span class="info-box-icon"><i class="fa fa-clock-o"></i></span>
                    <div class="info-box-content"><span class="info-box-text">@lang('lang_v1.delayed')</span><span class="info-box-number">{{ $counts['delayed'] }}</span></div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="info-box bg-green"><span class="info-box-icon"><i class="fa fa-check"></i></span>
                    <div class="info-box-content"><span class="info-box-text">@lang('lang_v1.closed')</span><span class="info-box-number">{{ $counts['closed'] }}</span></div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                @component('components.widget', ['class' => 'box-primary'])
                    <div class="row">
                        <div class="col-md-4 form-group">
                            {!! Form::label('filter_business_id', __('business.business') . ':') !!}
                            {!! Form::select('filter_business_id', [0 => __('lang_v1.all')] + $businesses->toArray(), 0, ['class' => 'form-control', 'id' => 'filter_business_id']) !!}
                        </div>
                        <div class="col-md-4 form-group">
                            {!! Form::label('filter_status', __('sale.status') . ':') !!}
                            {!! Form::select('filter_status', ['' => __('lang_v1.all'), 'open' => __('lang_v1.open'), 'delayed' => __('lang_v1.delayed'), 'closed' => __('lang_v1.closed')], '', ['class' => 'form-control', 'id' => 'filter_status']) !!}
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="sa_support_ticket_table">
                            <thead>
                                <tr>
                                    <th>@lang('lang_v1.ticket_number')</th>
                                    <th>@lang('business.business')</th>
                                    <th>@lang('sale.product')</th>
                                    <th>@lang('lang_v1.claim_against')</th>
                                    <th>@lang('purchase.location')</th>
                                    <th>@lang('lang_v1.ticket_type')</th>
                                    <th>@lang('purchase.quantity_damaged')</th>
                                    <th>@lang('purchase.quantity_lost')</th>
                                    <th>@lang('lang_v1.tat_due_by')</th>
                                    <th>@lang('sale.status')</th>
                                    <th>@lang('messages.action')</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                @endcomponent
            </div>
        </div>
    </section>

    <div class="modal fade view_modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle">
        <div class="modal-dialog modal-lg" role="document"><div class="modal-content"></div></div>
    </div>
@endsection

@section('css')
<style>
    #sa_support_ticket_table tr.support-ticket-delayed-row > td { background-color: #f8d7da !important; }
</style>
@endsection

@section('javascript')
<script>
    $(function () {
        var table = $('#sa_support_ticket_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ action([\Modules\Superadmin\Http\Controllers\SupportTicketOversightController::class, "index"]) }}',
                data: function (d) {
                    d.business_id = $('#filter_business_id').val();
                    d.status = $('#filter_status').val();
                }
            },
            columns: [
                { data: 'ticket_number', name: 'ticket_number' },
                { data: 'business_name', name: 'business_name', orderable: false, searchable: false },
                { data: 'product_name', name: 'product_name', orderable: false, searchable: false },
                { data: 'claim_against', name: 'claim_against', orderable: false, searchable: false },
                { data: 'location_name', name: 'location_name', orderable: false, searchable: false },
                { data: 'ticket_type', name: 'ticket_type' },
                { data: 'quantity_damaged', name: 'quantity_damaged' },
                { data: 'quantity_lost', name: 'quantity_lost' },
                { data: 'tat_due', name: 'tat_due', orderable: false, searchable: false },
                { data: 'status', name: 'status' },
                { data: 'action', name: 'action', orderable: false, searchable: false },
            ],
            createdRow: function (row, data) {
                if (data.DT_RowClass) { $(row).addClass(data.DT_RowClass); }
            },
            order: [],
        });

        $('#filter_business_id, #filter_status').on('change', function () { table.ajax.reload(); });
    });
</script>
@endsection