@extends('layouts.app')
@section('title')
    {{ __('messages.Barcode reader') }}
@endsection
@section('style')
<link
href="{{ asset('assets/vendor/libs/toastr/toastr.css') }}"
rel="stylesheet">
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages.Barcode reader') => 'active',
            ],
        ])


        <!-- Basic Bootstrap Table -->
        <div class="card p-3">
            <div class="input-group input-group-merge form-send-message">
                <input type="text" class="form-control message-input search_input" placeholder="CODE" aria-describedby="text-to-speech-addon">
                <span class="message-actions input-group-text" id="text-to-speech-addon">
                    <button type="button" class="btn btn-outline-primary waves-effect btn_search" >
                        <span class="ti-xs ti ti-search me-1"></span>{{ __("messages.Search") }}
                      </button>
                </span>
            </div>

            <div class="row mt-5 justify-content-center box_booking d-none">
                <div class="col-8">
                    <div class="card mb-4 bg-gradient-primary">
                        <div class="card-body">
                            <div class="row justify-content-between mb-3">
                                <div
                                    class="col-md-12 col-lg-7 col-xl-12 col-xxl-7 text-center text-lg-start text-xl-center text-xxl-start order-1 order-lg-0 order-xl-1 order-xxl-0">
                                    <h4 class="card-title text-white text-nowrap">CODE  : <span class="code_value"><span>  </h4>
                                    <p class="card-text text-white seat_value">

                                    </p>
                                </div>
                                <span class="col-md-12 col-lg-5 col-xl-12 col-xxl-5 text-center mx-auto mx-md-0 mb-2 "><img class="qrcode_value"
                                        src="{{ asset('uploads/booking-qr/0K8Ya90i8r1717241572EWKyosxRwx.png') }}" class="w-px-75 m-2"
                                        alt="3dRocket"></span>
                            </div>
                            <button  class="btn btn-white text-primary w-100 fw-medium shadow-md waves-effect waves-light"
                                data-bs-target="#upgradePlanModal" data-bs-toggle="modal">
                                {{ __("messages.Print") }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--/ Basic Bootstrap Table -->

    </div>
@endsection

@section('script')
<script src="{{ asset('assets/vendor/libs/toastr/toastr.js') }}"></script>
<script>
      toastr.options = {
        "closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": false,
        "positionClass": "toast-top-right",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    }


    $(function(){
        $(".btn_search").click(function(){
            $.ajax({
                url:"{{ route('admin.tickets.scan_data') }}?code="+$(".search_input").val(),
                success:function(res){
                    if(res.data){
                        $(".box_booking").removeClass("d-none")
                        $(".code_value").html(res.data.code)
                        $(".seat_value").html(res.data.seat)
                        $(".qrcode_value").src(res.data.qr_code)
                    }else{
                        toastr["error"]("{{ __('messages.Not found') }}")
                    }
                },
                error:function(res){
                    toastr["error"]("erorr !")
                }
            })
        })
    })
</script>
@endsection