@extends('front.includes.master')
@if (\App::getLocale() == 'ar')
    <style>
        .page-header,.entry-main-content,.detail-info ,.custom{
            direction: rtl;
            text-align: right;
        }
    
    </style>
@endif
@section('main-content')
    <!-- Slider Area -->
    <div class="page-header breadcrumb-wrap">
      <div class="container">
          <div class="breadcrumb">
              <a href="{{route('front')}}" rel="nofollow">{{ __('admin.web.Home') }}</a>
              <span></span> {{ __('admin.web.Warranty check') }}
          </div>
      </div>
  </div>
  
  <section class="mt-50 mb-50">
    <div class="container custom">
        <div class="row">
            <div class="col-lg-12">
                <div class="single-header mb-50 text-center">
                    <h1 class="font-xxl text-brand">{{ __('admin.web.Warranty check') }}</h1>
                </div>
                <div class="loop-grid pr-30">
                    <div class="row">
                        <div class="search-form">
                            <form action="#">
                                <input class="text-center" type="text" id="barcode"  name="barcode" placeholder="{{ __('admin.web.Enter barcode here') }}">
                                <button type="submit" onclick="searchBarCode()"> <i class="fi-rs-search"></i> </button>
                            </form>
                        </div>
                        <div class="text-center result mt-10"></div>
                
                    </div>
                </div>             
            </div>
        </div>
    </div>
</section>

<script>
    function searchBarCode() {
    event.preventDefault();
    // Get the data attributes from the button
      var barcode = $('#barcode').val();
     
      // Send the data to the server via AJAX
      $.ajax({
        type: 'POST',
        url: '{{route('search.barcode')}}',
        data: {
            barcode: barcode,
          "_token": "{{ csrf_token() }}",
        },
        success: function(response) {
         if (response.success==false) {
              toastr.error(response.error);
           $('.result').fadeIn().html('<div class="alert alert-danger" style="background:#c85d58;border-color:#c85d58;color:#fff">' + response.error + '</div>');
         }else{
              toastr.success(response.message);
          $('.result').html('<div class="alert alert-success" style="background:#72b473;border-color:#72b473;color:#fff">' + response.message + ' <i class="fi-rs-check"></i></div>');
         }
         

        },
        error: function(xhr, status, error) {
          // Handle errors
          toastr.error(error);
           $('.result').fadeIn().html('<div class="alert alert-danger">' + error + '</div>');
    
        }
      });
    }
    </script>

 @endsection