@extends('layouts.master')

@section('title')
    @lang('translation.dashboard')
@endsection


@section('content')
    <link rel="stylesheet" href="{{ URL::asset('assets/css/custom/streaming.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <link rel="stylesheet" href="{{ URL::asset('bingo/css/toastify.css') }}">
    @include('partials.session')
    
    <div class="container mt-5">
        @if (!$allowed)
            Comming Soon
        @else
        <form id="broadcastForm" action="javascript:;" method="POST" onSubmit="broadcast_yourself(undefined, undefined, {{ (auth()->user()->hasRole('Super Admin')) ? 1 : 0 }});">
            @csrf
            <input type="hidden" id="form_action" value="{{ route('streaming.broadcastMyself') }}"/>

            <div class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-4">
                <!-- Left Side: Welcome Message -->
                <h4 class="fw-bold mb-0">Welcome, <span id="username">{{ session('streaming_user_name') }}</span>!</h4>
            </div>

            <!-- Right Side: Radio Buttons and Button -->
            <div class="d-flex align-items-center justify-content-end gap-2 mb-3">
                <div class="form-check me-3 channelType">
                    <input type="radio" class="form-check-input" name="channelType" id="publicChannel" value="public">
                    <label for="publicChannel" class="form-check-label">Public</label>
                </div>
                <div class="form-check me-3 channelType">
                    <input type="radio" class="form-check-input" name="channelType" id="privateChannel" value="private">
                    <label for="privateChannel" class="form-check-label">Private</label>
                </div>
                <button type="submit" id="startBroadcastBtn" class="btn custom-btn btn-success" 
                        action="{{ $btnAction }}" channel_id="{{ $myChannelId }}">
                    {{ $btnText }}
                </button>
                @if (auth()->user()->hasRole('Super Admin'))
                <button type="button" id="superEndBtn" class="btn custom-btn btn-danger">
                    End all
                </button>
                @endif
            </div>
        </form>

        <input id="details" type="hidden" 
            data-streaming_user_id="{{ $streamingUserId }}"
            data-start_text="{{ $startText }}"
            data-stop_text="{{ $stopText }}"
            data-channels_json="{{ json_encode($channels) }}"
            data-pusher_key="{{ $pusher_key }}"
            data-pusher_cluster="{{ $pusher_cluster }}"
            data-default_avatar="{{ $default_avatar }}"
            data-is_super_admin="{{ (auth()->user()->hasRole('Super Admin')) ? 1 : 0 }}"
        />
        <h3 class="mb-4 d-flex justify-content-between">
            Available Channels
            @if (Auth::user()->hasRole(\App\Models\User::SuperAdmin))
            <i class='fas fa-cogs fs-1' role="button" data-bs-toggle="modal" data-bs-target="#settingModal" style="z-index: 100;"></i>
            @endif
        </h3>

        <!-- Channel List -->
        
        <div id="channelsList" class="row gap-4">
        </div>
        
        @endif

        <div id="loader" class="loader-overlay" style="display:none">
            <div class="loader"></div>
        </div>
    </div>

    <!-- bot setting modal -->        
    <div class="modal fade" id="settingModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content p-2 h-75" data-bs-theme="dark">
                <div class="modal-header">
                    <h3 class="modal-title ms-auto">Streaming Setting</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Tab Navigation -->
                    <ul class="nav nav-tabs" id="modalTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="host-public-price-tab" data-bs-toggle="tab" data-bs-target="#host-public-price" type="button" role="tab">Host Public Price</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="host-private-price-tab" data-bs-toggle="tab" data-bs-target="#host-private-price" type="button" role="tab">Host Private Price</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="comment-join-price-tab" data-bs-toggle="tab" data-bs-target="#comment-join-price" type="button" role="tab">Comment & Join Price</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="gift-hold-percentage-tab" data-bs-toggle="tab" data-bs-target="#gift-hold-percentage" type="button" role="tab">Gift Hold Percentage</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="can-send-host-tab" data-bs-toggle="tab" data-bs-target="#can-send-host" type="button" role="tab">Can Send Host</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="can-send-viewer-tab" data-bs-toggle="tab" data-bs-target="#can-send-viewer" type="button" role="tab">Can Send Viewer</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="invitation-price-tab" data-bs-toggle="tab" data-bs-target="#invitation-price" type="button" role="tab">Invitation Price</button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content mt-3" id="modalTabContent">
                        <div class="tab-pane fade show active" id="host-public-price" role="tabpanel">
                            @foreach ($assetlist as $item)
                            <div class="mt-4 row mx-0 align-items-baseline">
                                <label class="col-6">{{$item->name}}</label>
                                <div class="col-6">
                                    <input type="text" class="form-control asset-amount" data-asset-id="{{ $item->id }}" value="{{ $item->streaming_setting ? floatval($item->streaming_setting->host_public_price) : 0 }}">
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="tab-pane fade" id="host-private-price" role="tabpanel">
                            @foreach ($assetlist as $item)
                            <div class="mt-4 row mx-0 align-items-baseline">
                                <label class="col-6">{{ $item->name }}</label>
                                <div class="col-6">
                                    <input type="text" class="form-control asset-amount" data-asset-id="{{ $item->id }}" value="{{ $item->streaming_setting ? floatval($item->streaming_setting->host_private_price) : 0 }}">
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="tab-pane fade" id="comment-join-price" role="tabpanel">
                            @foreach ($assetlist as $item)
                            <div class="mt-4 row mx-0 align-items-baseline">
                                <label class="col-6">{{ $item->name }}</label>
                                <div class="col-6">
                                    <input type="text" class="form-control asset-amount" data-asset-id="{{ $item->id }}" value="{{ $item->streaming_setting ? floatval($item->streaming_setting->join_price) : 0 }}">
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="tab-pane fade" id="gift-hold-percentage" role="tabpanel">
                            @foreach ($assetlist as $item)
                            <div class="mt-4 row mx-0 align-items-baseline">
                                <label class="col-6">{{ $item->name }}</label>
                                <div class="col-6">
                                    <input type="text" class="form-control asset-amount" data-asset-id="{{ $item->id }}" value="{{ $item->streaming_setting ? floatval($item->streaming_setting->gift_percentage) : 0 }}">
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="tab-pane fade" id="can-send-host" role="tabpanel">
                            @foreach ($assetlist as $item)
                            <div class="mt-4 row mx-0 align-items-baseline">
                                <label class="col-6">{{ $item->name }}</label>
                                <div class="col-6">
                                    <select class="form-select asset-amount" data-asset-id="{{ $item->id }}">
                                        <option value="0" {{ $item->streaming_setting && $item->streaming_setting->can_send_host ? '' : 'selected' }}>False</option>
                                        <option value="1" {{ $item->streaming_setting && $item->streaming_setting->can_send_host ? 'selected' : '' }}>True</option>
                                    </select>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="tab-pane fade" id="can-send-viewer" role="tabpanel">
                            @foreach ($assetlist as $item)
                            <div class="mt-4 row mx-0 align-items-baseline">
                                <label class="col-6">{{ $item->name }}</label>
                                <div class="col-6">
                                    <select class="form-select asset-amount" data-asset-id="{{$item->id}}">
                                        <option value="0" {{ $item->streaming_setting && $item->streaming_setting->can_send_viewer ? '' : 'selected' }}>False</option>
                                        <option value="1" {{ $item->streaming_setting && $item->streaming_setting->can_send_viewer ? 'selected' : '' }}>True</option>
                                    </select>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="tab-pane fade" id="invitation-price" role="tabpanel">
                            @foreach ($assetlist as $item)
                            <div class="mt-4 row mx-0 align-items-baseline">
                                <label class="col-6">{{ $item->name }}</label>
                                <div class="col-6">
                                    <input type="text" class="form-control asset-amount" data-asset-id="{{ $item->id }}" value="{{ $item->streaming_setting ? floatval($item->streaming_setting->invitation_price) : 0 }}">
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">                        
                    <button class="ApplySettingButton btn btn-success rounded-5">Apply</button>                        
                    <button class="CancelSettingButton btn btn-primary rounded-5" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    @include('streaming.payment_modal')
