@extends('backend.app')

@section('title', 'Contact Us CMS')

@section('content')
    <div class="content fs-6 d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="toolbar" id="kt_toolbar">
            <div class="container-fluid d-flex flex-stack flex-wrap flex-sm-nowrap">
                <div class="d-flex flex-column align-items-start justify-content-center flex-wrap me-2">
                    <h1 class="text-dark fw-bold my-1 fs-2">Contact Us CMS</h1>
                    <ul class="breadcrumb fw-semibold fs-base my-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <li class="breadcrumb-item text-dark">Contact Us CMS</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="post fs-6 d-flex flex-column-fluid" id="kt_post">
            <div class="container-fluid">
                @if(session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif
                <div class="card card-flush">
                    <div class="card-body">
                        <form action="{{ route('cms.contact-us.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            
                            <h3 class="mb-4">Collaborate Section</h3>
                            <div class="mb-5">
                                <label class="form-label required">Collaborate Title</label>
                                <input type="text" name="collaborate_title" class="form-control" value="{{ old('collaborate_title', $page->content['collaborate_title'] ?? '') }}" required>
                            </div>
                            <div class="mb-5">
                                <label class="form-label required">Collaborate Subtitle</label>
                                <textarea name="collaborate_subtitle" class="form-control" rows="2" required>{{ old('collaborate_subtitle', $page->content['collaborate_subtitle'] ?? '') }}</textarea>
                            </div>
                            <div class="mb-5">
                                <label class="form-label required">Collaborate Form Bottom Text</label>
                                <input type="text" name="collaborate_bottom_text" class="form-control" value="{{ old('collaborate_bottom_text', $page->content['collaborate_bottom_text'] ?? '') }}" required>
                            </div>
                            <div class="mb-5">
                                <label class="form-label">Collaborate Background Image</label>
                                <input type="file" name="collaborate_bg_image" class="form-control" accept="image/*">
                                @if(!empty($page->content['collaborate_bg_image']))
                                    <div class="mt-2">
                                        <img src="{{ asset('storage/' . $page->content['collaborate_bg_image']) }}" class="img-thumbnail" style="max-height:120px;">
                                        <input type="hidden" name="collaborate_bg_image_existing" value="{{ $page->content['collaborate_bg_image'] }}">
                                    </div>
                                @endif
                            </div>

                            <hr class="my-8">

                            <h3 class="mb-4">Career Section</h3>
                            <div class="mb-5">
                                <label class="form-label required">Career Title</label>
                                <input type="text" name="career_title" class="form-control" value="{{ old('career_title', $page->content['career_title'] ?? '') }}" required>
                            </div>
                            <div class="mb-5">
                                <label class="form-label required">Career Description</label>
                                <textarea name="career_description" class="form-control" rows="5" required>{{ old('career_description', $page->content['career_description'] ?? '') }}</textarea>
                            </div>
                            <div class="mb-5">
                                <label class="form-label">Career Background Image</label>
                                <input type="file" name="career_bg_image" class="form-control" accept="image/*">
                                @if(!empty($page->content['career_bg_image']))
                                    <div class="mt-2">
                                        <img src="{{ asset('storage/' . $page->content['career_bg_image']) }}" class="img-thumbnail" style="max-height:120px;">
                                        <input type="hidden" name="career_bg_image_existing" value="{{ $page->content['career_bg_image'] }}">
                                    </div>
                                @endif
                            </div>

                            <hr class="my-8">

                            <h3 class="mb-4">Contact Info</h3>
                            <div class="row">
                                <div class="col-md-6 mb-5">
                                    <label class="form-label ">Email Address</label>
                                    <input type="email" name="email" class="form-control" value="{{ old('email', $page->content['contact_info']['email'] ?? '') }}">
                                </div>
                                <div class="col-md-6 mb-5">
                                    <label class="form-label ">Phone Number</label>
                                    <input type="text" name="phone" class="form-control" value="{{ old('phone', $page->content['contact_info']['phone'] ?? '') }}">
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary mt-4">Save Changes</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection