@extends('layouts.admin')

@section('title', 'Shops QR Code List')

<style>
    /* p {
        font-size: 13px;
    } */

    .search-btn {
        height: 50%;
    }
</style>

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
@endsection

@section('breadcrumb-item')
    <li class="breadcrumb-item active">QR Code List</li>
@endsection

@section('content')
    <div class="card " >
        <div class="card-header bg-theme">
            <p class="h5 pt-2 mb-0 float-left"><i class="fa fa-list pr-1"></i>Shops QR Code List</p>
            <div class="btn-group float-right ml-2" role="group" aria-label="Button group">
                <button data-toggle="tooltip" id="download-button" data-placement="bottom" title="Download List" class="btn btn-info">
                    <i class="fa fa-download"></i>
                </button>
                <button data-toggle="tooltip" id="print-btn" data-placement="bottom" title="Print" class="btn btn-warning">
                    <i class="fa fa-print" aria-hidden="true"></i>
                </button>
            </div>
            <div class="form-inline float-right">
                <form action="{{ url('/admin/shops/qrcode') }}" method="get" class="form-inline float-right">
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control" type="text" name="q" value="{{ request()->query('q') }}"
                                placeholder="Search in Shops">
                            <div class="input-group-append">
                                <button class="btn btn-success" type="submit"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <br>
        <form action="{{ route('admin.shop.qrcode.search') }}" method="POST">
            @csrf
            <div class="row ml-2">
                <div class="col-3">
                    <div class="form-group">
                        <label>Shops</label>
                        <select class="form-control js-example-theme-multiple" name="shop_ids[]" multiple>
                            @foreach (_shops() as $shop)
                                <option value="{{ $shop->id }}"
                                    {{ isset($shop_ids) && in_array($shop->id, $shop_ids) ? 'selected' : '' }}>
                                    {{ $shop->name }} [{{ $shop->area ? $shop->area->name : '' }}]
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        <label>Areas</label>
                        <select class="form-control js-example-theme-multiple" name="area_ids[]" multiple>
                            @foreach (_areas() as $area)
                                <option value="{{ $area->id }}"
                                    {{ isset($area_ids) && in_array($area->id, $area_ids) ? 'selected' : '' }}>
                                    {{ $area->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn mt-4 btn-sm btn-success col-md-3 search-btn">
                    Search
                </button>
            </div>
        </form>
        <br>
<div style="margin: 0 auto">

        <div id="qr_list" style="line-height: 0 !important ;width: 740px; margin-top: 20px ; margin-left: 22px ;">
            <div  style="width: 740px;">
                <div class="row">
                    @php $boxCount = 0; @endphp
                    @php $boxtwo = 0; @endphp

                    @if (!empty($shops) && $shops->count())
                        @foreach ($shops as $shop)
                            @php
                                $base = url(getenv('APP_URL'));
                                $part1 = '/admin/shop/';
                                $id = $shop->id;
                                $part2 = '/show';
                                $shop_url = $base . $part1 . $id . $part2;
                            @endphp
                            <div class=" p-2 m-1 " style=" width: 48% ; height: 210px ; border: 1px solid black">
                                <div class="d-flex">
                                    <div class=" pr-0">
                                        <div style="height: 137px;  width: 140px;border: 1px solid black ">
                                            <div class="p-1 text-center"> {{ QrCode::size(125)->generate($shop_url) }}
                                            </div>
                                        </div>
                                        <div class="mt-1 p-1" style="border: 1px solid black ; width: 140px; height: 53px">
                                            <p style="font-size: 10px; margin-bottom: 0px;margin-top: 0px ; line-height: 1">
                                                <b>SHOP NAME:</b>
                                            </p>
                                            <p style="margin-bottom: 0px; margin-top: 0px; font-size: 8px;">
                                                {{-- <b>{{ $shop->name }}</b> --}}
                                               <b> {{ substr($shop->name, 0, 23) }}</b>
                                            </p>
                                            <p style="margin-bottom: 0px;font-size: 8px;line-height: 1.4"><b><span style="font-size: 10px !important">AREA:<span></b>
                                                <b>{{ $shop->area->name ?? '' }}</b>
                                            </p>
                                        </div>
                                    </div>
                                    <div style="padding-left:10px ">
                                        <div>
                                            <div class="">
                                                <p class="text-center" style="font-size: 12px ; margin-bottom: 0px ; font-weight: 900">FOR ORDER
                                                    & COMPLAINT
                                                </p>
                                            </div>
                                        </div>
                                        <div style="width: 192px ; height: 97px">
                                            <img alt="logo" style="width: 100%;  height: 100%; display: block;"
                                                src="{{ asset('assets/images/icon2.png') }}">
                                        </div>
                                        <p class="mt-1" style="margin-bottom: 0px;font-size: 10px;line-height: 1.5">
                                            Suit #
                                            102. 1st Floor , Fine center
                                            Commerical. Block-V , Gulshan-e-iqbal Karachi. <i class="fa-solid fa-phone"></i>
                                            +922134155063 </p>
                                        <p style="margin-bottom: 0px; font-size: 9px; margin-top: 2px;line-height: 2 ; font-weight: 700"><i
                                                class="fa-solid fa-globe"></i> bdm@brightvision.com.pk</p>
                                        <p style="margin-bottom: 0px; font-weight: 700; font-size: 9px;line-height: 1"><i
                                                class="fa-solid fa-globe"></i>
                                            www.brightvision.com.pk</p>
                                    </div>
                                </div>
                            </div>
                            @php $boxCount++; @endphp
                            @if ($boxCount % 10 == 0)
                                <!-- Insert page break after every 10 boxes -->
                                <div style="page-break-before: always;"></div>
                            @endif
                            @php $boxtwo++; @endphp
                            @if ($boxtwo % 10 == 0)
                                <div style="width: 100% ; height: 20px"></div>
                            @endif
                        @endforeach
                    @endif
                </div>
            </div>
        </div>

        <br>
        @if(!request()->has('shop_ids') && !request()->has('area_ids'))
            {!! $shops->links() !!}
        @endif
    </div>
</div>
@endsection
@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            $('.js-example-theme-multiple').select2({
                theme: 'classic',

            });
        });
        const qrListContent = document.getElementById('qr_list').innerHTML;
        const printButton = document.getElementById('print-btn');

        function generatePrint() {
            // Open a new window with the content and print it.
            const printWindow = window.open('', '_blank');
            printWindow.document.write(qrListContent);
            printWindow.document.close();
            printWindow.print();
        }

        printButton.addEventListener('click', generatePrint);
    </script>
@endsection