@extends('layouts.master')
@section('styles')
<link rel="stylesheet" href="{{asset('build/assets/libs/toastify-js/src/toastify.css')}}">
@endsection
@section('content')
    <!-- Page Header -->
    <div class="d-flex align-items-center justify-content-between page-header-breadcrumb flex-wrap gap-2">
        <div>
            <nav>
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.offerwall.api') }}">Api Offerwall</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Create Offerwall</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title">
                        Create Offerwall
                    </div>
                </div>
                <div class="card-body">

                    <div class="border border-gray p-3 mb-4">
                        <b>Allowed macros from App are:</b> <span class="text-danger ms-2">[user_id]</span> = for User ID <span class="text-danger ms-2">[country]</span> = for country ISO <span class="text-danger ms-2">[country_up]</span> = for country ISO in uppercase <span class="text-danger ms-2">[email]</span> = for user Email <span class="text-danger ms-2">[gaid]</span> = for GAID
                    </div>

                    <form action="{{route('admin.offerwall.api.store')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row gy-3">
                        <div class="col-xl-4">
                            <label for="input-label" class="form-label">Offerwall Name :</label>
                            <input type="text" class="form-control" name="title" value="{{ old('title') }}"
                                id="input-label" placeholder="Cpalead/torox/cpx" >
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Offerwall Slug(Offerwall default name) :</label>
                            <input type="text" class="form-control" id="input-label11" name="slug"
                                value="{{ old('slug') }}" placeholder="cpalead,tapjoy" required>
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label1" class="form-label">Offerwall Icon :</label>
                            <input type="file" class="form-control" name="icon" id="input-label1" required
                                accept="image/*">
                        </div>

                        <div class="col-xl-3">
                            <x-form.select name="cat" label="Offerwall Type" :options="[
                                '' => 'Select Offerwall Category',
                                'offer' => 'Offers',
                                'survey' => 'Surveys',
                            ]" :selected="old('cat', $data->cat ?? '')"
                                placeholder="Offerwall Type" :required="true" />
                        </div>

                        <div class="col-xl-9">
                            <label for="input-label11" class="form-label">Offerwall Api Url</label>
                            <input type="url" class="form-control" id="input-label11" name="api"
                                value="{{ old('api') }}" placeholder="https://www.cpalead.com/api/offers?id=1406515&type=cpa&subid=[user_id]" required>
                        </div>
                        
                        <div class="col-xl-2">
                            <label class="form-label">Show on Home Screen:</label>
                            <div class="selectgroup selectgroup-pills">
                                <label class="selectgroup-item">
                                    <input type="radio" name="featured" value="1" class="selectgroup-input">
                                    <span class="selectgroup-button active">Yes</span>
                                </label>
                                <label class="selectgroup-item">
                                    <input type="radio" name="featured" value="0" class="selectgroup-input" checked>
                                    <span class="selectgroup-button inactive">No</span>
                                </label>
                            </div>
                        </div>


                        <div class="col-xl-2">
                            <label class="form-label">Who will manage exchange rate?:</label>
                            <div class="selectgroup selectgroup-pills">
                                <label class="selectgroup-item">
                                    <input type="radio" name="exchange" id="exchange" value="0" class="selectgroup-input" checked>
                                    <span class="selectgroup-button inactive">Network</span>
                                </label>
                                <label class="selectgroup-item">
                                    <input type="radio" name="exchange" id="exchange" value="1" class="selectgroup-input">
                                    <span class="selectgroup-button active">Backend</span>
                                </label>
                            </div>
                        </div>

                        <div class="col-xl-2" style="display: none;" id="div_exchange">
                            <label for="input-label11" class="form-label">Exchange Rate <span class="text-primary">eg 1000 points = $1</span></label>
                            <input type="text" class="form-control" id="input-label11" name="exchange_rate"
                                value="{{ old('exchange_rate') }}" placeholder="1000" >
                        </div>

                        <div class="col-xl-2" style="display: none;" id="div_percentage">
                            <label for="input-label11" class="form-label">User Share Percentage <span class="text-primary">eg 30%</span></label>
                            <input type="text" class="form-control" id="input-label11" name="user_profit_share"
                                value="{{ old('user_profit_share') }}" placeholder="10%">
                        </div>

                        <div class="col-xl-3">
                            <label for="input-label11" class="form-label">Enter the user level required to unlock this offerwall.
                                <a tabindex="0" class="" id="popoverHelp" role="button"
                                data-bs-toggle="popover"  data-bs-placement="right" title="User Level Required"
                                data-bs-content="If the user's current level is 0 and you want the offerwall to unlock at level 10, simply enter 10 here.">
                            <i class="fe fe-help-circle text-primary"></i></a></label>
                            <input type="number" class="form-control" id="input-label11" name="level_require" value="0" placeholder="Enter level no.">
                        </div>

                        <div class="col-xl-2">
                            <label for="input-label11" class="form-label">Extra Bonus (in % like5,10)?:</label>
                            <input type="number" class="form-control" id="input-label11" name="extra_bonus" value="0" placeholder="1">
                        </div>

                        <div class="col-xl-2">
                            <label for="input-label11" class="form-label">Offerwall Order by:</label>
                            <input type="number" class="form-control" id="input-label11" name="item_order"
                                value="1" placeholder="1">
                        </div>

                    </div>
                </div>

                <hr>
                <div class="card-header pt-0">
                    <div class="card-title">
                        <span class="text-primary">Api Response JSON Array Setup</span> 
                        <a tabindex="0" class="" id="popoverHelp" role="button"
                                            data-bs-toggle="popover" data-bs-placement="right" title="JSON Array Guide"
                                            data-bs-content="API Response JSON Array Setup involves configuring an API to return multiple data items in a structured JSON array format. This enables the client to efficiently parse and process the data">
                        <i class="fe fe-help-circle text-primary me-2"></i></a>
                    </div>
                </div>
                <div class="card-body pt-2">
                    <div class="row gy-3">
                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Name of <b>JSON Array Key</b><span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="input-label11" name="json_array" value="{{old('json_array')}}" placeholder="eg:offers" required>
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Name of <b>Offer ID Key</b><span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="input-label11" name="key_campid" value="{{old('key_campid')}}" placeholder="eg:campid,offerid" required>
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Name of <b>Offer Title Key</b><span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="input-label11" name="key_title" value="{{old('key_title')}}" placeholder="eg:title/name" required>
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Name of <b>Reward Amount Key</b><span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="input-label11" name="key_amount" value="{{old('key_amount')}}" placeholder="eg:amount" required>
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Name of <b>Offer Description Key</b><span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="input-label11" name="key_description" value="{{old('key_description')}}" placeholder="eg:description" required>
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Name of <b>Icon URL Key{if its inside array then add 0 and then key name}</b><span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="input-label11" name="key_icon_url" value="{{old('key_icon_url')}}" placeholder="eg:previews,icon,thumb" required>
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Name of <b>Offer Url key</b><span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="input-label11" name="key_offer_link" value="{{old('key_offer_link')}}" placeholder="eg:link,url" required>
                        </div>

                    </div>
                </div>

                <hr>
                <div class="card-header pt-0">
                    <div class="card-title">
                        <span class="text-primary">Postback Setup</span> 
                        <a tabindex="0" class="" id="popoverHelp" role="focus"
                                            data-bs-toggle="popover" data-bs-placement="right" title="Postback Guide"
                                            data-bs-content="for clear postback guide please check network postback documentation">
                        <i class="fe fe-help-circle text-primary me-2"></i></a>
                    </div>
                </div>

                <div class="card-body pt-2">
                    <div class="row gy-3">
                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Paramater for <b>USER ID</b><span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="input-label11" name="param_userid" value="{{old('param_userid')}}" placeholder="userid={subid}" required>
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Paramater for <b>OFFER ID</b><span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="input-label11" name="param_offerid" value="{{old('param_offerid')}}"  placeholder="offerid={offerid}" required>
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Paramater for <b>REWARD AMOUNT</b><span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="input-label11" name="param_payout" value="{{old('param_payout')}}"  placeholder="payout={payout}" required>
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Paramater for <b>OFFER NAME</b></label>
                            <input type="text" class="form-control" id="input-label11" name="param_offername" value="{{old('param_offername')}}"  placeholder="title={title}" >
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Paramater for <b>IP ADDRESS</b></label>
                            <input type="text" class="form-control" id="input-label11" name="param_ip" value="{{old('param_ip')}}"  placeholder="ip={ip}" >
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Paramater for <b>EVENT</b></label>
                            <input type="text" class="form-control" id="input-label11" name="param_event" value="{{old('param_event')}}" placeholder="goal={goal}" >
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Paramater for <b>ADMIN PAYOUT</b>[for calculate earning]</label>
                            <input type="text" class="form-control" id="input-label11" name="param_admin_payout" value="{{old('param_admin_payout')}}" placeholder="raw={raw}" >
                        </div>

                        <div class="col-xl-4">
                            <label for="input-label11" class="form-label">Paramater for <b>RESPONSE</b></label>
                            <input type="text" class="form-control" id="input-label11" name="response_msg"  placeholder="201" value="201" required>
                        </div>

                        <div class="col-xl-12">
                            <label for="input-label11" class="form-label">Postback <b>Whitelist IP(Add Multiple Ip by ,)</b></label>
                            <input type="text" class="form-control" id="input-label11" name="whitelist_ip" value="{{old('whitelist_ip')}}" placeholder="0.0.0.0,1.356.65.6,041.13.3.3" >
                        </div>

                    </div>
                </div>


                <div class="card-footer">
                    <button type="submit" class="btn btn-primary-light btn-wave ms-auto float-end">Create Offerwall</button>
                </div>
                </form>
            </div>
        </div>
    </div>
    <!--End::row-1 -->
@endsection

@section('scripts')
<script src="{{asset('build/assets/libs/toastify-js/src/toastify.js')}}"></script>

<script>
    $('input[type=radio][name=exchange]').on('change',function(){
        if(this.value=='1'){
            $('#div_exchange').show();
            $('#div_percentage').show();
            $('[name=exchange_rate]').attr('required',true);
            $('[name=user_profit_share]').attr('required',true);
        }else{
            $('[name=exchange_rate]').removeAttr('required');
            $('[name=user_profit_share]').removeAttr('required');
            $('#div_exchange').hide();
            $('#div_percentage').hide();
        }
    })

</script>
@endsection