@extends('layouts.app')

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

@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

@push('pre_css')
    @include('panel.inc.flatpicker.css')
@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">
                    {{ ___("Add Project") }}
                </h2>
            </div>
        </div>
    </div>

    <form id="campaignForm" action="{{ route('panel.campaigns.add') }}" 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-4 mb">
                                <label class="form-label required">
                                    {{ __('Customer') }}
                                    @if(\Gate::allows('customers-add'))
                                        <button type="button" class="btn btn-sm btn-primary float-right addCustomer" data-modal="#customerModal" data-modal-url="{{ route('panel.customers.modal') }}">{{ __('Add') }}</button>
                                    @endif
                                </label>
                                <select class="form-control customerSelectize" name="customer" required>
                                    <option value=""></option>
                                    @foreach($customers as $customer)
                                        <option data-data="{{ json_encode($customer) }}" value="{{ $customer->id }}">{{ $customer->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-8 mb">
                                <label class="form-label required">{{ __('Project Title') }}</label>
                                <input type="text" name="title" class="form-control" placeholder="Enter Campaign Title" required>
                            </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">
                            </div>

                            <div class="col-md-6 mb">
                                <label class="form-label required">{{ __('Status') }}</label>
                                <select name="status" id="status" class="form-control" required>
                                    <option value=""></option>
                                    @foreach(\App\CampaignStatus::all() as $status)
                                        <option value="{{ $status->id }}">{{ $status->title }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <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">
                            </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">
                            </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">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4 mb">
                                <label class="form-label">{{ __('Lead') }}</label>
                                <select name="lead" id="lead" class="form-control leadSelectize">
                                    <option value=""></option>
                                    @foreach($leads as $lead)
                                        <option {{ request()->lead == $lead->id ? 'selected' : '' }} data-data="{{ json_encode($lead) }}" value="{{ $lead->id }}">{{ $lead->title }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4 mb">
                                <label class="form-label">{{ __('Type') }}</label>
                                <select name="type" id="type" class="form-control" required>
                                    <option value="{{ \App\Campaign::OneTime }}">{{ \App\Campaign::OneTime }}</option>
                                    <option value="{{ \App\Campaign::Recurring }}">{{ \App\Campaign::Recurring }}</option>
                                </select>
                            </div>

                            <div class="col-md-4 mb dueDateDiv">
                                <label class="form-label required">{{ __('Project Due Date') }}</label>
                                <input type="text" name="due_date" id="due_date" class="form-control" placeholder="Select Date" required>
                            </div>

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

                    </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>
                            </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>
                            </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 value="{{ \App\Campaign::PayPal }}">{{ \App\Campaign::PayPal }}</option>
                                    <option value="{{ \App\Campaign::TRPPaymentLink }}">{{ \App\Campaign::TRPPaymentLink }}</option>
                                    <option value="{{ \App\Campaign::Card }}">{{ \App\Campaign::Card }}</option>
                                </select>
                            </div>

                        </div>
                        <div class="row cardDetails" style="display: 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 #">
                            </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">
                            </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">
                            </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.">
                            </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">
                            </div>
                            <div class="col-md-12 mb">
                                <label class="form-label">{{ __('Note') }}</label>
                                <textarea name="closer_note" class="form-control" placeholder="Enter Note"></textarea>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="card recurringData" style="display: none">
                    <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"></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" 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">
                                        <span class="form-selectgroup-label">Yes</span>
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-12 mb listingAccess" style="display: 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" 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">
                                        <span class="form-selectgroup-label">Yes</span>
                                    </label>
                                </div>
                            </div>

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

                        </div>
                    </div>
                </div>
            </div>

            @if($services->count())
            <div class="page-header">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <h2 class="page-title">
                            {{ ___("Services") }}
                        </h2>
                    </div>
                </div>
            </div>

                @foreach($services as $service)
                    <div class="col-md-6 mb">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">
                                    {{ $service->title }} <br>
                                    <small class="text-muted">Department: {{ $service->department->title }}</small>
                                </h4>
                                <div class="card-options">
                                    <div class="mr">
                                        <label class="form-label">Price</label>
                                        <div class="input-icon mb-3">
                                            <span class="input-icon-addon">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2" /><path d="M12 3v3m0 12v3" /></svg>
                                            </span>
                                            <input type="text" class="form-control price" style="width: 150px" name="service[{{ $service->id }}][price]" placeholder="Enter Price" value="{{ $service->price }}">
                                        </div>

                                    </div>
                                    <label class="form-check form-switch">
                                        <input class="form-check-input serviceCheckbox" type="checkbox" value="{{ $service->id }}" name="service[{{ $service->id }}][id]">
                                        <span class="form-check-label"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                   {{-- <div class="col-md-12 mb">
                                        <label class="form-label">Description</label>
                                        {{ $service->description ?? '-' }}
                                    </div>--}}

                                    @forelse($service->commands as $command)
                                        <div class="col-md-12">
                                            <fieldset class="form-fieldset">
                                                <label class="row mb">
                                                    <span class="col">{{ $command->title }}</span>
                                                    <span class="col-auto">
                                                        <label class="form-check form-check-single form-switch">
                                                            <input class="form-check-input commandCheckbox" type="checkbox" value="{{ $command->id }}" name="service[{{ $service->id }}][command][{{ $command->id }}][id]">
                                                        </label>
                                                    </span>
                                                </label>
                                                <input type="text" class="form-control" autocomplete="off" placeholder="Command Note" name="service[{{ $service->id }}][command][{{ $command->id }}][note]">
                                            </fieldset>
                                        </div>
                                    @empty
                                        <div class="col-md-12">No Command Found!</div>
                                    @endforelse

                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

            @endif
        </div>

        <div class="page-header">
            <div class="row align-items-center">
                <div class="col-auto">
                    <h2 class="page-title">
                        {{ ___("Custom Commands") }}
                    </h2>
                </div>
            </div>
        </div>

        <div class="row row-deck prependCommand">

            <div class="col-md-4 mb">
                <div class="card">
                    <div class="card-body text-center">
                        <svg onclick="generateCustomCommand()" style="height: 195px; width: 195px; cursor:pointer;" xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#e6e8e9" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9" /><line x1="9" y1="12" x2="15" y2="12" /><line x1="12" y1="9" x2="12" y2="15" /></svg>
                    </div>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-12">
                <a href="{{ route('panel.campaigns')}}" class="btn btn-danger">{{ __('Cancel') }}</a>
                <button type="submit" class="btn btn-primary submission">{{ __('Submit') }}</button>
            </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="">
        $('#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
                }
            }
        });

        $(".inputTagsNonSelectize").tagsinput({
            maxTags: 5,
            trimValue: true
        })

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

        $('#type').change(function(){
            if ($(this).val() == '{{ \App\Campaign::Recurring }}'){
                $('.dueDateDiv').css('display', 'none');
                $('.recurringData').css('display', 'block');
            }else{
                $('.dueDateDiv').css('display', 'block');
                $('.recurringData').css('display', 'none');
            }
        })

        function generateCustomCommand(){
            let html = `@include('panel.campaigns._custom-command-layout')`;
            $(html).prependTo($('.prependCommand'));
            $('.price').mask('999999.99');
        }

        function deleteCustomCommand(el){
            $(el).btnloading();

            setTimeout(function(){
                $(el).closest('.removeable').fadeOut(200).remove();
            }, 500);
        }

        $('#due_date').flatpickr();
        $('.price').mask('999999.99');

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

        $('#status').selectize({
            placeholder: 'Select Campaign Status'
        });

        $('#type').selectize({
            placeholder: 'Select Campaign type'
        });

        $('.customerSelectize').selectize({
            valueField: 'id',
            labelField: 'name',
            searchField: ['name', 'company', 'phone_1'],
            placeholder: 'Select Customer',
            render: {
                item: function(item, escape) {
                    return `<div><span class="label">${item.name}</span><br><span class="caption">Company: ${item.company}</span><span class="caption">Phone: ${item.phone_1}</span></div>`;
                },
                option: function(item, escape) {
                    return `<div class="px-2 py-1"><span class="label">${item.name}</span><br><span class="caption">Company: ${item.company}</span><span class="caption">Phone: ${item.phone_1}</span></div>`;
                }
            },
        });

        $('.leadSelectize').selectize({
            valueField: 'id',
            labelField: 'title',
            searchField: ['title', 'company'],
            placeholder: 'Select Lead',
            render: {
                item: function(item, escape) {
                    return `<div><span class="label">${item.title}</span><br><span class="caption">Company: ${item.company}</span></div>`;
                },
                option: function(item, escape) {
                    return `<div class="px-2 py-1"><span class="label">${item.title}</span><br><span class="caption">Company: ${item.company}</span></div>`;
                }
            },
            onChange: function(value) {
                let data = this.options[value];
                if(data){
                    $('#yelp_profile').val(data.yelp_profile)
                    $('#targeted_radius').val(data.targeted_radius)
                    $('#targeted_keywords').data('selectize').destroy();
                    $('#targeted_keywords').val(data.targeted_keywords)
                    $('#targeted_keywords').selectize({
                        delimiter: ',',
                        persist: false,
                        create: function(input) {
                            return {
                                value: input,
                                text: input
                            }
                        }
                    });
                    console.log(data.targeted_keywords)
                }
            }
        });

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

            $.confirm({
                title: "Are you sure?",
                content: "You won't be able to revert this!",
                type: 'red',
                buttons: {
                    close: function () {
                        $(form).find('.submission').btnreset();
                    },
                    Proceed: {
                        text: 'Proceed',
                        btnClass: 'btn-danger',
                        action: function(){
                            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();
                            })
                        }
                    }
                }
            });

        });

        $('.serviceCheckbox').change(function(){
            if( $(this).is(':checked') ){
                $(this).closest('.card').find('.commandCheckbox').prop('checked', true);
            }
        });

        $('.addCustomer').click(function(){
            fetchModal({el:this, extraParams: {leadId: $('#lead').val() ? $('#lead').val() : '{{ request()->lead }}' }})
        });

        $('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