@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, 1],
                            "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