@extends('back.layouts.main')
@section('title', 'Order problems')
@section('content')


    <div class="card">
        <div class="card-header">
            <div class="btn-group float-md-right">
                <form action="order_problems/solved">
                    <input type="hidden" name='order_ids' class='values'>
                    <input type="submit" value="تم الحل" class='btn btn-success'>
                </form>
            </div>
        </div>
        <div class="card-content overflow-auto collapse show">
            <div class="card-body card-dashboard">

                <table class="table table-responsive-sm table-striped table-bordered data-table">
                    <tr>
                        <th style="min-width: 65px"> 
                            #
                            <input type="checkbox" class="checkall">
                        </th>
                        <th>Title</th>
                        <th>Description</th>
                        <th>Order</th>
                        <th style="width: 65px">Actions</th>
                    </tr>
                    <form method='get' class='search'>
                        <tr>
                            <th><input type='text' name='id' value='{{ request('id') }}' class='form-control'></th>
                            <th><input type='text' name='title' value='{{ request('title') }}' class='form-control'></th>
                            <th><input type='text' name='description' value='{{ request('description') }}'
                                    class='form-control'></th>
                            <th><input type='text' name='order_id' value='{{ request('order_id') }}' class='form-control'>
                            </th>
                            <th style="width: 65px">
                                <input type='submit' class='btn btn-primary filter' name='search' value='filter' />
                            </th>
                        </tr>
                    </form>
                    @if ($data->isNotEmpty())
                        @foreach ($data as $row)
                            <tr>
                                <td>{{ $row->id }}
                                    <input type='checkbox' class='checkbox' name='order_ids[]' value='{{$row->id}}' >
                                </td>
                                <td>{{ $row->title }}</td>
                                <td>{{ $row->description }}</td>
                                <td><a href='orders/{{ $row->order_id }}'>{{ $row->order_id }}</a></td>
                                <td>
                                    <a class='btn btn-success btn-sm' href='order_problems/solved?order_id={{ $row->id }}'>
                                        تم الحل
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td class='text-center' colspan='100'>No Data Available</td>
                        </tr>
                    @endif
                </table>

                <!-- /.box-body -->
                <div class="box-footer clearfix">
                    {{ $data->appends(request()->except('page'))->links() }}
                </div>
            </div>
        </div>
    </div>
@stop

@push('footer')
    <script>
        $('.data-table input , .data-table select ').change(function() {
            if(!$(this).hasClass('daterange') && $(this).attr('type')!='checkbox' )
                $('.filter').trigger('click');
        });


        $('.checkall').click(function(){
            if($(this).is(':checked') )
                $('.checkbox').prop('checked' , 'checked' );
            else
                $('.checkbox').prop('checked' , null );
            add_values();
        })
        $(document).on('change', '.checkbox', add_values );
        function add_values(){
            var values = [];
            $('.checkbox').each(function(){
                if($(this).is(':checked'))
                    values.push($(this).val()) ;
            });
            $('.values').val(values.toString()) ;
        }
        
    </script>
@endpush

@section('breadcrumbs')
    <li class="breadcrumb-item active">Order problems</li>
@stop