@extends('layouts.main')
@section('content')  

<style>
    :root {
         --brand-red: #e6353f;
        --text-dark: #2b2b2b;
        --brand-coral: #f16453;
        --accent-teal: #4fc3d9;
        --border-grey: #d5d5d5;
    }

    .feedback {
        max-width: 1140px;
        margin: 0 auto;
        padding: 60px 20px;
    }

    .feedback__badge {
        text-align: center;
        margin: -25px auto 40px;
        position: relative;
        z-index: 2;
    }

    .feedback__badge span {
        display: inline-block;
        background: var(--brand-red);
        color: #fff;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 15px;
        padding: 12px 40px;
        border-radius: 22px;
    }

    .feedback__form {
        max-width: 1360px;
    }

    .form-group {
        margin-bottom: 22px;
    }

    .form-group label {
        display: block;
        color: var(--text-dark);
        font-size: 14px;
        margin-bottom: 8px;
    }

    .form-group input[type="text"],
    .form-group textarea {
        width: 100%;
        border: 1px solid var(--border-grey);
        border-radius: 3px;
        padding: 12px 14px;
        font-size: 14px;
        color: var(--text-dark);
        box-sizing: border-box;
        font-family: inherit;
    }

    .form-group textarea {
        resize: vertical;
    }

    .feedback__rating-title {
        color: var(--text-dark);
        font-size: 20px;
        font-weight: 700;
        margin: 40px 0 25px;
    }

    .rating-group {
        margin-bottom: 22px;
    }

    .rating-group__label {
        color: var(--text-dark);
        font-size: 15px;
        margin: 0 0 10px;
    }

    .rating-group__options {
        display: flex;
        flex-wrap: wrap;
        gap: 60px;
    }

    .radio-option {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-size: 14px;
        color: var(--text-dark);
    }

    .radio-option input[type="radio"] {
        appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid var(--accent-teal);
        border-radius: 50%;
        margin: 0;
        position: relative;
        cursor: pointer;
    }

    .radio-option input[type="radio"]:checked::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent-teal);
    }

    .feedback__note {
        text-align: center;
        color: #6b6b6b;
        font-size: 13px;
        margin: 30px 0 25px;
    }

    .btn-submit {
        display: block;
        margin: 0 auto;
        background: var(--brand-coral);
        color: #fff;
        border: none;
        font-size: 15px;
        font-weight: 600;
        padding: 12px 45px;
        border-radius: 3px;
        cursor: pointer;
    }

    .btn-submit:hover {
        background: var(--brand-red);
    }

    @media (max-width: 600px) {
        .rating-group__options {
            gap: 25px;
        }
    }
</style>

