@extends('admin.layouts.master')

@section('css')
<style>
    /* عنوان الصفحة: لون أوضح من #636363 الافتراضي */
    html body .content .content-wrapper.page-supports-tickets .content-header-title {
        color: #161d31;
        font-weight: 600;
    }
    body.dark-layout html body .content .content-wrapper.page-supports-tickets .content-header-title {
        color: #f5f6fc;
        font-weight: 600;
    }
    .page-supports-tickets .table thead th {
        color: #2c2c2c;
        font-weight: 600;
    }
    body.dark-layout .page-supports-tickets .table thead th {
        color: #ebeefd;
    }
</style>
@endsection

@section('contents')

    <div class="content-wrapper page-supports-tickets">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">{{__('Support Tickets')}}</h2>
                        <div class="breadcrumb-wrapper col-12">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{route('admin.home')}}">{{__('Home')}}</a>
                                </li>
                                <li class="breadcrumb-item active">{{__('Support Tickets')}}
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            @if(auth()->user()->can('create_supports')  )
            <div class="content-header-right text-md-right col-md-3 col-12 d-md-block d-none">
                <div class="form-group breadcrum-right">
                        <button type="button" class="btn bg-gradient-primary mr-1 mb-1 waves-effect waves-light" data-toggle="modal" data-target="#inlineForm">{{__('Add New Ticket')}}</button>
                </div>
            </div>
            @endif

        </div>
        @include('admin.supports.search_form')
        <div class="content-body">
            <!-- Zero configuration table -->
            <section id="basic-datatable">
                <div class="row">
                    <div class="col-12">
                        <div class="card">

                            <div class="card-content">
                                <div class="card-body card-dashboard">
                                    <div class="table-responsive">
                                        <table class="table table-hover mb-0">
                                            <thead>
                                                <tr>
                                                    <th style="width:50px">#</th>
                                                    <th>{{ __('Title') }}</th>
                                                    <th>{{ __('Owner') }}</th>
                                                    <th>{{ __('Type') }}</th>
                                                    <th>{{ __('Priority') }}</th>
                                                    <th>{{ __('Status') }}</th>
                                                    <th>{{ __('Messages') }}</th>
                                                    <th>{{ __('Created') }}</th>
                                                    <th>{{ __('Actions') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            @forelse($supports as $support)
                                                @php
                                                    $typeLabel = $support->type
                                                        ? (function($v){ return is_array($v) ? implode(', ',$v) : (string)$v; })(getTrans($support->type->display_name, lang()))
                                                        : '-';
                                                    $priorityClass = match(strtolower($support->priority ?? '')) {
                                                        'high'   => 'badge-danger',
                                                        'medium' => 'badge-warning',
                                                        default  => 'badge-info',
                                                    };
                                                    $statusClass = match($support->status) {
                                                        'open'   => 'badge-success',
                                                        'closed' => 'badge-danger',
                                                        default  => 'badge-secondary',
                                                    };
                                                    $statusLabel = match($support->status) {
                                                        'open'   => __('Open'),
                                                        'closed' => __('Closed'),
                                                        default  => __('Pending'),
                                                    };
                                                @endphp
                                                <tr>
                                                    <td class="text-muted" style="font-size:12px;">{{ $support->id }}</td>

                                                    <td style="max-width:200px;">
                                                        <a href="{{ route('supports.show', $support->id) }}" class="font-weight-bold text-dark" style="font-size:13.5px;">
                                                            {{ \Illuminate\Support\Str::limit($support->title, 45) }}
                                                        </a>
                                                        @if($support->body)
                                                            <br><small class="text-muted">{{ \Illuminate\Support\Str::limit($support->body, 55) }}</small>
                                                        @endif
                                                    </td>

                                                    <td>
                                                        @if($support->supportable)
                                                            <div class="d-flex align-items-center" style="gap:.5rem;">
                                                                <img src="{{ $support->supportable->image }}" alt="" width="30" height="30" style="border-radius:50%;object-fit:cover;flex-shrink:0;">
                                                                <div>
                                                                    <a href="{{ route('users.show', $support->supportable->id) }}" class="text-dark font-weight-bold" style="font-size:13px;">
                                                                        {{ optional($support->supportable)->name ?? '-' }}
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        @else
                                                            <span class="text-muted">-</span>
                                                        @endif
                                                    </td>

                                                    <td><span style="font-size:12.5px;">{{ $typeLabel }}</span></td>

                                                    <td>
                                                        <span class="badge {{ $priorityClass }}" style="font-size:11.5px;padding:4px 9px;border-radius:20px;">
                                                            {{ $support->priority ?? '-' }}
                                                        </span>
                                                    </td>

                                                    <td>
                                                        <span class="badge {{ $statusClass }}" style="font-size:11.5px;padding:4px 9px;border-radius:20px;">
                                                            {{ $statusLabel }}
                                                        </span>
                                                    </td>

                                                    <td class="text-center">
                                                        <span class="badge badge-light border" style="font-size:12px;padding:4px 9px;border-radius:20px;">
                                                            <i class="feather icon-message-circle" style="font-size:11px;"></i>
                                                            {{ $support->threads_count }}
                                                        </span>
                                                    </td>

                                                    <td>
                                                        <span style="font-size:12px;color:#555;">{{ custom_date($support->created_at) }}</span>
                                                        @if($support->createdByUser)
                                                            <br><small class="text-muted">{{ __('by') }} {{ $support->createdByUser->name }}</small>
                                                        @endif
                                                    </td>

                                                    <td>
                                                        <a href="{{ route('supports.show', $support->id) }}" class="btn btn-outline-primary btn-sm mr-50" title="{{ __('View') }}">
                                                            <i class="fa fa-eye"></i>
                                                        </a>
                                                        @can('delete_supports')
                                                            <a onclick="confirmAlert(`{{ route('supports.delete', $support) }}`)" href="#" class="btn btn-outline-danger btn-sm" title="{{ __('Delete') }}">
                                                                <i class="fa fa-trash"></i>
                                                            </a>
                                                        @endcan
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="9" class="text-center py-3 text-muted">
                                                        <i class="feather icon-inbox" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
                                                        {{ __('No support tickets found.') }}
                                                    </td>
                                                </tr>
                                            @endforelse
                                            </tbody>
                                        </table>
                                    </div>

                                    <!-- Pagination -->
                                    @include('admin.components.advanced-pagination', ['paginator' => $supports])
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--/ Zero configuration table -->


        </div>
    </div>
    <div class="modal fade text-left" id="inlineForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" aria-hidden="true">
        <div class="modal-dialog" role="document" style="max-width: 750px;width: calc(100% - 30px)">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel33">{{__('New Support Ticket')}}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" action="{{route('supports.store')}}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <label>{{__('User')}}  <i class="fa fa-asterisk"></i></label>
                                <div class="form-group">
                                    <select name="user_id" class="form-control select2-users @error('user_id') border-danger @enderror" required id="user_id" style="width:100%">
                                        <option value="">{{__('Choose')}}</option>
                                    </select>

                                    @error('user_id')
                                    <div class="text-danger mt-2">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>{{__('Support Type')}}  <i class="fa fa-asterisk"></i></label>
                                <div class="form-group">
                                    <select name="support_type_id" class="form-control @error('support_type_id') border-danger @enderror" required id="user_id">
                                        <option value="">{{__('Choose')}}</option>
                                        @foreach($types as $type)
                                            <option value="{{ $type->uuid }}">{{getTrans( $type->display_name,lang()) }}</option>
                                        @endforeach
                                    </select>

                                    @error('support_type_id')
                                    <div class="text-danger mt-2">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label>{{__('Priority')}}  <i class="fa fa-asterisk"></i></label>
                                <div class="form-group">
                                    <select name="priority" class="form-control @error('priority') border-danger @enderror" required id="user_id">
                                        <option value="">{{__('Choose')}}</option>
                                        @foreach($priorities as $priority)
                                            <option value="{{ $priority }}">{{$priority}}</option>
                                        @endforeach
                                    </select>

                                    @error('priority')
                                    <div class="text-danger mt-2">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label>{{__('Title')}}  <i class="fa fa-asterisk"></i></label>
                                <div class="form-group">
                                    <input type="text" name="title"  class="form-control" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label>{{__('Body')}}  <i class="fa fa-asterisk"></i></label>
                                <div class="form-group">
                                    <textarea type="text" name="body"  class="form-control" required></textarea>
                                </div>
                            </div>


                            <div class="col-md-6">
                                <div class="media mb-2">
                                    <a href="javascript: void(0);">
                                        <img src="{{asset('app-assets/default-user.png')}}" id="output"  class="rounded mr-75" alt="profile image" height="64" width="64">
                                    </a>
                                    <div class="media-body mt-75">
                                        <div class="col-12 px-0 d-flex flex-sm-row flex-column justify-content-start">
                                            <label class="btn btn-sm btn-primary ml-50 mb-50 mb-sm-0 cursor-pointer" for="account-upload">{{__('Upload new photo')}}</label>
                                            <input type="file" name="image" id="account-upload" onchange="loadFile(event)" hidden accept="image/*">
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">{{__('Submit')}}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
$(document).ready(function () {
    $('#inlineForm').on('shown.bs.modal', function () {
        initUsersSelect2();
    });

    function initUsersSelect2() {
        $('.select2-users').select2({
            dropdownParent: $('#inlineForm'),
            placeholder: '{{ __("Search for a user...") }}',
            allowClear: true,
            minimumInputLength: 0,
            ajax: {
                url: '{{ route("supports.searchUsers") }}',
                dataType: 'json',
                delay: 300,
                data: function (params) {
                    return { q: params.term || '' };
                },
                processResults: function (data) {
                    return { results: data.results };
                },
                cache: true
            }
        });
    }
});
</script>
@endsection