@endsection

@section('script')
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="https://js.pusher.com/7.2/pusher.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
    <script src="{{ asset('assets/js/channels.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script>
        $(".ApplySettingButton").on("click", function() {            
            let assetamounts = []
            let count = $('#host-public-price .asset-amount').length
            for (let index = 0; index < count; index++) {
                assetamounts.push({
                    id: $($('#host-public-price .asset-amount')[index]).data('asset-id'),
                    host_public_price: $($('#host-public-price .asset-amount')[index]).val() || 0,
                    host_private_price: $($('#host-private-price .asset-amount')[index]).val() || 0,
                    join_price: $($('#comment-join-price .asset-amount')[index]).val() || 0,
                    gift_percentage: $($('#gift-hold-percentage .asset-amount')[index]).val() || 0,
                    can_send_host: $($('#can-send-host .asset-amount')[index]).val() || 0,
                    can_send_viewer: $($('#can-send-viewer .asset-amount')[index]).val() || 0,
                    invitation_price: $($('#invitation-price .asset-amount')[index]).val() || 0,
                });
            }

            $("#settingModal").modal('hide')

            $.ajax({
                url: "/streaming-superadmin-setting",
                method: "POST",
                data: {
                    assetamounts
                },
                success: (response) => {
                    Toastify({
                        text: 'Superadmin setting updated',
                        className: 'notification-toastify',
                        duration: 3000,
                    }).showToast();
                },
            });
        });
    </script>
@endsection