@extends('admin.layouts.layout')
@section('content')
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">
            <div class="content-body">
                <!-- Basic Vertical form layout section start -->
                <section id="basic-vertical-layouts">
                    <div class="row">
                        <div class="col-md-12 col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Notification</h4>
                                </div>
                                <div class="card-body">
                                    <form class="form form-vertical" method="post" action="{{ url('admin/notification') }}"
                                        autocomplete="off" enctype="multipart/form-data">
                                        @csrf
                                        <div class="row gy-2">
                                            <div class="col-3">
                                                <div class="form-check form-check-primary">
                                                    <input type="radio" id="all" checked name="user_id"
                                                        class="form-check-input" value="all">
                                                    <label class="form-check-label" for="all">All</label>
                                                </div>
                                                {{-- <div class="mb-1">
                                                    <label class="form-label" for="all">All</label>
                                                    <input type="radio" id="all" name="user_id" value="all"
                                                        checked>
                                                </div> --}}
                                            </div>
                                            <div class="col-3">
                                                <div class="form-check form-check-primary">
                                                    <input type="radio" id="studio" name="user_id"
                                                        class="form-check-input" value="selected_studio">
                                                    <label class="form-check-label" for="studio">Studio</label>
                                                </div>
                                                {{-- <div class="mb-1">
                                                    <label class="form-label" for="studio">Studio</label>
                                                    <input type="radio" id="studio" name="user_id"
                                                        value="selected_studio">
                                                </div> --}}
                                            </div>
                                            <div class="col-3">
                                                <div class="form-check form-check-primary">
                                                    <input type="radio" id="artist" name="user_id"
                                                        class="form-check-input" value="selected_artist">
                                                    <label class="form-check-label" for="artist">Artist</label>
                                                </div>
                                                {{-- <div class="mb-1">
                                                    <label class="form-label" for="artist">Artist</label>
                                                    <input type="radio" id="artist" name="user_id"
                                                        value="selected_artist">
                                                </div> --}}
                                            </div>
                                            <div class="col-3">
                                                <div class="form-check form-check-primary">
                                                    <input type="radio" id="users" name="user_id"
                                                        class="form-check-input" value="selected_users">
                                                    <label class="form-check-label" for="users">Users</label>
                                                </div>
                                                {{-- <div class="mb-1">
                                                    <label class="form-label" for="users">Users</label>
                                                    <input type="radio" id="users" name="user_id"
                                                        value="selected_users">
                                                </div> --}}
                                            </div>

                                            <div class="col-12 studio-dropdown" style="display: none;">
                                                <div class="mb-1">
                                                    <label class="form-label" for="studios">Select Studio</label>
                                                    <select class="js-example-basic-multiple form-control" name="studios[]"
                                                        multiple="multiple">
                                                        @if ($studios)
                                                            @foreach ($studios as $studio)
                                                                <option value="{{ $studio->id }}">{{ $studio->name }}
                                                                </option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-12 user-dropdown" style="display: none;">
                                                <div class="mb-1">
                                                    <label class="form-label" for="users">Select User</label>
                                                    <select class="js-example-basic-multiple form-control" name="users[]"
                                                        multiple="multiple">
                                                        @if ($users)
                                                            @foreach ($users as $user)
                                                                <option value="{{ $user->id }}">{{ $user->name }}
                                                                </option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-12 artist-dropdown" style="display: none;">
                                                <div class="mb-1">
                                                    <label class="form-label" for="artists">Select Artist</label>
                                                    <select class="js-example-basic-multiple form-control" name="artists[]"
                                                        multiple="multiple">
                                                        @if ($artists)
                                                            @foreach ($artists as $artist)
                                                                <option value="{{ $artist->id }}">{{ $artist->name }}
                                                                </option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-12 message-box">
                                                <div class="mb-1">
                                                    <label class="form-label" for="message">Message</label>
                                                    <textarea class="form-control" id="message" rows="3" required name="message" placeholder="Write message..."></textarea>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <button type="submit" class="btn btn-primary me-1">Submit</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- Basic Vertical form layout section end -->

            </div>
        </div>
    </div>
    <!-- END: Content-->
    <script>
        $(document).ready(function() {
            $('.js-example-basic-multiple').select2({
                placeholder: "All"
            });

            // Function to handle form submission
            $('form').submit(function() {
                // Check if at least one option is selected for Studio, Artist, or Users
                if (!$('#all').is(':checked') &&
                    ($('.studio-dropdown select').val() == null && $('#studio').is(':checked')) ||
                    ($('.artist-dropdown select').val() == null && $('#artist').is(':checked')) ||
                    ($('.user-dropdown select').val() == null && $('#users').is(':checked'))) {
                    alert('Please select at least one option.');
                    return false; // Prevent form submission
                }
            });

            $('input[name="user_id"]').change(function() {
                var user_id = $(this).val();
                if (user_id === 'all') {
                    $('.user-dropdown').hide();
                    $('.artist-dropdown').hide();
                    $('.studio-dropdown').hide();
                    // $('.message-box').show();
                } else if (user_id === 'selected_users') {
                    $('.artist-dropdown').hide();
                    $('.studio-dropdown').hide();
                    $('.user-dropdown').show();
                    // $('.message-box').hide();
                } else if (user_id === 'selected_artist') {
                    $('.user-dropdown').hide();
                    $('.studio-dropdown').hide();
                    $('.artist-dropdown').show();
                    // $('.message-box').hide();
                } else if (user_id === 'selected_studio') {
                    $('.user-dropdown').hide();
                    $('.artist-dropdown').hide();
                    $('.studio-dropdown').show();
                    // $('.message-box').hide();
                }
            });
        });
    </script>
@endsection