@extends('layouts.admin')

@section('page-title', 'home-edit')

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3>Edit Home Page Record</h3>
        <a href="{{ route('home.index') }}" class="btn btn-secondary">← Back</a>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            <form action="{{ route('home.update', $home->id) }}" method="POST" class="dropzone" id="video-dropzone" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                {{-- Hero Section --}}
                <div class="mb-3">
                    <label class="form-label">Hero Section Title</label>
                    <input type="text" name="hero_title" class="form-control" 
                        value="{{ old('hero_title', $home->hero_title) }}" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Hero Banner Image</label><br>
                    @if($home->hero_banner_img)
                        <img src="{{ asset('uploads/page_home/' . $home->hero_banner_img) }}" width="120" class="rounded mb-2 border">
                        <br>
                    @endif
                    <input type="file" name="hero_banner_img" class="form-control">
                    <small class="text-muted">Leave empty to keep the existing image.</small>
                </div>



                {{-- Built Section --}}
                <div class="mb-3">
                    <label class="form-label">Built Title</label>
                    <input type="text" name="built_title" class="form-control" 
                        value="{{ old('built_title', $home->built_title) }}">
                </div>

                <div class="mb-3">
                    <label class="form-label">Built Description</label>
                    <textarea name="built_description" class="form-control">{{ old('built_description', $home->built_description) }}</textarea>
                </div>

              
                <div class="mb-4">
                    <h5>Built Stats</h5>

                    @php
                        $builtStats = is_string($home->built_stats)
                            ? json_decode($home->built_stats, true)
                            : ($home->built_stats ?? []);
                    @endphp

                    <div id="built-stats-container">
                        @if(!empty($builtStats))
                            @foreach($builtStats as $index => $stat)
                                <div class="built-stat-item mb-3 border p-3 rounded">
                                    <label>Stat Title:</label>
                                    <input type="text" name="built_stats[{{ $index }}][title]" class="form-control mb-2"
                                        value="{{ $stat['title'] ?? '' }}">

                                    <label>Current Icon:</label><br>
                                    @if(!empty($stat['icon']))
                                        <img src="{{ asset('uploads/page_home/' . $stat['icon']) }}" width="80" class="mb-2">
                                    @endif

                                    <label>Change Icon (optional):</label>
                                    <input type="file" name="built_stats[{{ $index }}][icon]" class="form-control mb-2">

                                    <button type="button" class="btn btn-danger btn-sm remove-stat">Remove</button>
                                </div>
                            @endforeach
                        @endif
                    </div>

                    <button type="button" id="add-stat" class="btn btn-primary btn-sm mt-2">+ Add Stat</button>
                </div>

                


                {{-- CEO Section --}}
                <div class="mb-3">
                    <label class="form-label">CEO Title</label>
                    <input type="text" name="ceo_title" class="form-control" 
                        value="{{ old('ceo_title', $home->ceo_title) }}">
                </div>

                <div class="mb-3">
                    <label class="form-label">CEO Message</label>
                    <textarea name="ceo_message" class="form-control">{{ old('ceo_message', $home->ceo_message) }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label">CEO Name</label>
                    <input type="text" name="ceo_name" class="form-control" 
                        value="{{ old('ceo_name', $home->ceo_name) }}">
                </div>

                <div class="mb-3">
                    <label class="form-label">CEO Designation</label>
                    <input type="text" name="ceo_designation" class="form-control" 
                        value="{{ old('ceo_designation', $home->ceo_designation) }}">
                </div>

                <div class="mb-3">
                    <label class="form-label">CEO Image</label><br>
                    @if($home->ceo_image)
                        <img src="{{ asset('uploads/page_home/' . $home->ceo_image) }}" width="120" class="rounded mb-2 border">
                        <br>
                    @endif
                    <input type="file" name="ceo_image" class="form-control">
                    <small class="text-muted">Leave empty to keep existing image.</small>
                </div>

                <hr>

                {{-- Mission & Vision Items --}}

                @php
                    // Decode JSON if necessary
                    $missionItems = is_string($home->mission_vision_items ?? '')
                        ? json_decode($home->mission_vision_items, true)
                        : ($home->mission_vision_items ?? []);
                @endphp

                <h5>Mission & Vision Items</h5>
                <div id="missionVisionContainer">
                    @if(!empty($missionItems) && is_array($missionItems))
                        @foreach($missionItems as $index => $item)
                            <div class="mission-item mb-3 border p-3 rounded">
                                <label>Title</label>
                                <input type="text" name="mission_vision_items[{{ $index }}][title]" 
                                    class="form-control mb-2" 
                                    value="{{ $item['title'] ?? '' }}" 
                                    placeholder="Enter title">

                                <label>Description</label>
                                <textarea name="mission_vision_items[{{ $index }}][description]" 
                                        class="form-control mb-2" 
                                        placeholder="Enter description">{{ $item['description'] ?? '' }}</textarea>

                                <label>Image</label>
                                <input type="file" name="mission_vision_items[{{ $index }}][image]" class="form-control mb-2">

                                @if(!empty($item['image']))
                                    <div class="mt-2">
                                        <img src="{{ asset('uploads/page_home/' . $item['image']) }}" 
                                            alt="Item Image" width="100" class="border rounded">
                                        <p class="text-muted small mb-0">Current: {{ $item['image'] }}</p>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    @else
                        {{-- If no data, show one blank field set --}}
                        <div class="mission-item mb-3 border p-3 rounded">
                            <label>Title</label>
                            <input type="text" name="mission_vision_items[0][title]" class="form-control mb-2" placeholder="Enter title">
                            <label>Description</label>
                            <textarea name="mission_vision_items[0][description]" class="form-control mb-2" placeholder="Enter description"></textarea>
                            <label>Image</label>
                            <input type="file" name="mission_vision_items[0][image]" class="form-control">
                        </div>
                    @endif
                </div>

                <button type="button" class="btn btn-sm btn-secondary mb-3" id="addMissionBtn">+ Add More</button>

                <hr>

                {{-- Meta / SEO Section --}}
                <h5 class="mb-3">SEO Meta Information</h5>

                <div class="mb-3">
                    <label class="form-label">Meta Title</label>
                    <input type="text"
                        name="meta_title"
                        class="form-control @error('meta_title') is-invalid @enderror"
                        value="{{ old('meta_title', $home->meta_title) }}"
                        placeholder="Enter meta title">

                    @error('meta_title')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label">Meta Description</label>
                    <textarea
                        name="meta_description"
                        class="form-control @error('meta_description') is-invalid @enderror"
                        rows="3"
                        placeholder="Enter meta description">{{ old('meta_description', $home->meta_description) }}</textarea>

                    @error('meta_description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label">Meta Keywords</label>
                    <input type="text"
                        name="meta_keywords"
                        class="form-control @error('meta_keywords') is-invalid @enderror"
                        value="{{ old('meta_keywords', $home->meta_keywords) }}"
                        placeholder="keyword1, keyword2, keyword3">

                    @error('meta_keywords')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>



                {{-- Submit Buttons --}}
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-success me-2">Update</button>
                    <a href="{{ route('home.index') }}" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let count = {{ isset($missionVisionItems) ? count($missionVisionItems) : 0 }};
document.getElementById('addMissionBtn').addEventListener('click', function() {
    const container = document.getElementById('missionVisionContainer');
    const html = `
        <div class="mission-item mb-3 border p-3 rounded">
            <label>Title</label>
            <input type="text" name="mission_vision_items[${count}][title]" class="form-control mb-2">
            <label>Description</label>
            <textarea name="mission_vision_items[${count}][description]" class="form-control mb-2"></textarea>
            <label>Image</label>
            <input type="file" name="mission_vision_items[${count}][image]" class="form-control">
        </div>`;
    container.insertAdjacentHTML('beforeend', html);
    count++;
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let container = document.getElementById('built-stats-container');
    let addBtn = document.getElementById('add-stat');
    let index = {{ isset($builtStats) ? count($builtStats) : 0 }};

    addBtn.addEventListener('click', function() {
        let html = `
            <div class="built-stat-item mb-3 border p-3 rounded">
                <label>Stat Title:</label>
                <input type="text" name="built_stats[${index}][title]" class="form-control mb-2" placeholder="Enter stat title">

                <label>Icon:</label>
                <input type="file" name="built_stats[${index}][icon]" class="form-control mb-2">

                <button type="button" class="btn btn-danger btn-sm remove-stat">Remove</button>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
        index++;
    });

    container.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-stat')) {
            e.target.closest('.built-stat-item').remove();
        }
    });
});
</script>

<script>
let missionIndex = {{ !empty($missionItems) ? count($missionItems) : 1 }};

document.getElementById('addMissionBtn').addEventListener('click', function() {
    const container = document.getElementById('missionVisionContainer');

    const newItem = document.createElement('div');
    newItem.classList.add('mission-item', 'mb-3', 'border', 'p-3', 'rounded');

    newItem.innerHTML = `
        <label>Title</label>
        <input type="text" name="mission_vision_items[${missionIndex}][title]" class="form-control mb-2" placeholder="Enter title">

        <label>Description</label>
        <textarea name="mission_vision_items[${missionIndex}][description]" class="form-control mb-2" placeholder="Enter description"></textarea>

        <label>Image</label>
        <input type="file" name="mission_vision_items[${missionIndex}][image]" class="form-control">
    `;

    container.appendChild(newItem);
    missionIndex++;
});
</script>


@endsection