@extends('home.layouts.index')

@section('title')
درخواست پیگیری سرویس
@endsection


@section('description')

@endsection

@section('keywords')

@endsection

@section('style')
    <style>
   :root {
    --main-color-one: rgb(27, 49, 93);
    --main-color-one-shadow: rgb(34, 65, 128);
    --main-color-one-hover: rgb(27, 46, 83);
    --main-color-two: rgb(223, 225, 223);
    --main-color-two-shadow: rgb(205, 205, 205);
    --main-color-two-hover: rgb(213, 215, 213);
    --main-color-three: rgb(121, 125, 130);
    --main-color-three-shadow: #45147e31;
    --main-color-three-hover: rgb(27, 49, 93);
    --main-color-green: #189d0e;
    --bg-site: #f4f5f9;
    --font-size: 14px;
    --color-site: #333333;
    --font-site: 'yekan-bakh';
    --main-font: 'yekan-bakh';
    --title-font: 'yekan-bakh';
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
     0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-box: rgb(0 0 0 / 10%) 0px 0px 10px 0px !important;
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
     0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
     0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-inner: inset 0 2px 12px 4px rgb(0 0 0 / 5%);
    --text-muted: #565757;
    --text-muted-two: #929292;
    --border-muted: #ced4da;
    --border-redius: 7px;
   }
   .req-form-wrapper {
    /*display: flex;*/
   }

   .personal-info-wrapper {
       width:100%;
    padding: 10px;
   }

   .info-title {
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
    background-color: rgb(226, 226, 226);
    color: var(--main-color-one);
    border-top: 2px solid var(--main-color-one);
    padding-top: 15px;
    padding-bottom: 5px;
    border-radius: 8px;
   }

   .input-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
   }

   .input-decor-wrapper input {
    border: none;
    outline: none;
    border-bottom: 1px solid rgb(172, 172, 172);
    background-color: transparent;
    width: 100%;
   }

   .req-form-wrapper label {
    font-size: 18px;
    width: 30%;
   }

   .input-decor-wrapper {
    width: fit-content;
    height: fit-content;
    position: relative;
    width: 60%;
   }

   .input-decor-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: all 0.25s ease-in-out;
    background-color: var(--main-color-one);
   }

   .input-decor-wrapper:focus-within::after {
    transform: scaleX(1);
   }

   .input-decor-wrapper select {
    width: 100%;
    border: none;
    background-color: transparent;
    border-bottom: 1px solid var(--main-color-one);
    padding: 0 10px;
   }

   .input-decor-wrapper select option {
    cursor: pointer;
    background-color: transparent;
    transition: all 0.25s;
   }

   .input-decor-wrapper textarea {
    width: 100%;
    background-color: transparent;
    transition: all 0.25s;
    margin: 0 !important;
    outline: none;
    padding: 15px;
   }
   .submit-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
   }
   .info-content-wrapper {
    box-shadow: 0 0 2px #c3c3c3;
    margin: 5px;
   }
   .container-wrapper{
       display:flex;
   }
   @media screen and (max-width: 768px) {
    .req-form-wrapper {
     flex-direction: column;
    }
    .personal-info-wrapper,.container-wrapper form {
     width: 100% !important;
    }
      .container-wrapper{
      flex-direction:column;
   }
    .input-wrapper {
     flex-direction: column;
     width: 100%;
     align-items: flex-start;
    }
    .input-decor-wrapper {
     width: 100%;
    }
   }
  </style>
@endsection


@section('content')

<div class="content">
    <div class="container-fluid">
        <div class="contact-img-title mb-3 shadow-box">
            <img src="{{ asset('home/img/contact.png') }}" alt="" />
        </div>

        <div class="contact-us-title">
            <div class="container-wrapper">
                <form action="{{ route('reception.follow-up.submit') }}" method="POST" style="width:50%">
                    @csrf
                    <div class="req-form-wrapper" style="margin: 0 auto">
                        <div class="personal-info-wrapper">
                            <div class="info-content-wrapper">
                                <h4 class="info-title">پیگیری درخواست سرویس</h4>
                                <div class="input-wrapper" tabindex="0">
                                    <label for="webTraceCode">کد پیگیری درخواست سرویس:</label>
                                    <div class="input-decor-wrapper">
                                        <input type="text" name="webTraceCode" id="webTraceCode" required />
                                        @error('webTraceCode')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                            </div>
                            <div class="submit-wrapper">
                                <button type="submit" class="header-cart btn main-color-one-bg">جستجو</button>
                            </div>
                        </div>
                    </div>
                </form>

                @if(isset($requestData))
                <div class="personal-info-wrapper" style="width:50%">
                    <h4 class="info-title">جزئیات درخواست سرویس ثبت شده</h4>
                    <div class="info-content-wrapper request-details">
                        <div class="input-wrapper">
                            <label>کد رهگیری:</label>
                            <span>{{ $requestData['WebTraceCode'] ?? '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>نام مشتری:</label>
                            <span>{{ $requestData['FullName'] ?? $requestData['AccountName'] ?? '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>استان:</label>
                            <span>{{ $requestData['StateName'] ?? '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>شهرستان:</label>
                            <span>{{ $requestData['CityName'] ?? '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>شماره تماس:</label>
                            <span>{{ $requestData['TelNo'] ?? '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>نشانی:</label>
                            <span>{{ $requestData['Address'] ?? '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>شماره سریال:</label>
                            <span>{{ $requestData['SerialNo'] ?? '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>مارک:</label>
                            <span>{{ $requestData['Brand'] ?? '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>نوع:</label>
                            <span>{{ $requestData['App'] ?? '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>مدل:</label>
                            <span>{{ $requestData['Model'] ?? '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>وضعیت گارانتی:</label>
                            <span>{{ isset($requestData['Guarantee']) ? ($requestData['Guarantee'] ? 'دارد' : 'ندارد') : '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>تاریخ انقضاء گارانتی:</label>
                            <span>{{ $requestData['S_GExpDate'] ?? '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>نوع عملیات:</label>
                            <span>{{ $requestData['ServiceType'] ?? '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>شرح درخواست:</label>
                            <span>{{ $requestData['CustomerDes'] ?? '-' }}</span>
                        </div>
                        <div class="input-wrapper">
                            <label>وضعیت:</label>
                            <span>{{ $requestData['FullStatusMessage'] ?? 'در حال بررسی' }}</span>
                        </div>
                        @if(isset($requestData['s_ExitDate']))
                        <div class="input-wrapper">
                            <label>تاریخ تحویل:</label>
                            <span>{{ $requestData['s_ExitDate'] }}</span>
                        </div>
                        @endif
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>

</script>
@endsection