@extends('layouts.admin_main')

@section('content')
<div class="content-wrapper">
    <div class="container">
        <h2>Footer Settings</h2>

        @if(session('status'))
            <div class="alert alert-success">{{ session('status') }}</div>
        @endif

        <form action="{{ route('footer_settings.store') }}" method="POST" onsubmit="return validateForm()">
            @csrf
            <input type="hidden" name="id" value="{{ $footerSetting->id ?? '' }}">

            <!-- Address, Phone, Email -->
            <div class="form-group">
                <label for="address">Address</label>
                <input type="text" name="address" class="form-control" value="{{ $footerSetting->address ?? '' }}" required>
            </div>

            <div class="form-group">
                <label for="phone">Phone</label>
                <input type="text" name="phone" class="form-control" value="{{ $footerSetting->phone ?? '' }}" required>
            </div>

            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" name="email" class="form-control" value="{{ $footerSetting->email ?? '' }}" required>
            </div>

            <!-- Social Links -->
            <h4>Social Links</h4>
            <div class="row">
                <div class="col-md-6 form-group">
                    <label for="twitter">Twitter</label>
                    <input type="url" name="twitter" class="form-control" value="{{ $footerSetting->twitter ?? '' }}">
                </div>
                <div class="col-md-6 form-group">
                    <label for="facebook">Facebook</label>
                    <input type="url" name="facebook" class="form-control" value="{{ $footerSetting->facebook ?? '' }}">
                </div>
                <div class="col-md-6 form-group">
                    <label for="instagram">Instagram</label>
                    <input type="url" name="instagram" class="form-control" value="{{ $footerSetting->instagram ?? '' }}">
                </div>
                <div class="col-md-6 form-group">
                    <label for="linkedin">LinkedIn</label>
                    <input type="url" name="linkedin" class="form-control" value="{{ $footerSetting->linkedin ?? '' }}">
                </div>
            </div>

            <!-- Pages Section -->
            <h4 class="mt-4">Pages</h4>
            <div id="pages_repeater">
                @if(isset($footerSetting) && $footerSetting->pages)
                    @foreach($footerSetting->pages as $page)
                        <div class="page-item form-group border p-3 mb-2">
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Page Title</label>
                                    <input type="text" name="pages[{{$loop->index}}][title]" value="{{ $page->title }}" placeholder="Page Title" class="form-control" required>
                                </div>
                                <div class="col-md-6">
                                    <label>Page Slug</label>
                                    <input type="text" name="pages[{{$loop->index}}][slug]" value="{{ $page->slug }}" placeholder="Page Slug" class="form-control" required>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="page-item form-group border p-3 mb-2">
                        <div class="row">
                            <div class="col-md-6">
                                <label>Page Title</label>
                                <input type="text" name="pages[0][title]" placeholder="Page Title" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label>Page Slug</label>
                                <input type="text" name="pages[0][slug]" placeholder="Page Slug" class="form-control" required>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <button type="button" class="btn btn-primary" onclick="addPage()">Add Page</button>

            <!-- Services Section -->
            <h4 class="mt-4">Services</h4>
            <div id="services_repeater">
                @if(isset($footerSetting) && $footerSetting->services)
                    @foreach($footerSetting->services as $service)
                        <div class="service-item form-group border p-3 mb-2">
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Service Name</label>
                                    <input type="text" name="services[{{$loop->index}}][name]" value="{{ $service->name }}" placeholder="Service Name" class="form-control" required>
                                </div>
                                <div class="col-md-6">
                                    <label>Service Slug</label>
                                    <input type="text" name="services[{{$loop->index}}][slug]" value="{{ $service->slug }}" placeholder="Service Slug" class="form-control" required>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="service-item form-group border p-3 mb-2">
                        <div class="row">
                            <div class="col-md-6">
                                <label>Service Name</label>
                                <input type="text" name="services[0][name]" placeholder="Service Name" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label>Service Slug</label>
                                <input type="text" name="services[0][slug]" placeholder="Service Slug" class="form-control" required>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <button type="button" class="btn btn-secondary" onclick="addService()">Add Service</button>

            <!-- Submit Button -->
            <div class="text-right mt-4">
                <button type="submit" class="btn btn-primary">Save Footer Settings</button>
            </div>
        </form>
    </div>
</div>

<script>
    function addPage() {
        let index = document.querySelectorAll('#pages_repeater .page-item').length;
        let pageTemplate = `<div class="page-item form-group border p-3 mb-2">
            <div class="row">
                <div class="col-md-6">
                    <label>Page Title</label>
                    <input type="text" name="pages[${index}][title]" placeholder="Page Title" class="form-control" required>
                </div>
                <div class="col-md-6">
                    <label>Page Slug</label>
                    <input type="text" name="pages[${index}][slug]" placeholder="Page Slug" class="form-control" required>
                </div>
            </div>
        </div>`;
        document.getElementById('pages_repeater').insertAdjacentHTML('beforeend', pageTemplate);
    }

    function addService() {
        let index = document.querySelectorAll('#services_repeater .service-item').length;
        let serviceTemplate = `<div class="service-item form-group border p-3 mb-2">
            <div class="row">
                <div class="col-md-6">
                    <label>Service Name</label>
                    <input type="text" name="services[${index}][name]" placeholder="Service Name" class="form-control" required>
                </div>
                <div class="col-md-6">
                    <label>Service Slug</label>
                    <input type="text" name="services[${index}][slug]" placeholder="Service Slug" class="form-control" required>
                </div>
            </div>
        </div>`;
        document.getElementById('services_repeater').insertAdjacentHTML('beforeend', serviceTemplate);
    }

    function validateForm() {
        const pages = document.querySelectorAll('#pages_repeater .page-item');
        const services = document.querySelectorAll('#services_repeater .service-item');

        if (pages.length === 0) {
            alert('Please add at least one page.');
            return false; // Prevent form submission
        }

        if (services.length === 0) {
            alert('Please add at least one service.');
            return false; // Prevent form submission
        }

        return true; // Allow form submission
    }
</script>
@endsection