@extends('dashboard.dashboard_layouts.dashboard_master')

@section('admin_dashboard_title')
Email Campigns
@endsection


@section('admin_dashboard_css')
<link rel="stylesheet" href="{{asset('css/sumoselect.min.css')}}">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="{{asset('css/richtext.min.css')}}">
@endsection

@section('admin_dashboard_content')

<div class="content dashboard-content bg-white min-h-100">
    <div class="nav-tabs-wrap">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="email-onboarding-tab" data-bs-toggle="tab"
                    data-bs-target="#email-onboarding" type="button" role="tab" aria-controls="email-onboarding"
                    aria-selected="true">Email Onboarding</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="email-signature-tab" data-bs-toggle="tab"
                    data-bs-target="#email-signature" type="button" role="tab" aria-controls="email-signature"
                    aria-selected="false">Email Signature</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="marketing-list-tab" data-bs-toggle="tab"
                    data-bs-target="#marketing-list" type="button" role="tab" aria-controls="marketing-list"
                    aria-selected="false">Marketing List</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="campaign-list-tab" data-bs-toggle="tab"
                    data-bs-target="#campaign-list" type="button" role="tab" aria-controls="campaign-list"
                    aria-selected="false">Campaign List</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="add-campaign-tab" data-bs-toggle="tab"
                    data-bs-target="#add-campaign" type="button" role="tab" aria-controls="add-campaign"
                    aria-selected="false">Add Campaign</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="marketing-analytics-tab" data-bs-toggle="tab"
                    data-bs-target="#marketing-analytics" type="button" role="tab" aria-controls="marketing-analytics"
                    aria-selected="false">Marketing Analytics</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="sms-marketing-tab" data-bs-toggle="tab"
                    data-bs-target="#sms-marketing" type="button" role="tab" aria-controls="sms-marketing"
                    aria-selected="false">SMS Marketing</button>
            </li>
        </ul>
    </div>
    <div class="tab-content min-h-100" id="myTabContent">
        <div class="tab-pane fade min-h-100 show active" id="email-onboarding" role="tabpanel"
            aria-labelledby="email-onboarding-tab">
            <div class="content-wrap">
                {{-- Email Onboarding start --}}
                    <!-- breadcrumb -->
                    <div class="breadcrumb-header justify-content-between">
                        <nav class="breadcrumb-4">
                            <ol class="breadcrumb breadcrumb-style1">
                                @if($login_user->roles[0]->name == 'Admin')

                                <li class="breadcrumb-item">

                                    <a href="{{ route('dashboard') }}">Dashboard</a>

                                </li>
                                @elseif($login_user->roles[0]->name == 'Client')

                                <li class="breadcrumb-item">
                                    <a href="{{ route('client-dashboard') }}">Dashboard</a>
                                </li>
                                @endif
                                <li class="breadcrumb-item active">Add Creadentials</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- breadcrumb -->

                    <div class="container">
                        <div class="row">
                                <div>
                                    <div class="form-check mt-2 ml-2">
                                            <input class="form-check-input" type="checkbox" id="email-onboarding-user-information">
                                            <label class="form-check-label" for="user-information">
                                                <h6>Same as user</h6>
                                            </label>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="container">
                        <div class="row p-3">
                            @if(isset($error) && !empty($error))
                            <div class="alert alert-danger email-onboarding-alert-dismissible fade show" role="alert">
                                <strong>Error!</strong> {{$error}}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            @endif


                            @if(isset($success) && $success == false)
                                <div class="alert alert-danger email-onboarding-alert-dismissible fade show" role="alert">
                                    @foreach($errors as $err)
                                        <div>{{$err}}</div>
                                    @endforeach
                                    <button type="button" class="close email-onboarding-closeAlert" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true" class="email-onboarding-closeAlert">&times;</span>
                                    </button>
                                </div>
                        @endif
                            <form method="post" action="{{route('set.credentials')}}">
                                @csrf
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="email">Email</label>
                                        <input type="email" name="email" class="form-control" id="email-onboarding-email" placeholder="Email" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="dob">DOB</label>
                                        <input type="date" name="dob" class="form-control" id="email-onboarding-dob" placeholder="date of birth" required>
                                    </div>

                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="firstname">First Name</label>
                                        <input type="text" name="firstname" class="form-control" id="email-onboarding-firstname" placeholder="first name" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="last name">Last Name</label>
                                        <input type="text" name="lastname" class="form-control" id="email-onboarding-lastname" placeholder="last name" required>
                                    </div>

                                </div>

                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label for="password">Password</label>
                                        <input type="password" name="password" class="form-control" id="email-onboarding-password" placeholder="Password"  required>
                                    </div>
                                </div>


                                <button type="submit" class="btn bg-theme-color text-light ">Save</button>
                            </form>
                        </div>
                    </div>
                {{-- Email Onboarding end --}}
            </div>
        </div>
        <div class="tab-pane fade min-h-100" id="email-signature" role="tabpanel"
            aria-labelledby="email-signature-tab">
            <div class="content-wrap">
                {{-- Email Signature start --}}
                    <!-- breadcrumb -->
                    <div class="breadcrumb-header justify-content-between">
                        <nav class="breadcrumb-4">
                            <ol class="breadcrumb breadcrumb-style1">
                                @if($login_user->roles[0]->name == 'Admin')

                                <li class="breadcrumb-item">

                                    <a href="{{ route('dashboard') }}">Dashboard</a>

                                </li>
                                @elseif($login_user->roles[0]->name == 'Client')

                                <li class="breadcrumb-item">
                                    <a href="{{ route('client-dashboard') }}">Dashboard</a>
                                </li>
                                @endif
                                <li class="breadcrumb-item active">Signature</li>
                            </ol>
                        </nav>
                    </div>

                    <div class="container">
                        <div class="row">
                            <div class="card p-5 d-flex justify-content-center">
                                <div id="emailSignature-signature" style="border:1px solid light gray;"></div>
                                <div class="d-flex justify-content-center">
                                    <input type="file" name="signatureImage" id="emailSignature-signatureImage" style="display:none">
                                </div>
                            </div>
                            <button class="btn custom-button my-2 emailSignature-signatureBtn">Add Signature</button>
                        </div>
                    </div>
                {{-- Email Signature end --}}
            </div>
        </div>
        <div class="tab-pane fade min-h-100" id="marketing-list" role="tabpanel"
            aria-labelledby="marketing-list-tab">
            <div class="content-wrap">
                {{-- Marketing List start --}}
                    <!-- breadcrumb -->
                    <div class="breadcrumb-header justify-content-between">
                        <nav class="breadcrumb-4">
                            <ol class="breadcrumb breadcrumb-style1">
                                @if($login_user->roles[0]->name == 'Admin')

                                <li class="breadcrumb-item">

                                    <a href="{{ route('dashboard') }}">Dashboard</a>

                                </li>
                                @elseif($login_user->roles[0]->name == 'Client')

                                <li class="breadcrumb-item">
                                    <a href="{{ route('client-dashboard') }}">Dashboard</a>
                                </li>
                                @endif
                                <li class="breadcrumb-item active">Marketing List</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- breadcrumb -->

                    @include('marketing.components.list-fields')

                    @include('marketing.components.list-table')
                {{-- Marketing List end --}}
            </div>
        </div>
        <div class="tab-pane fade min-h-100" id="campaign-list" role="tabpanel"
            aria-labelledby="campaign-list-tab">
            <div class="content-wrap">
            </div>
        </div>
        <div class="tab-pane fade min-h-100" id="add-campaign" role="tabpanel"
            aria-labelledby="add-campaign-tab">
            <div class="content-wrap">
                <div class="breadcrumb-header justify-content-between">
                    <nav class="breadcrumb-4">
                        <ol class="breadcrumb breadcrumb-style1">
                            @if($login_user->roles[0]->name == 'Admin')
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">Dashboard</a>
                            </li>
                            @elseif($login_user->roles[0]->name == 'Client')

                            <li class="breadcrumb-item">
                                <a href="{{ route('client-dashboard') }}">Dashboard</a>
                            </li>
                            @endif
                            <li class="breadcrumb-item active">Add Campaign</li>
                        </ol>
                    </nav>
                </div>

                @include('marketing.components.add-campaign-form')

            </div>
        </div>
        <div class="tab-pane fade min-h-100" id="marketing-analytics" role="tabpanel"
            aria-labelledby="marketing-analytics-tab">
            <div class="content-wrap">
                <div class="breadcrumb-header justify-content-between">
                    <nav class="breadcrumb-4">
                        <ol class="breadcrumb breadcrumb-style1">
                            @if($login_user->roles[0]->name == 'Admin')

                            <li class="breadcrumb-item">

                                <a href="{{ route('dashboard') }}">Dashboard</a>

                            </li>
                            @elseif($login_user->roles[0]->name == 'Client')

                            <li class="breadcrumb-item">
                                <a href="{{ route('client-dashboard') }}">Dashboard</a>
                            </li>
                            @endif
                            <li class="breadcrumb-item active">Campaign Analytics</li>
                        </ol>
                    </nav>
                </div>

                @include('marketing.components.campaign-analytics-card')
            </div>
        </div>
        <div class="tab-pane fade min-h-100" id="sms-marketing" role="tabpanel"
            aria-labelledby="sms-marketing-tab">
            <div class="content-wrap">
            </div>
        </div>
    </div>
