@extends('app')
@section('content')
    <link href="{{ asset('assets/plugins/jquery-notifications/css/messenger.css')}}" rel="stylesheet" type="text/css" media="screen"/>
    <link href="{{ asset('assets/plugins/jquery-notifications/css/messenger-theme-flat.css')}}" rel="stylesheet" type="text/css" media="screen"/>

    @if(session()->has('flash_message'))
        <div class="alert {{ session()->has('flash_message_status') ? 'alert-error' : 'alert-success' }}">
            <button class="close" data-dismiss="alert"></button>
            {!! session('flash_message') !!}
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-error">
            <button data-dismiss="alert" class="close"></button>
            @foreach($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif

    {{--@if($request_type=='Add')
    {!! Breadcrumbs::render('admin.worthy.create') !!}
    @else
    {!! Breadcrumbs::render('admin.worthy.edit',$worthy) !!}
    @endif--}}

    <div class="row">
        <div class="col-md-12">
            <div class="grid simple">
                <div class="grid-title c-page-title">
                    <span>شخصيات</span>
                </div>

                <div class="grid-body"> <br>
                    <div class="row">
                        <div class="col-md-12 m-b-60">
                            <ul class="wizard-steps worthy narrow">
                                <li data-target="#step5" class=""> <a href="#tab5" class='tab5 last' data-toggle="tab"> <span class="step">6</span> <span class="title">ملخص الخبر </span> </a> </li>
                                <li data-target="#step4" class="active"> <a href="#tab4" class='tab4' data-toggle="tab"> <span class="step">5</span> <span class="title">المراجع </span> </a> </li>
                                <li data-target="#step3" class="complete"> <a href="#tab3" class='tab3' data-toggle="tab"> <span class="step"><i class="fa fa-check"></i></span> <span class="title">إعداد</span> </a> </li>
                                <li data-target="#step2" class="complete"> <a href="#tab2" class='tab2' data-toggle="tab"> <span class="step"><i class="fa fa-check"></i></span> <span class="title">الصور الإضافية</span> </a> </li>
                                <li data-target="#step2" class="complete"> <a href="#tab2" class='tab2' data-toggle="tab"> <span class="step"><i class="fa fa-check"></i></span> <span class="title">مضمون الخبر</span> </a> </li>
                                <li class="complete" data-target="#step1"> <a href="#tab1" class='tab1' data-toggle="tab"> <span class="step"><i class="fa fa-check"></i></span> <span class="title">المعلومات الأساسية</span> </a> </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    </div>

                    <!-- Show save btn if request is in edit -->
                    <div class="row form-actions" style="background: none;">
                        <div class="col-sm-12">
                            @if($request_type=='Edit')
                                <a href="{{ route('worthy.index', ['save_now' => 'true']) }}" class="btn btn-primary btn-cons" id="save_news">حفظ</a>
                            @endif
                            <a href="{{ route('admin.worthy.summary', ['worthy' => $worthy->id, 'q' => $request_type]) }}" class="btn btn-info btn-cons pull-right">التالى</a>
                            <a href="{{ route('admin.worthy.addrelated', ['worthy' => $worthy->id, 'q' => $request_type]) }}" class="btn btn-info btn-cons pull-right">الى الخلف</a>
                        </div>
                    </div>

                    <div class="padding-20">
                        <h3 class="text-center">المراجع</h3>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="controls">
                                <button type="button" class="btn btn-success btn-lg open-model-btn add_link" ><i class="fa fa-plus"></i> إضافة</button>
                                <div class="pull-right markaction">
                                    <a id="del" href="javascript:void(0)" class="btn btn-danger" data-url="{{ url('admin/worthy/bulkdeletereference') }}">حذف</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-10 col-md-offset-1">
                            <table class="table table-hover table-bordered" id="datatable-example" data-reorderUrl="">
                                <thead>
                                <tr>
                                    <th width="5%" class="disabled"><i class="fa fa-arrows"></i></th>
                                    <th width="5%"><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                                    <th width="30%">إسم المرجع</th>
                                    <th width="10%"></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($worthy->references()->orderBy('sequence','desc')->get() as $reference)
                                    <tr>
                                        <td><i class="fa fa-arrows-v"></i></td>
                                        <td><input type="checkbox" class="checkboxes" name="ids[]" value="{{ $reference->id }}" /></td>
                                        <td>{{ $reference->reference }}</td>

                                        <td>
                                            <a class="gallery-item btn btn-link edit_link" data-id="{{ $reference->id }}" data-title="{{ $reference->reference }}" href="javascript:void(0)"><span class="fa fa-edit fa-2x"></span></a>
                                            <form method="POST" action="{{ route('admin.worthy.destroyreference', $reference->id) }}" class="inline deleteaction" style="display: inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button class="btn btn-link" type="submit"><span class="fa fa-times fa-2x"></span></button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="form-actions" style="margin-left: -13px !important; margin-right: -13px !important; padding-bottom: 13px !important">

                        @if(request()->get('q') == 'Add')
                            <a href="javascript:void(0)" id="cancel_btn" class="btn btn-info btn-cons">إلغاء</a>
                        @else
                            <a href="{{ url('/admin/worthy/' . request()->get('type')) }}" class="btn btn-info btn-cons">إلغاء</a>
                        @endif

                        <a href="{{ route('admin.worthy.summary', ['worthy' => $worthy->id, 'q' => $request_type]) }}" class="btn btn-info btn-cons pull-right">التالى</a>
                        <a href="{{ route('admin.worthy.addrelated', ['worthy' => $worthy->id, 'q' => $request_type]) }}" class="btn btn-info btn-cons pull-right">الى الخلف</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">إضافة مرجع</h4>
                    </div>
                    <form method="POST" action="{{ route('admin.worthy.addreference', ['worthy' => $worthy->id, 'q' => $request_type]) }}">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="reference_id" id="reference_id" value="">
                        <div class="modal-body">
                            <div class="form-group row">
                                <div class="input-with-icon right col-md-8 col-md-offset-2 col-sm-12">
                                    <input type="text" name="reference" class="form-control" id="title_field" required maxlength="60" value="{{ old('reference') }}">
                                    <span class="help"><span id="char_title">40</span>  الحروف المتبقية</span><br>
                                </div>
                                <div class="col-md-2 col-sm-12 text-left">
                                    <label for="reference" class="form-label">إسم المرجع</label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" onclick="$('#title_field').val('');$('#url_field').val('');">إلغاء</button>
                            <button type="submit" class="btn btn-primary" id="links_form_submit">حفظ</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Bulk Action Form -->
        <form method="POST" class="inline" id="bulkaction">
            @csrf
            <input type="hidden" value="" name="ids" id="ids" />
        </form>

        <!-- Cancel Form -->
        <form method="POST" action="{{ route('worthy.destroy', ['worthy' => $worthy->id]) }}" class="inline" id="cancel_form">
            @csrf
            @method('DELETE')
            <input type="hidden" name="message" value="true"/>
            <input type="hidden" name="type" value="{{ request()->get('type') }}"/>
        </form>

        @endsection

        @section('page_script')

            <script type="text/javascript" language="javascript" class="init">

                jQuery(document).ready(function ($) {
                    // on saving redirect to index
                    $('#save_news').click(function(e){
                        $('#progressbar').show();
                    });

                    $('#cancel_btn').click(function(e){
                        $('#progressbar').show();
                        $('#cancel_form').trigger('submit');
                    });

                    //add button
                    $('.add_link').on('click',function(e){

                        $('#myModal .modal-title').text('إضافة مرجع');
                        $('#title_field').text('');
                        $('#myModal').modal('show');
                        updateFeatureCharLimitNum('title_field','char_title',40);

                    });

                    // inline edit, modal
                    $('.edit_link').on('click',function(e){
                        $('#reference_id').val($(this).data('id'));
                        $('#title_field').val($(this).data('title'));
                        $('#myModal .modal-title').text('تحرير المرجع');
                        $('#myModal').modal('show');
                        updateFeatureCharLimitNum('title_field','char_title',40);
                    });

                    /*Open Modal Functionality*/
                    $('body').append($('.modal'));
                    $('#myModal').hide();
                    $('.open-model-btn').click(function(){
                        $('#myModal').modal('show');
                    });

                    var table = $('#datatable-example').DataTable({
                        rowReorder: {
                            update: false
                        },
                        language: {
                            search: "",
                            searchPlaceholder: "بحث",
                            "zeroRecords": "لا يوجد محتوى",
                            processing: "<img src='{{ url('/') }}/assets/img/Webp.net-resizeimage.gif' />"
                        },
                        "iDisplayLength": 50,
                        "columnDefs": [
                            {
                                "targets": [0,2],
                                "searchable": false
                            },
                            { orderable: true, className: 'reorder', targets: 0 },
                            { orderable: false, targets: '_all' }
                        ]
                    });

                    table.on( 'row-reorder', function ( e, diff, edit ) {
                        $('table tbody tr:odd').removeClass('alt-row');
                        $('table tbody tr:even').removeClass().addClass('alt-row');
                        var ids = [($('table tbody tr').size() - 1)];
                        var idsIndex = 0;
                        $('table tbody tr').each(function (i) {
                            rcheckbox = $(this).find(':checkbox');
                            if (rcheckbox.length > 0) {
                                ids[idsIndex] = rcheckbox.val();
                                idsIndex++;
                            }
                        });
                        rids = ids.join(',');
                        var data = {};
                        for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
                            var rowData = table.row( diff[i].node ).data();
                            data[rowData.id] = {new: diff[i].newData, old: diff[i].oldData};
                        }
                        if(!$.isEmptyObject(data)){
                            $.post('{{ route("admin.worthy.reorder_reference") }}',{
                                ids: rids,
                                _token: $('meta[name="csrf-token"]').attr('content')
                            }, function(response){
                                // table.ajax.reload();
                            });
                        }
                    } );

                    $('#datatable-example_wrapper .dataTables_filter input').addClass("input-medium "); // modify table search input
                    $('#datatable-example_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
                    $('#datatable-example_wrapper .dataTables_length select').removeClass("form-control");

                    $('#datatable-example input').click(function () {
                        $(this).parent().parent().parent().toggleClass('row_selected');
                    });

                    $(".select2-wrapper").select2({minimumResultsForSearch: -1});

                    $("#title_field").keyup(function (event) {
                        updateFeatureCharLimitNum('title_field','char_title',40);
                    });
                });
            </script>
@endsection