@extends('backend.admin.layouts.app')
@section('content')
    <div class="content-wrapper">

        <section class="content">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-md-12">
                        <div class="card mt-2">
                            <div class="card-header">
                                <h3 class="card-title">Page Contents</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body" id="app">
                                <form>
                                    @csrf
                                    <div class="card-body">
                                        <div class="row" v-for="(content, key) in contents" :key="key">
                                            <div class="col-md-12">
                                                <label v-text="content.label"></label>
                                                <!-- Use v-model to bind user input to content.value -->
                                                <textarea class="form-control textarea" v-model="content.value"></textarea>
                                            </div>
                                        </div>
                                        <input type="hidden" name="id" value="1">
                                        <!-- Assuming all contents have the same ID -->
                                        <button @click="submitForm" class="btn btn-primary mt-2 btn_savee" :disabled="loading">
                                            <span v-if="!loading">Submit</span>
                                            <span v-else>Loading...</span>
                                        </button>
                                    </div>
                                </form>


                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                </div>

            </div>
        </section>
        <!-- /.content -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                contents: [{
                        label: 'Home',
                        name: 'home',
                        value: '{!! !empty($content->home) ? $content->home : '' !!}'
                    },
                    {
                        label: 'About Us',
                        name: 'about_us',
                        value: '{!! !empty($content->about) ? $content->about : '' !!}'
                    },
                    {
                        label: 'Services',
                        name: 'services',
                        value: '{!! !empty($content->services) ? $content->services : '' !!}'
                    },
                    {
                        label: 'Privacy Policy',
                        name: 'privacy_policy',
                        value: '{!! !empty($content->privacy_policy) ? $content->privacy_policy : '' !!}'
                    },
                    {
                        label: 'Terms and Conditions',
                        name: 'terms',
                        value: '{!! !empty($content->terms_condition) ? $content->terms_condition : '' !!}'
                    },
                    {
                        label: 'Company Profile',
                        name: 'company_profile',
                        value: '{!! !empty($content->company_profile) ? $content->company_profile : '' !!}'
                    },
                    {
                        label: 'Contact',
                        name: 'contact',
                        value: '{!! !empty($content->contact) ? $content->contact : '' !!}'
                    },
                    {
                        label: 'Branch Location',
                        name: 'branch_location',
                        value: '{!! !empty($content->branch_location) ? $content->branch_location : '' !!}'
                    },
                    {
                        label: 'FAQ',
                        name: 'faq',
                        value: '{!! !empty($content->faq) ? $content->faq : '' !!}'
                    },
                    {
                        label: 'Customer Support',
                        name: 'customer_support',
                        value: '{!! !empty($content->customer_support) ? $content->customer_support : '' !!}'
                    },
                    {
                        label: 'Blog',
                        name: 'blog',
                        value: '{!! !empty($content->blog) ? $content->blog : '' !!}'
                    },
                    {
                        label: 'Help Center',
                        name: 'help_center',
                        value: '{!! !empty($content->help_center) ? $content->help_center : '' !!}'
                    },
                    {
                        label: 'Testimonial',
                        name: 'testimonial',
                        value: '{!! !empty($content->testimonial) ? $content->testimonial : '' !!}'
                    },
                    {
                        label: 'Use Easytrans',
                        name: 'use_easytrans',
                        value: '{!! !empty($content->use_easytrans) ? $content->use_easytrans : '' !!}'
                    },
                    {
                        label: 'Timing',
                        name: 'timing',
                        value: '{!! !empty($content->timing) ? $content->timing : '' !!}'
                    },
                ],
                loading: false, // Initially not loading
                message: '', // For success/error message from server
            },

            methods: {
                submitForm() {
                    this.loading = true; // Set loading to true before making the request
                    const formData = new FormData();
                    this.contents.forEach(content => {
                        formData.append(content.name, content.value);
                    });

                    axios.post('/api/content/updates', formData)
                        .then(response => {
                            // Handle success response if needed
                            console.log(response.data);
                            this.loading = false; // Set loading to false after successful submission
                        })
                        .catch(error => {
                            // Handle error if needed
                            console.error(error);
                            this.loading = false; // Set loading to false in case of error
                        });
                }
            }


        });
    </script>
@endsection