@extends('admin.layouts.container')

@section('content')
    <form>
        <div class="side-title">
            <div class="row justify-content-between">
                <div class="col-lg-6">
                    <h3>{{ $title }}</h3>
                </div>
                <div class="col-lg-2">
                    <a href="#" id="basic" class="butn"><i class="fa fa-print"></i> طباعة</a>
                </div>

{{--                <div class="col-lg-6 valign">--}}
{{--                    <div class="edit-buttons text-right w-100">--}}
{{--                        <a href="{{ route ('members.destroyAll') }}" data-method="delete" class="butn statusButns status_1 tableAction btn disabled bg-warning"> <span>{{ __('dashboard.sendToTrash') }}</span></a>--}}
{{--                        <a href="#" class="butn statusButns status_1 showArchive bg-primary"> <span> {{ __('dashboard.displayTrash') }} </span></a>--}}

{{--                        <a href="{{ route ('members.destroyAll') }}" data-method="delete" class="butn statusButns status_0 tableAction btn disabled bg-danger force"> <span> {{ __('dashboard.delete') }} </span></a>--}}
{{--                        <a href="{{ route ('members.restoreAll') }}" data-method="put" class="butn statusButns status_0 tableAction btn disabled bg-info"> <span> {{ __('dashboard.restore') }} </span></a>--}}
{{--                        <a href="#" class="butn statusButns status_0 showActive bg-primary"> <span> {{ __('dashboard.displayActive') }} </span></a>--}}
{{--                    </div>--}}
{{--                </div>--}}
            </div>
        </div>

        <!-- ------------ data table ------------- -->
        <div class="printable_table cont_print table_print">
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
{{--                <th scope="col">--}}
{{--                    <div class="custom-control custom-checkbox">--}}
{{--                        <input type="checkbox" class="custom-control-input" id="selectall" name="example1">--}}
{{--                        <label class="custom-control-label" for="selectall"> </label>--}}
{{--                    </div>--}}
{{--                </th>--}}
                <th scope="col">{{ __('members.name') }}</th>
                <th scope="col">{{ __('members.email') }}</th>
                <th scope="col">{{ __('members.phone') }}</th>
                <th scope="col">{{ __('members.id_number') }}</th>
{{--                <th scope="col" colspan="2">{{ __('dashboard.created_at') }}</th>--}}
                <th scope="col">{{ __('dashboard.processes') }}</th>
            </tr>
            </thead>

            <tbody class="response">
            <tr class="search_filter_form">
                <th scope="row">
                    <input type="text" name="name" value="{{ $request->name ?? '' }}" class="form-control" placeholder="">
                </th>
                <th scope="row">
                    <input type="text" name="email" value="{{ $request->email ?? '' }}" class="form-control" placeholder="">
                </th>
                <th scope="row">
                    <input type="text" name="phone" value="{{ $request->phone ?? '' }}" class="form-control" placeholder="">
                </th>
                <th scope="row">
                    <input type="text" name="id_number" value="{{ $request->id_number ?? '' }}" class="form-control" placeholder="">
                </th>
{{--                <td>--}}
{{--                    <input type="text" placeholder="{{ __('dashboard.date_from') }}" name="date_from" value="{{ $request->date_from ?? '' }}" class="date_from form-control">--}}
{{--                </td>--}}
{{--                <td>--}}
{{--                    <input type="text" placeholder="{{ __('dashboard.date_to') }}" name="date_to" value="{{ $request->date_to ?? '' }}" class="date_to form-control">--}}
{{--                </td>--}}
                <th scope="col"><button type="button" class="butn color small search"><span><i class="fas fa-search"></i></span></button></th>
            </tr>
            </tbody>


        </table>
        </div>
        <!-- ------------ sidemenu links ------------- -->
    </form>
{{--    <textarea id="printing-css" style="display:none;">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{font:normal normal .8125em/1.4 Arial,Sans-Serif;background-color:white;color:#333}strong,b{font-weight:bold}cite,em,i{font-style:italic}a{text-decoration:none}a:hover{text-decoration:underline}a img{border:none}abbr,acronym{border-bottom:1px dotted;cursor:help}sup,sub{vertical-align:baseline;position:relative;top:-.4em;font-size:86%}sub{top:.4em}small{font-size:86%}kbd{font-size:80%;border:1px solid #999;padding:2px 5px;border-bottom-width:2px;border-radius:3px}mark{background-color:#ffce00;color:black}p,blockquote,pre,table,figure,hr,form,ol,ul,dl{margin:1.5em 0}hr{height:1px;border:none;background-color:#666}h1,h2,h3,h4,h5,h6{font-weight:bold;line-height:normal;margin:1.5em 0 0}h1{font-size:200%}h2{font-size:180%}h3{font-size:160%}h4{font-size:140%}h5{font-size:120%}h6{font-size:100%}ol,ul,dl{margin-left:3em}ol{list-style:decimal outside}ul{list-style:disc outside}li{margin:.5em 0}dt{font-weight:bold}dd{margin:0 0 .5em 2em}input,button,select,textarea{font:inherit;font-size:100%;line-height:normal;vertical-align:baseline}textarea{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}pre,code{font-family:"Courier New",Courier,Monospace;color:inherit}pre{white-space:pre;word-wrap:normal;overflow:auto}blockquote{margin-left:2em;margin-right:2em;border-left:4px solid #ccc;padding-left:1em;font-style:italic}table[border="1"] th,table[border="1"] td,table[border="1"] caption{border:1px solid;padding:.5em 1em;text-align:left;vertical-align:top}th{font-weight:bold}table[border="1"] caption{border:none;font-style:italic}.no-print{display:none}</textarea>--}}
    <iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe>
@endsection



<script>
    /**
     * Importat to handle ajax requests for filters, deletes, trash and any proccess done on the table's data
     */
    var dataTable={
        route: '{{ route("courses.subscribersGrid", $course->id)}}'
    }
</script>
@section('inner_js')
    <script>
        $(document).ready(function () {
            $(document).on('click', '.active_member' , async function (e) {
                e.preventDefault();
                let url = $(this).data('href'),
                    method = 'get';

                const response=await ajax({
                    url,
                    dataType: 'json',
                    method,
                });
                if (response.message) {
                    $(this).children('i').toggleClass('fa-check text-success fa-times text-danger')

                }
            });
        });



        // $('.print_link').click(function (e) {
        //     e.preventDefault();
        //     window.frames["print_frame"].document.body.innerHTML = document.querySelector(".printable_table").innerHTML;
        //     window.frames["print_frame"].window.focus();
        //     window.frames["print_frame"].window.print();

        // });

        function printFunc(){

            // var a = document.getElementById('printing-css').value;
            // var b = document.querySelector(".printable_table").innerHTML;
            // window.frames["print_frame"].document.title = document.title;
            // window.frames["print_frame"].document.body.innerHTML = '<style>' + a + '</style>' + b;
            // window.frames["print_frame"].window.focus();
            // window.frames["print_frame"].window.print();

            // var printContent = document.querySelector(".printable_table");
            // var WinPrint = window.open('', '', 'width=900,height=650');
            // WinPrint.document.write(printContent.innerHTML);
            // WinPrint.document.close();
            // WinPrint.focus();
            // WinPrint.print();
            // WinPrint.close();
        }



    </script>
@endsection