@extends('admin.layouts.main')
@section('title', 'Edit Jawaban Pertanyaan')
@section('navContactUs', 'active')

@section('content')

<div class="container-fluid mt-4">
    <div class="card border-0 shadow-sm mb-4 top-card">
        <div class="card-body d-flex justify-content-between align-items-center">
            <div>
                <h3 class="fw-bold mb-1">
                    Edit Pertanyaan
                </h3>
                <small>
                    Kelola jawaban pertanyaan pelanggan
                </small>
            </div>
            <div>
                <i class="bi bi-chat-left-text-fill header-icon"></i>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-11">
            <div class="card border-0 shadow-sm form-card">
                <div class="card-body p-4 p-lg-5">
                    <form action="{{ route('contactuses.update', $question->id) }}"
                        method="POST">
                        @csrf
                        @method('PUT')
                        <div class="mb-4">
                            <label class="form-label">
                                Nama
                            </label>
                            <input type="text"
                                class="form-control form-modern readonly-input"
                                value="{{ $question->nama }}"
                                readonly>
                        </div>
                        <div class="mb-4">
                            <label class="form-label">
                                Email
                            </label>
                            <input type="email"
                                class="form-control form-modern readonly-input"
                                value="{{ $question->email }}"
                                readonly>
                        </div>
                        <div class="mb-4">
                            <label class="form-label">
                                Pertanyaan
                            </label>
                            <textarea
                                class="form-control form-modern readonly-input"
                                rows="5"
                                readonly>{{ $question->pertanyaan }}</textarea>
                        </div>
                        <div class="mb-4">
                            <label class="form-label">
                                Jawaban
                            </label>
                            <textarea
                                name="jawaban"
                                class="form-control form-modern @error('jawaban') is-invalid @enderror"
                                rows="5"
                                placeholder="Masukkan jawaban untuk pelanggan">{{ old('jawaban', $question->jawaban) }}</textarea>
                            @error('jawaban')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div class="faq-box mb-4">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <div class="faq-title">
                                        Tampilkan ke FAQ Publik
                                    </div>
                                    <small class="faq-desc">
                                        Pertanyaan ini akan muncul pada halaman FAQ website
                                    </small>
                                </div>
                                <div class="form-check form-switch m-0">
                                    <input
                                        class="form-check-input custom-switch"
                                        type="checkbox"
                                        id="is_published"
                                        name="is_published"
                                        value="1"
                                        {{ $question->is_published ? 'checked' : '' }}>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex gap-3 mt-4">
                            <a href="{{ route('contactuses.index') }}"
                                class="btn btn-back">
                                <i class="bi bi-arrow-left me-1"></i>
                                Kembali
                            </a>
                            <button type="submit"
                                class="btn btn-save">
                                <i class="bi bi-check-circle me-1"></i>
                                Simpan Jawaban
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .top-card{
        background:linear-gradient(
            135deg,
            #FDFBF7 0%,
            #F7F2EA 60%,
            #EFE5D5 100%
        ) !important;
        border-radius:34px !important;
        border:1px solid #E6D8C2;
        box-shadow:0 15px 40px rgba(0,0,0,.08);
    }
    .top-card h3{
        color:#2B2B2B;
        font-size:40px;
        font-weight:700;
    }
    .top-card small{
        color:#7B6F5C;
    }
    .header-icon{
        font-size:40px;
        color:#C89A4B;
    }
    .form-card{
        background:#FFFFFF !important;
        border-radius:36px !important;
        border:1px solid #E8DDCA;
        box-shadow:0 20px 45px rgba(0,0,0,.06);
    }
    .form-label{
        color:#2F2F2F;
        font-weight:600;
        margin-bottom:10px;
    }
    .form-modern{
        border-radius:18px !important;
        background:#FCFAF7 !important;
        border:1px solid #DDD2BE !important;
        color:#2B2B2B !important;
        padding:16px 22px;
        transition:.3s;
    }
    .form-modern::placeholder{
        color:#9A8F7E;
    }
    .form-modern:focus{
        background:#fff !important;
        border-color:#C89A4B !important;
        box-shadow:0 0 0 4px rgba(200,154,75,.15)!important;
    }
    .readonly-input{
        background:#F5F1EA !important;
        color:#746B5E !important;
    }
    .faq-box{
        background:#FCFAF7;
        border:1px solid #E6D9C4;
        border-radius:22px;
        padding:22px;
    }
    .faq-title{
        color:#2B2B2B;
        font-weight:700;
    }
    .faq-desc{
        color:#766B5D;
    }
    .custom-switch{
        width:58px !important;
        height:30px !important;
        cursor:pointer;
    }
    .custom-switch:checked{
        background-color:#C89A4B !important;
        border-color:#C89A4B !important;
    }
    .btn-save{
        background:linear-gradient(
            135deg,
            #C89A4B,
            #E5CFA4
        );
        color:#fff;
        border:none;
        border-radius:18px;
        padding:14px 30px;
        font-weight:600;
        transition:.3s;
        box-shadow:0 10px 25px rgba(200,154,75,.25);
    }
    .btn-save:hover{
        background:linear-gradient(
            135deg,
            #B88437,
            #D8BC85
        );

        color:#fff;
        transform:translateY(-2px);
    }
    .btn-back{
        background:#2B2B2B;
        color:#fff;
        border:none;
        border-radius:18px;
        padding:14px 30px;
        transition:.3s;
    }
    .btn-back:hover{
        background:#1A1A1A;
        color:#fff;
        transform:translateY(-2px);
    }
    @media(max-width:768px){
        .top-card h3{
            font-size:30px;
        }
        .d-flex.gap-3{
            flex-direction:column;
        }
        .btn-save,
        .btn-back{
            width:100%;
        }
    }
</style>

@endsection