@extends('admin.layouts.main')

@section('title')
@if($campaign)
Edit Campaigns - Configuration
@else
Edit Campaigns - Configuration
@endif
@endsection

@section('content')

<main>
    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec">

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">
                        @if($campaign)
                        Edit Campaign
                        @else
                        Add Campaign
                        @endif
                    </a></li>
                    <li class="breadcrumb-item active" aria-current="page">Configure</li>
                </ol>
            </nav>

            <div class="top-bar d-flex align-items-center mb-20">
                <h2><p class="extrasmall-font m-0 orange">Step 1 of 3</p>@if($campaign)
                    Edit Campaign
                    @else
                    Create Campaign
                    @endif</h2>
            </div>

            <div class="form-sec">

                <div class="container">
                    <div class="row">
                        <div class="col-lg-6">

                            <div class="step-box border shadow-none">

                                <form
                                    action="{{ route('admin.campaigns.storeStep1',['panel' => Session::get('panel')]) }}"
                                    id="frmStep1" method="post">
                                    @csrf

                                    @if($campaign)
                                    <input type="hidden" id="id" name="id" value="{{ $campaign->id }}" />
                                    @endif

                                    <div class="tab">
                                        <div class="row">
                                            <div class="col-md-12">

                                                <div class="form-group">
                                                    <label class="control-label">Delivery Mode</label>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input"
                                                            id="delivery_mode_email" name="delivery_mode" value="email"
                                                            @if(($campaign && $campaign->delivery_mode == 'email') ||
                                                        !$campaign)
                                                        checked="checked" @endif />
                                                        <label class="custom-control-label"
                                                            for="delivery_mode_email">Email</label>
                                                    </div>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input"
                                                            id="delivery_mode_push_notification" name="delivery_mode"
                                                            value="push_notification" disabled="disabled" />
                                                        <label class="custom-control-label"
                                                            for="delivery_mode_push_notification">Push
                                                            Notification</label>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="control-label">Name</label>
                                                    <input type="text" class="form-control" id="name" name="name"
                                                        placeholder="Campaign Name"
                                                        value="@if($campaign){{ $campaign->name }}@endif" />
                                                </div>

                                                <div class="form-group">
                                                    <label class="control-label">Description</label>
                                                    <textarea class="form-control" placeholder="Campaign Description"
                                                        id="description"
                                                        name="description">@if($campaign){{ $campaign->description }}@endif</textarea>
                                                </div>

                                                {{--
                                                <div class="form-group btm-arrow select select2-container">
                                                    <label class="control-label" for="franchises">Recipients
                                                        Franchise</label>
                                                    <select class="form-control select-two" id="franchises"
                                                        name="franchises[]" multiple>
                                                        <option value="" hidden="">Select</option>
                                                        @foreach($franchises as $franchise)
                                                        <option value="{{ $franchise->id }}">{{ $franchise->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                --}}
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label" for="recepient_type">Recipients</label>
                                                    <select class="form-control" id="recepient_type"
                                                        name="recepient_type">
                                                        <option value="" hidden="">Select</option>
                                                        <option value="candidate" @if($campaign && $campaign->
                                                            recepient_type == 'candidate') selected="selected"
                                                            @endif>Candidate</option>
                                                        <option value="consultant" @if($campaign && $campaign->
                                                            recepient_type == 'consultant') selected="selected"
                                                            @endif>Consultant</option>
                                                        <option value="mover" @if($campaign && $campaign->recepient_type
                                                            == 'mover') selected="selected" @endif>Mover</option>
                                                        <option value="mplus" @if($campaign && $campaign->recepient_type
                                                            == 'mplus') selected="selected" @endif>M+</option>
                                                        <option value="supplier" @if($campaign && $campaign->
                                                            recepient_type == 'supplier') selected="selected"
                                                            @endif>Supplier</option>
                                                        <option value="mfr_client" @if($campaign && $campaign->
                                                            recepient_type == 'mfr_client') selected="selected"
                                                            @endif>MFR Client</option>
                                                        <option value="mfmp_client" @if($campaign && $campaign->
                                                            recepient_type == 'mfmp_client') selected="selected"
                                                            @endif>MFMP Client</option>
                                                        <option value="referee" @if($campaign && $campaign->
                                                            recepient_type == 'referee') selected="selected"
                                                            @endif>Referee</option>
                                                        <option value="custom" @if($campaign && $campaign->
                                                            recepient_type == 'custom') selected="selected"
                                                            @endif>Custom</option>
                                                        <option value="all" @if($campaign && $campaign->
                                                            recepient_type == 'all') selected="selected"
                                                            @endif>All</option>
                                                        </select>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">Type</label>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input type" id="type_once"
                                                            name="type" value="once" @if(($campaign && $campaign->type ==
                                                        'once') || !$campaign) checked="checked" @endif>
                                                        <label class="custom-control-label" for="type_once">Once</label>
                                                    </div>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input type"
                                                            id="type_repeat" name="type" value="repeat" @if($campaign &&
                                                            $campaign->type == 'repeat') checked="checked" @endif>
                                                        <label class="custom-control-label"
                                                            for="type_repeat">Repeat</label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group date">
                                                    <label class="control-label lblCampaignStartDate">Start Date</label>
                                                    <div class="input-group date">
                                                        <input type="text" class="form-control bg-white"
                                                            placeholder="Select Date" id="start_date" name="start_date"
                                                            readonly
                                                            value="@if($campaign){{ $campaign->start_date_formatted }}@endif">
                                                        <div class="input-group-addon">
                                                            <span class="material-icons">date_range</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6 blockForRepeat">
                                                <div class="form-group date">
                                                    <label class="control-label">End Date</label>
                                                    <div class="input-group date">
                                                        <input type="text" class="form-control bg-white"
                                                            placeholder="Select Date" id="end_date" name="end_date"
                                                            readonly
                                                            value="@if($campaign && $campaign->end_date){{ $campaign->end_date_formatted }}@endif">
                                                        <div class="input-group-addon">
                                                            <span class="material-icons">date_range</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group time">
                                                    <label class="control-label">Time</label>
                                                    <div class="input-group time">
                                                        <input placeholder="Selected time" type="text" id="execute_at"
                                                            name="execute_at" class="form-control"
                                                            value="@if($campaign){{ $campaign->execute_at }}@endif">
                                                        <div class="input-group-addon">
                                                            <span class="material-icons">{{ @trans('job.access_time')
                                                                }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6 blockForRepeat">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label" for="frequency">Frequency</label>
                                                    <select class="form-control" id="frequency" name="frequency">
                                                        <option value="" hidden="">Select</option>
                                                        <option value="daily" @if($campaign && $campaign->frequency ==
                                                            'daily') selected="selectd" @endif>Daily</option>
                                                        <option value="weekly" @if($campaign && $campaign->frequency ==
                                                            'weekly') selected="selectd" @endif>Weekly</option>
                                                        <option value="monthly" @if($campaign && $campaign->frequency ==
                                                            'monthly') selected="selectd" @endif>Monthly</option>
                                                    </select>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="tab-btn">
                                        <a href="{{ route('admin.campaigns.index',['panel' => Session::get('panel') ]) }}"
                                            class="btn btn-cncl mr-2 float-left">Cancel</a>
                                        <input type="submit" class="btn btn-em submit float-right" value="Next" />

                                    </div>

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

    </div>
</main>
@endsection


@push('pageModals')
<div class="modal" tabindex="-1" role="dialog" id="modalConfirm">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                 <p>
                    Warning: This action will remove your current recipient filters and selected recipients. Are you sure you want to change the Recipients?
                </p>
            </div>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-cncl modalConfirmNo">No</button>
                <button type="button" class="btn btn-em" data-dismiss="modal">Yes</button>
            </div>
        </div>
    </div>
</div>
@endpush

@push('pageJs')

<script type="text/javascript">
    $(document).ready(function() {

        @if($campaign)
        var recipeient_type = '{{ $campaign->recepient_type}}';
        $('#recepient_type').change(function() {
            if($('#recepient_type').val() != recipeient_type) {
                $('#modalConfirm').modal('show');
            }
        });
        @endif

        $('.modalConfirmNo').click(function() {
            $('#recepient_type').val(recipeient_type);
            $('#modalConfirm').modal('hide');
        });

        $('#frmStep1').submit(function() {
            if ($('#frmStep1').valid()) {
                $('.submit').val('Please Wait...');
                $('.submit').attr('disabled', true);
            }
        });

        if($('.type:checked').val() == 'once') {
            $('.lblCampaignStartDate').text('Date');
            $('.blockForRepeat').hide();
        }
        $('.type').click(function() {
            if($('.type:checked').val() == 'once') {
               $('.lblCampaignStartDate').text('Date');
               $('.blockForRepeat').hide();
            } else {
                $('.lblCampaignStartDate').text('Start Date');
                $('.blockForRepeat').show();
            }
        });

        $('#execute_at').timepicker({
            'timeFormat': 'H:i:s',
            'scrollDefault': 'now',
            'disableTextInput' : true
        });

        jQuery.validator.addMethod("dateGreaterThan",
        function (endDateVal, element, startDateEl) {

            if($('.type:checked').val() == 'once')
                return true;

            endDateParts = endDateVal.split('/');
            endDateObj = new Date(endDateParts[2], endDateParts[1], endDateParts[0]);
            startDateParts = $(startDateEl).val().split('/');
            startDateObj = new Date(startDateParts[2], startDateParts[1], startDateParts[0]);

            return startDateObj < endDateObj


        }, 'Must be greater than Start Date.');

        $('#frmStep1').validate({
            rules: {
                delivery_mode: 'required',
                name: 'required',
                description: 'required',
                'franchises[]': 'required',
                recepient_type: 'required',
                start_date: 'required',
                end_date: { dateGreaterThan: "#start_date" },
                execute_at: 'required',
                type: 'required',
                frequency: {
                    required : {
                        depends: function(element) {
                            return ($(".type:checked").val() == 'repeat');
                        }
                    }
                }
            },
            messages: {
                delivery_mode: 'Delivery mode is required',
                name: 'Name is required',
                description: 'Description is required',
                'franchises[]': 'Franchise is required',
                recepient_type: 'Recipient type is required',
                start_date: 'Start date is required',
                execute_at: 'Execution time is required',
                type: 'Type is required',
                frequency: 'Frequency is required'
            },
            ignore: [],
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            errorPlacement: function(error, element) {
                if (element.hasClass('custom-file-input')) {
                    error.insertAfter(element.parents('.media')[0]);
                } else if (element.hasClass('custom-control-input')) {
                    error.insertAfter(element.parents('.form-group')[0]);
                } else if (element.hasClass('select-two')) {
                    error.insertAfter(element.next('.select2-container'));
                } else {
                    error.insertAfter(element);
                }
            },

            invalidHandler: function(event, validator) {
                var offset = $(validator.errorList[0].element).offset().top;
                $('html, body').animate({
                    scrollTop: offset - 100
                }, 100);
            }
        })

        $('#franchises').select2({
            placeholder: 'Select an option',
        });
        $('#franchises').change(function() {
            $(this).valid();
        })
        @if($campaign)
        $('#franchises').val({{ $campaign->franchises-> pluck('id') }}).trigger('change');
        @endif


        var today = new Date();
        $('#start_date').datepicker({
            autoHide: true,
            format: 'dd/mm/yyyy',
            zIndex: 2048,
            startDate: today.getDate() + '/' + (today.getMonth() + 1) + '/' + today.getFullYear(),
        });
        $('#start_date').change(function() {
            $(this).valid();
        })

        $('#end_date').datepicker({
            autoHide: true,
            format: 'dd/mm/yyyy',
            zIndex: 2048,
            startDate: (today.getDate()+1) + '/' + (today.getMonth() + 1) + '/' + today.getFullYear(),
        });
        // $('#end_date').change(function() {
        //     $(this).valid();
        // })

    });
</script>

@endpush