@extends('layouts.admin.app')

@section('content')
	<div class="modal fade text-left" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel120" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header bg-danger white">
                    <h5 class="modal-title" id="myModalLabel120">Delete Data</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this data?
                </div>
                <div class="modal-footer">
                    <form method="post" action="{{ url('delete/1') }}" class="btn-ok"> @csrf @method('delete')
                    	<button type="submit" class="btn btn-danger">
                    	  	Yes
                    	</button>
                  	</form>
					<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
                </div>
            </div>
        </div>
    </div>
	<div class="app-content content" id="table-hover-animation">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">List View</h2>
                            <div class="breadcrumb-wrapper col-12">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">
                                    	<a href="{{ url('home') }}">Home</a>
                                    </li>
                                    {{-- <li class="breadcrumb-item">
                                    	<a href="#">Data List</a>
                                    </li> --}}
                                    <li class="breadcrumb-item active">
                                    	Customize Box
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('include.alert')
            
            <div class="content-body">
                <!-- Data list view starts -->
                <section id="data-list-view" class="data-list-view-header">
                    
                    <!-- DataTable starts -->
                    <div class="table-responsive">
                        <table id="DataTables_Table_0" data-order='[[ 0, 1, "desc" ]]' class="table table-striped dataex-html5-selectors table-hover-animation">
                        {{-- <table id="DataTables_Table_0"  data-order='[[ 0, "desc" ]]' class="table table-striped table-hover-animation"> --}}
                            <thead>
                                <tr>
                                    {{-- <th></th> --}}
                                    <th>FULLNAME</th>
                                    <th>EMAIL</th>
                                    <th>PHONE NO.</th>
                                    <th>BOX TYPE</th>
                                    <th>ACTION</th>
                                </tr>
                            </thead>
                            <tbody>
                            	@foreach($data as $value)
                                <tr class="text-center">
                                	{{-- <td>{{ $count++ }}</td> --}}
                                	<td>{{ $value->name }}</td>
                                    <td>{{ $value->email }}</td>
                                	<td>
                                		{!! $value->phone_num !!}
                                	</td>
                                    <td>
                                        {{ ucfirst($value->paper_type) }}
                                    </td>
                                	<td>
                                        @if(Auth::user()->role != 'viewer')
                                		<a class="" href="#" data-toggle="modal" data-target="#info{{ $value->id }}">
                                			{{-- <i data-feather="edit"></i> --}}
                                            Details
                                		</a>
                                        |
                                		<a class="delte text-danger" href="#" data-href="{{ url('Admin/Corrugated-box/'.$value->id) }}" id="deletecart">
                                			{{-- <i data-feather="trash"></i> --}}
                                            Delete
					                	</a>
                                        @else 
                                        <small class="font-italic">No Action</small>
                                        @endif
                                	</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{-- pdf header conter --}}
                    {{-- <div class="py-1 mb-5 d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="text-black mb-0">Davao Fiberboard Packaging Plant, Inc.</h5>
                            <p class="mb-0">Km. 12, Sasa, Davao City, 8000, Philippines</p>
                            <p class="mb-0">Tel. Nos.: (63) 82 235-1246; (63) 82 234-907</p>
                            <p class="mb-0">Fax No.: (63) 82 235-1246</p>
                        </div>
                        <img style="width: 100px;" src="{{asset('images/fibre-transparent.png')}}" alt="">
                    </div> --}}
                </section>
            </div>
        </div>
    </div>
    
        
	@foreach($data as $value)
    @include('module.corrugated.info')
    @endforeach
@stop

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>

	<script type="text/javascript">

        let header =`<div class="py-1 mb-5 d-flex justify-content-between align-items-center">`+
                    `   <div>`+
                    `       <h5 class="text-black mb-0">Davao Fiberboard Packaging Plant, Inc.</h5>`+
                    `       <p class="mb-0">Km. 12, Sasa, Davao City, 8000, Philippines</p>`+
                    `       <p class="mb-0">Tel. Nos.: (63) 82 235-1246; (63) 82 234-907</p>`+
                    `       <p class="mb-0">Fax No.: (63) 82 235-1246</p>`+
                    `   </div>`+
                    `   <img style="width: 100px;" src="{{asset('images/fibre-transparent.png')}}" alt="">`+
                    `</div>`

        @foreach($data as $value)
        $('#exportBtn'+{{ $value->id }}).click(function () {
                let footer{{ $value->id }} = `<div class="text-center w-100 my-5 p-1" style="background-color: #dfba7f;"><p class="text-white mb-0">Requested date: {{ date("j F Y", strtotime( $value->created_at ) ) }}</p></div> <p class="text-italic text-center w-100" style="color: #dfba7f;">We assure quality</p> `
                footer = footer{{ $value->id }}

                let opt = {
                    margin:       [0,.5],
                    filename:     {{ $value->id }}+'_corrugated.pdf',
                    image:        { type: 'jpeg', quality: 1 },
                    html2canvas:  { scale: 2, letterRendering: true },
                    jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' },
                    // pdfCallback: pdfCallback{{ $value->id }}
                };
                
                // New Promise-based usage:
                html2pdf().set(opt).from(header+$('#content'+{{ $value->id }}).html()+footer).save();
                
                // Old monolithic-style usage:
                // html2pdf($('#content'+{{ $value->id }}).html(), opt);
                
                // function pdfCallback{{ $value->id }}(pdfObject) {
                //     let number_of_pages = pdfObject.internal.getNumberOfPages()
                //     let pdf_pages = pdfObject.internal.pages
                //     let myHeader = "Header info"
                //     let myFooter = "Footer info"
                //     for (let i = 1; i < pdf_pages.length; i++) {
                //         // We are telling our pdfObject that we are now working on this page
                //         pdfObject.setPage(i)
                
                //         pdfObject.text(myHeader, 10, 10)
                
                //         // The 10,200 value is only for A4 landscape. You need to define your own for other page sizes
                //         pdfObject.text(myFooter, 10, 200)
                //     }
                // }
            });

        @endforeach



        $('.delte').click(function () {
			let id = $(this).data('href');
			$('.btn-ok').attr('action', id);
			$('#deleteModal').modal('show');
		});
	</script>
@stop