@extends('layouts.master')

@section('title', 'With Doctor | Alboosh - Timeless authenticity, born of the desert')

@section('title-topbar', 'Patients Waiting')

<!-- css insert -->
@section('css')

@endsection

<!-- content insert -->
@section('content')
<div class="container-fluid px-2 mt-3">


    <div id="successful_msg">

    </div>
    <div class="row justify-content-center position-relative">

        <div class="col-12 col-md-10 col-lg-8 col-xl-7 text-center">
            <img class="img-fluid p-md-2" width="500px" src="{{ URL::asset('img/dashboard/barcode1.svg') }}" alt="">

            <div class="search-eng-cont">

                <div class="p-1 bg-white rounded rounded-pill"
                    style="box-shadow: -1px 1rem 1rem 7px rgb(58 59 69 / 15%) !important; ">

                    <div class="input-group">
                        <input id="search-eng" type="search" placeholder="Scan your QR here .."
                            aria-describedby="button-add" class="form-control border-0 bg-transparent px-4" autofocus>
                        <div class="input-group-append pe-2 d-flex">
                            <button id="button-addon1" type="submit" class="btn btn-link text-primary typeahead"><i
                                    class="fa fa-search text-gray-300"></i></button>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>




</div>

@endsection

<!-- js insert -->
@section('js')

<script>
    $(document).ready(function() {

            //--------------------- fetch appoingtments -------------------


            //rate insert
            $(document).on('keyup', '#search-eng', function() {

                var patient_username = $(this).val();


                var url = "{{ route('sett.app_arrived_patient_qr_update', ':id') }}";
                url = url.replace(':id', patient_username);

                $.ajax({
                    url: url,
                    type: "POST",
                    data: {
                        '_token': "{{ csrf_token() }}",
                        '_method': "PATCH",
                        'status': 4,
                    },
                    success: function(data) {
                        if (data.status == 1) {
                            $("#successful_msg").html(' ').show();
                            $("#successful_msg").html(
                                '<div class="flash-msg shadow pt-3 text-center" style="background-color: #20cd7d;">' +
                                '<div class="mb-2">' +
                                '<i class="far fa-smile-beam text-xl"></i>' +
                                '</div>' +
                                '<h3>Welcome ' + data.name + '!</h3>' +
                                '<p style="color:#cfffe4">Happy to see you again</p>' +
                                '</div>').delay(5000).fadeOut()
                            $("#search-eng").val('');
                        } else {
                            $("#successful_msg").html(' ').show();
                            $("#successful_msg").html(
                                '<div class="flash-msg shadow pt-3 text-center" style="background-color:#ff4152;">' +
                                '<div class="mb-2 text-center">' +
                                '<i class="text-center far fa-frown text-xl"></i>' +
                                '</div>' +
                                '<h3>Sorry, it is invalid QR or date</h3>' +
                                '<p style="color:#ffb4bc">Please try again</p>' +
                                '</div>').delay(5000).fadeOut()
                            $("#search-eng").val('');
                        }
                    }
                });

            });

        });
</script>

@endsection