@extends('layouts.app')

@section('title', ___('Projects'))

@push('pre_css')
    @include('panel.inc.flatpicker.css')
@endpush

@push('css')
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css">
    <style>
        .bootstrap-tagsinput .tag {
            margin-right: 2px;
            color: white;
            background: #206bc4;
            padding: 1px 5px;
            border-radius: 3px;
        }
        .bootstrap-tagsinput{
            width: 100%;
        }
    </style>
@endpush

@section('content')
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="page-pretitle">
                    {{ ___('Projects') }}
                </div>
                <h2 class="page-title">
                    {{ ___("Edit Project") }}
                </h2>
            </div>
        </div>
    </div>

    <form id="campaignForm" action="{{ route('panel.campaigns.edit', $module->id) }}" method="post">
        <div class="row">
            <div class="col-md-8 mb">
                <div class="card">
                    <div class="card-body">

                        <div class="row">
                            <div class="col-md-12 mb">
                                <label class="form-label">{{ __('Project Title') }}</label>
                                <input type="text" name="title" class="form-control" placeholder="Enter Campaign Title" required value="{{ $module->title }}">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb">
                                <label class="form-label">{{ __('Website') }}</label>
                                <input type="text" name="website" class="form-control" placeholder="Enter Website" value="{{ $module->website }}">
                            </div>

                            @if($module->type == \App\Campaign::OneTime)
                            <div class="col-md-6 mb">
                                <label class="form-label">{{ __('Due Date') }}</label>
                                <input type="text" name="due_date" id="due_date" class="form-control" placeholder="Select Date" required value="{{ $module->due_date ? $module->due_date->toDateString() : '' }}">
                            </div>
                            @endif

                            <div class="col-md-6 mb">
                                <h3 class="">{{ __('Target Keywords') }}</h3>
                                <input type="text" name="targeted_keywords" id="targeted_keywords" class="form-control inputTags" placeholder="Target Keywords" value="{{ $module->targeted_keywords }}">
                            </div>
                            <div class="col-md-6 mb">
                                <h3 class="">{{ __('Target Radius Mile') }}</h3>
                                <input type="text" name="targeted_radius" id="targeted_radius" class="form-control" placeholder="Target Radius Mile" value="{{ $module->targeted_radius }}">
                            </div>
                            <div class="col-md-12 mb">
                                <h3 class="">{{ __('Yelp Profile Link') }}</h3>
                                <input type="url" name="yelp_profile" id="yelp_profile" class="form-control" placeholder="Yelp Profile Link" value="{{ $module->yelp_profile }}">
                            </div>

                            <div class="col-md-12 mb">
                                <label class="form-label">{{ __('Description') }}</label>
                                <textarea class="form-control" name="description" id="description" rows="4">{{ $module->description }}</textarea>
                            </div>
                        </div>

                    </div>
                    <div class="card-footer">
                        <a href="{{ route('panel.campaigns')}}" class="btn btn-danger">{{ __('Cancel') }}</a>
                        <button type="submit" class="btn btn-primary submission">{{ __('Submit') }}</button>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb">
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="row">

                            <div class="col-md-12 mb">
                                <label class="form-label required">{{ __('Targeted Cities') }}</label>
                                <input type="text" name="targeted_cities" id="targeted_cities" class="form-control inputTagsNonSelectize" placeholder="Targeted Cities" required value="{{ $module->targeted_cities }}">
                            </div>

                            <div class="col-md-12 mb">
                                <label class="form-label required">{{ __('Targeted Services') }}</label>
                                <input type="text" name="targeted_services" id="targeted_services" class="form-control inputTagsNonSelectize" placeholder="Targeted Services" required value="{{ $module->targeted_services }}">
                            </div>

                            <div class="col-md-12 mb">
                                <label class="form-label required">{{ __('Payment Method') }}</label>
                                <select name="payment_method" id="payment_method" class="form-select paymentSelectize">
                                    <option value=""></option>
                                    <option {{ $module->payment_method == \App\Campaign::PayPal ? 'selected' : '' }} value="{{ \App\Campaign::PayPal }}">{{ \App\Campaign::PayPal }}</option>
                                    <option {{ $module->payment_method == \App\Campaign::TRPPaymentLink ? 'selected' : '' }} value="{{ \App\Campaign::TRPPaymentLink }}">{{ \App\Campaign::TRPPaymentLink }}</option>
                                    <option {{ $module->payment_method == \App\Campaign::Card ? 'selected' : '' }} value="{{ \App\Campaign::Card }}">{{ \App\Campaign::Card }}</option>
                                </select>
                            </div>

                        </div>
                        <div class="row cardDetails" style="display: {{ $module->payment_method == \App\Campaign::Card ? 'flex' : 'none' }}">
                            <div class="col-md-8 mb">
                                <label class="form-label">{{ __('Card Number') }}</label>
                                <input type="text" name="card_number" id="card_number" class="form-control" placeholder="Card #" value="{{ $module->card_number }}">
                            </div>
                            <div class="col-md-4 mb">
                                <label class="form-label">{{ __('Card Type') }}</label>
                                <input type="text" name="card_type" id="card_type" class="form-control" placeholder="Card Type" value="{{ $module->card_type }}">
                            </div>
                            <div class="col-md-8 mb">
                                <label class="form-label">{{ __('Name On Card') }}</label>
                                <input type="text" name="card_holder" id="card_holder" class="form-control" placeholder="Name On Card" value="{{ $module->card_holder }}">
                            </div>
                            <div class="col-md-4 mb">
                                <label class="form-label">{{ __('Card Exp.') }}</label>
                                <input type="text" name="card_expire" id="card_expire" class="form-control" placeholder="Card Exp." value="{{ $module->card_expire }}">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb">
                                <label class="form-label">{{ __('Billing Address') }}</label>
                                <input type="text" name="billing_address" id="billing_address" class="form-control" placeholder="Billing Address" value="{{ $module->billing_address }}">
                            </div>
                            <div class="col-md-12 mb">
                                <label class="form-label">{{ __('Note') }}</label>
                                <textarea name="closer_note" class="form-control" placeholder="Enter Note">{{ $module->closer_note }}</textarea>
                            </div>
                        </div>

                    </div>
                </div>

                @if($module->type == \App\Campaign::Recurring)
                    <div class="card">
                        <div class="card-body">
                            <div class="row">

                                <div class="col-md-12 mb">
                                    <label class="form-label">{{ __('GMB Listing Address') }}</label>
                                    <textarea name="gmp_listing_address" class="form-control" placeholder="GMB Listing Address">{{ $module->gmp_listing_address }}</textarea>
                                </div>

                                <div class="col-md-12 mb">
                                    <label class="form-label">{{ __('Listing Status') }}</label>
                                    <div class="form-selectgroup">
                                        <label class="form-selectgroup-item">
                                            <input type="radio" name="listing_status" value="No" class="form-selectgroup-input" {{ $module->listing_status == 'No' ? 'checked' : '' }}>
                                            <span class="form-selectgroup-label">No</span>
                                        </label>
                                        <label class="form-selectgroup-item">
                                            <input type="radio" name="listing_status" value="Yes" class="form-selectgroup-input" {{ $module->listing_status == 'Yes' ? 'checked' : '' }}>
                                            <span class="form-selectgroup-label">Yes</span>
                                        </label>
                                    </div>
                                </div>

                                <div class="col-md-12 mb listingAccess" style="display: {{ $module->listing_status == 'Yes' ? 'block' : 'none' }}">
                                    <label class="form-label">{{ __('Listing Access') }}</label>
                                    <div class="form-selectgroup">
                                        <label class="form-selectgroup-item">
                                            <input type="radio" name="listing_access" value="No" class="form-selectgroup-input" {{ $module->listing_access == 'No' ? 'checked' : '' }}>
                                            <span class="form-selectgroup-label">No</span>
                                        </label>
                                        <label class="form-selectgroup-item">
                                            <input type="radio" name="listing_access" value="Yes" class="form-selectgroup-input" {{ $module->listing_access == 'Yes' ? 'checked' : '' }}>
                                            <span class="form-selectgroup-label">Yes</span>
                                        </label>
                                    </div>
                                </div>

                                <div class="col-md-12 mb accessEmail" style="display: {{ $module->listing_access == 'Yes' ? 'block' : 'none' }}">
                                    <label class="form-label">{{ __('Access Email') }}</label>
                                    <input type="text" name="access_email" value="{{ $module->access_email ?? '' }}" class="form-control" placeholder="{{ __('Enter Access Email') }}">
                                </div>

                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

    </form>


