@extends('layouts.app')

@section('title', __('Campaign View'))

@push('pre_css')
    @include('panel.inc.filepond.css')
    @include('panel.inc.datatable.css')
    <style>
        .card-body{
            font-size: 18px;
        }
    </style>
@endpush

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

            <div class="col-auto ml-auto d-print-none">
                <div class="btn-list">
                    @if(\Gate::allows('campaigns-followups-add'))
                        <a href="javascript:void(0)" onclick="fetchModal({el:this})" data-modal="#followupModal" data-modal-url="{{ route('panel.campaigns.followups.modal', $campaign->id) }}" class="btn btn-primary">
                            <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"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                            Add Followup
                        </a>
                    @endif
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            @include('panel.customers._customer-details', ['customer' => $campaign->customer, 'isMini' => true])
        </div>

        <div class="col-md-8">
            @include('panel.campaigns.pages._navigation', ['campaign' => $campaign])

            @if(\Gate::allows('campaigns-followups-add'))
            <div class="row justify-content-center align-content-center mb">
                <div class="col-md-2 mr">
                    <a class="btn btn-lg btn-primary addFollowUp" data-text="Followup 1" href="javascript:void(0)">Followup 1</a>
                </div>
                <div class="col-md-2 mr">
                    <a class="btn btn-lg btn-primary addFollowUp" data-text="Followup 2" href="javascript:void(0)">Followup 2</a>
                </div>
                <div class="col-md-2 mr">
                    <a class="btn btn-lg btn-primary addFollowUp" data-text="Followup 3" href="javascript:void(0)">Followup 3</a>
                </div>
            </div>
            @endif

            <div class="card">
                {!! $dataTable->table() !!}
            </div>
        </div>
    </div>

@stop

@push('script')
    @include('panel.inc.filepond.js')
    @include('panel.inc.datatable.js')
    {!! $dataTable->scripts() !!}

    <script !src="">
        @if(\Gate::allows('campaigns-followups-delete'))
        $(document).on('click', '.deleteModel', function(){
            let el = this;
            deletePopup({
                el: el,
                url: '{{ route('panel.campaigns.followups.delete', $campaign->id) }}',
                params:{
                    moduleID: $(el).data('model-id')
                },
                datatable: $('#followups-table').DataTable()
            });
        });
        @endif

        $(document).on('click', '.addFollowUp', function(){
            let el = this;
            let text = $(this).data('text');

            $(el).btnloading();
            axios.post('{{ route('panel.campaigns.followups.forceAdd', $campaign->id) }}', {
                text: text
            }).then(function(r){
                notify('success', r.data.message);

                $('#followups-table').DataTable().ajax.reload();
            }).catch(function (e) {
                notify('error', e.response.data.message);
            }).then(function(){
                $(el).btnreset();
            })
        });
    </script>
@endpush