@extends('layouts.master')

@section('title', __("tr.Add Request"))
@section('titleicon', "icon-chat2")

@section('content')
<div class="main-content">
        @if(!empty($errors->all()))
        <div class="alert alert-danger text-white bg-danger">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    @php
    use 
    Illuminate\Support\Arr;
    @endphp

    <form method="post" action="{{ route('save_ticket')}}" id="edit_form" enctype="multipart/form-data">
    {{ csrf_field() }}
        <div class="row gutters">
            <div class="col-lg-6 col-xs-12 col-md-12 col-sm-12" >
                <div class="card" >
                    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                        <div class="card-body">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="suggetions-tab" data-toggle="tab" href="#suggetions" role="tab" aria-controls="suggetions" aria-selected="true">@lang("tr.Suggetions")</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="complains-tab" data-toggle="tab" href="#complains" role="tab" aria-controls="complains" aria-selected="false">@lang("tr.Complains")</a>
                                </li>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                <input type="hidden" name="type" id="type" value="suggetions">

                                <div class="tab-pane fade show active" id="suggetions" role="tabpanel" aria-labelledby="suggetions-tab">
                                    {{-- Suggetions First Tab --}}
                                </div>
                                <div class="tab-pane fade" id="complains" role="tabpanel" aria-labelledby="complains-tab">
                                    {{-- Complains Second Tab --}}
                                    
                                    <div class="form-group">
                                        <label>@lang('tr.Discussion Type') <required style="color: red;">*</required></label>
                                        {!! Form::select('ticket_type_id', array(''=>__('tr.Request Type'))+$ticketTypes, old('ticket_type_id'), array('id'=> 'ticket_type_id', 'class'=>'form-control')) !!}
                                    </div>

                                    <div id="categories_div" class="form-group">
                                        <label>@lang('tr.Category')</label>
                                        <select name="category_id" id="category_id" class="form-control">
                                            <option value="">@lang('tr.Select Category')</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label>@lang('tr.Description') <required style="color: red;">*</required></label>
                                <textarea required name="description" id="description" class="form-control" placeholder="@lang('tr.Description')" cols="30" rows="5" title="Description" >{{ old('description') }}</textarea>
                            </div>
                            <div class="form-group">
                                <input type="file" class="filestyle" name="attachments[]" data-icon="true" multiple onchange="validateFileName(this)">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row gutters">
            <div class="col-md-12">
                <button type="submit" class="btn btn-primary btn-md">
                <span class="icon-edit"></span> Submit</button>
            </div>
        </div>

        <hr/>
    </form>
</div>
@endsection

@section('pagejs')
<script type="text/javascript">
    $(document).ready(function() {

        $('#ticket_type_id').on('change', function () {

            $.ajax({
                type: 'get',
                url: '{{ route('ticket_categories_list') }}',
                dataType: "json",
                async:false,
                data: {
                    ticket_type_id: $(this).val(),
                },
                success: function(categoriesList) {

                    $('#category_id').remove();
                    var select = '';
                    select += "<select name='category_id' id='category_id' class='form-control'>";
                    select += "<option value=''>@lang('tr.Select Category')</option>";
                    $.each(categoriesList, function(index, value) {
                        select += "<option value='"+index+"'>"+value+"</option>";
                    });
                    select += "</select>";
                    $('#categories_div').append(select);
                }
            });
        });
        
        $(document).on('click','#complains-tab', function () {
            $("#type").val('complains')
            $("#ticket_type_id").prop('required', true)
        });

        $(document).on('click','#suggetions-tab', function () {
            $("#type").val('suggetions')
            $("#ticket_type_id").prop('required', false)
        });
    });
</script>
@endsection