@extends('admin.layouts.master')

@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">{{!isset($hub['title']) ? 'Create Leaders Hub' : 'Update Leaders Hub'}}</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{asset('/')}}">Home</a></li>
                        <li class="breadcrumb-item active">
                            <a href="{{asset(route('leader_hub.index'))}}">Other Leaders Hubs</a>
                        </li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    @if(session()->has('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div>
    @endif
    @if(session()->has('error'))
        <div class="alert alert-success">
            {{ session()->get('error') }}
        </div>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div><br />
    @endif
    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">{{!isset($hub['title']) ? 'Create Leaders Hub' : 'Update Leaders Hub'}}</h3>
                    </div>
                    <div class="card-body">
                        <form role="form" method="post" enctype="multipart/form-data" action="{{!isset($hub['title']) ? route('leader_hub.store') : route('leader_hub.update',$hub['id'])}}">
                            @csrf
                            @if(isset($hub['title']))
                                {{ method_field('PUT') }}
                            @endif
                            <div class="row form-group">
                                <div class="col">
                                    <label>Title</label>
                                    <input type="text" required name="title" class="form-control" value="{{$hub->title}}" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Description</label>
                                <textarea name="description" required class="form-control">{{$hub->description}}</textarea>
                            </div>
                            <div class="form-group">
                                <label>Bullets</label>
                                <div id="bullets-container">
                                    @if (is_array($hub->bullets))
                                        @foreach ($hub->bullets as $index => $bullet)
                                            <div class="mb-3">
                                                <input type="text" name="bullets[]" class="form-control" value="{{ $bullet }}" required>
                                            </div>
                                        @endforeach
                                    @else
                                        <p>No bullets found. Please add some.</p>
                                    @endif
                                </div>
                                <button type="button" id="add-bullet" class="btn btn-secondary bnt-sm">Add Bullet</button>
                            </div>
                            <div class="form-group">
                                <label>Video</label>
                                <input type = "file" name="video" required  class="dropify" data-default-file="" data-show-remove="false">
                            </div>
                            <div class="row form-group">
                                <div class="col-md-12 text-right">
                                    <button class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        document.getElementById('add-bullet').addEventListener('click', function() {
            const container = document.getElementById('bullets-container');
            const input = document.createElement('div');
            input.className = 'mb-3';
            input.innerHTML = '<input type="text" name="bullets[]" class="form-control" required>';
            container.appendChild(input);
        });
    </script>
@endsection