@extends('layouts.user.app')
@section('page_title') فحص السيريال@endsection

<style>
    @keyframes flash {
        0%, 100% { opacity: 1; }  /* Fully visible at the start and end */
        50% { opacity: 0; }       /* Invisible in the middle */
    }
    .stolen-item {
        color: red;
        text-align: center;
        font-size: 2rem; /* Adjust font size for the number */
        font-weight: bold;
        animation: flash 1s ease-in-out 5; /* Apply the flash animation */
    }

    .stolen-item-text {
        color: red;
        text-align: center;
        font-size: 1rem; /* Adjust font size for the text */
        animation: flash 1s ease-in-out 5; /* Apply the flash animation */
    }
    .not-stolen-item {
        color: green;
        text-align: center;
        font-size: 2rem; /* Adjust font size for the number */
        font-weight: bold;
    }

    .not-stolen-item-text {
        color: green;
        text-align: center;
        font-size: 1rem; /* Adjust font size for the text */
    }
</style>
@section('content')
    <div class="row">
        <div class="col-lg-12 col-xl-12 col-md-12 col-sm-12">
            <div class="card custom-card">
                <div class="card-header">
                    <h3 class="card-title">فحص السيريال</h3>
                </div>
                <div class="card-body pb-0">
                    <form  action="{{route('serial_check')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="input-group mb-2">
                            <input type="text" name="serial" value="{{$serial??''}}" class="form-control numbersOnly" placeholder="قم بكتابة ارقام السيريال كاملة....." required>
                            <span class="input-group-append">
                                <input value="بحث" class="btn ripple btn-primary" style="min-width: 4.375rem;" type="submit">
                            </span>
                        </div>
                    </form>
                </div>
            </div>

            @if($checked)
                <div class="row">
                    <div class="col-md-12">
                        <div class="card item-card">
                            <div class="container d-flex justify-content-center align-items-center" style="height: 40vh;">
                                <div>
                                    @if($is_serial)
                                        <div class="stolen-item">{{$serial}}</div>
                                        <div class="stolen-item-text">الهاتف مُبَلَّغ بسرقته</div>
                                    @else
                                        <div class="not-stolen-item">{{$serial}}</div>
                                        <div class="not-stolen-item-text">الهاتف غير مُبَلَّغ بسرقته</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

        </div>
    </div>
@endsection