@extends('layouts.base')

@section('meta')

@endsection

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/vendor.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/plugins.min.css') }}">
@endsection

@section('content')
    <div class="t_profile_section clearfix pt-30 pt-sm-40">
        <div class="container">
            <div class="section-title text-center aos-init aos-animate" data-aos="fade-up">
                <h2 class="title">{{ $translateModel['page.destek_talebi_olustur.general.title'] }}</h2>
            </div>
            @include('widgets.profile.navigation')
            <div class="row">
                <div class="row destek-talebi-olustur mt-10">
                    <form name="submitTicket" action="{{ isset($otherConfig['data']) ? route('site.account.tickets.create',['type' => $otherConfig['type'], 'uuid' => $otherConfig['data']['uuid']]) : route('site.account.tickets.create') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <h6 class="title text-left mt-1">{{ $translateModel['page.destek_talebi_olustur.oncelik.title'] }}</h6>
                            <div class="col-md-12 col-12 mb-3">
                                <select class="form-select" id="select-ilceler" name="priority" required>
                                    <option value="null">{{ $translateModel['page.destek_talebi_olustur.oncelik.select'] }}</option>
                                    <option class="text-danger" value="high">{{ $translateModel['page.destek_talebi_olustur.oncelik.yuksek'] }}</option>
                                    <option class="text-info" value="mid">{{ $translateModel['page.destek_talebi_olustur.oncelik.orta'] }}</option>
                                    <option class="text-success" value="low" selected>{{ $translateModel['page.destek_talebi_olustur.oncelik.dusuk'] }}</option>
                                </select>
                            </div>
                            <h6 class="title text-left">{{ $translateModel['page.destek_talebi_olustur.general.konu'] }}</h6>
                            <div class="col-md-12 col-12 mb-3">
                                @if(isset($otherConfig['data']))
                                    <input type="text" placeholder="{{ $translateModel['page.destek_talebi_olustur.general.konu-placeholder'] }} *" name="title" value="İşlem Kodu : {{ $otherConfig['data']['uuid'] }}">
                                @else
                                    <input type="text" placeholder="{{ $translateModel['page.destek_talebi_olustur.general.konu-placeholder'] }} *" name="title" required>
                                @endif
                            </div>
                            <h3 class="title text-left mt-1 mb-3">{{ $translateModel['page.destek_talebi_olustur.general.description'] }}</h3>
                            <div class="col-12">
                                <textarea name="descriptionTicket" placeholder="{{ $translateModel['page.destek_talebi_olustur.general.description-placeholder'] }}" required></textarea>
                            </div>
                            <h6 class="title text-left mt-1">{{ $translateModel['page.destek_talebi_olustur.general.ilgili-kisim'] }}</h6>
                            <div class="col-md-12 col-12 mb-3">
                                <select class="form-select" id="select-ilceler" name="department" required>
                                    <option value="null">{{ $translateModel['page.destek_talebi_olustur.ilgili.empty'] }}</option>
                                    <option value="info">{{ $translateModel['page.destek_talebi_olustur.ilgili.bilgi'] }}</option>
                                    <option value="payment">{{ $translateModel['page.destek_talebi_olustur.ilgili.odeme-siparis'] }}</option>
                                    <option value="account-buy">{{ $translateModel['page.destek_talebi_olustur.ilgili.satin-alinan-hesap'] }}</option>
                                    <option value="penalties">{{ $translateModel['page.destek_talebi_olustur.ilgili.penalties'] }}</option>
                                    <option value="other">{{ $translateModel['page.destek_talebi_olustur.ilgili.diger'] }}</option>
                                </select>
                            </div>
                            <h6 class="title text-left mt-1">{{ $translateModel['page.destek_talebi_olustur.general.dosya-eki'] }}</h6>
                            <div class="col-md-12 col-12 mb-3">
                                <div class="file-upload">
                                    <div class="file-select">
                                        <div class="file-select-button" id="fileName">{{ $translateModel['page.destek_talebi_olustur.general.dosya-eki.select'] }}</div>
                                        <div class="file-select-name" id="noFile" data-problem-file="problemAttachment">{{ $translateModel['page.destek_talebi_olustur.general.dosya-eki.empty'] }}</div>
                                        <input type="file" name="chooseFile" id="chooseFile" multiple>
                                    </div>
                                </div>
                                <p class="text-muted">{{ $translateModel['page.destek_talebi_olustur.general.dosya-eki.aciklama'] }}</p>
                            </div>
                            <div class="col-12">
                                <a class="rbbtn rbgreen" data-type="submitTicket">{{ $translateModel['page.destek_talebi_olustur.general.button'] }}</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ asset('assets/js/vendor/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/plugins.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/slick.js') }}"></script>

    <script src="{{ asset('assets/js/main.js') }}"></script>
    <script src="{{ asset('assets/js/metha/metha-mimes.js') }}"></script>
@endsection

@section('script-alt')
    <script>
        @if(isset($otherConfig['type']))
            @if($otherConfig['type'] == 'balance-report' || $otherConfig['type'] == 'withdraw')
                $('[name="department"]').val('payment').change();
            @elseif($otherConfig['type'] == 'account-buy')
                $('[name="title"]').val('{{ sprintf('%s | %s',$otherConfig['data']['account']['title'],$otherConfig['data']['order_code']) }}');
                $('[name="title"]').attr('disabled',true);
                $('[name="department"]').val('{{ $otherConfig['type'] }}').change();
            @endif
        @endif

        var methaMimes = new MethaMimes();
        $('[name="chooseFile"]').on('change', function(){
            var mimeEx = methaMimes.exists(event.target.files[0].type);
            if(mimeEx.result)
            {
                $('[data-problem-file="problemAttachment"]').css('color','green').html('Dosya Seçildi <small class="text-danger">' + $(this)[0].files[0].name + '</small>');
            }else{
                $('#chooseFile').val('');
                $('[data-problem-file="problemAttachment"]').css('color','black').html('Seçilen dosya yok.');
                error("Desteklenmeyen format.<br>Desteklenen formalarımız : " + mimeEx.mimes);
            }
        });

        $('[data-type="submitTicket"]').click(function() {
                if($('[name="priority"]').val() == 'null')
                {
                    basarili('{{ $translateModel['page.destek_talebi_olustur.error.priority.message'] }}');
                }else if($('[name="title"]').val() == '')
                {
                    basarili('{{ $translateModel['page.destek_talebi_olustur.error.title.message'] }}');
                }else if($('[name="descriptionTicket"]').val() == '')
                {
                    basarili('{{ $translateModel['page.destek_talebi_olustur.error.description.message'] }}');
                }else if($('[name="department"]').val() == 'null')
                {
                    basarili('{{ $translateModel['page.destek_talebi_olustur.error.department.message'] }}');
                }else{
                    $('[name="submitTicket"]').submit();
                }
        });




        function basarili(message){
            Command: toastr["success"](message)

            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": false,
                "progressBar": false,
                "positionClass": "toast-top-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }
        }

        @if(isset($otherConfig['type']))
            $('[name="department"]').val('{{ $otherConfig['type'] }}').change();
        @endif
    </script>
@endsection