@extends('vendor.merchants.layouts.master')

@push('css')
    <style>
        .input-group-static svg{
            margin: auto;
            display: block;
        }
    </style>
@endpush

@section('content')
    <div class="row mt-4">
        <div class="col-lg-9 col-12 mx-auto position-relative">
            <div class="card">
                <div class="card-header p-3 pt-2">
                    <div class="icon icon-lg icon-shape bg-gradient-dark shadow text-center border-radius-xl mt-n4 me-3 float-start">
                        <i class="material-icons opacity-10">warning</i>
                    </div>
                    <h6 class="mb-0">{{ __('voyager::seeders.data_types.complaint.singular') }}</h6>
                </div>

                <div class="card-body pt-2">
                    <div class="d-flex align-items-center gap-2">
                        <label for="projectName" class="form-label mb-0">
                            {{ __('voyager::seeders.data_rows.customer_id') }}:
                        </label>

                        <br>
                        <span>{{ $complaint->customer->name }}</span>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center gap-2">
                        <label for="projectName" class="form-label mb-0">
                            {{ __('voyager::seeders.data_rows.order_id') }}:
                        </label>

                        <br>
                        <span>{{ $complaint->order?->external_order_id }}</span>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center gap-2">
                        <label for="projectName" class="form-label mb-0">
                            {{ __('voyager::seeders.data_rows.reason') }}:
                        </label>

                        <br>
                        <span>{{ \App\Models\Complaint::$reasons[$complaint->reason] }}</span>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center gap-2">
                        <label for="projectName" class="form-label mb-0">
                            {{ __('voyager::seeders.data_rows.type') }}:
                        </label>

                        <br>
                        <span>{{ $complaint->type }}</span>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center gap-2">
                        <label for="projectName" class="form-label mb-0">
                            {{ __('voyager::seeders.data_rows.notes') }}:
                        </label>

                        <br>
                        <span>{{ $complaint->notes }}</span>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center gap-2">
                        <label for="projectName" class="form-label mb-0">
                            {{ __('voyager::seeders.data_rows.accepted') }}:
                        </label>

                        {!! $complaint->accepted
                            ? "<span class='badge bg-gradient-success'>". __('voyager::generic.yes') ."</span>"
                            : "<span class='badge bg-gradient-danger'>". __('voyager::generic.no') ."</span>"
                        !!}
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection