@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">

    <link rel="stylesheet" href="{{asset('build/assets/libs/flatpickr/flatpickr.css')}}">
    <link rel="stylesheet" href="{{asset('build/assets/libs/flatpickr/flatpickr.min.css')}}">
@endsection
@section('content')
    <!-- Page Header -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Subscriptions', 'url' => route('admin.subscription'), '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 Subscription">

                <form action="{{ route('admin.subscription.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row gy-3">
                        <x-form.input label="Plan Name:" class="" name="title" placeholder="Silver,Gold"
                            autofocus />

                        <div class="row">
                            <x-form.select name="currency" col="col-xl-6 mt-3" label="Plan Currency:"
                                placeholder="Select Currency" :required="true" :options="$currency->pluck('code', 'id')" :selected="old('currency')" />

                            <x-form.prefixed-input col="col-xl-6 mt-3" label="Plan Price"
                                tooltip="Plan Price must be on your selected currency" type="number" start="INR"
                                class="" end="" name="amount" placeholder="Enter Amount" autofocus
                                step="any" />
                            
                            <x-form.prefixed-input col="col-xl-6 mt-3" label="Discount Price (Optional)"
                                tooltip="if amount is 10 and discount amount is 7 then user need to pay only" type="number" start="INR"
                                class="" name="discounted_amount" placeholder="10"  autofocus
                                step="any" :required="false"/>    

                            <x-form.input col="col-xl-3 mt-3 d-none" label="Discount Start Date:"
                                tooltip="" type="text" placeholder="Pick a date"
                                class=""  name="discount_start_at" :required="false" autofocus/> 

                            <x-form.input col="col-xl-3 mt-3 d-none" label="Discount End Date:"
                                tooltip="" type="text" placeholder="Pick a end date"
                                class="" name="discount_end_at" :required="false" autofocus/> 

                            <x-form.prefixed-input col="col-xl-6 mt-3"
                                label="Plan Validity in Days" type="number" class=""
                                end="Days" name="validity_days" placeholder="10"
                                vautofocus />

                            <x-form.prefixed-input col="col-xl-6 mt-3"
                                tooltip="if validity is 10 and extra validity is 5 then user will get 15 day validity"
                                label="Extra Days (Optional)" type="number" class="" :required="false"
                                end="Days" name="extra_validity_days" placeholder="10"
                                vautofocus />

                            <x-form.outline-toggle class="col-xl-4 mt-3" name="paid_via_wallet"
                                label="Allow User to Paid via Wallet?" tooltip="User can purchase subscription using wallet coins"
                                :selected="old('paid_via_wallet')" :required="true" :options="[
                                    1 => ['label' => 'Yes'],
                                    0 => ['label' => 'No'],
                                ]" />

                            <x-form.prefixed-input col="col-xl-6 mt-3 d-none"
                                label="Required Coin to Purchase Plan"
                                type="number" class="" end="Coin" name="coin_price" placeholder="Enter coin"
                                 :required="false" autofocus />

                        </div>

                        <x-form.textarea col="col-xl-12" label="Subscription Benefit max 5 line break line by," name="description"
                           :required="true" placeholder="extra 50 bonus on each refer, everyday extra 10 task" />

                         <hr class="p-0 m-0">
                         <h6 class="text-primary">Subscription Benefit to User</h6>  

                         <x-form.prefixed-input col="col-xl-6 mt-3"
                            tooltip="it will combine default limit + extra limit if default limit is 10 and extra is 5 then limit is 15 "
                            label="Extra Limit for Task  <span class='text-primary'>( this increment apply in all task)</span>" type="number" class=""
                            end="Taks" name="extra_task" placeholder="10"
                            vautofocus />

                        <x-form.prefixed-input col="col-xl-6 mt-3"
                            tooltip="it will combine default bonus + extra bonus if default bonus is 10 and extra is 5 then bonus is 15 "
                            label="Extra Refer Bonus<span class='text-primary'>(extra bonus on each refer)</span>" type="number" class=""
                            end="Bonus" name="extra_refer_bonus" placeholder="Enter refer bonus"
                            vautofocus />   
                            
                        <x-form.prefixed-input col="col-xl-6 mt-3"
                            tooltip="it will combine default bonus + extra bonus if default bonus is 10 and extra is 5 then bonus is 15 "
                            label="Diamonds Coin (Optional)<span class='text-primary'>(Used for Promotion)</span>" type="number" class=""
                            end="Diamond" name="diamond_coins" placeholder="Enter coin"
                            vautofocus />       
                    </div>
        </div>
        </x-ui.card>

        <div class="col-xxl-4 col-xl-5">
            <x-ui.card title="Publish&nbsp;<span class='text-danger'>*</span>">
                <button type="submit" class="btn btn-primary mt-1 px-5">Save</button>
            </x-ui.card>

            <x-ui.card title="Plan 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="Media Image">
                <x-form.dropzone-image name="media" id="uploadmedia" placeholder="assets/images/media-placeholder.svg"
                    sizeLabel="200×200 px" label="Plan Icon Attachment" :required="true" />
            </x-ui.card>

        </div>
        </form>
    </div>
@endsection

@section('scripts')
    <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>

    <!-- Internal Select-2.js -->
    @vite('resources/assets/js/select2.js')
    <script src="{{asset('build/assets/libs/flatpickr/flatpickr.min.js')}}"></script>

    <script>
        $('document').ready(function(){

            if($('#discounted_amount').val()>0){
                discountChange(false);
            }else{
                discountChange(true);
            }
        
            flatpickr("#discount_start_at", {
                altInput: true,
                altFormat: "F j, Y",
                dateFormat: "Y-m-d",
                disableMobile: true
            });

            flatpickr("#discount_end_at", {
                altInput: true,
                altFormat: "F j, Y",
                dateFormat: "Y-m-d",
                disableMobile: true
            });
        })

        $('#discounted_amount').on('keyup',function(){
            if(this.value>0){
                discountChange(false);
            }else{
                discountChange(true);
            }
        })

        $('#currency').on('change', function() {
            var text=$('#currency :selected').text();
            $('#amount_prefix_start').text(text);
            $('#discounted_amount_prefix_start').text(text);
        });

        $('input[name="paid_via_wallet"').on('click', function() {
            console.log(this.value);
            $('#div_coin_price').toggleClass('d-none',(this.value==0)?true:false);
            $('#coin_price').attr('required',(this.value==0) ? false : true);
        });

        function discountChange(status){
            $('#div_discount_start_at').toggleClass('d-none',status);
            $('#div_discount_end_at').toggleClass('d-none',status);

            $('#discount_start_at').attr('required',status);
            $('#discount_end_at').attr('required',status);
        }

    </script>
@endsection