@extends('layouts.app')
@section('js')
    <script src="{{ mix('js/groups.js') }}"></script>
@endsection
@section('css')
    <link href="{{ mix('css/groups.css') }}" rel="stylesheet">
@endsection
@section('content')
    <div class='row'>
        <div class='col-1'>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Groups') }}
            </h2>
        </div>
        <div class='col-9'>
            <div class='col-3'>
                <select id="filter_page" class="form-select" name="filter_page">
                    <option value=0 selected>Select one page</option>
                    @foreach($pages as $page)
                        <option value="{{ $page->id }}" {{$page->id==$page_id ? 'selected' :''}}>{{ $page->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class='col-2'>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                <form method="post" action="" class="form-inline">
                    @csrf
                    <input type="text" name="name" class="form-control" id="name" placeholder="Add a group"/>
                </form>
            </h2>
        </div>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div id="" class="p-6 bg-white border-b border-gray-200">
                        <table class='table table-hover popular-posts-table'>
                            <thead>
                                <th>Group</th>
                                <th>Page</th>
                                <th>Subjects</th>
                                <th>FB Group ID</th>
                                <th></th>
                            </thead>
                            <tbody>
                            @foreach ($groups as $group)
                                <tr>
                                    <td><a target=_blank href="https://www.facebook.com/groups/{{$group->fb_group_id}}">{{ $group->name }}</a></td>
                                    <td>
                                        <select class="group-page-select form-select group-page-select" data-group-id="{{$group->id}}">                                            
                                            <option></option>
                                            @foreach($pages as $page)
                                                <option value="{{ $page->id }}" {{ $page->id == $group->page_id ? 'selected' : '' }}>{{ $page->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <select name="groups-subjects[]" multiple="multiple" class="select2 form-select group-subject-select" data-group-id="{{$group->id}}">
                                            @foreach($subjects as $subject)
                                                {!! $selected = false !!}
                                                @foreach($groups_subjects as $gs) 
                                                    @if( $group->id == $gs->group_id && $subject->id==$gs->subject_id )
                                                        {!! $selected = true !!}
                                                    @endif
                                                @endforeach
                                                <option {{$selected ? 'selected' : ''}} value="{{ $subject->id }}">{{ $subject->name }}</option>
                                            @endforeach
                                        </select>
                                        <btn class='btn btn-default btn-select-all'>Select All</btn>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control group-fb-id-input" data-group-id="{{$group->id}}" value="{{ $group->fb_group_id }}" />
                                    </td>
                                    <td>
                                        <button class="btn btn-default btn-group-delete" data-group-id="{{$group->id}}"><i class="fa-solid fa-trash"></i></button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection