@extends('dashboard.layouts.master')

@section('css')
    <!-- DataTables -->
    <link href="{{ URL::asset('dashboard/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('dashboard/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Responsive datatable examples -->
    <link href="{{ URL::asset('dashboard/plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Sweet Alert -->
    <link href="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css">
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">{{trans('labels.exams')}}</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item active">{{trans('labels.exams')}}</li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

{{--                    <h4 class="mt-0 header-title">Buttons example</h4>--}}
{{--                    <p class="text-muted m-b-30">The Buttons extension for DataTables--}}
{{--                        provides a common set of options, API methods and styling to display--}}
{{--                        buttons on a page that will interact with a DataTable. The core library--}}
{{--                        provides the based framework upon which plug-ins can built.--}}
{{--                    </p>--}}

                    <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                        <tr>
                            <th>{{trans('labels.student_id')}}</th>
                            <th>{{trans('labels.phone')}}</th>
                            <th>{{trans('labels.national_id_image')}}</th>
                        </tr>
                        </thead>

                        <tbody>
                            @foreach($data as $exam)
                                <tr>
                                    <td>{{$exam->student_id}}</td>
                                    <td>{{$exam->phone}}</td>
                                    <td><img style="width: 200px;" src="{{$exam->national_id_image_full_path}}"></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div> <!-- end col -->
    </div> <!-- end row -->
@endsection

@section('script')
    <!-- Required datatable js -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <!-- Buttons examples -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.buttons.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/pdfmake.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/vfs_fonts.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.html5.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.print.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.colVis.min.js') }}"></script>
    <!-- Responsive examples -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.responsive.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>

    <!-- Datatable init js -->
{{--    <script src="{{ URL::asset('dashboard/assets/pages/datatables.init.js') }}"></script>--}}


    <!-- Sweet-Alert  -->
    <script src="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.js') }}"></script>

    <script>
        $('.refused').click(function (event) {
            event.preventDefault();
            const row = this;
            const id = $(this).attr('data-id');
            Swal.fire({
                title: "{{trans('labels.what_reason_refuse')}}",
                input: 'text',
                showCancelButton: true,
                confirmButtonText: '{{trans('labels.ok')}}',
                confirmButtonColor: "#626ed4",
                cancelButtonColor: "#ec4561",
                cancelButtonText: '{{trans('labels.cancel')}}',
                preConfirm: function (value) {
                    if (value === "") {
                        Swal.showValidationMessage("{{trans('labels.message_required')}}");
                        return false
                    }
                    return new Promise(function (resolve, reject) {
                        var url = '{{route('admin.student-management.changeStatus', ['id' => ':id', 'status' => 'refused'])}}?message='+value;
                       location.href = url.replace(':id', id);
                    })
                },
            });
        });

        $('.blocked').click(function (event) {
            event.preventDefault();
            const row = this;
            const id = $(this).attr('data-id');
            Swal.fire({
                title: "{{trans('labels.what_reason_block')}}",
                input: 'text',
                showCancelButton: true,
                confirmButtonText: '{{trans('labels.ok')}}',
                confirmButtonColor: "#626ed4",
                cancelButtonColor: "#ec4561",
                cancelButtonText: '{{trans('labels.cancel')}}',
                preConfirm: function (value) {
                    if (value === "") {
                        Swal.showValidationMessage("{{trans('labels.message_required')}}");
                        return false
                    }
                    return new Promise(function (resolve, reject) {
                        var url = '{{route('admin.student-management.changeStatus', ['id' => ':id', 'status' => 'blocked'])}}?message='+value;
                        location.href = url.replace(':id', id);
                    })
                },
            });
        });

        $(document).ready(function() {
            $('#datatable').DataTable();

            var table = $('#datatable-buttons').DataTable({
                lengthChange: false,
                buttons : [
                    {
                        extend : 'pdfHtml5',
                        customize: function(doc) {
                            //
                            //         //ensure doc.images exists
                            //         doc.images = doc.images || {};
                            //
                            //         //build dictionary
                            //
                            //         //..add more images[xyz]=anotherDataUrl here
                            //
                            //         //when the content is <img src="myglyph.png">
                            //         //remove the text node and insert an image node
                            for (var i=1;i<doc.content[1].table.body.length;i++) {


                                $.each(doc.content[1].table.body[i], function (index, cell){

                                    if (cell.text.includes('img')) {

                                        let imgSrc = $(cell.text).attr('src');

                                        var theImage = new Image();

                                        theImage.src = imgSrc;
                                        // doc.images[imgSrc] = getBase64Image(theImage);

                                        delete cell.text;

                                        cell.image  = getBase64Image(theImage);
                                        cell.height = 100;
                                        cell.width = 400;

                                        console.log(cell);
                                    }else{
                                        cell.width =100;
                                    }
                                })

                            }
                        },
                        exportOptions : {
                            stripHtml: false
                        }
                    }],

            });


            function getBase64Image(img) {
                var canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);
                return canvas.toDataURL("image/png");
            }

            table.buttons().container()
                .appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
        } );

    </script>
@endsection