@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: 50%;
    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;
   }
   @media screen and (max-width: 768px) {
    .req-form-wrapper {
     flex-direction: column;
    }
    .personal-info-wrapper {
     width: 100%;
    }
    .input-wrapper {
     flex-direction: column;
     width: 100%;
     align-items: flex-start;
    }
    .input-decor-wrapper {
     width: 100%;
    }
   }
  </style>
@endsection

@section('script')
<script>
$(document).ready(function() {
    // Handle state change to load cities
    $('#StateName').change(function() {
        var state = $(this).val();
        if (state) {
            $.ajax({
                url: "{{ route('reception.cities') }}",
                type: "POST",
                data: { state: state },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.isSuccess) {
                        var cities = JSON.parse(response.data);
                        $('#CityName').empty().append('<option value="">-- انتخاب کنید --</option>');
                        $.each(cities, function(index, city) {
                            $('#CityName').append('<option value="' + city.CityName + '">' + city.CityName + '</option>');
                        });
                        $('#CityName').prop('disabled', false);
                    }
                }
            });
        }
    });

    // Handle brand change to load types
    $('#Brand').change(function() {
        var brand = $(this).val();
        if (brand) {
            $.ajax({
                url: "{{ route('reception.types') }}",
                type: "POST",
                data: { brand: brand },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.isSuccess) {
                        var types = JSON.parse(response.data);
                        $('#App').empty().append('<option value="">-- انتخاب کنید --</option>');
                        $.each(types, function(index, type) {
                            $('#App').append('<option value="' + type.App + '">' + type.App + '</option>');
                        });
                        $('#App').prop('disabled', false);
                    }
                }
            });
        }
    });

    // Handle type change to load models
    $('#App').change(function() {
        var brand = $('#Brand').val();
        var app = $(this).val();
        if (brand && app) {
            $.ajax({
                url: "{{ route('reception.models') }}",
                type: "POST",
                data: { brand: brand, type: app },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.isSuccess) {
                        var models = JSON.parse(response.data);
                        $('#Model').empty().append('<option value="">-- انتخاب کنید --</option>');
                        $.each(models, function(index, model) {
                            $('#Model').append('<option value="' + model.Model + '">' + model.Model + '</option>');
                        });
                        $('#Model').prop('disabled', false);
                    }
                }
            });
        }
    });

    // Handle service type change to set SvCode
    $('#ServiceType').change(function() {
        var selectedOption = $(this).find('option:selected');
        $('#SvCode').val(selectedOption.data('code'));
    });

    // Handle serial number check
    $('#checkSerial').click(function() {
        var serialNo = $('#SerialNo').val();
        if (serialNo) {
            $.ajax({
                url: "{{ route('reception.check-serial') }}",
                type: "POST",
                data: { serialNo: serialNo },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.isSuccess && response.data) {
                        var data = JSON.parse(response.data);
                        var info = '';
                        if (data.Brand) {
                            info += '<p>مارک: ' + data.Brand + '</p>';
                            $('#Brand').val(data.Brand).trigger('change');
                        }
                        if (data.App) {
                            info += '<p>نوع: ' + data.App + '</p>';
                            $('#App').val(data.App).trigger('change');
                        }
                        if (data.Model) {
                            info += '<p>مدل: ' + data.Model + '</p>';
                            $('#Model').val(data.Model);
                        }
                        if (data.S_GExpDate) {
                            info += '<p>تاریخ انقضاء گارانتی: ' + data.S_GExpDate + '</p>';
                        }
                        $('#serialInfo').html(info);
                    } else {
                        $('#serialInfo').html('<p class="text-danger">شماره سریال یافت نشد</p>');
                    }
                }
            });
        }
    });

    // Initialize form with old values if any
    @if(old('StateName'))
        $('#StateName').trigger('change');
    @endif
    @if(old('Brand'))
        $('#Brand').trigger('change');
    @endif
    @if(old('App'))
        $('#App').trigger('change');
    @endif
});
</script>
@endsection

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<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="row">
                <form action="{{ route('reception.submit') }}" method="POST" id="receptionForm">
                    @csrf
                    <div class="req-form-wrapper">
                        <div class="personal-info-wrapper">
                            <h4 class="info-title">مشخصات فردی</h4>
                            <div class="input-wrapper" tabindex="0">
                                <label for="CustomerName">نام مشتری *</label>
                                <div class="input-decor-wrapper">
                                    <input type="text" name="CustomerName" id="CustomerName" value="{{ old('CustomerName') }}" required />
                                    @error('CustomerName')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                </div>
                            </div>
                            
                            <div class="input-wrapper" tabindex="0">
                                <label for="AccountLawKind">نوع شخصیت *</label>
                                <div class="input-decor-wrapper">
                                    <select name="AccountLawKind" id="AccountLawKind" required>
                                        <option value="1" {{ old('AccountLawKind') == '1' ? 'selected' : '' }}>حقیقی</option>
                                        <option value="2" {{ old('AccountLawKind') == '2' ? 'selected' : '' }}>حقوقی</option>
                                    </select>
                                    @error('AccountLawKind')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                </div>
                            </div>

                            <div class="info-content-wrapper">
                                <div class="input-wrapper" tabindex="0">
                                    <label for="StateName">استان *</label>
                                    <div class="input-decor-wrapper">
                                        <select name="StateName" id="StateName" required>
                                            <option value="">-- انتخاب کنید --</option>
                                            @foreach($states as $state)
                                            <option value="{{ $state['StateName'] }}" {{ old('StateName') == $state['StateName'] ? 'selected' : '' }}>
                                                {{ $state['StateName'] }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('StateName')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                                
                                <div class="input-wrapper" tabindex="0">
                                    <label for="CityName">شهرستان *</label>
                                    <div class="input-decor-wrapper">
                                        <select name="CityName" id="CityName" required>
                                            <option value="">-- ابتدا استان را انتخاب کنید --</option>
                                            @if(old('StateName') && !empty($cities))
                                                @foreach($cities as $city)
                                                    <option value="{{ $city['CityName'] }}" {{ old('CityName') == $city['CityName'] ? 'selected' : '' }}>
                                                        {{ $city['CityName'] }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                        @error('CityName')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                                
                                <div class="input-wrapper" tabindex="0">
                                    <label for="TelNo">شماره تماس *</label>
                                    <div class="input-decor-wrapper">
                                        <input type="text" name="TelNo" id="TelNo" value="{{ old('TelNo') }}" required />
                                        @error('TelNo')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                                
                                <div class="input-wrapper" tabindex="0">
                                    <label for="EmailAddress">نشانی پست الکترونیکی</label>
                                    <div class="input-decor-wrapper">
                                        <input type="email" name="EmailAddress" id="EmailAddress" value="{{ old('EmailAddress') }}" />
                                        @error('EmailAddress')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                                
                                <div class="input-wrapper" tabindex="0">
                                    <label for="NationalCode">کد ملی</label>
                                    <div class="input-decor-wrapper">
                                        <input type="text" name="NationalCode" id="NationalCode" value="{{ old('NationalCode') }}" />
                                        @error('NationalCode')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                                
                                <div class="input-wrapper" tabindex="0">
                                    <label for="PostalCode">کد پستی</label>
                                    <div class="input-decor-wrapper">
                                        <input type="text" name="PostalCode" id="PostalCode" value="{{ old('PostalCode') }}" />
                                        @error('PostalCode')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                                
                                <div class="input-wrapper" tabindex="0">
                                    <label for="Address">نشانی *</label>
                                    <div class="input-decor-wrapper">
                                        <textarea name="Address" id="Address" required>{{ old('Address') }}</textarea>
                                        @error('Address')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="personal-info-wrapper">
                            <div class="info-content-wrapper">
                                <h4 class="info-title">مشخصات محصول</h4>
                                <div class="input-wrapper" tabindex="0">
                                    <label for="SerialNo">شماره سریال *</label>
                                    <div class="input-decor-wrapper">
                                        <input type="text" name="SerialNo" id="SerialNo" value="{{ old('SerialNo') }}" required />
                                        <button type="button" id="checkSerial" class="btn btn-sm btn-secondary">بررسی سریال</button>
                                        <div id="serialInfo" class="mt-2"></div>
                                        @error('SerialNo')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                                
                                <div class="input-wrapper" tabindex="0">
                                    <label for="Brand">مارک</label>
                                    <div class="input-decor-wrapper">
                                        <select name="Brand" id="Brand">
                                            <option value="">-- انتخاب کنید --</option>
                                            @foreach($brands as $brand)
                                            <option value="{{ $brand['Brand'] }}" {{ old('Brand') == $brand['Brand'] ? 'selected' : '' }}>
                                                {{ $brand['Brand'] }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('Brand')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                                
                                <div class="input-wrapper" tabindex="0">
                                    <label for="App">نوع</label>
                                    <div class="input-decor-wrapper">
                                        <select name="App" id="App" {{ old('Brand') ? '' : 'disabled' }}>
                                            <option value="">-- ابتدا مارک را انتخاب کنید --</option>
                                            @if(old('Brand') && !empty($types))
                                                @foreach($types as $type)
                                                    <option value="{{ $type['App'] }}" {{ old('App') == $type['App'] ? 'selected' : '' }}>
                                                        {{ $type['App'] }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                        @error('App')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                                
                                <div class="input-wrapper" tabindex="0">
                                    <label for="Model">مدل</label>
                                    <div class="input-decor-wrapper">
                                        <select name="Model" id="Model" {{ old('App') ? '' : 'disabled' }}>
                                            <option value="">-- ابتدا نوع را انتخاب کنید --</option>
                                            @if(old('App') && !empty($models))
                                                @foreach($models as $model)
                                                    <option value="{{ $model['Model'] }}" {{ old('Model') == $model['Model'] ? 'selected' : '' }}>
                                                        {{ $model['Model'] }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                        @error('Model')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                            </div>
                            
                            <div class="info-content-wrapper">
                                <h4 class="info-title">سرویس</h4>
                                <div class="input-wrapper" tabindex="0">
                                    <label for="ContactPersonName">نام اقدام کننده *</label>
                                    <div class="input-decor-wrapper">
                                        <input type="text" name="ContactPersonName" id="ContactPersonName" value="{{ old('ContactPersonName') }}" required />
                                        @error('ContactPersonName')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                                
                                <div class="input-wrapper" tabindex="0">
                                    <label for="ServiceType">نوع عملیات مورد درخواست *</label>
                                    <div class="input-decor-wrapper">
                                        <select name="ServiceType" id="ServiceType" required>
                                            <option value="">-- انتخاب کنید --</option>
                                            @foreach($serviceTypes as $code => $type)
                                                <option value="{{ $type }}" data-code="{{ $code }}" {{ old('ServiceType') == $type ? 'selected' : '' }}>
                                                    {{ $type }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="SvCode" id="SvCode" value="{{ old('SvCode') }}" />
                                        @error('ServiceType')<small class="text-danger d-block mt-1">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                                
                                <div class="input-wrapper" tabindex="0">
                                    <label for="VrDes">شرح درخواست سرویس *</label>
                                    <div class="input-decor-wrapper">
                                        <textarea name="VrDes" id="VrDes" required>{{ old('VrDes') }}</textarea>
                                        @error('VrDes')<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>
            </div>
        </div>
    </div>
</div>



@endsection