@extends('layouts.admin')
@section('content') 
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ $title }}</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active">{{ $title }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->

@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

<form id="contact-form" action="{{ route('admin.contact.update') }}" method="POST" autocomplete="off" class="needs-validation" novalidate>
    @csrf
    <div class="row">
        <!-- Left Section -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" value="{{ old('phone', $contact->phone) }}" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" value="{{ old('email', $contact->email) }}" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Address</label>
                        <input type="text" name="address" value="{{ old('address', $contact->address) }}" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">About / Description</label>
                        <textarea id="content" name="description" class="form-control">{{ old('description', $contact->description) }}</textarea>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">Social Media Links</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Facebook</label>
                        <input type="url" name="facebook" value="{{ old('facebook', $contact->facebook) }}" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Instagram</label>
                        <input type="url" name="instagram" value="{{ old('instagram', $contact->instagram) }}" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Twitter (X)</label>
                        <input type="url" name="twitter" value="{{ old('twitter', $contact->twitter) }}" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">TikTok</label>
                        <input type="url" name="tiktok" value="{{ old('tiktok', $contact->tiktok) }}" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">YouTube</label>
                        <input type="url" name="youtube" value="{{ old('youtube', $contact->youtube) }}" class="form-control">
                    </div>
                </div>
            </div>
        </div>
        <!-- end left col -->

        <!-- Right Section -->
        <div class="col-lg-4">
            <div class="card h-100 d-flex flex-column justify-content-between">
                <div class="card-body text-center">
                    <p class="text-muted mb-4">Save your contact information updates.</p>
                    <button type="submit" class="btn btn-success w-100" id="submitBtn">Save</button>
                </div>
            </div>
        </div>
        <!-- end right col -->
    </div>
</form>
@endsection

@section('script')
<script src="{{ asset('assets/libs/%40ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>
<!-- <script>
  let editor;
  ClassicEditor.create(document.querySelector('#content'))
    .then(newEditor => {
      editor = newEditor;
      editor.model.document.on('change:data', function () {
        let submitBtn = document.getElementById('submitBtn');
        if (submitBtn.disabled) submitBtn.disabled = false;
      });
    })
    .catch(error => console.error('CKEditor init failed:', error));
</script> -->
@endsection