@stop

@push('script')
    @include('panel.inc.flatpicker.js')
    @include('panel.inc.tinymce.js')
@endpush

@push('script')
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>

    <script !src="">
        $(".inputTagsNonSelectize").tagsinput({
            maxTags: 5,
            trimValue: true
        })

        $('#payment_method').change(function(){
            if($(this).val() == '{{ \App\Campaign::Card }}') {
                $('.cardDetails').css('display', 'flex');
            }else{
                $('.cardDetails').css('display', 'none');
            }
        });

        $('.inputTags').selectize({
            delimiter: ',',
            persist: false,
            create: function(input) {
                return {
                    value: input,
                    text: input
                }
            }
        });

        $('.paymentSelectize').selectize({
            placeholder: 'Select Payment Method'
        });

        $('#due_date').flatpickr();

        tinymce.init({
            selector: '#description',
            // plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
            toolbar_mode: 'floating',
            height : 300
        });

        $('#campaignForm').submit(function (e) {
            let form = this;
            tinymce.triggerSave();
            $(form).find('.submission').btnloading();

            formHandler({form, e }).then(function (r) {
                notify('success', r.data.message);

                setTimeout(function(){
                    window.location = '{{ route('panel.campaigns') }}';
                }, 1000);

            }).catch(function (e) {
                notify('error', e.response.data.message);
            }).then(function () {
                $(form).find('.submission').btnreset();
            })
        });

        $('input[name="listing_status"]').change(function(){
            if ($(this).val() == 'Yes'){
                $('.listingAccess').css('display', 'block');
            }else{
                $('.listingAccess').css('display', 'none');
            }
        });

        $('input[name="listing_access"]').change(function(){
            if ($(this).val() == 'Yes'){
                $('.accessEmail').css('display', 'block');
            }else{
                $('.accessEmail').css('display', 'none');
            }
        });
    </script>

@endpush