@extends('layouts.admin_main')

@section('content')
<style>
    .label {
        color: #777;
    }

    .input {
        color: #777;
    }

    .team-card img {
        max-width: 100px;
        margin-top: 10px;
    }

    .team-card .card-body {
        padding: 20px;
    }

    .team-card .social-links a {
        margin-right: 5px;
    }

</style>

<div class="content-wrapper">
    <div class="card">
        <div class="card-header">
            <span>Manage Team Section and Members</span>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            @if (session('status'))
            <h5 class="alert alert-success" id="status">{{ session('status') }}</h5>
            @endif
            <div id="success_message"></div>

            <!-- Team Section Form -->
            <div class="col-7">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="color: #2590e4; font-weight:600; font-size:16px">Team Section</h3>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('team.storeSection') }}" method="POST">
                            @csrf
                            <div class="form-group">
                                <label for="title">Section Title</label>
                                <input type="text" class="form-control" id="title" name="title" value="{{ $teamSection->title ?? '' }}" required>
                            </div>
                            <div class="form-group">
                                <label for="description">Section Description</label>
                                <textarea class="form-control" id="description" name="description" rows="3" required>{{ $teamSection->description ?? '' }}</textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">Update Team Section</button>
                        </form>
                    </div>
                </div>
            </div>

            <hr>

            <!-- Team Member Form -->
            <div class="col-7">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="color: #2590e4; font-weight:600; font-size:16px">Add Team Member</h3>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('team.storeMember') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="position">Position</label>
                                <input type="text" class="form-control" id="position" name="position" required>
                            </div>
                            <div class="form-group">
                                <label for="bio">Bio</label>
                                <textarea class="form-control" id="bio" name="bio" rows="3" required></textarea>
                            </div>
                            <div class="form-group">
                                <label for="image">Image</label>
                                <input type="file" class="form-control" id="image" name="image" accept="image/*">
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="twitter">Twitter</label>
                                    <input type="url" class="form-control" id="twitter" name="twitter">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="facebook">Facebook</label>
                                    <input type="url" class="form-control" id="facebook" name="facebook">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="instagram">Instagram</label>
                                    <input type="url" class="form-control" id="instagram" name="instagram">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="linkedin">LinkedIn</label>
                                    <input type="url" class="form-control" id="linkedin" name="linkedin">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Add Team Member</button>
                        </form>
                    </div>
                </div>
            </div>

            <hr>

            <!-- Display Current Team Members -->
            <h4 class="mt-5">Current Team Members</h4>
            <div class="row">
                @foreach ($members as $member)
                <div class="col-md-4 mb-4">
                    <div class="card team-card">
                        <div class="card-header">
                            <h5 class="card-title">{{ $member->name }}</h5>
                        </div>
                        <div class="card-body">
                            <img src="{{ asset('storage/' . $member->image) }}" alt="{{ $member->name }}" class="img-thumbnail">
                            <p class="card-text"><strong>Position:</strong> {{ $member->position }}</p>
                            <p class="card-text">{{ $member->bio }}</p>
                            <div class="social-links">
                                @if($member->twitter)
                                    <a href="{{ $member->twitter }}" class="btn btn-outline-info btn-sm"><i class="fab fa-twitter"></i></a>
                                @endif
                                @if($member->facebook)
                                    <a href="{{ $member->facebook }}" class="btn btn-outline-primary btn-sm"><i class="fab fa-facebook"></i></a>
                                @endif
                                @if($member->instagram)
                                    <a href="{{ $member->instagram }}" class="btn btn-outline-danger btn-sm"><i class="fab fa-instagram"></i></a>
                                @endif
                                @if($member->linkedin)
                                    <a href="{{ $member->linkedin }}" class="btn btn-outline-info btn-sm"><i class="fab fa-linkedin"></i></a>
                                @endif
                            </div>
                            <form action="{{ route('team.destroyMember', $member->id) }}" method="POST" class="mt-3">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                            </form>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
</div>

<script>
    $(document).ready(function() {
        $('#upload_form').on('submit', function(e) {
            e.preventDefault();
            var formData = new FormData(this);

            $.ajax({
                type: 'POST',
                url: '{{ route("admin.saveSettings") }}',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.success) {
                        if (response.logoPath) {
                            $('#logo_preview').attr('src', response.logoPath);
                        }
                        if (response.bannerPath) {
                            $('#banner_preview').attr('src', response.bannerPath);
                        }
                        alert('Settings saved successfully!');
                    }
                },
                error: function(xhr, status, error) {
                    $('#error_message').text('An error occurred while uploading.').fadeIn().delay(3000).fadeOut();
                }
            });
        });
    });
</script>

@endsection