@extends('layouts.master')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <!-- Toastify CSS -->
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <!-- Page Header -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'AdNetwork', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="$breadcrumbs" title="Task Ads Setting" />
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="col-xxl-12">
        <div class="card custom-card">
            <div class="card-header">
                <div class="card-title">
                    Task Setting
                </div>
            </div>
            <div class="card-body">
                <ul class="nav nav-tabs tab-style-2 nav-justified mb-3 d-sm-flex d-block" id="myTab1" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="order-tab" data-bs-toggle="tab"
                            data-bs-target="#spinwin" type="button" role="tab"
                            aria-controls="home-tab-pane" aria-selected="true"><i
                                class="ri-gift-line me-1 align-middle"></i>Spin Win</button>
                    </li>

                    <li class="nav-item" role="presentation">
                        <button class="nav-link " id="order-tab" data-bs-toggle="tab"
                            data-bs-target="#scratchwin" type="button" role="tab"
                            aria-controls="home-tab-pane" aria-selected="true"><i
                                class="ri-gift-line me-1 align-middle"></i>Scratch Win</button>
                    </li>

                    <li class="nav-item" role="presentation">
                        <button class="nav-link " id="mathquiz-tab-pane" data-bs-toggle="tab"
                            data-bs-target="#mathquiz" type="button" role="tab"
                            aria-controls="mathquiz-tab-pane" aria-selected="false"><i
                                class="ri-check-double-line me-1 align-middle"></i>Math Quiz</button>
                    </li>

                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="shipped-tab" data-bs-toggle="tab"
                            data-bs-target="#visit_earn" type="button" role="tab"
                            aria-controls="contact-tab-pane" aria-selected="false"><i
                                class="ri-shopping-bag-3-line me-1 align-middle"></i>Visit Earn</button>
                    </li>

                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="delivered-tab" data-bs-toggle="tab"
                            data-bs-target="#watch_video" type="button" role="tab" aria-selected="false"><i
                                class="ri-truck-line me-1 align-middle"></i>Watch Video</button>
                    </li>

                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="delivered-tab" data-bs-toggle="tab"
                            data-bs-target="#insta_reel" type="button" role="tab" aria-selected="false"><i
                                class="ri-truck-line me-1 align-middle"></i>Insta Reel Task</button>
                    </li>

                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="delivered-tab" data-bs-toggle="tab"
                            data-bs-target="#global_ad" type="button" role="tab" aria-selected="false"><i
                                class="ri-truck-line me-1 align-middle"></i>App Global Ad</button>
                    </li>

                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane show active fade text-muted" id="spinwin" role="tabpanel"
                        aria-labelledby="home-tab" tabindex="0">

                        <form action="{{ route('admin.adnetwork.taskad.update') }}" method="post" >
                        @csrf
                        <input type="hidden" name="type" value="spin">
                        <div class="col-xl-12 row">
                            <x-form.input
                                label="Daily Task Limit :" col="col-xl-3 col-md-6"
                                type="number" class="mb-3" value="{{$setting['spin_limit']}}" 
                                name="spin_limit"  placeholder="enter spin limit" autofocus 
                            />

                            <x-form.input
                                label="Cooldown Time Between Spins :" col="col-xl-3 col-md-6"
                                type="number" class="mb-3" value="{{$setting['spin_interval']}}" 
                                name="spin_interval"  placeholder="enter Cooldown timer in second" autofocus 
                            />

                  
                            <x-form.ordered-multiselect
                                name="task_spin_ad"
                                label="Select AdNetwork Ads"
                                :options="$ad->pluck('label', 'key')"
                                :selected="setting('task_spin_ad', [])"
                                required
                                class="custom-select-class"
                                col="col-xl-6 col-md-6"
                            />

                                <div class="row mt-5">
                                    <div class="col-6 row">
                                        <x-form.input
                                            label="Position 1 Color :" col="col-xl-6"
                                            type="color" class="mb-3" value="{{$spin[0]->color}}" 
                                            name="color_1" autofocus 
                                        />

                                        <x-form.input
                                            label="Position 1 Reward :" col="col-xl-6"
                                            type="number" class="mb-3" value="{{$spin[0]->reward}}" 
                                            name="reward_1" autofocus 
                                        />
                                    </div>

                                    <div class="col-6 row">
                                        <x-form.input
                                            label="Position 2 Color :" col="col-xl-6"
                                            type="color" class="mb-3" value="{{$spin[1]->color}}" 
                                            name="color_2" autofocus 
                                        />

                                        <x-form.input
                                            label="Position 2 Reward :" col="col-xl-6"
                                            type="number" class="mb-3" value="{{$spin[1]->reward}}" 
                                            name="reward_2" autofocus 
                                        />
                                    </div>

                                    <div class="col-6 row">
                                        <x-form.input
                                            label="Position 3 Color :" col="col-xl-6"
                                            type="color" class="mb-3" value="{{$spin[2]->color}}" 
                                            name="color_3" autofocus 
                                        />

                                        <x-form.input
                                            label="Position 3 Reward :" col="col-xl-6"
                                            type="number" class="mb-3" value="{{$spin[2]->reward}}" 
                                            name="reward_3" autofocus 
                                        />
                                    </div>

                                    <div class="col-6 row">
                                        <x-form.input
                                            label="Position 4 Color :" col="col-xl-6"
                                            type="color" class="mb-3" value="{{$spin[3]->color}}" 
                                            name="color_4" autofocus 
                                        />

                                        <x-form.input
                                            label="Position 4 Reward :" col="col-xl-6"
                                            type="number" class="mb-3" value="{{$spin[3]->reward}}" 
                                            name="reward_4" autofocus 
                                        />
                                    </div>

                                     <div class="col-6 row">
                                        <x-form.input
                                            label="Position 5 Color :" col="col-xl-6"
                                            type="color" class="mb-3" value="{{$spin[4]->color}}" 
                                            name="color_5" autofocus 
                                        />

                                        <x-form.input
                                            label="Position 5 Reward :" col="col-xl-6"
                                            type="number" class="mb-3" value="{{$spin[4]->reward}}" 
                                            name="reward_5" autofocus 
                                        />
                                    </div>

                                     <div class="col-6 row">
                                        <x-form.input
                                            label="Position 6 Color :" col="col-xl-6"
                                            type="color" class="mb-3" value="{{$spin[5]->color}}" 
                                            name="color_6" autofocus 
                                        />

                                        <x-form.input
                                            label="Position 6 Reward :" col="col-xl-6"
                                            type="number" class="mb-3" value="{{$spin[5]->reward}}" 
                                            name="reward_6" autofocus 
                                        />
                                    </div>

                                     <div class="col-6 row">
                                        <x-form.input
                                            label="Position 7 Color :" col="col-xl-6"
                                            type="color" class="mb-3" value="{{$spin[6]->color}}" 
                                            name="color_7" autofocus 
                                        />

                                        <x-form.input
                                            label="Position 7 Reward :" col="col-xl-6"
                                            type="number" class="mb-3" value="{{$spin[6]->reward}}" 
                                            name="reward_7" autofocus 
                                        />
                                    </div>

                                     <div class="col-6 row">
                                        <x-form.input
                                            label="Position 8 Color :" col="col-xl-6"
                                            type="color" class="mb-3" value="{{$spin[7]->color}}" 
                                            name="color_8" autofocus 
                                        />

                                        <x-form.input
                                            label="Position 8 Reward :" col="col-xl-6"
                                            type="number" class="mb-3" value="{{$spin[7]->reward}}" 
                                            name="reward_8" autofocus 
                                        />
                                    </div>

                                </div>
                            
   
                        </div>
                        <div class="col-xl-4 col-md-6 mt-4">
                            <button type="submit" class="btn btn-primary mt-1 px-5">Save</button>    
                        </div>
                        </form>
                    </div>

                    <div class="tab-pane fade text-muted" id="scratchwin" role="tabpanel"
                        aria-labelledby="home-tab" tabindex="0">

                        <form action="{{ route('admin.adnetwork.taskad.update') }}" method="post" >
                        @csrf
                        <input type="hidden" name="type" value="scratch">
                        <div class="col-xl-12 row">
                            <x-form.input
                                label="Daily Task Limit :" col="col-xl-3 col-md-6"
                                type="number" class="mb-3" value="{{$setting['scratch_limit']}}" 
                                name="scratch_limit"  placeholder="enter scratch limit" autofocus 
                            />

                            <x-form.input
                                label="Cooldown Time Between Next Scratch :" col="col-xl-3 col-md-6"
                                type="number" class="mb-3" value="{{$setting['scratch_interval']}}" 
                                name="scratch_interval"  placeholder="enter Cooldown timer in second" autofocus 
                            />

                           
                            <x-form.input
                                label="Scratch Reward Coin (Minimum-Maximum) :" col="col-xl-3 col-md-6"
                                type="text" class="mb-3" value="{{$setting['scratch_coin']}}" 
                                name="scratch_coin"  placeholder="enter scratch reward coin 6-10" autofocus 
                            />

                            <x-form.input
                                label="Scratch Ad Interval [-1 == off] :" col="col-xl-3 col-md-6"
                                type="text" class="mb-3" value="{{$setting['scratch_ad_interval']}}" 
                                name="scratch_ad_interval"  placeholder="enter scratch ad interval" autofocus 
                            />
                  
                            <x-form.ordered-multiselect
                                name="task_scratch_ad"
                                label="Select AdNetwork Ads"
                                :options="$ad->pluck('label', 'key')"
                                :selected="setting('task_scratch_ad', [])"
                                required
                                class="custom-select-class"
                                col="col-xl-6 col-md-6"
                            />
   
                        </div>
                        <div class="col-xl-4 col-md-6 mt-4">
                            <button type="submit" class="btn btn-primary mt-1 px-5">Save</button>    
                        </div>
                        </form>
                    </div>

                    <div class="tab-pane fade text-muted" id="mathquiz" role="tabpanel"
                        aria-labelledby="home-tab" tabindex="0">

                        <form action="{{ route('admin.adnetwork.taskad.update') }}" method="post" >
                        @csrf
                        <input type="hidden" name="type" value="mathquiz">
                        <div class="col-xl-12 row">
                            <x-form.input
                                label="Daily Task Limit :" col="col-xl-3 col-md-6"
                                type="number" class="mb-3" value="{{$setting['math_quiz_limit']}}" 
                                name="math_quiz_limit"  placeholder="enter math quiz limit" autofocus 
                            />

                            <x-form.input
                                label="Cooldown Time Between Quiz :" col="col-xl-3 col-md-6"
                                type="number" class="mb-3" value="{{$setting['math_quiz_interval']}}" 
                                name="math_quiz_interval"  placeholder="enter Cooldown timer in second" autofocus 
                            />

                            <x-form.input
                                label="Math Quiz Coin :" col="col-xl-3 col-md-6"
                                type="number" class="mb-3" value="{{$setting['math_quiz_coin']}}" 
                                name="math_quiz_coin"  placeholder="enter math quiz reward coin" autofocus 
                            />

                            <x-form.ordered-multiselect
                                name="task_math_quiz_ad"
                                label="Select AdNetwork Ads"
                                :options="$ad->pluck('label', 'key')"
                                :selected="setting('task_math_quiz_ad', [])"
                                required
                                class="custom-select-class"
                                col="col-xl-6 col-md-6"
                            />
   
                        </div>
                        <div class="col-xl-4 col-md-6 mt-4">
                            <button type="submit" class="btn btn-primary mt-1 px-5">Save</button>    
                        </div>
                        </form>
                    </div>
 
                    <div class="tab-pane fade text-muted" id="visit_earn" role="tabpanel"
                        aria-labelledby="contact-tab" tabindex="0">
                        <form action="{{ route('admin.adnetwork.taskad.update') }}" method="post" >
                        @csrf
                            <input type="hidden" name="type" value="visit_earn">
                            <div class="col-xl-12 row">
                                <x-form.input
                                    label="Daily Task Limit :" col="col-xl-3 col-md-6"
                                    type="number" class="mb-3" value="{{$setting['web_limit']}}" 
                                    name="web_limit"  placeholder="enter visit earn limit" autofocus 
                                />

                                <x-form.ordered-multiselect
                                    name="task_web_ad"
                                    label="Select AdNetwork Ads"
                                    :options="$ad->pluck('label', 'key')"
                                    :selected="setting('task_web_ad', [])"
                                    required
                                    class="custom-select-class"
                                    col="col-xl-6 col-md-6"
                                />
      
                            </div>
                            <div class="col-xl-4 col-md-6 mt-4">
                                <button type="submit" class="btn btn-primary mt-1 px-5">Save</button>    
                            </div>
                        </form>
                    </div>

                    <div class="tab-pane fade text-muted" id="watch_video" role="tabpanel" tabindex="0">
                        <form action="{{ route('admin.adnetwork.taskad.update') }}" method="post" >
                        @csrf
                            <input type="hidden" name="type" value="watch_video">
                            <div class="col-xl-12 row">
                                <x-form.input
                                    label="Daily Task Limit :" col="col-xl-3 col-md-6"
                                    type="number" class="mb-3" value="{{$setting['video_limit']}}" 
                                    name="video_limit"  placeholder="enter watch video limit" autofocus 
                                />


                                <x-form.ordered-multiselect
                                    name="task_watchvideo_ad"
                                    label="Select AdNetwork Ads"
                                    :options="$ad->pluck('label', 'key')"
                                    :selected="setting('task_watchvideo_ad', [])"
                                    required
                                    class="custom-select-class"
                                    col="col-xl-6 col-md-6"
                                />
 
                            </div>
                            <div class="col-xl-4 col-md-6 mt-4">
                                <button type="submit" class="btn btn-primary mt-1 px-5">Save</button>    
                            </div>
                        </form>
                    </div>

                    <div class="tab-pane fade text-muted" id="insta_reel" role="tabpanel" tabindex="0">
                        <form action="{{ route('admin.adnetwork.taskad.update') }}" method="post" >
                        @csrf
                            <input type="hidden" name="type" value="insta_reel">
                            <div class="col-xl-12 row">
                                <x-form.input
                                    label="Daily Task Limit :" col="col-xl-3 col-md-6"
                                    type="number" class="mb-3" value="{{$setting['insta_reel_limit']}}" 
                                    name="insta_reel_limit"  placeholder="enter insta reel limit" autofocus 
                                />

                                <x-form.ordered-multiselect
                                    name="task_instal_reel_ad"
                                    label="Select AdNetwork Ads"
                                    :options="$ad->pluck('label', 'key')"
                                    :selected="setting('task_instal_reel_ad', [])"
                                    required
                                    class="custom-select-class"
                                    col="col-xl-6 col-md-6"
                                />
      
                            </div>
                            <div class="col-xl-4 col-md-6 mt-4">
                                <button type="submit" class="btn btn-primary mt-1 px-5">Save</button>    
                            </div>
                        </form>
                    </div>

                    <div class="tab-pane fade text-muted" id="global_ad" role="tabpanel" tabindex="0">
                        <form action="{{ route('admin.adnetwork.taskad.update') }}" method="post" >
                        @csrf
                            <input type="hidden" name="type" value="global_ad">
                            <div class="col-xl-12 row">
                                <div class="col-xl-4 col-md-6">
                                    <x-ui.card :cardClass="'overflow-hidden shadow-none border'" :hr_line="true" title="">
                                        <x-slot name="header">
                                            <div class="card-title d-flex gap-2">
                                                <h6 class="mb-0">Select Banner Ad</h6>
                                            </div>
                                        </x-slot>

                                        <x-form.select name="banner_s" label="Select Banner AdNetwork:" 
                                            :options="collect(['0' => 'Off'])->merge($network->pluck('title', 'ad_id'))"
                                            :selected="old('banner_s',$appConfig->banner_s)" 
                                            class="js-country-select js-example-basic-multiple" :multiple="false"
                                            :required="true" />

                                    </x-ui.card>
                                </div>

                                <div class="col-xl-12">
                                    <x-ui.card :cardClass="'overflow-hidden shadow-none border'" :hr_line="true" title="">
                                        <x-slot name="header">
                                            <div class="card-title d-flex gap-2">
                                                <h6 class="mb-0">Global Ad+Back ButtonAd</h6>
                                            </div>
                                        </x-slot>

                                        <x-form.ordered-multiselect
                                            name="back_ad"
                                            label="Select AdNetwork Ads"
                                            :options="$ad->pluck('label', 'key')"
                                            :selected="setting('back_ad', [])"
                                            required
                                            class="custom-select-class"
                                            col="col-xl-12"
                                        />

                                        <x-form.input
                                            label="After How much button press add show :"
                                            type="number" value="{{$appConfig->back_ad_count}}" col="mt-3" 
                                            name="back_ad_count" placeholder="4"
                                            autofocus />
                                    </x-ui.card>
                                </div>
                                   
                            </div>
                            <div class="col-xl-4 col-md-6 mt-2">
                                <button type="submit" class="btn btn-primary mt-1 px-5">Save</button>    
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{--        
    <div class="row">
        <div class="col-xl-4 col-md-6">
            <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="">
                <x-slot name="header">
                    <div class="card-title d-flex gap-2">
                        <h6 class="mb-0">Select Banner Ad</h6>
                    </div>
                </x-slot>

                <x-form.select name="banner_s" label="Select Banner AdNetwork:" 
                    :options="$network->pluck('title', 'ad_id')"
                    :selected="old('banner_s',$appConfig->banner_s)" 
                    class="js-country-select js-example-basic-multiple" :multiple="false"
                    :required="true" />

            </x-ui.card>
        </div>

        <div class="col-xl-4 col-md-6">
             <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="">
                <x-slot name="header">
                    <div class="card-title d-flex gap-2">
                        <h6 class="mb-0">Global Ad+Back ButtonAd</h6>
                    </div>
                </x-slot>

                <x-form.ordered-multiselect
                    name="back_ad"
                    label="Global Ad will show in other task and back button ad"
                    :options="$ad->pluck('label', 'key')"
                    :selected="old('back_ad',$appConfig->back_ad)"
                    required="true"
                    class="custom-select-class"
                    col="col-md-12"
                />   

                  <x-form.input
                    label="After How much button press add show :"
                    type="number" value="{{$appConfig->back_ad_count}}" col="mt-3" 
                    name="back_ad_count" placeholder="4"
                     autofocus />
            </x-ui.card>
        </div>
       
    </div>
     
    </form> --}}
@endsection

@section('scripts')
    @include('layouts.components.common-script')

        <!-- Select2 Cdn -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <!-- Internal Select-2.js -->
    @vite('resources/assets/js/select2.js')

@endsection