@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_taleplerim.general.title'] }}</h2>
            </div>
            @include('widgets.profile.navigation')
            <div class="row">
                <div class="row mb-5">
                    <div class="table-responsive">
                        <table class="table table-hover text-white table-borderless">
                            <thead>
                            <tr>
                                <th scope="col">{{ $translateModel['page.destek_taleplerim.table.destek-id'] }}</th>
                                <th scope="col">{{ $translateModel['page.destek_taleplerim.table.title'] }}</th>
                                <th scope="col">{{ $translateModel['page.destek_taleplerim.table.oncelik'] }}</th>
                                <th scope="col">{{ $translateModel['page.destek_taleplerim.table.durum'] }}</th>
                                <th scope="col">{{ $translateModel['page.destek_taleplerim.table.date'] }}</th>
                                <th scope="col">{{ $translateModel['page.destek_taleplerim.table.ilgili-kisim'] }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <th scope="row">#{{ $ticket['code'] }}</th>
                                <td>{{ strlen($ticket['title']) > 30 ? substr($ticket['title'],0,30).'...' : $ticket['title'] }}</td>
                                <td>{{ $ticket['priority'] }}</td>
                                <td>{{ $ticket['status'] }}</td>
                                <td>{{ $ticket['date'] }}</td>
                                <td>{{ $ticket['department'] }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-md-12">
                        <div class="support-chat">
                            @foreach($tickets as $item)
                                @php
                                $ticketOther = $item['other'] != null ? json_decode($item['other']) : [];
                                @endphp
                                @if($item['user']['id'] == \Illuminate\Support\Facades\Auth::id())
                                    <div class="card mask-custom">
                                        <div class="card-header d-flex justify-content-between p-3" style="border-bottom: 1px solid rgba(255,255,255,.3);">
                                            <p class="fw-bold mb-0 text-white">{{ $item['user']['name'] }}</p>
                                            <p class="text-light small mb-0"><i class="far fa-clock"></i> {{ \Carbon\Carbon::parse($item['created_at'])->diffForHumans() }}</p>
                                        </div>
                                        <div class="card-body">
                                            <p class="mb-0">
                                                {{ $item['description'] }}
                                            @if(isset($ticketOther->file))
                                                    <br>
                                                <div class="aos-init aos-animate" data-aos="fade-up" data-type="attachment" data-file="{{ $ticketOther->file }}">
                                                    <button type="button" class="btn btn-primary btn-block btn-sm"><i class="fa fa-download"></i></button>
                                                </div>
                                            @endif
                                            </p>
                                        </div>
                                    </div>
                                @else
                                    <div class="card mask-custom answer">
                                        <div class="card-header d-flex justify-content-between p-3" style="border-bottom: 1px solid rgba(255,255,255,.3);">
                                            <p class="fw-bold mb-0 text-primary">{{ sprintf('Asistan %s',substr($item['user']['name'],0,1).'***') }}</p>
                                            <p class="text-light small mb-0"><i class="far fa-clock"></i> {{ \Carbon\Carbon::parse($item['created_at'])->diffForHumans() }}</p>
                                        </div>
                                        <div class="card-body">
                                            <p>
                                                {{ $item['description'] }}
                                                @if(isset($ticketOther->file))
                                                    <br>
                                            <div class="aos-init aos-animate" data-aos="fade-up" data-type="attachment" data-file="{{ $ticketOther->file }}">
                                                <button type="button" class="btn btn-primary btn-block btn-sm"><i class="fa fa-download"></i></button>
                                            </div>
                                            @endif
                                            </p>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row destek-talebi-olustur mt-10">
                    <div class="row">
                        <h3 class="title text-left mt-1 mb-3">{{ $translateModel['page.destek_taleplerim.files.title'] }}</h3>
                        <div class="row">
                            <table class="table">
                                <thead>
                                <tr>
                                    <td>{{ $translateModel['page.destek_taleplerim.files.user'] }}</td>
                                    <td>{{ $translateModel['page.destek_taleplerim.files.file'] }}</td>
                                    <td>{{ $translateModel['page.destek_taleplerim.files.date'] }}</td>
                                    <td>{{ $translateModel['page.destek_taleplerim.files.action'] }}</td>
                                </tr>
                                </thead>
                                <tbody>
                                @if(count($ticketFilesList) > 0)
                                    @foreach ($ticketFilesList as $item)
                                        <tr>
                                            <td>{{ $item['username'] }}</td>
                                            <td>{{ $item['file'] }}</td>
                                            <td>{{ \Carbon\Carbon::parse($item['date'])->format('d.m.Y H:i') }}</td>
                                            <td>
                                                <div class="col-4 mb-3" data-aos="fade-up" data-type="attachment" data-file="{{ $item['file'] }}">
                                                    <button type="button" class="btn btn-primary btn-block btn-sm"><i class="fa fa-download"></i></button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="4" class="text-center">{{ $translateModel['page.destek_taleplerim.table.empty'] }}</td>
                                    </tr>
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>


                <div class="row destek-talebi-olustur mt-10">
                    @if($ticket['status_raw'] != 'closed')
                        <form name="ticketForm" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <h3 class="title text-left mt-1 mb-3">{{ $translateModel['page.destek_taleplerim.form.cevap-title'] }}</h3>
                                <div class="col-12">
                                    <textarea name="descriptionTicket" placeholder="{{ $translateModel['page.destek_taleplerim.form.cevap-description'] }}" required></textarea>
                                </div>
                                <h6 class="title text-left mt-1">{{ $translateModel['page.destek_taleplerim.form.dosya-eki'] }}</h6>
                                <div class="col-md-12 col-12 mb-3">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="customFile" name="file">
                                        <label class="custom-file-label" for="customFile" data-problem-file="problemAttachment">{{ $translateModel['page.destek_taleplerim.form.dosya-eki-sec'] }}</label>
                                    </div>
                                    <p class="text-muted">{{ $translateModel['page.destek_taleplerim.form.dosya-eki-description'] }}</p>
                                </div>
                                @if(\Illuminate\Support\Facades\Auth::user()->roles[0]['id'] != 3)
                                    <div class="col-12 mb-5">
                                        <div class="checkbox_item">
                                            <input id="white_color_checkbox" type="checkbox" name="ticket_close">
                                            <label for="white_color_checkbox">{{ $translateModel['page.destek_taleplerim.form.talep-kapat'] }}</label>
                                        </div>
                                    </div>
                                @endif
                                <div class="col-12">
                                    <a class="rbbtn rbgreen" data-type="ticketSubmit">{{ $translateModel['page.destek_taleplerim.form.cevapla'] }}</a>
                                </div>
                            </div>
                        </form>
                    @endif
                </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>
@endsection

@section('script')
    <script>
        $('[name="ticket_close"]').on('click', function(){
            if($(this).prop('checked'))
            {
                $('[name="descriptionTicket"]').attr({
                    disabled: true
                });
                $('#customFile').attr({
                    disabled: true
                });
            }else{
                $('[name="descriptionTicket"]').attr({
                    disabled: false
                });
                $('#customFile').attr({
                    disabled: false
                });
            }
        });

        $('[data-type="ticketSubmit"]').click(function() {

            if($('[name="ticket_close"]').prop('checked') != true)
            {
                if($('[name="descriptionTicket"]').val() == '')
                {
                    $.toast({
                        heading: '{{ __('toast.title.warning') }}',
                        text: '{{ sprintf(__('ticket.toast.empty.warning'),'Cevap') }}',
                        icon: 'info',
                        loaderBg: '#9EC600',
                        bgColor: '#030E21',
                    })
                }else{
                    $('[name="ticketForm"]').submit();
                }
            }else{
                $('[name="ticketForm"]').submit();
            }
        });

        $('[data-type="attachment"]').on('click', function(){
            window.open('{{ asset('storage/ticket') }}/' + $(this).data('file'), '_blank');
        });

        $('#customFile').on('change', function(){
            $('[data-problem-file="problemAttachment"]').css('color','green').html('Dosya Seçildi <small class="text-danger">' + $(this)[0].files[0].name + '</small>');
        });
    </script>
@endsection