@extends('layouts.master')
@section('styles')
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
@endsection
@section('content')
    <!-- Page Header -->
    @php
        $type=request('type');
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => ($type=="video") ? 'Videos': 'Insta Reels', 'url' => url('admin/watch-earn/'.($type=="video" ? 'video' : 'insta')), 'active' => false],
            ['label' => 'Create', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="$breadcrumbs" title="" />
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row ">
        <div class="col-xxl-8 col-xl-7">
            <x-ui.card title="Create New Task">

                <form id="myForm" action="{{ route('admin.watch-earn.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="image_path" id="input_image"/>
                    
                    <div class="row">
                        @if($type=="video")
                            <div class="row mb-3 mt-3">
                                <x-form.select name="type"  col="col-xl-12" label="Select Video Type:"
                                    placeholder="Select Task" :required="true" :options="[
                                        'none' => 'Select Video Type',
                                        'yt_video' => 'Youtube Video',
                                        'other' => 'Other Video Link',
                                    ]" :selected="old('type')" />
                            </div>
                        @else 
                            <input type="hidden" name="type" value="insta"/>   
                        @endif

                        <div class="row ">
                            <x-form.input label="{{$type=='video' ? 'Video Url:' : 'Reel Url:'}}"  type="url" name="url"
                                placeholder="http://" col="col-xl-10  col-md-10" autofocus />

                            <div class="col-xl-2 mt-4 col-md-2" id="div_verify">
                                <button class="btn btn-primary mt-1" type="button" id="verifyUrl">Verify Url</button>
                            </div>
                        </div>

                        <x-form.input label="{{$type=='video' ? 'Video ' : 'Reel '}}Title:" 
                        col="mt-3" name="title" placeholder="Enter title"
                            autofocus />

                        @if ($type!='insta')    
                        <x-form.input label="Video SubTitle:" col="mt-3" name="subtitle" placeholder="Complete task and earn more spent time and get extra coin" autofocus />
                        @endif

                        <div class="row">
                            <x-form.prefixed-input col="col-xl-6 mt-3"
                                label="How many user can complete this task <span class='text-primary'>0= unlimited</span>"
                                type="number" class="" end="" name="total_cap" placeholder="0= unlimited"
                                value="0" autofocus />

                            <x-form.prefixed-input col="col-xl-6 mt-3"
                                label="Daily Cap .<span class='text-primary'>(Total number of times this task can be completed per day)</span>"
                                placeholder="10 or 0=unlimited" name="daily_cap" type="number" end="Times"
                                min="0" />
                        </div>

                        <div class="row">
                            <x-form.prefixed-input col="col-xl-6 mt-3"
                                label="Task Timer: <span class='text-primary'>[Watch for x Second]</span>" type="number"
                                name="timer" class="" start="Watch for" end="Seconds" placeholder="0"
                                value="0" autofocus />

                            <x-form.prefixed-input col="col-xl-6 mt-3" label="Task Reward" name="coin"
                                start="to Get Reward" type="number" placeholder="enter reward coin" end="Coins" min="5" />
                        </div>

                        @if ($type!='insta')
                            <div class="div_browser">
                                <x-form.select name="browser"  col="col-xl-12 mt-3" label="Open Video in:"
                                    placeholder="Select Browser" :required="false" :options="[
                                        '0' => 'In App Browser',
                                        '1' => 'Chrome Custom Tab',
                                        '2' => 'External Browser',
                                    ]" :selected="old('browser')" />
                            </div>
                        @endif

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

        <div class="col-xxl-4 col-xl-5">
            <x-ui.card title="Publish&nbsp;<span class='text-danger'>*</span>">
                
                <x-form.input col="col-xl-12 mt-1" label="Task Expiry Date:"
                    tooltip="after this task wil not show in app" type="text" placeholder="Pick a end date"
                    class=""  name="expire_at" :required="false"  autofocus/> 

                <button type="submit" class="btn btn-primary mt-3 px-5">Save</button>    
            </x-ui.card>

            <x-ui.card title="Task Geo Targeting">
                <x-form.select name="country" label="Choose Country where you want to show Task:" :options="$country->pluck('name', 'iso')"
                    :selected="old('country')" class="js-country-select js-example-basic-multiple" :multiple="true"
                    :required="true" />
            </x-ui.card>

            <x-ui.card title="Thumbnail">
                <div class="div_optional">
                    <x-form.input label="Thumbnail Link:" type="url" id="media_link" col="mb-1"
                    name="media_link" placeholder="http" autofocus :required="false" />

                    <p>----OR-----</p>
                </div>

                <x-form.dropzone-image name="media" id="uploadmedia" placeholder="assets/images/media-placeholder.svg"
                    sizeLabel="200×300 px" label="Task Thumbnail Image"  :required="false" />
            </x-ui.card>
        </div>
        </form>
    </div>
