@extends('admin.layouts.master')

@section('page_title', __('admin.All Parcels'))

@section('page_heading', __('admin.All Parcels'))

@section('page_text', __('admin.All Parcels'))

@section('page_breadcrumb_icon') <i class="ki-duotone ki-home fs-3 text-gray-500 me-n1"></i> @endsection

@section('page_breadcrumb_item', 'All Parcels')

@section('page_breadcrumb_item2', 'All Parcels List')

@section('css')
    <style>
        .scanning .result {
            background-color: green;
            color: #fff;
            padding: 20px;
        }

        .scanning .row {
            display: flex;
        }

        .scanning #reader {
            background: black;
            width: 500px;
        }

        .scanning button {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 6px;
        }

        .scanning a#reader__dashboard_section_swaplink {
            background-color: blue;
            /* Green */
            border: none;
            color: white;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 6px;
        }

        .scanning span a {
            display: none
        }

        .scanning #reader__camera_selection {
            background: blueviolet;
            color: aliceblue;
        }

        .scanning #reader__dashboard_section_csr span {
            color: red
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-fluh">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12  text-end mb-2">
                            @if (count($parcel) > 0)
                                <button type="button" class="btn btn-success" data-bs-toggle="modal"
                                    data-bs-target="#exampleModal">
                                    Start Scanning
                                </button>
                                @include('admin.parcel_tracking.scanning')
                            @endif
                        </div>
                        <div class="col-md-12">
                            <table class="body_cont table table-striped table-rounded border border-gray-300 table-row-bordered table-row-gray-300 gy-7 gs-7">
                                <tbody>
                                    @if (count($parcel) > 0)
                                        @foreach ($parcel as $item)
                                            <tr class="header_row ">
                                                <th colspan="5">{{ date('d-m-Y', strtotime($item->date)) }}</th>
                                            </tr>
                                            <tr class="firstrow text-center">
                                                <td>{{ $item->time }}</td>
                                                <td>{!! $item->parcel_no !!}</td>
                                                <td>{{ $item->apartment->name }}<br>floor{{ $item->apartment->floor_no }}<br>{{ $item->user->title }}
                                                    {{ $item->user->first_name }}<br>{{ $item->user->last_name }}</td>
                                                <td>
                                                    @if ($item->status == 'IN STORAGE')
                                                        <span class="btn btn-primary">{{ $item->status }}</span>
                                                    @elseif($item->status == 'COLLECTED')
                                                        <span class="btn btn-success">{{ $item->status }}</span>
                                                    @else
                                                        <span class="btn btn-danger">{{ $item->status }}</span>
                                                    @endif
                                                </td>
                                                <td class="tlink">
                                                    <a href="{{ url('admin/parcel/' . encrypt($item->id)) }}"><i class="fas fa-eye"></i></a>
                                                    <a href="javascript:void(0)" class="printButton"
                                                        data-id="{{ $item->id }}"><i
                                                            class="text-success fas fa-print"></i></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <p class="bg-light  text-center fs-1">-------</p>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        <iframe class="printFrame" style="display: none;"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="https://reeteshghimire.com.np/wp-content/uploads/2021/05/html5-qrcode.min_.js"></script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(document).ready(function() {
            $('.printButton').on('click', function() {
                // Load the content of the other view into the iframe
                var printFrame = $('.printFrame');
                var id = $(this).data('id');

                printFrame.attr('src', '/admin/parcel/print-label/' + id);

                // Wait for the iframe to load before calling window.print()
                printFrame.on('load', function() {
                    printFrame[0].contentWindow.print();
                });
            });
        });
        // after success to play camera Webcam Ajax paly to send data to Controller
        function onScanSuccess(data) {
            $.ajax({
                type: "POST",
                cache: false,
                url: "{{ action('\App\Http\Controllers\Admin\ParcelController@scanning') }}",
                data: {
                    "_token": "{{ csrf_token() }}",
                    data: data
                },
                success: function(response) {
                    // after success to get Answer from controller if User Registered login user by scanner
                    // and page change to Home blade
                    if (response.data == 1) {
                       
                        $('#result').text('Scanned Successfully!');
                        //var url = '/scanning-result/'+response.parcel.id;
                        $(location).attr('href', response.url);
                    } else {
                        return confirm('There is no parcel with this qr code');
                    }
                }
            })
        }
        var html5QrcodeScanner = new Html5QrcodeScanner(
            "reader", {
                fps: 10,
                qrbox: 250
            });
        html5QrcodeScanner.render(onScanSuccess);
        
    </script>
@endsection