@extends('backend.app')

@section('title', 'About Us 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">About Us 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">About Us 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.about-us.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            
                            <h3 class="mb-4">Hero Section</h3>
                            <div class="mb-5">
                                <label class="form-label">Hero Image</label>
                                @if(isset($page->content['hero']['image']))
                                    <div class="mb-2">
                                        <img src="{{ asset('storage/' . $page->content['hero']['image']) }}" alt="Hero" style="height: 100px;">
                                    </div>
                                @endif
                                <input type="file" name="hero_image" class="form-control" accept="image/*">
                            </div>
                            <div class="mb-5">
                                <label class="form-label">Title</label>
                                <input type="text" name="hero[title]" class="form-control" value="{{ old('hero.title', $page->content['hero']['title'] ?? '') }}">
                            </div>
                            <div class="mb-5">
                                <label class="form-label">Description</label>
                                <textarea name="hero[description]" class="form-control" rows="3">{{ old('hero.description', $page->content['hero']['description'] ?? '') }}</textarea>
                            </div>



                            <hr class="my-8">

                            <h3 class="mb-4">What We Do</h3>
                            <div class="mb-5">
                                <label class="form-label">Title</label>
                                <input type="text" name="what_we_do[title]" class="form-control" value="{{ old('what_we_do.title', $page->content['what_we_do']['title'] ?? '') }}">
                            </div>
                            <div class="mb-5">
                                <label class="form-label">Description</label>
                                <textarea name="what_we_do[description]" class="form-control" rows="3">{{ old('what_we_do.description', $page->content['what_we_do']['description'] ?? '') }}</textarea>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <label class="form-label m-0">What We Do Items</label>
                                <button type="button" class="btn btn-sm btn-light-primary" id="add-what-we-do">Add Item</button>
                            </div>
                            <div id="what-we-do-container">
                                @php $whatWeDoItems = old('what_we_do_items', $page->content['what_we_do']['items'] ?? []); @endphp
                                @foreach($whatWeDoItems as $index => $item)
                                    <div class="row mb-2 what-we-do-item align-items-end">
                                        <div class="col-md-10">
                                            <label class="form-label">Description</label>
                                            <input type="text" name="what_we_do_items[{{ $index }}][description]" class="form-control" value="{{ $item['description'] ?? '' }}">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-danger btn-sm remove-item">X</button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="mb-5 mt-5">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label class="form-label m-0">Platform Handles</label>
                                    <button type="button" class="btn btn-sm btn-light-primary" id="add-platform">Add Platform</button>
                                </div>
                                <div id="platforms-container">
                                    @php $platforms = old('platform_handles', $page->content['what_we_do']['platform_handles'] ?? []); @endphp
                                    @foreach($platforms as $index => $item)
                                        <div class="row mb-2 platform-item align-items-end">
                                            <div class="col-md-10">
                                                <input type="text" name="platform_handles[{{ $index }}]" class="form-control" value="{{ $item }}">
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-danger btn-sm remove-item">X</button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <hr class="my-8">

                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h3>How It Works in Practice</h3>
                                <button type="button" class="btn btn-sm btn-light-primary" id="add-practice">Add Practice</button>
                            </div>
                            <div id="practice-container">
                                @php $practices = old('how_it_works_in_practice', $page->content['how_it_works_in_practice'] ?? []); @endphp
                                @foreach($practices as $index => $item)
                                    <div class="row mb-4 practice-item align-items-end">
                                        <div class="col-md-8">
                                            <label class="form-label">Description</label>
                                            <textarea name="how_it_works_in_practice[{{ $index }}][description]" class="form-control" rows="1">{{ $item['description'] ?? '' }}</textarea>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">Sort Order</label>
                                            <input type="number" name="how_it_works_in_practice[{{ $index }}][sort_order]" class="form-control" value="{{ $item['sort_order'] ?? 0 }}">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-danger btn-sm remove-item">Delete</button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <hr class="my-8">

                            <h3 class="mb-4">Our Mission</h3>
                            <div class="mb-5">
                                <label class="form-label">Title</label>
                                <input type="text" name="mission[title]" class="form-control" value="{{ old('mission.title', $page->content['mission']['title'] ?? '') }}">
                            </div>
                            <div class="mb-5">
                                <label class="form-label">Description</label>
                                <textarea name="mission[description]" class="form-control" rows="3">{{ old('mission.description', $page->content['mission']['description'] ?? '') }}</textarea>
                            </div>
                            
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <label class="form-label m-0">Mission Aims</label>
                                <button type="button" class="btn btn-sm btn-light-primary" id="add-aim">Add Aim</button>
                            </div>
                            <div id="aim-container">
                                @php $aims = old('aims', $page->content['mission']['aims'] ?? []); @endphp
                                @foreach($aims as $index => $item)
                                    <div class="row mb-2 aim-item align-items-end">
                                        <div class="col-md-10">
                                            <input type="text" name="aims[{{ $index }}]" class="form-control" value="{{ $item }}">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-danger btn-sm remove-item">X</button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <hr class="my-8">

                            <h3 class="mb-4">Our Vision</h3>
                            <div class="mb-5">
                                <label class="form-label">Title</label>
                                <input type="text" name="vision[title]" class="form-control" value="{{ old('vision.title', $page->content['vision']['title'] ?? '') }}">
                            </div>
                            <div class="mb-5">
                                <label class="form-label">Sub Title</label>
                                <input type="text" name="vision[sub_title]" class="form-control" value="{{ old('vision.sub_title', $page->content['vision']['sub_title'] ?? '') }}">
                            </div>
                            <div class="mb-5">
                                <label class="form-label">Description</label>
                                <textarea name="vision[description]" class="form-control" rows="3">{{ old('vision.description', $page->content['vision']['description'] ?? '') }}</textarea>
                            </div>

                            <hr class="my-8">

                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h3>Core Values</h3>
                                <button type="button" class="btn btn-sm btn-light-primary" id="add-value">Add Value</button>
                            </div>
                            <div id="values-container">
                                @php $values = old('core_values', $page->content['core_values'] ?? []); @endphp
                                @foreach($values as $index => $item)
                                    <div class="row mb-4 value-item align-items-end">
                                        <div class="col-md-3">
                                            <label class="form-label">Title</label>
                                            <input type="text" name="core_values[{{ $index }}][title]" class="form-control" value="{{ $item['title'] ?? '' }}">
                                        </div>
                                        <div class="col-md-5">
                                            <label class="form-label">Description</label>
                                            <textarea name="core_values[{{ $index }}][description]" class="form-control" rows="1">{{ $item['description'] ?? '' }}</textarea>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">Sort Order</label>
                                            <input type="number" name="core_values[{{ $index }}][sort_order]" class="form-control" value="{{ $item['sort_order'] ?? 0 }}">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-danger btn-sm remove-item">Delete</button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <button type="submit" class="btn btn-primary mt-5">Save Changes</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('script')
        <script>
            $(document).ready(function() {
                let platformIndex = {{ count($platforms) }};
                let practiceIndex = {{ count($practices) }};
                let aimIndex = {{ count($aims) }};
                let valueIndex = {{ count($values) }};
                let whatWeDoIndex = {{ count($whatWeDoItems) }};

                $('#add-what-we-do').click(function() {
                    $('#what-we-do-container').append(`
                        <div class="row mb-2 what-we-do-item align-items-end">
                            <div class="col-md-10">
                                <label class="form-label">Description</label>
                                <input type="text" name="what_we_do_items[${whatWeDoIndex}][description]" class="form-control">
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-danger btn-sm remove-item">X</button>
                            </div>
                        </div>
                    `);
                    whatWeDoIndex++;
                });

                $('#add-platform').click(function() {
                    $('#platforms-container').append(`
                        <div class="row mb-2 platform-item align-items-end">
                            <div class="col-md-10">
                                <input type="text" name="platform_handles[${platformIndex}]" class="form-control">
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-danger btn-sm remove-item">X</button>
                            </div>
                        </div>
                    `);
                    platformIndex++;
                });

                $('#add-practice').click(function() {
                    $('#practice-container').append(`
                        <div class="row mb-4 practice-item align-items-end">
                            <div class="col-md-8">
                                <label class="form-label">Description</label>
                                <textarea name="how_it_works_in_practice[${practiceIndex}][description]" class="form-control" rows="1"></textarea>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Sort Order</label>
                                <input type="number" name="how_it_works_in_practice[${practiceIndex}][sort_order]" class="form-control" value="0">
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-danger btn-sm remove-item">Delete</button>
                            </div>
                        </div>
                    `);
                    practiceIndex++;
                });

                $('#add-aim').click(function() {
                    $('#aim-container').append(`
                        <div class="row mb-2 aim-item align-items-end">
                            <div class="col-md-10">
                                <input type="text" name="aims[${aimIndex}]" class="form-control">
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-danger btn-sm remove-item">X</button>
                            </div>
                        </div>
                    `);
                    aimIndex++;
                });

                $('#add-value').click(function() {
                    $('#values-container').append(`
                        <div class="row mb-4 value-item align-items-end">
                            <div class="col-md-3">
                                <label class="form-label">Title</label>
                                <input type="text" name="core_values[${valueIndex}][title]" class="form-control">
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">Description</label>
                                <textarea name="core_values[${valueIndex}][description]" class="form-control" rows="1"></textarea>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Sort Order</label>
                                <input type="number" name="core_values[${valueIndex}][sort_order]" class="form-control" value="0">
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-danger btn-sm remove-item">Delete</button>
                            </div>
                        </div>
                    `);
                    valueIndex++;
                });

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