@extends('backend.layout.master-tailwind')
@section('title', __('Freelancer Feedbacks'))

@section('admin_styles')
    <style>
        #edit-feedback-dialog {
            border: none;
            border-radius: 12px;
            padding: 0;
            background: var(--surface);
            color: var(--text);
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
            width: 480px;
            max-width: 94vw;
        }

        #edit-feedback-dialog::backdrop {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(2px);
        }

        .dialog-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 18px 12px;
            border-bottom: 1px solid var(--border);
            font-weight: 600;
            font-size: 14px
        }

        .dialog-body {
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 14px
        }

        .dialog-foot {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            padding: 12px 18px 16px;
            border-top: 1px solid var(--border)
        }

        .field-label {
            display: block;
            font-size: 12px;
            color: var(--text-2);
            margin-bottom: 6px;
            font-weight: 500
        }

        .field-input {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--surface-2);
            color: var(--text);
            font-size: 13px;
            outline: none;
            box-sizing: border-box
        }

        .field-input:focus {
            border-color: var(--accent)
        }

        textarea.field-input {
            resize: vertical;
            min-height: 80px
        }

        @media (max-width: 640px) {
            .tbl th:nth-child(3), .tbl td:nth-child(3),
            .tbl th:nth-child(4), .tbl td:nth-child(4),
            .tbl th:nth-child(6), .tbl td:nth-child(6) { display: none; }
        }
    </style>
@endsection

@section('content')

    <div class="page">

        <div class="page-head">
            <div>
                <h1 class="page-title">{{ __('Freelancer Feedbacks') }}</h1>
                <p class="page-sub">{{ $feedbacks->total() }} {{ __('feedbacks') }}</p>
            </div>
        </div>

        <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:16px">
            <div
                style="background:color-mix(in oklch,var(--warning,#f59e0b) 10%,transparent);border:1px solid color-mix(in oklch,var(--warning,#f59e0b) 35%,transparent);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--text-2);display:flex;gap:8px;align-items:flex-start">
                <svg class="icon" style="flex:none;margin-top:1px;color:var(--warning,#f59e0b)" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 3l9 16H3z" />
                    <path d="M12 10v4" />
                    <circle cx="12" cy="17" r=".6" fill="currentColor" />
                </svg>
                {{ __('This is a collection of freelancer feedbacks. You can edit feedbacks here. Only approved feedbacks will be displayed on the frontend.') }}
            </div>
            <div
                style="background:color-mix(in oklch,var(--warning,#f59e0b) 10%,transparent);border:1px solid color-mix(in oklch,var(--warning,#f59e0b) 35%,transparent);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--text-2);display:flex;gap:8px;align-items:flex-start">
                <svg class="icon" style="flex:none;margin-top:1px;color:var(--warning,#f59e0b)" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 3l9 16H3z" />
                    <path d="M12 10v4" />
                    <circle cx="12" cy="17" r=".6" fill="currentColor" />
                </svg>
                {{ __('You can search by rating only.') }}
            </div>
        </div>

        <div class="card">
            <div class="toolbar">
                <div style="position:relative;width:220px">
                    <svg class="icon"
                        style="position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="11" cy="11" r="7" />
                        <path d="m20 20-3.5-3.5" />
                    </svg>
                    <input type="text" id="string_search" placeholder="{{ __('Search by rating…') }}"
                        style="width:100%;padding:4px 10px 4px 30px;background:var(--bg);border:1px solid var(--border);border-radius:6px;font-size:13px;color:var(--text);outline:none;height:32px">
                </div>
            </div>
            <div class="search_result">
                @include('backend.pages.feedback.search-result')
            </div>
        </div>

    </div>

    {{-- Edit Feedback Dialog --}}
    <dialog id="edit-feedback-dialog">
        <div class="dialog-head">
            <span>{{ __('Edit Feedback') }}</span>
            <button type="button" class="icon-btn" onclick="document.getElementById('edit-feedback-dialog').close()">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12" />
                </svg>
            </button>
        </div>
        <div id="edit-feedback-errors"
            style="display:none;margin:12px 18px 0;padding:10px 12px;background:var(--danger-soft,#fee);border:1px solid color-mix(in oklch,var(--danger,#e53) 30%,transparent);border-radius:8px;font-size:12px;color:var(--danger,#e53);line-height:1.7">
        </div>
        <form id="reviewForm">
            <input type="hidden" name="feedback_id" id="feedback_id">
            <div class="dialog-body">
                <div>
                    <label class="field-label" for="edit-title">{{ __('Title') }}</label>
                    <input class="field-input" type="text" id="edit-title" name="title"
                        placeholder="{{ __('Feedback title') }}">
                </div>
                <div>
                    <label class="field-label" for="edit-description">{{ __('Message') }}</label>
                    <textarea class="field-input" id="edit-description" name="description" placeholder="{{ __('Feedback message') }}"></textarea>
                </div>
                <div>
                    <label class="field-label" for="edit-rating">{{ __('Rating') }} <span
                            style="font-weight:400;opacity:.6">{{ __('(1–5)') }}</span></label>
                    <input class="field-input" type="number" id="edit-rating" name="rating" min="1" max="5"
                        placeholder="5" style="width:80px">
                </div>
            </div>
            <div class="dialog-foot">
                <button type="button" class="btn ghost sm"
                    onclick="document.getElementById('edit-feedback-dialog').close()">{{ __('Cancel') }}</button>
                <button type="button" class="btn primary sm update_rating">{{ __('Update') }}</button>
            </div>
        </form>
    </dialog>

@endsection

@section('script')
    @include('backend.pages.feedback.feedback-js')
@endsection