@extends('website.layouts.master')

@section('title', __('tr.Support'))

@section('content')

@include('website.layouts.title', ['simple'=>true])

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<style>

    .blog .carousel-indicators {
        left: 0;
        top: auto;
        top: -19px;

    }

    /* The colour of the indicators */
    .blog .carousel-indicators li {
        background: #a3a3a3;
        border-radius: 50%;
        width: 8px;
        height: 8px;
    }

    .blog .carousel-indicators .active {
    background: #707070;
    }

    .keyText{
        font-weight: bold;
        margin-right: 10px;
    }

    @media only screen and (max-width: 910px) {
    .instructorName {
        text-align:center;
    }
    .instructorName2 {
        text-align:center;
        font-size: 1.2rem;
    }
    }

</style>


<section>
    <div class="section-wrapper p-t-50 p-b-20">    
        <div class="container">
            @if(Session::has('message'))
                <br>
                <div class="alert custom alert-success">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <i class="fa fa-check"></i>
                    <strong>@lang('tr.Success'), </strong>
                    {{session()->pull('message')}}
                </div>
            @endif
            @if(Session::has('error'))
                <br>
                <div class="alert custom alert-danger">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <i class="fa fa-close"></i>
                    <strong>@lang('tr.Error'), </strong>
                    {{session()->pull('error')}}
                </div>
            @endif

            <br>
            <div>
                <b>
                @if(App::getLocale()=='en')
                    Before submitting any question, If you have any question about admission or studying in the College of Engineering, please click on this link to read quick <a href="/education/undergraduates/2095698">answers to common questions</a>.
                @else
                    إذا كان لديك أي سؤال حول القبول أو الدراسة في كلية الهندسة، يرجى الضغط على هذا الرابط لقراءة
                    <a href="/2401267">إجابات سريعة للأسئلة الشائعة</a>
                @endif
                </b>
            </div>

            <br>

            <div class="res-991-pb-50"  dir="@lang('tr.dir')">
                <div class="ttm-tabs ttm-tab-style-horizontal" data-effect="fadeIn">
                    <ul class="tabs clearfix">
                        <li class="tab active"><a href="#">@lang("tr.Suggestions")</a></li>
                        <li class="tab"><a href="#">@lang("tr.Complains")</a></li>
                    </ul>
                    <div class="content-tab">
                        <!-- content-inner -->
                        <div class="content-inner active">
                            <div class="row gutters">
                                <form action="{{route('support_send_email')}}" method="POST" dir="@lang('tr.dir')">
                                    {{ csrf_field() }}
                                    <div class="col-md-12 map-container">
                                        <input type="hidden" id="ticket_type" name="ticket_type" value="{{ $innovativeIdeas->id }}">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label>@lang('tr.Email')</label>
                                                    <input type="email" id="email" required name="email" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label>@lang('tr.Name')</label>
                                                    <input type="text" id="name" name="name" class="form-control" required>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label>@lang('tr.Message')</label>
                                                    <textarea id="message" required name="message" maxlength="500" class="form-control"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label class="col-form-label" for="terms_condition">
                                                        <input type="checkbox" required id="terms_condition" name="terms_condition" value="1"/> @lang('tr.support_terms_condition')
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        @if(env('APP_DEBUG') == false)
                                            <div class="g-recaptcha" id="recaptcha" data-sitekey="6Lf17rUUAAAAAKR0rgH6aM7g0xjtzmxBK6w2T5j1"></div>
                                            <p class="msg-error"></p>
                                        @endif
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <button type="submit" id="submit" class="ttm-btn ttm-btn-size-lg ttm-btn-shape-square ttm-btn-style-fill ttm-icon-btn-right ttm-btn-color-dark">@lang('tr.Send') <i class="ti ti-angle-double-right"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- content-inner end-->
                        <!-- content-inner -->
                        <div class="content-inner">
                            <div class="row gutters">
                                <form action="{{route('support_send_email')}}" method="POST" dir="@lang('tr.dir')">
                                    {{ csrf_field() }}
                                    <div class="col-md-12 map-container">
                                        <input type="hidden" id="ticket_type" name="ticket_type" value="{{ $anonymousType->id }}" class="complaint_ticket_type">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label>@lang('tr.Email')</label>
                                                    <input type="email" id="email" required name="email" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label>@lang('tr.Name')</label>
                                                    <input type="text" id="name" name="name" class="form-control complaint_name">
                                                    <span style="font-size: 80%;">@lang('tr.To hide your identity, you can keep the name empty')</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row" style="display: none;" id="ticket_type_div">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label>@lang('tr.Ticket Types')</label>
                                                    <select class="form-control" id="selected_ticket_type" name="selected_ticket_type">
                                                        <option value="">@lang('tr.Select Ticket Type')</option>
                                                        @foreach($ticketTypes as $key => $value)
                                                            <option value="{{ $key }}">{{ $value }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label>@lang('tr.Message')</label>
                                                    <textarea id="message" required name="message" maxlength="500" class="form-control"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label class="col-form-label" for="terms_condition">
                                                        <input type="checkbox" required id="terms_condition" name="terms_condition" value="1"/> @lang('tr.support_terms_condition')
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        @if(env('APP_ENVIRONMENT') == "production")
                                            <div class="g-recaptcha" id="recaptcha" data-sitekey="6Lf17rUUAAAAAKR0rgH6aM7g0xjtzmxBK6w2T5j1"></div>
                                            <p class="msg-error"></p>
                                        @endif
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <button type="submit" id="submit" class="ttm-btn ttm-btn-size-lg ttm-btn-shape-square ttm-btn-style-fill ttm-icon-btn-right ttm-btn-color-dark">@lang('tr.Send') <i class="ti ti-angle-double-right"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- content-inner end-->
                    </div>
                </div>
            </div>

            <br>

        </div>
    </div>
</section>

@endsection


@section('pagejs')

    <script type="text/javascript">

        $(document).ready(function () {

            if($('.complaint_name').val()) {
                $('#ticket_type_div').show()
                $('#selected_ticket_type').attr('required', true)
            }

            var hasValue = false;
            $('.complaint_name').on('keyup', function () {

                if($(this).val()) {

                    if(!hasValue) {
                        $('.complaint_ticket_type').val("")
                        $('#selected_ticket_type').val("")
                        $('#ticket_type_div').show()
                        $('#selected_ticket_type').attr('required', true)
                    }
                    hasValue = true
                }
                else {

                    $('.complaint_ticket_type').val({{ $anonymousType->id }})
                    $('#selected_ticket_type').val("")
                    $('#ticket_type_div').hide()
                    $('#selected_ticket_type').attr('required', false)
                    hasValue = false
                }
            });

            $('#selected_ticket_type').on('change', function () {
                $('.complaint_ticket_type').val($(this).val())
            });
        });
    </script>
@endsection