@extends('layouts.admin')
@push('css')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{asset('/lte/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css')}}">
@endpush
@php
    $locales=config('translatable.locales');
@endphp
@section('content')

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                @include('partials.alert')
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title pull-left">Filter</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="col-md-4">
                            <div class="form-group col-md-12">
                                <label for="page_id">Select Page</label>
                                <select class="form-control" id="page_id" name="page_id">
                                    <option value="">Select Page</option>
                                    @foreach($pages as $page)
                                        @php
                                            if($page['id']==$category_id){
                                                $selected='selected';
                                            }else{
                                                $selected='';
                                            }

                                        @endphp
                                        @if($page['is_leaf'])
                                            <option value="{{$page['id']}}" {{$selected}}>
                                                &nbsp;&nbsp;&nbsp;{{$page['title']}}</option>
                                        @else
                                            <option value="{{$page['id']}}" {{$selected}}>{{$page['title']}}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title pull-left">Casinos List</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="list_table" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Image</th>
                                <th>Casino</th>
                                <th>Bonus</th>
                                <th>Position</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($list as $item)
                                <tr>
                                    <td>{{$item->id}}</td>
                                    <td><img src="/uploads/companies/{{$item->company->image}}" style="max-height: 34px;"></td>
                                    <td><p class="norm">{{$item->company->name}}</p></td>
                                    <td><p class="norm">{{$item->name}}</p></td>
                                    <td>
                                        <div class="input-group input-group-sm">
                                            <input type="number" class="sort_id form-control" value="{{$item->pivot->sort_id}}">
                                            <span class="input-group-btn">
                                              <button type="button" class="btn btn-info btn-flat move-to-button" data-offer="{{$item->id}}">Go!</button>
                                            </span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group pull-right">
                                            <a href="#" class="btn btn-primary move-button" data-offer="{{$item->id}}"
                                               data-dir="up">
                                                <i class="fa fa-arrow-up"></i></a>
                                            <a href="#" class="btn btn-danger move-button" data-offer="{{$item->id}}"
                                               data-dir="down">
                                                <i class="fa fa-arrow-down"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
    </section>

@endsection
@push('scripts')
    <!-- DataTables -->
    <script src="{{asset('lte/bower_components/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('lte/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js')}}"></script>
    <script>
        $(document).ready(function () {
            $("#page_id").on('change', function () {
                window.location.href = "/admin/position/offer/" + $(this).val();
            });

            $(".move-button").on('click', function () {
                let category_id = parseInt({{$category_id}});
                let offer_id = $(this).data("offer");
                let direction = $(this).data("dir");
                $('<form>', {
                    "id": "move_form",
                    "method": "POST",
                    "html": '<input type="text" name="_token" value="{{csrf_token()}}" />' +
                        '<input type="text" name="category_id" value="' + category_id + '" />' +
                        '<input type="text" name="offer_id" value="' + offer_id + '" />' +
                        '<input type="text" name="direction" value="' + direction + '" />',
                    "action": '/admin/position/offer/move'
                }).appendTo(document.body).submit();
            });
            $(".move-to-button").on('click', function () {
                let category_id = parseInt({{$category_id}});
                let offer_id = $(this).data("offer");
                let new_value=$(this).parent().parent().find('.sort_id').val();
                $('<form>', {
                    "id": "move_form",
                    "method": "POST",
                    "html": '<input type="text" name="_token" value="{{csrf_token()}}" />' +
                        '<input type="text" name="category_id" value="' + category_id + '" />' +
                        '<input type="text" name="offer_id" value="' + offer_id + '" />' +
                        '<input type="text" name="new_value" value="' + new_value + '" />',
                    "action": '/admin/position/offer/move_to'
                }).appendTo(document.body).submit();
            });

            $('#list_table').DataTable({
                'paging': true,
                'lengthChange': false,
                'searching': true,
                'ordering': false,
                'info': true,
                'autoWidth': false,
                'columns': [
                    {width: 20, targets: 0},
                    {width: 100, targets: 0},
                    null,
                    null,
                    {width: 100, targets: 0},
                    {width: 80, targets: 0}
                ],
                'fixedColumns': true
            });
        });
    </script>
@endpush