@extends('layouts.app')
@section('title', __('shop_rma.cases'))

@section('content')
<section class="content-header no-print">
    <div class="tw-flex tw-items-start tw-justify-between tw-flex-wrap tw-gap-3">
        <div>
            <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black tw-m-0">@lang('shop_rma.cases')</h1>
            <p class="tw-mt-1 tw-text-sm tw-text-gray-600">Track stock returned directly from your shops to suppliers.</p>
        </div>
        @can('shop_rma.create')
            <a href="{{ route('shop-rmas.create') }}" class="tw-dw-btn tw-dw-btn-primary tw-text-white">
                <i class="fa fa-plus"></i> @lang('shop_rma.create')
            </a>
        @endcan
    </div>
</section>

<section class="content no-print">
    @component('components.filters', ['title' => __('report.filters')])
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('shop_rma_filter_location', __('shop_rma.shop_location') . ':') !!}
                {!! Form::select('shop_rma_filter_location', $locations, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]) !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('shop_rma_filter_supplier', __('shop_rma.supplier') . ':') !!}
                {!! Form::select('shop_rma_filter_supplier', $suppliers, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]) !!}
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                {!! Form::label('shop_rma_filter_status', __('shop_rma.status') . ':') !!}
                {!! Form::select('shop_rma_filter_status', $statuses, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]) !!}
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label('shop_rma_filter_date_range', __('report.date_range') . ':') !!}
                {!! Form::text('shop_rma_filter_date_range', null, ['class' => 'form-control', 'readonly', 'placeholder' => __('lang_v1.select_a_date_range')]) !!}
            </div>
        </div>
    @endcomponent

    @component('components.widget', ['class' => 'box-primary', 'title' => __('shop_rma.cases')])
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover ajax_view" id="shop_rma_table" style="width:100%">
                <thead>
                    <tr>
                        <th>@lang('messages.date')</th>
                        <th>@lang('shop_rma.case_no')</th>
                        <th>@lang('shop_rma.supplier')</th>
                        <th>@lang('shop_rma.shop_location')</th>
                        <th>@lang('shop_rma.items')</th>
                        <th>@lang('shop_rma.total_quantity')</th>
                        <th>@lang('shop_rma.supplier_reference')</th>
                        <th>@lang('shop_rma.status')</th>
                        <th>@lang('messages.action')</th>
                    </tr>
                </thead>
            </table>
        </div>
    @endcomponent
</section>
@endsection

@section('javascript')
<script>
$(document).ready(function() {
    var table = $('#shop_rma_table').DataTable({
        processing: true,
        serverSide: true,
        order: [[0, 'desc']],
        ajax: {
            url: "{{ route('shop-rmas.index') }}",
            data: function(d) {
                d.location_id = $('#shop_rma_filter_location').val();
                d.supplier_id = $('#shop_rma_filter_supplier').val();
                d.status = $('#shop_rma_filter_status').val();
                if ($('#shop_rma_filter_date_range').val()) {
                    var picker = $('#shop_rma_filter_date_range').data('daterangepicker');
                    d.start_date = picker.startDate.format('YYYY-MM-DD');
                    d.end_date = picker.endDate.format('YYYY-MM-DD');
                }
            }
        },
        columns: [
            {data: 'created_at', name: 'shop_rmas.created_at'},
            {data: 'shop_rma_no', name: 'shop_rmas.shop_rma_no'},
            {data: 'supplier_display', name: 'supplier.name', orderable: false},
            {data: 'location_name', name: 'shop.name'},
            {data: 'items_count', name: 'items_count', searchable: false},
            {data: 'total_quantity', name: 'total_quantity', searchable: false},
            {data: 'supplier_reference', name: 'shop_rmas.supplier_reference'},
            {data: 'status', name: 'shop_rmas.status'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ]
    });

    $('#shop_rma_filter_date_range').daterangepicker(dateRangeSettings, function(start, end) {
        $('#shop_rma_filter_date_range').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
        table.ajax.reload();
    });
    $('#shop_rma_filter_date_range').on('cancel.daterangepicker', function() {
        $(this).val('');
        table.ajax.reload();
    });
    $('#shop_rma_filter_location, #shop_rma_filter_supplier, #shop_rma_filter_status').change(function() {
        table.ajax.reload();
    });
});
</script>
@endsection