<!doctype html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.5.3/css/bootstrap.min.css" integrity="sha384-JvExCACAZcHNJEc7156QaHXTnQL3hQBixvj5RV5buE7vgnNEzzskDtx9NQ4p6BJe" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('css/home.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal&display=swap" rel="stylesheet">
    <style>
        body{
            font-family: "Tajawal", serif;
            font-weight: 400;
            font-style: normal;
        }

    </style>
    <title>شركة كليك</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light d-flex justify-content-center align-items-center">
    <a class="navbar-brand" href="#">
        <img src="{{ asset('img/logo.png') }}" width="180" alt="شركه كليك">
    </a>
{{--    <div class="collapse navbar-collapse" id="navbarNav">--}}
{{--        <ul class="navbar-nav ml-auto">--}}
{{--            <li class="nav-item active">--}}
{{--                <a class="nav-link" href="tel:01090006526">--}}
{{--                    01090006526--}}
{{--                    <span>&#9742;&#65039;</span>--}}
{{--                </a>--}}
{{--            </li>--}}
{{--            <li class="nav-item active">--}}
{{--                <a class="nav-link" href="tel:01015515978">--}}
{{--                    01015515978--}}
{{--                    <span>&#128241;</span>--}}
{{--                </a>--}}
{{--            </li>--}}
{{--        </ul>--}}
{{--    </div>--}}
</nav>
  <div class="container main">
{{--      <div class="text-center">--}}
{{--          <h2 class="text-secondary mt-5 mb-3"><a href="/"><img src="{{ asset('img/logo.png') }}" width="100" alt="شركه كليك"></a></h2>--}}
{{--      </div>--}}
    <div class="text-center">
        <h5 class="text-secondary mt-5 mb-3" id="query">إستعلام عن حالة جهاز</h5>
    </div>
      <div class="text-center">
          <form action="/result" class="text-center">
              <input  type="text" class="m-0" name="serial" placeholder="معرّف الجهاز" value="{{ old('serial') }}" autofocus>
              <button type="submit" class="btn btn-primary">إستعلم</button>
              <span class="d-block text-muted notice">معلومة: معرّف الجهاز مرفق مع وصل الإستلام</span>
          </form>
      </div>
      @if(Session::has('error'))
          <div class="alert alert-warning mt-3">{{ Session::get('error') }}</div>
      @endif

      @if(isset($device))
        <div class="text-center mt-5" id="app">
          <h4 class="text-primary mb-3">النتيجة</h4>
          <div class="container">
              <div class="row">
                  <div class="col-sm-12 col-md-3 mt-3">
                      <span>إسم العميل: </span><span>{{ $device->customer->name }}</span>
                  </div>
                  <?php  $arr=['','كومبيوتر','موبايل','لابتوب']?>
                  <div class="col-sm-12 col-md-3 mt-3">
                      <span>نوع الجهاز: </span><span>{{ $arr[$device->type] }}</span>
                  </div>
                  <div class="col-sm-12 col-md-3 mt-3">
                      <span>ماركة الجهاز: </span><span>{{ $device->brand}}</span>
                  </div>
                  <div class="col-sm-12 col-md-3 mt-3">
                      <span>رقم معرّف الجهاز: </span><span>{{ $device->serial }}</span>
                  </div>
              </div>
              <?php $arr = ['لم تبدأ عملية الصيانة بعد', 'قيد الصيانة', 'إنتهت عملية الصيانة', 'تم التسليم للعميل', '', 'ملغي', 'مستودع'] ?>
              <div class="row">
                  <div class="col-sm-12 col-md-3 mt-3">
                      <span>التكلفة: </span><span>{{ $device->customer->order->cost -  $device->customer->order->discount}}</span>
                  </div>
                  <div class="col-sm-12 col-md-6 mt-3 mb-2 ">
                      <span>حالة الصيانة: </span><span class="text-success"><b>{{ $arr[$device->customer->order->state -1] }}</b></span>
                  </div>
              </div>
        <div class="container mx-lg-5">
            <div class="row text-lg-left text-sm-center ">
                <div class="col-sm-12 col-md-12 mt-3">
{{--                    <span>ملاحظات الجهاز: </span><span><b>{{ $device->notice}}</b></span>--}}
                </div>
            </div>
        </div>
          </div>

      </div>
      @endif

      <div class="row d-flex justify-content-center align-items-center text-sm-center p-0 mt-5">
          <div class="mx-2">
              <a href="https://www.facebook.com/clicklaptopeg/" style="font-size: 25px">
                  <i class="bi bi-facebook"></i>
              </a>
          </div>
          <div class="mx-2">
              <a href="https://www.facebook.com/clicklaptopeg/" style="font-size: 25px">
                  <i class="bi bi-instagram"></i>
              </a>
          </div>
          <div class="mx-2">
              <a href="https://www.facebook.com/clicklaptopeg/" style="font-size: 25px">
                  <i class="bi bi-twitter-x"></i>
              </a>
          </div>
          <div class="mx-2">
              <a href="https://www.facebook.com/clicklaptopeg/" style="font-size: 25px">
                  <i class="bi bi-snapchat"></i>
              </a>
          </div>
          <div class="mx-2">
              <a href="https://www.tiktok.com/@click.laptop" style="font-size: 25px">
                  <i class="bi bi-tiktok"></i>
              </a>
          </div>
      </div>
  </div>

    <div class="devider"></div>
  <div class="footer py-3">
      <div class="row d-flex justify-content-center align-items-center text-sm-center p-0 m-0">
          <div class="col-sm-12 col-lg-2">
              <span>&#9742;&#65039;</span> <span class="phone"><b>01090006526</b></span>
          </div>
          <div class="col-sm-12 col-lg-2">
              <span>&#128241;</span> <span class="phone"><b>01015515978</b></span>
          </div>
          <div class="col-sm-12 col-lg-7">
              <span class="text-primary">العنوان:</span> <span class="phone"><b> محافظه كفرالشيخ - شارع النبوي المهندس - الشارع المقابل لمقله المهندس</b></span>
          </div>
      </div>

  </div>


<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://cdn.rtlcss.com/bootstrap/v4.5.3/js/bootstrap.bundle.min.js" ></script>
  <script>
      // window.history.pushState({}, document.title, "/" );
  </script>
</body>
</html>
