@extends('admin.layouts.admin')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card card-primary" data-aos="fade-up" data-aos-duration="1000">
                <div class="card-header text-white pb-0" style="background-color: rgb(0, 0, 0);">
                    <h1 style="font-size: 24px">
                        {{ $pageData->pageName ?? 'Home' }}
                    </h1>
                </div>

                <div class="card-body">
                    <form method="post" action="{{ route('admin.cms.update') }}" enctype="multipart/form-data">
                        @csrf
                        <h3>Banner</h3>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="banner_heading" class="form-label">Heading*</label>
                                    <input type="text" class="form-control" id="banner_heading" name="banner_heading"
                                        placeholder="Banner Heading" value="{{ $decodedContent['banner_heading'] ?? '' }}"
                                        >
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="banner_paragraph" class="form-label">Paragraph*</label>
                                    <input type="text" class="form-control" id="banner_paragraph" name="banner_paragraph"
                                        placeholder="Banner Paragraph"
                                        value="{{ $decodedContent['banner_paragraph'] ?? '' }}" >
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="banner_button_text" class="form-label">Button Text</label>
                                    <input type="text" class="form-control" id="banner_button_text"
                                        name="banner_button_text" placeholder="Button Text"
                                        value="{{ $decodedContent['banner_button_text'] ?? '' }}">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="banner_button_link" class="form-label">Button Link</label>
                                    <input type="text" class="form-control" id="banner_button_link"
                                        name="banner_button_link" placeholder="Button Link"
                                        value="{{ $decodedContent['banner_button_link'] ?? '' }}">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="banner_background_video" class="form-label">Banner Video</label>
                                    <input type="file" class="form-control" id="banner_background_video"
                                        name="banner_video">

                                    <label>Preview:</label><br>
                                    <div style="margin-top: 10px;">
                                        <video width="100%" height="150" controls>
                                            <source src="{{ $cmsPage->getFirstMediaUrl('banner_video') }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <h3>Photography</h3>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="banner_first_heading" class="form-label">First Heading Text*</label>
                                    <input type="text" class="form-control" id="banner_first_heading"
                                        name="banner_first_heading" placeholder="Banner Heading"
                                        value="{{ $decodedContent['banner_first_heading'] ?? '' }}" >
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="banner_second_heading" class="form-label">Second Heading Text*</label>
                                    <input type="text" class="form-control" id="banner_second_heading"
                                        name="banner_second_heading" placeholder="Banner Heading"
                                        value="{{ $decodedContent['banner_second_heading'] ?? '' }}" >
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="banner_third_heading" class="form-label">Third Heading Text*</label>
                                    <input type="text" class="form-control" id="banner_third_heading"
                                        name="banner_third_heading" placeholder="Banner Heading"
                                        value="{{ $decodedContent['banner_third_heading'] ?? '' }}" >
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="photography_banner_paragraph" class="form-label">Paragraph</label>
                                    <input type="text" class="form-control" id="photography_banner_paragraph"
                                        name="photography_banner_paragraph" placeholder="Banner Paragraph"
                                        value="{{ $decodedContent['photography_banner_paragraph'] ?? '' }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="photography_banner_button_text" class="form-label">Button Text</label>
                                    <input type="text" class="form-control" id="photography_banner_button_text"
                                        name="photography_banner_button_text" placeholder="Button Text"
                                        value="{{ $decodedContent['photography_banner_button_text'] ?? '' }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="photography_banner_button_link" class="form-label">Button Link</label>
                                    <input type="text" class="form-control" id="photography_banner_button_link"
                                        name="photography_banner_button_link" placeholder="Button Link"
                                        value="{{ $decodedContent['photography_banner_button_link'] ?? '' }}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="photography_banner_first_video" class="form-label">First Banner
                                        Video</label>
                                    <input type="file" class="form-control" id="photography_banner_first_video"
                                        name="photography_banner_first_video">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="photography_banner_second_video" class="form-label">Second Banner
                                        Video</label>
                                    <input type="file" class="form-control" id="photography_banner_second_video"
                                        name="photography_banner_second_video">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="photography_banner_highlighted_heading" class="form-label">Highlighted
                                        Heading</label>
                                    <input type="text" class="form-control"
                                        id="photography_banner_highlighted_heading"
                                        name="photography_banner_highlighted_heading" placeholder="Highlighted Heading"
                                        value="{{ $decodedContent['photography_banner_highlighted_heading'] ?? '' }}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <div style="margin-top: 10px;">
                                        <label>Preview:</label><br>
                                        <video width="100%" height="150" controls>
                                            <source src="{{ $cmsPage->getFirstMediaUrl('photography_banner_first_video') }}"
                                                type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <div style="margin-top: 10px;">
                                        <label>Preview:</label><br>
                                        <video width="100%" height="150" controls>
                                            <source src="{{ $cmsPage->getFirstMediaUrl('photography_banner_second_video') }}"
                                                type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <h3>How It Works</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="home_work_heading" class="form-label">Heading</label>
                                    <input type="text" class="form-control" id="home_work_heading"
                                        name="home_work_heading" placeholder="Work Heading"
                                        value="{{ $decodedContent['home_work_heading'] ?? '' }}" >
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="first_home_work_section_image" class="form-label">First Work Section
                                        Image</label>
                                    <input type="file" class="form-control" id="first_home_work_section_image"
                                        name="first_home_work_section_image" value="First Work Image" >
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="first_home_work_section_icon" class="form-label">First Work Section
                                        Icon</label>
                                    <input type="file" class="form-control" id="first_home_work_section_icon"
                                        name="first_home_work_section_icon" >
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="first_home_work_section_heading" class="form-label">First Work Section
                                        Heading</label>
                                    <input type="text" class="form-control" id="first_home_work_section_heading"
                                        name="first_home_work_section_heading"
                                        value="{{ $decodedContent['first_home_work_section_heading'] ?? '' }}" >
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="first_home_work_section_paragraph" class="form-label">First Work Section
                                        Paragraph</label>
                                    <input type="text" class="form-control" id="first_home_work_section_paragraph"
                                        name="first_home_work_section_paragraph"
                                        value="{{ $decodedContent['first_home_work_section_paragraph'] ?? '' }}" >
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <label>Preview: First Work Image</label><br>
                                <img src="{{ $cmsPage->getFirstMediaUrl('first_home_work_section_image') }}" alt="First Work Image"
                                    class="img-fluid" style="max-height: 150px;">
                            </div>
                            <div class="col-md-4">
                                <label>Preview: First Work Icon</label><br>
                                <img src="{{ $cmsPage->getFirstMediaUrl('first_home_work_section_icon') }}" alt="First Work Icon"
                                    class="img-fluid" style="max-height: 150px;">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="second_home_work_section_image" class="form-label">Second Work Section
                                        Image</label>
                                    <input type="file" class="form-control" id="second_home_work_section_image"
                                        name="second_home_work_section_image" value="second Work Image" >
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="second_home_work_section_icon" class="form-label">Second Work Section
                                        Icon</label>
                                    <input type="file" class="form-control" id="second_home_work_section_icon"
                                        name="second_home_work_section_icon" value="second Work Icon" >
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="second_home_work_section_heading" class="form-label">Second Work Section
                                        Heading</label>
                                    <input type="text" class="form-control" id="second_home_work_section_heading"
                                        name="second_home_work_section_heading"
                                        value="{{ $decodedContent['second_home_work_section_heading'] ?? '' }}" >
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="second_home_work_section_paragraph" class="form-label">Second Work Section
                                        Paragraph</label>
                                    <input type="text" class="form-control" id="second_home_work_section_paragraph"
                                        name="second_home_work_section_paragraph"
                                        value="{{ $decodedContent['second_home_work_section_paragraph'] ?? '' }}"
                                        >
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <label>Preview: First Work Image</label><br>
                                <img src="{{ $cmsPage->getFirstMediaUrl('second_home_work_section_image') }}" alt="First Work Image"
                                    class="img-fluid" style="max-height: 150px;">
                            </div>
                            <div class="col-md-4">
                                <label>Preview: First Work Icon</label><br>
                                <img src="{{ $cmsPage->getFirstMediaUrl('second_home_work_section_icon') }}" alt="First Work Icon"
                                    class="img-fluid" style="max-height: 150px;">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="third_home_work_section_image" class="form-label">Third Work Section
                                        Image</label>
                                    <input type="file" class="form-control" id="third_home_work_section_image"
                                        name="third_home_work_section_image" value="third Work Image" >
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="third_home_work_section_icon" class="form-label">Third Work Section
                                        Icon</label>
                                    <input type="file" class="form-control" id="third_home_work_section_icon"
                                        name="third_home_work_section_icon" value="third Work Icon" >
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="third_home_work_section_heading" class="form-label">Third Work Section
                                        Heading</label>
                                    <input type="text" class="form-control" id="third_home_work_section_heading"
                                        name="third_home_work_section_heading"
                                        value="{{ $decodedContent['third_home_work_section_heading'] ?? '' }}" >
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="third_home_work_section_paragraph" class="form-label">Third Work Section
                                        Paragraph</label>
                                    <input type="text" class="form-control" id="third_home_work_section_paragraph"
                                        name="third_home_work_section_paragraph"
                                        value="{{ $decodedContent['third_home_work_section_paragraph'] ?? '' }}" >
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <label>Preview: First Work Image</label><br>
                                <img src="{{ $cmsPage->getFirstMediaUrl('third_home_work_section_image') }}" alt="First Work Image"
                                    class="img-fluid" style="max-height: 150px;">
                            </div>
                            <div class="col-md-4">
                                <label>Preview: First Work Icon</label><br>
                                <img src="{{ $cmsPage->getFirstMediaUrl('third_home_work_section_icon') }}" alt="First Work Icon"
                                    class="img-fluid" style="max-height: 150px;">
                            </div>
                        </div>

                        <h3>Studio Renting Section</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="home_rent_studio_heading" class="form-label">Heading</label>
                                    <input type="text" class="form-control" id="home_rent_studio_heading"
                                        name="home_rent_studio_heading"
                                        value="{{ $decodedContent['home_rent_studio_heading'] ?? '' }}" >
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="first_home_rent_studio_card_image" class="form-label">First Rent Studio
                                        Card Image</label>
                                    <input type="file" class="form-control" id="first_home_rent_studio_card_image"
                                        name="first_home_rent_studio_card_image" value="First Rent Studio Card Image"
                                        >
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="first_home_rent_studio_card_heading" class="form-label">First Rent Studio
                                        Card Heading</label>
                                    <input type="text" class="form-control" id="first_home_rent_studio_card_heading"
                                        name="first_home_rent_studio_card_heading"
                                        value="{{ $decodedContent['first_home_rent_studio_card_heading'] ?? '' }}"
                                        >
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="first_home_rent_studio_card_paragraph" class="form-label">First Rent
                                        Studio Card Paragraph</label>
                                    <input type="text" class="form-control" id="first_home_rent_studio_card_paragraph"
                                        name="first_home_rent_studio_card_paragraph"
                                        value="{{ $decodedContent['first_home_rent_studio_card_paragraph'] ?? '' }}"
                                        >
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <label>Preview:</label><br>
                                <img src="{{ $cmsPage->getFirstMediaUrl('first_home_rent_studio_card_image') }}"
                                    alt="First Work Image" class="img-fluid" style="max-height: 150px;">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="second_home_rent_studio_card_image" class="form-label">Second Rent Studio
                                        Card Image</label>
                                    <input type="file" class="form-control" id="second_home_rent_studio_card_image"
                                        name="second_home_rent_studio_card_image" value="Second Rent Studio Card Image"
                                        >
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="second_home_rent_studio_card_heading" class="form-label">Second Rent
                                        Studio Card Heading</label>
                                    <input type="text" class="form-control" id="second_home_rent_studio_card_heading"
                                        name="second_home_rent_studio_card_heading"
                                        value="{{ $decodedContent['second_home_rent_studio_card_heading'] ?? '' }}"
                                        >
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="second_home_rent_studio_card_paragraph" class="form-label">Second Rent
                                        Studio Card Paragraph</label>
                                    <input type="text" class="form-control"
                                        id="second_home_rent_studio_card_paragraph"
                                        name="second_home_rent_studio_card_paragraph"
                                        value="{{ $decodedContent['second_home_rent_studio_card_paragraph'] ?? '' }}"
                                        >
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <label>Preview:</label><br>
                                <img src="{{ $cmsPage->getFirstMediaUrl('second_home_rent_studio_card_image') }}"
                                    alt="First Work Image" class="img-fluid" style="max-height: 150px;">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="home_rent_studio_button_text" class="form-label">Rent Studio Button
                                        Text</label>
                                    <input type="text" class="form-control" id="home_rent_studio_button_text"
                                        name="home_rent_studio_button_text"
                                        value="{{ $decodedContent['home_rent_studio_button_text'] ?? '' }}" >
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="home_rent_studio_button_link" class="form-label">Rent Studio Button
                                        Link</label>
                                    <input type="text" class="form-control" id="home_rent_studio_button_link"
                                        name="home_rent_studio_button_link"
                                        value="{{ $decodedContent['home_rent_studio_button_link'] ?? '' }}" >
                                </div>
                            </div>
                        </div>

                        <h3>Brand Promote Section</h3>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="home_brand_promote_image" class="form-label">Image</label>
                                    <input type="file" class="form-control" id="home_brand_promote_image"
                                        name="home_brand_promote_image" value="Brand Promote Image" >
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="home_brand_promote_heading" class="form-label">Heading</label>
                                    <input type="text" class="form-control" id="home_brand_promote_heading"
                                        name="home_brand_promote_heading"
                                        value="{{ $decodedContent['home_brand_promote_heading'] ?? '' }}" >
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <label>Preview:</label><br>
                                <img src="{{ $cmsPage->getFirstMediaUrl('home_brand_promote_image') }}"
                                    alt="First Work Image" class="img-fluid" style="max-height: 150px;">
                            </div>
                        </div>

                        <h3>Instagram Section</h3>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="home_instagram_section_bg_image" class="form-label">Background
                                        Image</label>
                                    <input type="file" class="form-control" id="home_instagram_section_bg_image"
                                        name="home_instagram_section_bg_image" value="Instagram Background Image"
                                        >
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="home_instagram_section_button_text" class="form-label">Instagram Button
                                        Text</label>
                                    <input type="text" class="form-control" id="home_instagram_section_button_text"
                                        name="home_instagram_section_button_text"
                                        value="{{ $decodedContent['home_instagram_section_button_text'] ?? '' }}"
                                        >
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="home_instagram_section_button_link" class="form-label">Instagram Button
                                        Link</label>
                                    <input type="text" class="form-control" id="home_instagram_section_button_link"
                                        name="home_instagram_section_button_link"
                                        value="{{ $decodedContent['home_instagram_section_button_link'] ?? '' }}"
                                        >
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <label>Preview:</label><br>
                                <img src="{{ $cmsPage->getFirstMediaUrl('home_instagram_section_bg_image') }}"
                                    alt="First Work Image" class="img-fluid" style="max-height: 150px;">
                            </div>
                        </div>

                        <div class="form-group mt-3">
                            <button type="submit" class="btn btn-primary">Update Page</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection