@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('flash_message'))
        <div class="alert {{ session('flash_message_status') ? 'alert-error' : 'alert-success' }}"
            style="text-align: center;">
            <button class="close" data-dismiss="alert"></button>
            {{ session('flash_message') }}
        </div>
    @endif

    <div class="grid simple vertical mobile-scroll">
        <div class="grid-body no-border"><br>
            <div class="row">
                <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">

                    <div class='row control' style="margin-bottom: 10px; margin-top: 10px; background-color: #fff;">
                        <div class="col-sm-4 col-xs-12">
                            <div class="pull-right markaction">
                                @can('reasons-destroy')
                                    <a id="del" href="javascript:void(0)" class="btn btn-danger"
                                        data-msg="هل أنت متأكد من الحذف؟"
                                        data-url="{{ route('admin.reasons.bulkdelete') }}">حذف</a>
                                @endcan
                            </div>
                        </div>

                        <div class="col-sm-4 col-xs-12" style="text-align: center;">
                            <span class="bold" style="font-size: 20px;">أسباب إلغاء المجلس</span>
                        </div>

                        <div class="col-sm-4 col-xs-12">
                            @can('reasons-create')
                                <a href="javascript:void(0)" data-target="#imageModal" data-toggle='modal'
                                    class="btn btn-primary" style="margin-right: -2px">إضف سبب إلغاء</a>
                            @endcan

                            @cannot('reasons-create')
                                @can('reasons-destroy')
                                    <a href="#" class="btn btn-primary" style="visibility: hidden;">no visibility</a>
                                @endcan
                            @endcannot
                        </div>
                    </div>

                    <table class="table table-hover" id="datatable-example">
                        <thead>
                            <tr style="color: white;">
                                <th><input type="checkbox" class="group-checkable"
                                        data-set="#datatable-example .checkboxes" /></th>
                                <th>Id</th>
                                <th>سبب الإلغاء</th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Reason Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="labels-align-verticle" method="POST" action="{{ route('reasons.store') }}"
                    id="form_albumimage">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">إضافة سبب إلغاء</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group row">
                            <div class="input-with-icon right col-md-8 col-md-offset-1 col-sm-12">
                                <input type="text" name="name" class="form-control" required maxlength="60"
                                    id="title_field">
                                <span class="help">
                                    <span id="char_count_title">60</span> الحروف المتبقية
                                </span>
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label for="name" class="form-label">إسم سبب إلغاء</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" onclick='closeModal("#imageModal")'>
                            <span aria-hidden="true">إلغاء</span>
                        </button>
                        <button type="submit" class="btn btn-primary">تحديث</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Reason Modal -->
    <div class="modal fade" id="RowEditModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content" style="margin-top: 70px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">تحرير سبب إلغاء</h4>
                </div>
                <form class="labels-align-verticle" id="form_row_edit" method="POST"
                    action="{{ route('admin.reasons.editreason') }}">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="id_field" name="request_id" class="form-control">

                        <div class="form-group row">
                            <div class="right col-md-8 col-md-offset-1 col-sm-12">
                                <input type="text" id="name_field" name="name" class="form-control" required
                                    maxlength="60">
                                <span class="help">
                                    <span id="char_count_name">60</span> الحروف المتبقية
                                </span>
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label for="name" class="form-label text-right">إسم سبب إلغاء</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary btn-cons" id="submit_row_edit_form"
                            style="font: 18px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:bold;">
                            تحديث
                        </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>

@endsection

@section('page_script')
    <script type="text/javascript">
        function closeModal(id) {
            $(id).modal('hide');
        }

        $(document).on("click", "#request", function() {
            var request = $(this).data('request');
            console.log(request)
            // $("#name_field").val(request.name);
            $("#name_field").val(request.name).trigger("input");
            $('#id_field').val(request.id);
            $("#name_field").on("input", function() {
                updateFeatureCharLimitNum('name_field', 'char_count_name', 60);
            });
        });

        jQuery(document).ready(function($) {
            updateFeatureCharLimitNum('title_field', 'char_count_title', 60);
            $("#title_field").keyup(function(event) {
                updateFeatureCharLimitNum('title_field', 'char_count_title', 60);
            });
            $("#name_field").on("input", function() {
                updateFeatureCharLimitNum('name_field', 'char_count_name', 60);
            });
            $('#datatable-example').DataTable({
                processing: true,
                serverSide: true,
                order: [
                    [1, "desc"]
                ],
                language: {
                    search: "",
                    searchPlaceholder: "بحث",
                    zeroRecords: "لا يوجد محتوى",
                    processing: "<img src='{{ url('/') }}/assets/img/Webp.net-resizeimage.gif' />"
                },
                ajax: {
                    url: "{{ route('admin.reasons.datatable') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                },
                columns: [{
                        data: 'check',
                        name: 'check'
                    },
                    {
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'actions',
                        name: 'actions'
                    }
                ],
                iDisplayLength: 50,
                columnDefs: [{
                        targets: [1],
                        visible: false,
                        searchable: false
                    },
                    {
                        targets: [0, 1, 3],
                        searchable: false
                    },
                    {
                        targets: [0, 1, 2, 3],
                        orderable: false
                    }
                ]
            });

            $('#datatable-example_wrapper .dataTables_filter input').addClass("input-medium");
            $('#datatable-example_wrapper .dataTables_length select').addClass("select2-wrapper span12")
                .removeClass("form-control");
            $('#datatable-example input').click(function() {
                $(this).closest('tr').toggleClass('row_selected');
            });

            $(".select2-wrapper").select2({
                minimumResultsForSearch: -1
            });
        });
        $('#imageModal').on('show.bs.modal', function() {
            // Clear all inputs inside the form
            $(this).find('form')[0].reset();
        });
    </script>
@endsection