@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Edit Static Page: {{ $staticPage->page_name }}</h3>
                </div>
                <form method="POST" action="{{ route('admin.static-pages.update', $staticPage->id) }}">
                    @csrf
                    @method('PUT')
                    <div class="card-body">
                        <div class="form-group">
                            <label>Hero Title</label>
                            <input type="text" name="hero_title" class="form-control" 
                                   value="{{ old('hero_title', $staticPage->hero_title) }}" required>
                        </div>
                        <div class="form-group">
                            <label>Hero Subtitle</label>
                            <input type="text" name="hero_subtitle" class="form-control" 
                                   value="{{ old('hero_subtitle', $staticPage->hero_subtitle) }}">
                        </div>
                        <div class="form-group">
                            <label>Content</label>
                            <textarea name="content" class="form-control summernote">{{ old('content', $staticPage->content) }}</textarea>
                        </div>
                        
                        <!-- Stats Section -->
                        <div class="card mt-4">
                            <div class="card-header">
                                <h4>Stats Section</h4>
                            </div>
                            <div class="card-body">
                                <div id="stats-container">
                                    @if($staticPage->stats_json)
                                        @foreach($staticPage->stats_json as $index => $stat)
                                        <div class="row stat-row mb-3">
                                            <div class="col-md-5">
                                                <input type="text" name="stats[{{ $index }}][number]" 
                                                       class="form-control" placeholder="Number" 
                                                       value="{{ $stat['number'] ?? '' }}">
                                            </div>
                                            <div class="col-md-5">
                                                <input type="text" name="stats[{{ $index }}][label]" 
                                                       class="form-control" placeholder="Label" 
                                                       value="{{ $stat['label'] ?? '' }}">
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-danger remove-stat">Remove</button>
                                            </div>
                                        </div>
                                        @endforeach
                                    @endif
                                </div>
                                <button type="button" id="add-stat" class="btn btn-secondary mt-2">Add Stat</button>
                            </div>
                        </div>
                        
                        <!-- Values Section -->
                        <div class="card mt-4">
                            <div class="card-header">
                                <h4>Core Values</h4>
                            </div>
                            <div class="card-body">
                                <div id="values-container">
                                    @if($staticPage->values_json)
                                        @foreach($staticPage->values_json as $index => $value)
                                        <div class="row value-row mb-3">
                                            <div class="col-md-2">
                                                <input type="text" name="values[{{ $index }}][icon]" 
                                                       class="form-control" placeholder="Icon" 
                                                       value="{{ $value['icon'] ?? '' }}">
                                            </div>
                                            <div class="col-md-3">
                                                <input type="text" name="values[{{ $index }}][title]" 
                                                       class="form-control" placeholder="Title" 
                                                       value="{{ $value['title'] ?? '' }}">
                                            </div>
                                            <div class="col-md-5">
                                                <input type="text" name="values[{{ $index }}][description]" 
                                                       class="form-control" placeholder="Description" 
                                                       value="{{ $value['description'] ?? '' }}">
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-danger remove-value">Remove</button>
                                            </div>
                                        </div>
                                        @endforeach
                                    @endif
                                </div>
                                <button type="button" id="add-value" class="btn btn-secondary mt-2">Add Value</button>
                            </div>
                        </div>
                        
                        <!-- Team Section -->
                        <div class="card mt-4">
                            <div class="card-header">
                                <h4>Team Members</h4>
                            </div>
                            <div class="card-body">
                                <div id="team-container">
                                    @if($staticPage->team_json)
                                        @foreach($staticPage->team_json as $index => $member)
                                        <div class="row team-row mb-3">
                                            <div class="col-md-3">
                                                <input type="text" name="team[{{ $index }}][name]" 
                                                       class="form-control" placeholder="Name" 
                                                       value="{{ $member['name'] ?? '' }}">
                                            </div>
                                            <div class="col-md-3">
                                                <input type="text" name="team[{{ $index }}][role]" 
                                                       class="form-control" placeholder="Role" 
                                                       value="{{ $member['role'] ?? '' }}">
                                            </div>
                                            <div class="col-md-4">
                                                <input type="text" name="team[{{ $index }}][image]" 
                                                       class="form-control" placeholder="Image URL" 
                                                       value="{{ $member['image'] ?? '' }}">
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-danger remove-team">Remove</button>
                                            </div>
                                        </div>
                                        @endforeach
                                    @endif
                                </div>
                                <button type="button" id="add-team" class="btn btn-secondary mt-2">Add Team Member</button>
                            </div>
                        </div>
                        
                        <!-- Contact Info Section -->
                        <div class="card mt-4">
                            <div class="card-header">
                                <h4>Contact Information</h4>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label>Location</label>
                                    <textarea name="contact_info[location]" class="form-control">{{ $staticPage->contact_info_json['location'] ?? '' }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label>Phone</label>
                                    <input type="text" name="contact_info[phone]" class="form-control" 
                                           value="{{ $staticPage->contact_info_json['phone'] ?? '' }}">
                                </div>
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="text" name="contact_info[email]" class="form-control" 
                                           value="{{ $staticPage->contact_info_json['email'] ?? '' }}">
                                </div>
                                <div class="form-group">
                                    <label>Working Hours</label>
                                    <textarea name="contact_info[hours]" class="form-control">{{ $staticPage->contact_info_json['hours'] ?? '' }}</textarea>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Technologies Section -->
                        <div class="card mt-4">
                            <div class="card-header">
                                <h4>Technologies</h4>
                            </div>
                            <div class="card-body">
                                <div id="technologies-container">
                                    @if($staticPage->technologies_json)
                                        @foreach($staticPage->technologies_json as $index => $tech)
                                        <div class="row tech-row mb-3">
                                            <div class="col-md-5">
                                                <input type="text" name="technologies[{{ $index }}][0]" 
                                                       class="form-control" placeholder="Technology Name" 
                                                       value="{{ $tech[0] ?? '' }}">
                                            </div>
                                            <div class="col-md-5">
                                                <input type="text" name="technologies[{{ $index }}][1]" 
                                                       class="form-control" placeholder="Icon Filename" 
                                                       value="{{ $tech[1] ?? '' }}">
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-danger remove-tech">Remove</button>
                                            </div>
                                        </div>
                                        @endforeach
                                    @endif
                                </div>
                                <button type="button" id="add-tech" class="btn btn-secondary mt-2">Add Technology</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">Update Page</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Stats
        $('#add-stat').click(function() {
            const index = $('.stat-row').length;
            $('#stats-container').append(`
                <div class="row stat-row mb-3">
                    <div class="col-md-5">
                        <input type="text" name="stats[${index}][number]" class="form-control" placeholder="Number">
                    </div>
                    <div class="col-md-5">
                        <input type="text" name="stats[${index}][label]" class="form-control" placeholder="Label">
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-danger remove-stat">Remove</button>
                    </div>
                </div>
            `);
        });
        
        $(document).on('click', '.remove-stat', function() {
            $(this).closest('.stat-row').remove();
        });
        
        // Values
        $('#add-value').click(function() {
            const index = $('.value-row').length;
            $('#values-container').append(`
                <div class="row value-row mb-3">
                    <div class="col-md-2">
                        <input type="text" name="values[${index}][icon]" class="form-control" placeholder="Icon">
                    </div>
                    <div class="col-md-3">
                        <input type="text" name="values[${index}][title]" class="form-control" placeholder="Title">
                    </div>
                    <div class="col-md-5">
                        <input type="text" name="values[${index}][description]" class="form-control" placeholder="Description">
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-danger remove-value">Remove</button>
                    </div>
                </div>
            `);
        });
        
        $(document).on('click', '.remove-value', function() {
            $(this).closest('.value-row').remove();
        });
        
        // Team
        $('#add-team').click(function() {
            const index = $('.team-row').length;
            $('#team-container').append(`
                <div class="row team-row mb-3">
                    <div class="col-md-3">
                        <input type="text" name="team[${index}][name]" class="form-control" placeholder="Name">
                    </div>
                    <div class="col-md-3">
                        <input type="text" name="team[${index}][role]" class="form-control" placeholder="Role">
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="team[${index}][image]" class="form-control" placeholder="Image URL">
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-danger remove-team">Remove</button>
                    </div>
                </div>
            `);
        });
        
        $(document).on('click', '.remove-team', function() {
            $(this).closest('.team-row').remove();
        });
        
        // Technologies
        $('#add-tech').click(function() {
            const index = $('.tech-row').length;
            $('#technologies-container').append(`
                <div class="row tech-row mb-3">
                    <div class="col-md-5">
                        <input type="text" name="technologies[${index}][0]" class="form-control" placeholder="Technology Name">
                    </div>
                    <div class="col-md-5">
                        <input type="text" name="technologies[${index}][1]" class="form-control" placeholder="Icon Filename">
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-danger remove-tech">Remove</button>
                    </div>
                </div>
            `);
        });
        
        $(document).on('click', '.remove-tech', function() {
            $(this).closest('.tech-row').remove();
        });
        
        // Summernote
        $('.summernote').summernote({
            height: 200,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']],
            ]
        });
    });
</script>
@endpush