@endsection

@section('scripts')
    @include('layouts.components.common-script')
    <script src="{{ asset('build/assets/libs/toastify-js/src/toastify.js') }}"></script>
    <!-- Select2 Cdn -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
       <script src="{{asset('build/assets/libs/flatpickr/flatpickr.min.js')}}"></script>

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

    <script>
        var isVerified=false;
        var isSkip=false;
        let vidtype="{{request('type')}}";
        document.addEventListener('DOMContentLoaded', () => {

            try {
                flatpickr("#expire_at", {
                    altInput: true,
                    altFormat: "F j, Y",
                    dateFormat: "Y-m-d",
                    disableMobile: true
                });
            } catch (e) {
                console.warn('flatpickr init failed', e);
            }

        const form = document.getElementById('myForm');

            form.addEventListener('submit', e => {
                if(isSkip){
                    const fileInput = document.querySelector('input[name="media"]');
                    const linkInput = document.getElementById('media_link');
                    const hasFile = fileInput && fileInput.files.length > 0;
                    const hasLink = linkInput && linkInput.value.trim() !== '';
                    if (!hasFile && !hasLink) {
                        e.preventDefault();              // stop form
                        promptify({
                            icon:'info',
                            text: 'Please either upload an image or provide an image URL.',
                        });
                    }
                }
                else if (!isVerified ) {
                    e.preventDefault(); 
                    promptify({
                        icon: 'info',
                        text: 'Please verify Video/Reel Url to continue',
                    });
                }
            });
        });
    
        $('#type').change(function(){
            var type=this.value;
            if(type==''){
                promptify({
                    icon: 'info',
                    text: 'Please select task type',
                });
            }else{
                let placeholder;
                console.log(type);
                if(type=="yt_video") { 
                    isSkip=false;
                    $(".div_browser").removeClass('d-none')
                    $("#div_verify").removeClass('d-none');
                    $("#uploadmedia").attr('required',false);
                    placeholder = 'https://youtu.be/XaarebxxQ0n';
                }else if(vidtype=="insta") { 
                    isSkip=false;
                    $(".div_browser").addClass('d-none')
                    $("#div_verify").removeClass('d-none');
                    $("#uploadmedia").attr('required',false);
                    placeholder = 'https://www.instagram.com/reel/xxxxxxxx/';
                }else{ 
                    isSkip=true;
                    $(".div_browser").removeClass('d-none')
                    $("#div_verify").addClass('d-none');
                    $("#uploadmedia").attr('required',true);
                    placeholder = 'https://www.dailymotion.com/video/x8tv8rg';
                }
                $('#url').attr('placeholder', placeholder);
            }
        })
        
        $('#verifyUrl').click(function(){
            let url=$('#url').val();
            let type=$('#type').val();
            let api="{{env('APP_URL')}}"+'/api/promo/verify-url';
            console.log(api)
            if(url=="" || type=="none"){
                promptify({
                    icon: 'info',
                    text: 'Please enter valid url. and task type',
                });
            }else{
                 AjaxUtil.post(api,{
                    'url':url,
                    'type':(type==null) ? 'insta' : type
                 },function(response) {
                    console.log('Response:', response);
                    if(response.status==201){
                        isVerified=true;
                        $("#preview_uploadmedia").attr('src',response.message)
                        $("#preview_uploadmedia").css({opacity:1})
                        $("#input_image").val((type=="yt_video") ? response.message : response.file)

                    }else{
                        promptify({
                            icon: 'error',
                            text: response.message,
                        });
                    }
                    
                }, function(xhr, status, error) {
                    console.error('Error:', error);
                    AjaxUtil.showToast('Error loading data. '+error, 'error');
                 
                });
            }
        })
    </script>
@endsection