@extends('admin.layout.master')
@section('content')
    <main id="app-main" class="app-main">

    <div class="wrap">
        <section class="app-content">
            <h3>@lang('admin.'.$title)</h3>
        </section><!-- #dash-content -->
    </div><!-- .wrap -->

    <div class="col-md-12">
        <div class="widget">
            <header class="widget-header">
                <h4 class="widget-title">@lang('admin.'.$title)</h4>
            </header><!-- .widget-header -->
            <hr class="widget-separator">
            <div class="widget-body">
                <div class="table-responsive">
                    <div id="default-datatable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">

                        <div class="row">
                            <div class="col-md-12">

                                @if(auth()->user()->hasPermission('create_'.$title))
                                    {{--                                    <button style="float: left" class="btn btn-info btn-sm" data-toggle="modal" data-target="#create_modal">--}}
                                    {{--                                        <i class="fa fa-plus"></i>--}}
                                    {{--                                        @lang('admin.add_memberships')--}}
                                    {{--                                    </button>--}}

                                    <a href="{{route($title.'.create')}}" style="float: left" class="btn btn-info btn-sm">
                                        <i class="fa fa-plus"></i>
                                        @lang('admin.add_tager')</a>
                                @else
                                    <button style="float: left" class="btn btn-info btn-sm disabled"> <i class="fa fa-plus"></i>@lang('admin.add_tager')</button>

                                @endif

                                <div>
                                    <div class="col-md-12">
                                        <div class="widget">

                                            <div class="widget-body">
                                                <table id="tager" class="table table-striped table-bordered" style="width:100%">
                                                </table>
                                            </div>
                                        </div><!-- .widget-body -->
                                    </div><!-- .widget -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    </main>

    <!-- Modal -->
    <div class="modal fade" id="times_data" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="append_data">
                       @include('admin.tagers.modal')
                    </div>

                    <button class="btn btn-success btn-sm" id="append_time"><i class="fa fa-plus"></i></button>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('admin.close')</button>
                    <button type="button" class="btn btn-primary">@lang('admin.save')</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            var table = $('#tager').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('tagers.index') }}",
                    type: 'GET',
                },
                // select: true,
                columns: [
                    {data: 'id', name: 'id' ,title:'id'},
                    {data: 'name', name: 'name',title: "@lang('admin.name')" },
                    {data: 'email', name: 'email',title: "@lang('admin.email')" },
                    // {data: 'tager_number', name: 'tager_number',title: "@lang('admin.tager_number')" },
                     {data: 'roles', name: 'roles',title: "@lang('admin.roles')" },
                     {data: 'categories', name: 'categories',title: "@lang('admin.categories')" },
                    {{--{data: 'work_start', name: 'work_start',title: "@lang('admin.work_start')" },--}}
                    {{--{data: 'work_end', name: 'work_end',title: "@lang('admin.work_end')" },--}}
                    {data: 'status', name: 'status',title: "@lang('admin.status')" },
                    // {data: 'QrCode', name: 'QrCode',title: "@lang('admin.QrCode')" },
                    {data: 'action', name: 'action',title:'action' ,searchable: 'false'},
                    // {data: 'add_lang', name: 'add_lang',title:'add_lang' ,searchable: 'false'}
                ]
            });

            $('body').on('submit','#delform',function (e) {
                e.preventDefault();
                var url = $(this).attr('action');
                // alert(url);

                $.ajax({
                    url: url,
                    method: "delete",
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function (response) {

                        if (response.status == 'success'){
                            new Noty({
                                type: 'success',
                                layout: 'topRight',
                                text: "تم الحذف بنجاح",
                                timeout: 2000,
                                killer: true
                            }).show();
                            table.ajax.reload();
                        }
                        // console.log(response);
                        // window.location.reload();
                    }
                });
            });

            $('body').on('submit','.stat',function (e) {
                e.preventDefault();

                var url = $(this).attr('action');

                {{--var url = '{{ route("users.show", ":id") }}';--}}
                {{--url = url.replace(':id', id);--}}

                $.ajax({
                    url: url,
                    method: "post",
                    data: new FormData(this),
                    dataType: 'json',

                    cache       : false,
                    contentType : false,
                    processData : false,

                    success: function (response) {

                        if(response.status == 'success'){
                            new Noty({
                                type: 'success',
                                layout: 'topRight',
                                text: "@lang('admin.done_the_statues_is_changed')",
                                timeout: 2000,
                                killer: true
                            }).show();
                        }
                        table.ajax.reload();
                        // $("#addform")[0].reset();

                        // window.location.reload();
                    },

                });

            })

            $('body').on('click','.statCh',function (e) {
                e.preventDefault();
                var id = $(this).data('id');
                $('#idClient').val(id);
            });


            $('body').on('submit','#statusChange',function (e) {
                e.preventDefault();

                var url = $(this).attr('action');

                $.ajax({
                    url: url,
                    method: "post",
                    data: new FormData(this),
                    dataType: 'json',

                    cache       : false,
                    contentType : false,
                    processData : false,

                    success: function (response) {
                        if(response.status == 'failed'){
                            new Noty({
                                type: 'warning',
                                layout: 'topRight',
                                text: "@lang('admin.this client not found')",
                                timeout: 2000,
                                killer: true
                            }).show();
                        }else{
                            if(response.status == 'success'){
                                new Noty({
                                    type: 'success',
                                    layout: 'topRight',
                                    text: "@lang('admin.done_the_statues_is_changed')",
                                    timeout: 2000,
                                    killer: true
                                }).show();
                            }
                            table.ajax.reload();
                            // $("#addform")[0].reset();
                        }
                        // window.location.reload();
                    },

                });

            });


            //======================times=======================================//

            /*$('body').on('click','.time_data',function (e) {
                e.preventDefault();
                var id = $(this).data('id');
                $('#tager_time').val(id);

                $.ajax({
                    url: "{{ route('tagers-times') }}",
                    method: "post",
                    data: {
                        id:id,
                        slug:'get',
                    },
                    dataType: 'html',
                    context: this,

                    // cache: false,
                    // contentType: false,
                    // processData: false,

                    success: function (data) {

                        $('#append_data').empty();
                        $('#append_data').append(data);
                    },

                });
            });

            $('body').on('click','#append_time',function (e) {
                e.preventDefault();
                var html = `<div class="row">
                              <div class="col-md-3" style="float: right">
                                                        <select class="form-control" >

                                                            @foreach(\App\models\Tager::days() as $days)

                            <option>{{$days}}</option>
                                                            @endforeach
                            </select>


                        </div>
<div class="col-md-3" style="float: right">
<input type='time' class="form-control" id="from" name="from[]" placeholder="@lang('admin.Times')" />
                          </div>
                          <div class="col-md-3" style="float: right">
                              <input type='time' class="form-control" id="to" name="to[]" placeholder="@lang('admin.Times')" />
                          </div>
                          <div class="col-md-3" style="float: right;display: flex">
                                  <button class="btn btn-info btn-sm added_new"><i class="fa fa-plus"></i></button>
                          </div>
                      </div>`;

                $('#append_data').append(html);
            });

            $('body').on('click','.added_new',function (e) {
                e.preventDefault();

                var tager_time_id  = $('#append_data').find('#tager_time_id').val();
                var day = $(this).parent().parent().closest('.row').find('#days').val();
                var from = $(this).parent().parent().closest('.row').find('#from').val();
                var to = $(this).parent().parent().closest('.row').find('#to').val();

                $.ajax({
                    url: "{{ route('tagers-times') }}",
                    method: "post",
                    data: {
                        id:tager_time_id,
                        slug:'add',
                        day:day,
                        from:from,
                        to:to,
                    },
                    dataType: 'json',
                    context: this,

                    // cache: false,
                    // contentType: false,
                    // processData: false,

                    success: function (response) {

                        if (response.status == 'success') {

                            var html = `                        <button type="button"
                                class="btn btn-warning btn-sm  edit_new" data-id="${response.data.id}"><i class="fa fa-edit"></i></button>

                        <button type="button"
                                class="btn btn-danger btn-sm  delete_new" data-id="${response.data.id}"><i class="fa fa-trash"></i></button>
`;
                            $(this).parent().empty().append(html);
                        }
                        else{

                        }
                    },

                });


            });

            $('body').on('click','.edit_new',function (e) {
                e.preventDefault();

                var idArrtive  = $('#append_data').find('#tager_time_id').val();
                var id  = $(this).data('id');
                var day = $(this).parent().parent().closest('.row').find('#days').val();
                var from = $(this).parent().parent().closest('.row').find('#from').val();
                var to = $(this).parent().parent().closest('.row').find('#to').val();

                // console.log(idArrtive,from,to);
                $.ajax({
                    url: "{{ route('tagers-times') }}",
                    method: "post",
                    data: {
                        id:idArrtive,
                        idtime:id,
                        day:day,
                        slug:'edit',
                        from:from,
                        to:to,
                    },
                    dataType: 'json',
                    context: this,

                    // cache: false,
                    // contentType: false,
                    // processData: false,

                    success: function (response) {

                        if (response.status == 'success') {
                            new Noty({
                                type: 'success',
                                layout: 'topRight',
                                text: "@lang('admin.successfuly_edited')",
                                timeout: 2000,
                                killer: true
                            }).show();
                        }
                        else{
                            new Noty({
                                type: 'success',
                                layout: 'topRight',
                                text: "@lang('admin.problem')",
                                timeout: 2000,
                                killer: true
                            }).show();
                        }
                    },

                });


            });

            $('body').on('click','.delete_new',function (e) {
                e.preventDefault();

                var idArrtive  = $('#append_data').find('#tager_time_id').val();
                var id  = $(this).data('id');
                var from = $(this).parent().parent().closest('.row').find('#from').val();
                var to = $(this).parent().parent().closest('.row').find('#to').val();

                console.log(idArrtive,id,from,to);
                $.ajax({
                    url: "{{ route('tagers-times') }}",
                    method: "post",
                    data: {
                        id:idArrtive,
                        idtime:id,
                        slug:'delete',
                        from:from,
                        to:to,
                    },
                    dataType: 'json',
                    context: this,

                    // cache: false,
                    // contentType: false,
                    // processData: false,

                    success: function (response) {

                        if (response.status == 'success') {
                            new Noty({
                                type: 'success',
                                layout: 'topRight',
                                text: "@lang('admin.successfuly_deleted')",
                                timeout: 2000,
                                killer: true
                            }).show();
                            $(this).parent().parent().closest('.row').remove();
                        }
                        else{
                            new Noty({
                                type: 'success',
                                layout: 'topRight',
                                text: "@lang('admin.problem')",
                                timeout: 2000,
                                killer: true
                            }).show();
                        }
                    },

                });


            });*/

            //======================times=======================================//


        });
    </script>


@endpush