@extends('layouts.app')
@section('content')
    @include('layouts.sidebar')

    <main id="" class="side_user">
        <!-- Hero -->
        <div class="bg-body-light px-4">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                    <h1 class="flex-sm-fill h3 my-2">
                        Social Media and Web Pages<small
                            class="d-block d-sm-inline-block mt-2 mt-sm-0 font-size-base font-w400 text-muted"></small>
                    </h1>
                    <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                        <ol class="breadcrumb breadcrumb-alt">
                            <li class="breadcrumb-item">Home Setting</li>
                            <li class="breadcrumb-item" aria-current="page">
                                <a style="color:black" href="">List</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <!-- END Hero -->

        <div class="content px-4">

            <div class="block block-rounded">
                <div class="block-content ">
                    <div class="d-flex justify-content-end">

                        {{-- <a class="addbtn" id="addBtn" href="{{ route('roles.create') }}">Add</a> --}}

                        <div class="loader" id="loader" style="display: none;">
                            <div class="external-shadow">
                                <div class="central">
                                    <div class="intern"></div>
                                </div>
                            </div>
                        </div>
                        {{-- <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#addmodal">Add</button> --}}
                    </div>
                </div>


                <div class="block-content block-content-full mt-5">
                    <!-- DataTables init on table by adding .js-dataTable-full class, functionality is initialized in js/pages/be_tables_datatables.min.js which was auto compiled from _js/pages/be_tables_datatables.js -->

                    @can('view-home setting')
                        <form action="{{ route('home-settings.update', $socialMedia->id) }}" method="POST">
                            @csrf
                            @method('PUT')

                            <!-- Facebook -->
                            <div class="form-outline mb-4 col-8">
                                <h6>Facebook_url</h6>
                                <input type="text" name="facebook_url" maxlength="255" minlength="3" required
                                    value="{{ old('facebook_url', $socialMedia->facebook_url) }}"
                                    class="form-control form-control-lg" placeholder="Enter Facebook" />
                            </div>
                            @error('facebook_url')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror

                            <!-- Instagram -->
                            <div class="form-outline mb-4 col-8">
                                <h6>Instagram_url</h6>
                                <input type="text" name="instagram_url" maxlength="255" minlength="3" required
                                    value="{{ old('instagram_url', $socialMedia->instagram_url) }}"
                                    class="form-control form-control-lg" placeholder="Enter instagram_url" />
                            </div>
                            @error('instagram_url')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror

                            <!-- Telegram -->
                            <div class="form-outline mb-4 col-8">
                                <h6>Telegram_url</h6>
                                <input type="text" name="telegram_url" maxlength="255" minlength="3" required
                                    value="{{ old('telegram_url', $socialMedia->telegram_url) }}"
                                    class="form-control form-control-lg" placeholder="Enter telegram_url" />
                            </div>
                            @error('telegram_url')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror

                            <!-- twitter_url -->
                            <div class="form-outline mb-4 col-8">
                                <h6>Twitter_url</h6>
                                <input type="text" name="twitter_url" maxlength="255" minlength="3" required
                                    value="{{ old('twitter_url', $socialMedia->twitter_url) }}"
                                    class="form-control form-control-lg" placeholder="Enter twitter_url" />
                            </div>
                            @error('twitter_url')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror

                            <!-- whatsapp_url -->
                            <div class="form-outline mb-4 col-8">
                                <h6>Whatsapp</h6>
                                <input type="text" name="whatsapp_url" maxlength="255" minlength="3" required
                                    value="{{ old('whatsapp_url', $socialMedia->whatsapp_url) }}"
                                    class="form-control form-control-lg" placeholder="Enter whatsapp_url" />
                            </div>
                            @error('whatsapp_url')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror

                            <!-- reddit_url -->
                            <div class="form-outline mb-4 col-8">
                                <h6>Reddit</h6>
                                <input type="text" name="reddit_url" maxlength="255" minlength="3" required
                                    value="{{ old('reddit_url', $socialMedia->reddit_url) }}"
                                    class="form-control form-control-lg" placeholder="Enter reddit_url" />
                            </div>
                            @error('reddit_url')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror

                            <!-- discord_url -->
                            <div class="form-outline mb-4 col-8">
                                <h6>Discord</h6>
                                <input type="text" name="discord_url" maxlength="255" minlength="3" required
                                    value="{{ old('discord_url', $socialMedia->discord_url) }}"
                                    class="form-control form-control-lg" placeholder="Enter discord_url" />
                            </div>
                            @error('discord_url')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror

                            <!-- Top URL -->
                            <div class="form-outline mb-4 col-8">
                                <h6>Page Top Url</h6>
                                <input type="text" name="page_top_url" maxlength="255" minlength="3" required
                                    value="{{ old('page_top_url', $socialMedia->page_top_url) }}"
                                    class="form-control form-control-lg" placeholder="Enter page top url" />
                            </div>
                            @error('page_top_url')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror

                            @can('edit-home setting')
                                <div class="form-group pt-2">
                                    <button type="submit" id="submitted" class="addbtn">Update</button>
                                </div>
                            @endcan
                        </form>
                    @endcan

                </div>
            </div>
        </div>

    </main>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            // alert('hgfdag');
            $('.status-toggle').change(function() {
                var customerId = $(this).data('id');
                var status = $(this).is(':checked') ? 1 : 0;
                // alert(customerId);
                $.ajax({
                    url: '{{ route('status.change') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: customerId,
                        type: 'home_setting',
                        status: status
                    },
                    success: function(response) {
                        if (response.data.status == 1) {
                            alert('Status Activated successfully!');
                        } else {
                            alert('Status Deactivated successfully!');

                        }
                    },
                    error: function(xhr, status, error) {
                        alert('An error occurred while updating the status.');
                    }
                });
            });
        });
    </script>
@endsection