@extends('layout')
@section('contents')
            <div class="container mt-5">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="card shadow">
                            <div class="card-header">
                                <h4 class="mb-0">Warranty Check</h4>
                            </div>
                            <div class="card-body">
                                @if(session('success'))
                                    <div class="alert alert-success">{{ session('success') }}</div>
                                @endif
                                @if($errors->any())
                                    <div class="alert alert-danger">
                                        <ul class="mb-0">
                                            @foreach($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                {{-- <form action="{{ route('warranty.check.submit') }}" method="POST" enctype="multipart/form-data"> --}}
                                    {{-- @csrf --}}
                                    
                                    <div class="mb-3">
                                        <label for="product_name" class="form-label">Produk</label>
                                        <input type="text" class="form-control" id="product_name" name="product_name" value="{{ old('product_name') }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label for="serial_number" class="form-label">Serial Number</label>
                                        <input type="text" class="form-control" id="serial_number" name="serial_number" value="{{ old('serial_number') }}" required>
                                    </div>
                                    <div class="d-grid gap-2">
                                        <button type="button" class="btn btn-primary btn-submit">Submit Warranty Claim</button>
                                    </div>
                                {{-- </form> --}}
                                    <table id="table-info" class="table mt-4">
                                        <tr>
                                            <th>Product Name</th>
                                            <td class="productname"></td>
                                        </tr>
                                        <tr>
                                            <th>Serial Number</th>
                                            <td class="serialnumber"></td>
                                        </tr>
                                        <tr>
                                            <th>Expired</th>
                                            <td class="expiredat"></td>
                                        </tr>
                                    </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
@endsection
@push('after-scripts')
<script>
    $("#table-info").hide();
    $('.btn-submit').on('click', function() {
        let product_name = $('#product_name').val();
        let serial_number = $('#serial_number').val();

        $.ajax({
            url: '{{ $apiUrl }}sn-confirmation',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                product_name: product_name,
                serial_number: serial_number
            },
            success: function(response) {
                if (response.exists) {
                    $('#table-info').show();
                    // Assuming response.data contains the warranty information
                    let warrantyData = response.data;
                    console.log(warrantyData);
                    // Display the data in the table
                    $('.productname').text(warrantyData.product_name);
                    $('.serialnumber').text(warrantyData.serial_number);
                    $('.expiredat').text(warrantyData.expired_at);

                } else {
                    $("#table-info").hide();
                    alert('No warranty information found.');
                }
            },
            error: function(xhr) {
                alert('An error occurred while checking the warranty.');
            }
        });

    });
</script>
@endpush