<section class="feedback">

    <div class="feedback__badge">
        <span>{{ __('messages.feedback_form_title') }}</span>
    </div>

 @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul style="margin:0;padding-left:20px;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('feedback.store') }}" class="feedback__form">

            @csrf

            <div class="form-group">
                <label for="doctor_name">{{ __('messages.feedback_doctors_name') }}</label>

                <input
                    type="text"
                    id="doctor_name"
                    name="doctor_name"
                    value="{{ old('doctor_name') }}"
                    placeholder="{{ __('messages.feedback_doctors_name') }}"
                    required>
            </div>

            <div class="form-group">
                <label for="patient_name">{{ __('messages.feedback_patient_name') }}</label>

                <input
                    type="text"
                    id="patient_name"
                    name="patient_name"
                    value="{{ old('patient_name') }}"
                    placeholder="{{ __('messages.feedback_patient_name') }}"
                    required>
            </div>

            <div class="form-group">
                <label for="case_delivered_on">{{ __('messages.feedback_case_delivered_on') }}</label>

                <input
                    type="text"
                    id="case_delivered_on"
                    name="case_delivered_on"
                    value="{{ old('case_delivered_on') }}"
                    placeholder="{{ __('messages.feedback_case_delivered_on') }}">
            </div>

            <h3 class="feedback__rating-title">
                {{ __('messages.feedback_rating_title') }}
            </h3>

            <!-- Interproximal Contact -->

            <div class="rating-group">

                <p class="rating-group__label">
                    {{ __('messages.feedback_interproximal_contact') }}
                </p>

                <div class="rating-group__options">

                    <label class="radio-option">
                        <input type="radio"
                               name="interproximal_contact"
                               value="Average"
                               {{ old('interproximal_contact')=='Average' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_average') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="interproximal_contact"
                               value="Good"
                               {{ old('interproximal_contact')=='Good' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_good') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="interproximal_contact"
                               value="Excellent"
                               {{ old('interproximal_contact')=='Excellent' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_excellent') }}</span>
                    </label>

                </div>

            </div>

            <!-- Margin Framework Fit -->

            <div class="rating-group">

                <p class="rating-group__label">
                    {{ __('messages.feedback_margin_framework_fit') }}
                </p>

                <div class="rating-group__options">

                    <label class="radio-option">
                        <input type="radio"
                               name="margin_framework_fit"
                               value="Average"
                               {{ old('margin_framework_fit')=='Average' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_average') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="margin_framework_fit"
                               value="Good"
                               {{ old('margin_framework_fit')=='Good' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_good') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="margin_framework_fit"
                               value="Excellent"
                               {{ old('margin_framework_fit')=='Excellent' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_excellent') }}</span>
                    </label>

                </div>

            </div>

            <!-- Occlusal Contact -->

            <div class="rating-group">

                <p class="rating-group__label">
                    {{ __('messages.feedback_occlusal_contact') }}
                </p>

                <div class="rating-group__options">

                    <label class="radio-option">
                        <input type="radio"
                               name="occlusal_contact"
                               value="Average"
                               {{ old('occlusal_contact')=='Average' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_average') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="occlusal_contact"
                               value="Good"
                               {{ old('occlusal_contact')=='Good' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_good') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="occlusal_contact"
                               value="Excellent"
                               {{ old('occlusal_contact')=='Excellent' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_excellent') }}</span>
                    </label>

                </div>

            </div>
                        <!-- Esthetics -->

            <div class="rating-group">

                <p class="rating-group__label">
                    {{ __('messages.feedback_esthetics') }}
                </p>

                <div class="rating-group__options">

                    <label class="radio-option">
                        <input type="radio"
                               name="esthetics"
                               value="Average"
                               {{ old('esthetics')=='Average' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_average') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="esthetics"
                               value="Good"
                               {{ old('esthetics')=='Good' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_good') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="esthetics"
                               value="Excellent"
                               {{ old('esthetics')=='Excellent' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_excellent') }}</span>
                    </label>

                </div>

            </div>


            <!-- Anterior Esthetics -->

            <div class="rating-group">

                <p class="rating-group__label">
                    {{ __('messages.feedback_anterior_esthetics') }}
                </p>

                <div class="rating-group__options">

                    <label class="radio-option">
                        <input type="radio"
                               name="anterior_esthetics"
                               value="Average"
                               {{ old('anterior_esthetics')=='Average' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_average') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="anterior_esthetics"
                               value="Good"
                               {{ old('anterior_esthetics')=='Good' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_good') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="anterior_esthetics"
                               value="Excellent"
                               {{ old('anterior_esthetics')=='Excellent' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_excellent') }}</span>
                    </label>

                </div>

            </div>


            <!-- Shade -->

            <div class="rating-group">

                <p class="rating-group__label">
                    {{ __('messages.feedback_shade') }}
                </p>

                <div class="rating-group__options">

                    <label class="radio-option">
                        <input type="radio"
                               name="shade"
                               value="Average"
                               {{ old('shade')=='Average' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_average') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="shade"
                               value="Good"
                               {{ old('shade')=='Good' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_good') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="shade"
                               value="Excellent"
                               {{ old('shade')=='Excellent' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_excellent') }}</span>
                    </label>

                </div>

            </div>


            <!-- Service -->

            <div class="rating-group">

                <p class="rating-group__label">
                    {{ __('messages.feedback_service') }}
                </p>

                <div class="rating-group__options">

                    <label class="radio-option">
                        <input type="radio"
                               name="service"
                               value="Average"
                               {{ old('service')=='Average' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_average') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="service"
                               value="Good"
                               {{ old('service')=='Good' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_good') }}</span>
                    </label>

                    <label class="radio-option">
                        <input type="radio"
                               name="service"
                               value="Excellent"
                               {{ old('service')=='Excellent' ? 'checked' : '' }}>
                        <span>{{ __('messages.feedback_excellent') }}</span>
                    </label>

                </div>

            </div>


            <div class="form-group">

                <label for="improve">
                    {{ __('messages.feedback_how_can_we_improve') }}
                </label>

                <textarea
                    id="improve"
                    name="improve"
                    rows="5"
                    placeholder="{{ __('messages.feedback_how_can_we_improve') }}">{{ old('improve') }}</textarea>

            </div>
            
            <!-- Hidden Tracking Fields -->

            <input type="hidden" name="utm_source" value="{{ old('utm_source', $tracking['utm_source'] ?? 'website') }}">
            <input type="hidden" name="utm_medium" value="{{ old('utm_medium', $tracking['utm_medium']) }}">
            <input type="hidden" name="utm_campaign" value="{{ old('utm_campaign', $tracking['utm_campaign']) }}">
            <input type="hidden" name="matchtype" value="{{ old('matchtype', $tracking['matchtype']) }}">
            <input type="hidden" name="device" value="{{ old('device', $tracking['device']) }}">
            <input type="hidden" name="network" value="{{ old('network', $tracking['network']) }}">
            <input type="hidden" name="creative" value="{{ old('creative', $tracking['creative']) }}">
            <input type="hidden" name="keyword1" value="{{ old('keyword1', $tracking['keyword1']) }}">
            <input type="hidden" name="devicemodel" value="{{ old('devicemodel', $tracking['devicemodel']) }}">
            <input type="hidden" name="target" value="{{ old('target', $tracking['target']) }}">
            <input type="hidden" name="adgroupid1" value="{{ old('adgroupid1', $tracking['adgroupid1']) }}">
            <input type="hidden" name="campaignid1" value="{{ old('campaignid1', $tracking['campaignid1']) }}">
            <input type="hidden" name="ip_address" value="{{ old('ip_address', $tracking['ip_address']) }}">
            <input type="hidden" name="url" value="{{ old('url', $tracking['url']) }}">

            <p class="feedback__note">
                {{ __('messages.feedback_note') }}
            </p>

            <button type="submit" class="btn-submit">
                {{ __('messages.feedback_submit') }}
            </button>

        </form>

</section>

@endsection