@extends('backend.app')

@section('title', 'Footer 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">Footer 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">Footer 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.footer.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            
                            <h3 class="mb-6">Footer Configuration</h3>

                            {{-- Header Image --}}
                            <div class="card bg-light mb-5">
                                <div class="card-body p-4">
                                    <h5 class="mb-4 border-bottom pb-2">Header Image</h5>
                                    <div class="mb-3">
                                        <label class="form-label">Upload Image</label>
                                        <input type="file" name="header_image" class="form-control" accept="image/*">
                                        @if(!empty($page->content['header_image']))
                                            <div class="mt-2">
                                                <img src="{{ asset('storage/' . $page->content['header_image']) }}" class="img-thumbnail" style="max-height:120px;">
                                                <input type="hidden" name="header_image_existing" value="{{ $page->content['header_image'] }}">
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            {{-- Footer Image --}}
                            <div class="card bg-light mb-5">
                                <div class="card-body p-4">
                                    <h5 class="mb-4 border-bottom pb-2">Footer Image</h5>
                                    <div class="mb-3">
                                        <label class="form-label">Upload Image</label>
                                        <input type="file" name="footer_image" class="form-control" accept="image/*">
                                        @if(!empty($page->content['footer_image']))
                                            <div class="mt-2">
                                                <img src="{{ asset('storage/' . $page->content['footer_image']) }}" class="img-thumbnail" style="max-height:120px;">
                                                <input type="hidden" name="footer_image_existing" value="{{ $page->content['footer_image'] }}">
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            {{-- Footer Bottom Logo --}}
                            <div class="card bg-light mb-5">
                                <div class="card-body p-4">
                                    <h5 class="mb-4 border-bottom pb-2">Footer Bottom Logo</h5>
                                    <div class="mb-3">
                                        <label class="form-label">Upload Logo</label>
                                        <input type="file" name="footer_bottom_logo" class="form-control" accept="image/*">
                                        @if(!empty($page->content['footer_bottom_logo']))
                                            <div class="mt-2">
                                                <img src="{{ asset('storage/' . $page->content['footer_bottom_logo']) }}" class="img-thumbnail" style="max-height:120px;">
                                                <input type="hidden" name="footer_bottom_logo_existing" value="{{ $page->content['footer_bottom_logo'] }}">
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            {{-- Footer Text --}}
                            <div class="card bg-light mb-5">
                                <div class="card-body p-4">
                                    <h5 class="mb-4 border-bottom pb-2">Footer Text</h5>
                                    <div class="mb-4">
                                        <label class="form-label required">Footer Description Text</label>
                                        <textarea name="footer_text" class="form-control" rows="2" required>{{ old('footer_text', $page->content['footer_text'] ?? '') }}</textarea>
                                    </div>
                                    <div class="mb-0">
                                        <label class="form-label required">Rights Reserved Message</label>
                                        <input type="text" name="rights_reserved" class="form-control" value="{{ old('rights_reserved', $page->content['rights_reserved'] ?? '') }}" required>
                                    </div>
                                </div>
                            </div>

                            {{-- Social Links --}}
                            @php
                                $socialLinks = old('social_links', $page->content['social_links'] ?? []);
                                // If it's the old associative format, convert it to the new format dynamically
                                if (is_array($socialLinks) && !empty($socialLinks) && !isset($socialLinks[0])) {
                                    $temp = [];
                                    foreach ($socialLinks as $platform => $url) {
                                        if (!empty($url)) {
                                            $temp[] = [
                                                'platform' => ucfirst($platform),
                                                'icon' => 'fab fa-' . $platform,
                                                'url' => $url
                                            ];
                                        }
                                    }
                                    $socialLinks = $temp;
                                }
                            @endphp

                             <div class="card bg-light mb-5">
                                <div class="card-body p-4">
                                    <div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-2">
                                        <h5 class="m-0">Social Media Links</h5>
                                        <button type="button" class="btn btn-sm btn-light-primary" id="add-social-link">+ Add Social Link</button>
                                    </div>
                                    <div id="social-links-container">
                                        @foreach($socialLinks as $index => $item)
                                            <div class="row mb-3 social-link-item align-items-end border-bottom pb-3">
                                                <div class="col-md-4">
                                                    <label class="form-label">Platform Name</label>
                                                    <input type="text" name="social_links[{{ $index }}][platform]" class="form-control" placeholder="e.g. Facebook" value="{{ $item['platform'] ?? '' }}">
                                                </div>
                                                <div class="col-md-7">
                                                    <label class="form-label">URL</label>
                                                    <input type="url" name="social_links[{{ $index }}][url]" class="form-control" placeholder="https://..." value="{{ $item['url'] ?? '' }}" required>
                                                </div>
                                                <div class="col-md-1 text-end mb-1">
                                                    <button type="button" class="btn btn-icon btn-danger remove-item" title="Remove Link">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary mt-2">Save Changes</button>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            let socialIndex = {{ count($socialLinks) }};

            $('#add-social-link').click(function() {
                $('#social-links-container').append(`
                    <div class="row mb-3 social-link-item align-items-end border-bottom pb-3">
                        <div class="col-md-4">
                            <label class="form-label">Platform Name</label>
                            <input type="text" name="social_links[${socialIndex}][platform]" class="form-control" placeholder="e.g. Facebook">
                        </div>
                        <div class="col-md-7">
                            <label class="form-label">URL</label>
                            <input type="url" name="social_links[${socialIndex}][url]" class="form-control" placeholder="https://..." required>
                        </div>
                        <div class="col-md-1 text-end mb-1">
                            <button type="button" class="btn btn-icon btn-danger remove-item" title="Remove Link">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                `);
                socialIndex++;
            });

            $(document).on('click', '.remove-item', function() {
                $(this).closest('.social-link-item').remove();
            });
        });
    </script>
@endpush