</div>

@endsection

@section('admin_dashboard_script')

<script src="{{asset('js/signature/modernizr.js')}}"></script>
<script src="{{asset('js/signature/jSignature.min.js')}}"></script>
<script src="{{asset('js/signature/flashcanvas.min.js')}}"></script>
<script src="{{asset('js/sumoselect.min.js')}}"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="{{asset('js/jquery.richtext.min.js')}}"></script>

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

        // email onboarding data start
            document.getElementById("email-onboarding-user-information").addEventListener('change' , function(e){
                if(e.target.checked == true)
                {
                    let email = '{{$login_user->email}}';
                    let firstname = '{{$login_user->first_name}}';
                    let lastname = '{{$login_user->last_name}}';
                    let dob = '{{$login_user->dob}}'

                    document.getElementById('email-onboarding-firstname').value = firstname;
                    document.getElementById('email-onboarding-lastname').value = lastname;
                    document.getElementById('email-onboarding-email').value = email;
                    document.getElementById('email-onboarding-dob').value = dob;
                }
            })

            document.addEventListener("click" , function(e){
                if(e.target.matches(".email-onboarding-closeAlert"))
                {
                    e.target.closest(".email-onboarding-alert-dismissible").remove();
                }
            })
        // email onboarding data end

        //email signature start
            sigDiv = $("#emailSignature-signature").jSignature({ lineWidth: 1, width: '100%', height: 200 });
            document.querySelector(".emailSignature-signatureBtn").addEventListener('click' , function(e){

                // Get response of type image
                let data = sigDiv.jSignature('getData', 'image');
                let dataURL = 'data:' + data[0] + ',' + data[1];
                let formData = new FormData;
                let token = '{{csrf_token()}}';
                // let signature = document.getElementById('signatureImage').value;
                formData.append('signature',dataURL);
                formData.append('_token' , token);
                $.ajax({
                    type : 'POST',
                    url : '{{route("add.email.signature")}}',
                    datatype : 'JSON',
                    processData : false,
                    contentType: false,
                    data : formData,
                    headers: {
                        'X-CSRF-TOKEN': '{{csrf_token()}}'
                    },
                    success : function(res){
                        if(res.success == true)
                        {
                            toastr.success(res.msg);
                        }else{
                            toastr.error(res.msg);
                        }
                    }

                })

            });
        //email signature end

        //marketing list start
            document.getElementById("marketingList-add-new-user-detail").addEventListener("click" , function(e){
                document.querySelector(".marketingList-new-user-adding-area").classList.remove("d-none");
            })

            document.getElementById("marketingList-user-area-btn").addEventListener("click" , function(e){
                document.querySelector(".marketingList-new-user-adding-area").classList.add("d-none");
                resetAddNewUserForm();
            })

            function resetAddNewUserForm(){
                document.getElementById("marketingList_user_firstname").value = "";
                document.getElementById("marketingList_user_lastname").value = "";
                document.getElementById("marketingList_user_email").value = "";
            }
        //marketing list end

        //add campaign start
            var editor = $("#addCampaign-content").richText({
                // uploads
                imageUpload: false,
                fileUpload: false,
                videoEmbed: false,
            });

            document.getElementById("addCampaign-btn").addEventListener('click' , function(e){
                e.preventDefault()
                let campaignName = document.getElementById("addCampaign-name");
                let campaignDate = document.getElementById("addCampaign-date");
                let listType = document.getElementById('addCampaign-list-type');
                let content  = document.getElementById('addCampaign-content');
                let check = ["" , null , undefined]
                if(check.includes(campaignName.value))
                {
                    toastr.error("Please enter campaign name");
                    return
                }
                if(check.includes(campaignDate.value))
                {
                    toastr.error("Please enter campaign date");
                    return
                }
                if(check.includes(content.value))
                {
                    toastr.error("Please enter content");
                    return
                }

                $.ajax({
                url : '{{route("add.campaign")}}',
                method : "POST",
                datatype : "JSON",
                data : {
                    campaignName : campaignName.value,
                    campaignDate : campaignDate.value,
                    listType : listType.value,
                    content : content.value,
                    _token : "{{csrf_token()}}",
                },
                success:function(res){
                    if(res.success == true)
                    {
                        toastr.success(res.msg);
                        campaign.value = "";
                        campaignDate.value = "";
                        listType.selectedIndex = 0 ;
                    }
                    else{
                        toastr.error(res.msg);
                    }
                }
                })
            })
        //add campaign end
    });

</script>
@endsection