@extends("admin.template.layout")
@section('header')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>
    <style>
        .weekDays-selector input {
            display: none !important;
        }

        .weekDays-selector input[type=checkbox] + label {
            display: inline-block;
            border-radius: 6px;
            background: #dddddd;
            height: 40px;
            width: 110px;
            margin-right: 6px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }

        .weekDays-selector input[type=checkbox]:checked + label {
            background: linear-gradient(180deg, #F90000 0%, rgba(153, 2, 83, 0.77) 100%);
            color: #fff;
        }

        .weekDays-selector input[type=radio] + label {
            display: inline-block;
            border-radius: 6px;
            background: #dddddd;
            height: 40px;
            width: 110px;
            margin-right: 6px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }

        .weekDays-selector input[type=radio]:checked + label {
            background: linear-gradient(180deg, #F90000 0%, rgba(153, 2, 83, 0.77) 100%);
            color: #fff;
        }

        .ads-selector input {
            display: none !important;
        }

        .ads-selector input[type=checkbox] + label {
            display: inline-block;
            border-radius: 6px;
            background: #dddddd;
            padding: 5px;
            margin-right: 6px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }

        .ads-selector input[type=checkbox]:checked + label {
            background: linear-gradient(180deg, #F90000 0%, rgba(153, 2, 83, 0.77) 100%);
            color: #fff;
        }
    </style>
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{ $page_heading }}</h5>
            </div>
            <form id="admin_form" method="post" action="{{route('ads.campaign.store')}}"
                  enctype="multipart/form-data">
                <div class="card-body">
                    @csrf
                    @if(isset($id))
                        <input type="hidden" name="id" value="{{$id}}">
                    @endif
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-6 mb-2">
                                    <div class="form-group">
                                        <label for="link">Name</label>
                                        <input type="text" class="form-control" id="name"
                                               name="name"
                                               value="{{ $campaign ? $campaign->name : old('name') }}">
                                    </div>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <div class="form-group">
                                        <label for="link">Impressions Limit</label>
                                        <input type="number" class="form-control" id="impressions"
                                               name="impressions"
                                               value="{{ $campaign ? $campaign->impressions : old('impressions') }}">
                                    </div>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <div class="form-group">
                                        <label for="expiry_date">From Date</label>
                                        <input type="date" class="form-control" id="from_date" name="start_date"
                                               value="{{ $campaign ? $campaign->start_date : old('start_date') }}">
                                    </div>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <div class="form-group">
                                        <label for="expiry_date">To Date</label>
                                        <input type="date" class="form-control" id="to_date" name="end_date"
                                               value="{{ $campaign ? $campaign->end_date : old('end_date') }}">
                                    </div>
                                </div>

                                <div class="col-md-3 mb-2">
                                    <div class="form-group">
                                        <label for="expiry_date">Start Time</label>
                                        <input type="time" class="form-control" id="from_date" name="start_time"
                                               value="{{ $campaign ? $campaign->start_time : old('start_time') }}">
                                    </div>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <div class="form-group">
                                        <label for="expiry_date">End Time</label>
                                        <input type="time" class="form-control" id="to_date" name="end_time"
                                               value="{{ $campaign ? $campaign->end_time : old('end_time') }}">
                                    </div>
                                </div>

                                <div class="col-md-8 mb-2">
                                    <div class="form-group">
                                        <label for="expiry_date">Week Days</label>
                                        <div class="row pl-3">
                                            @foreach(\App\Models\Campaign::WEEK_DAYS as $key => $day)
                                                <div class="weekDays-selector">
                                                    <input type="checkbox" id="weekday-{{$key}}" name="days[]"
                                                           @if($campaign && in_array($key, json_decode($campaign->days) ?? [])) checked
                                                           @endif
                                                           class="weekday" value="{{$key}}"/>
                                                    <label for="weekday-{{$key}}">{{$day}}</label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label for="expiry_date">Priority</label>
                                    <div class="row pl-3">
                                        @foreach(\App\Models\Campaign::PRIORITIES as $key => $priority)
                                            <div class="weekDays-selector">
                                                <input type="radio" id="priority-{{$key}}" name="priority"
                                                       class="weekday" @if($key == $campaign->priority) checked
                                                       @endif value="{{$key}}"/>
                                                <label for="priority-{{$key}}">{{$priority}}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="row">

                                <div class="col-md-12 mb-2">
                                    <label for="venues_list" class="form-label">Select Venue</label>
                                    <select class="form-control jqv-input select2" multiple id="venues_list"
                                            name="venue_ids[]">

                                        @foreach($venues as $venue)
                                            <option
                                                @if(in_array($venue->id, json_decode($campaign->venue_ids ?? '[]')))
                                                    selected
                                                @endif
                                                value="{{$venue->id}}">{{$venue->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="venues_list" class="form-label">Select Communities</label>
                                    <select class="form-control jqv-input select2" multiple id="community_list"
                                            name="community_ids[]">

                                        @foreach($communities as $community)
                                            <option
                                                @if($campaign && !is_null(json_decode($campaign->community_ids)))
                                                    @if(in_array($community->id, json_decode($campaign->community_ids ?? '[]')))
                                                        selected
                                                @endif
                                                @endif
                                                value="{{$community->id}}">{{$community->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-12">
                                    <h5 class="h5 text-muted mt-2 bg-light p-2 border-light rounded pl-3">Ads</h5>
                                </div>
                                <div class="col-12">
                                    <label for="face_ads">Face Ads</label>
                                    <div class="row pl-3">
                                        @foreach($face_ads as $ad)
                                                <div class="ads-selector">
                                                    <input type="checkbox" id="ads-{{$ad->id}}" name="face_ads[]"
                                                           @if(in_array($ad->id, $campaign->faceAds->pluck('id')->toArray() ?? []))
                                                               checked
                                                           @endif
                                                           class="weekday" value="{{$ad->id}}"/>
                                                    <label for="ads-{{$ad->id}}"><img src="{{$ad->image}}"
                                                                                      height="120px">
                                                    </label>
                                                </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <label for="face_ads">Promotional Ads</label>
                                    <div class="row pl-3">
                                        @foreach($promotional_ads as $ad)
                                            <div class="ads-selector">
                                                <input type="checkbox" id="ads-promo-{{$ad->id}}"
                                                       name="promotional_ads[]"
                                                       @if(in_array($ad->id, $campaign->promotionalAds->pluck('id')->toArray() ?? []))
                                                           checked
                                                       @endif
                                                       class="weekday" value="{{$ad->id}}"/>
                                                <label for="ads-promo-{{$ad->id}}"><img
                                                        src="{{\App\CentralLogic\Helpers::getImage('ads',$ad->image)}}"
                                                        height="80px">
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <label for="face_ads">Social Ads</label>
                                    <div class="row pl-3">
                                        @foreach($social_ads as $ad)
                                            <div class="ads-selector">
                                                <input type="checkbox" id="ads-social-{{$ad->id}}" name="social_ads[]"
                                                       @if(in_array($ad->id, $campaign->socialAds->pluck('id')->toArray() ?? []))
                                                           checked
                                                       @endif
                                                       class="weekday" value="{{$ad->id}}"/>
                                                <label for="ads-social-{{$ad->id}}"><img
                                                        src="{{\App\CentralLogic\Helpers::getImage('ads',$ad->image)}}"
                                                        height="80px">
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <div class="row border border-default mt-3 d-none">
                                <div class="col-12">
                                    <h5 class="h5 mb-2">Settings</h5>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="social_ad_frequency">Social Ad Frequency <br>
                                            <small>Frequency to show social ads in feed.</small></label>
                                        <input type="number" class="form-control" id="social_ad_frequency"
                                               name="social_ad_frequency"
                                               value="{{ $campaign ? $campaign->social_ad_frequency : old('social_ad_frequency') }}">
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="promotional_ad_frequency">Promotional Ads Count.
                                            <br><small>Number of promotional ads to show on feeds top.</small></label>
                                        <input type="number" class="form-control" id="promotional_ad_frequency"
                                               name="promotional_ad_frequency"
                                               value="{{ $campaign ? $campaign->promotional_ad_frequency : old('promotional_ad_frequency') }}">
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="face_ad_frequency">Face Ad Frequency <br>
                                            <small>Frequency to show face ad.</small></label>
                                        <input type="number" class="form-control" id="face_ad_frequency"
                                               name="face_ad_frequency"
                                               value="{{ $campaign ? $campaign->face_ad_frequency : old('face_ad_frequency') }}">
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="display_duration">Match Ad Display Duration <br><small>
                                                Time duration is seconds to show Match ad.
                                            </small></label>
                                        <input type="number" class="form-control" id="display_duration"
                                               name="display_duration"
                                               value="{{ $campaign ? $campaign->display_duration : old('display_duration') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-right">
                    <button type="submit" class="main-btn primary-btn btn-hover">Submit</button>
                </div>
            </form>
        </div>

        @stop

        @section('script')
            <script>
                $(document).ready(function () {
                    $('.select2').select2();
                    $('#venues_list').select2();
                    $('#community_list').select2();


                    $('#face_ads').select2();
                    $('#feed_ads').select2();
                    $('#promotional_ads').select2();


                    //disable previous dates in to_date
                    $('#start_date').on('change', function () {
                        $('#end_date').attr('min', $(this).val());
                    });
                    //disable previous dates in from_date
                    $('#start_date').attr('min', new Date().toISOString().split('T')[0]);

                    $('#days').datepicker({
                        daysOfWeekDisabled: [0, 6]
                    });
                });

                App.initFormView();
                let form_in_progress = 0;
                $('body').off('submit', '#admin_form');
                $('body').on('submit', '#admin_form', function (e) {
                    e.preventDefault();
                    var validation = $.Deferred();
                    var $form = $(this);
                    var formData = new FormData(this);

                    $form.validate({
                        rules: {},
                        errorElement: 'div',
                        errorPlacement: function (error, element) {
                            element.addClass('is-invalid');
                            error.addClass('error');
                            error.insertAfter(element);
                        }
                    });

                    // Bind extra rules. This must be called after .validate()
                    App.setJQueryValidationRules('#admin_form');

                    if ($form.valid()) {
                        validation.resolve();
                    } else {
                        var error = $form.find('.is-invalid').eq(0);
                        $('html, body').animate({
                            scrollTop: (error.offset().top - 100),
                        }, 500);
                        validation.reject();
                    }

                    validation.done(function () {
                        $form.find('.is-invalid').removeClass('is-invalid');
                        $form.find('div.error').remove();


                        App.button_loading(true);
                        //disable submit button
                        $form.find('button[type="submit"]').attr('disabled', true);

                        form_in_progress = 1;
                        $.ajax({
                            type: "POST",
                            enctype: 'multipart/form-data',
                            url: $form.attr('action'),
                            data: formData,
                            processData: false,
                            contentType: false,
                            cache: false,
                            timeout: 600000,
                            dataType: 'html',
                            success: function (res) {
                                res = JSON.parse(res);
                                console.log(res['status']);
                                form_in_progress = 0;
                                App.button_loading(false);
                                if (res['status'] == 0) {
                                    if (typeof res['errors'] !== 'undefined') {
                                        var error_def = $.Deferred();
                                        var error_index = 0;
                                        jQuery.each(res['errors'], function (e_field, e_message) {
                                            if (e_message != '') {
                                                $('[name="' + e_field + '"]').eq(0).addClass('is-invalid');
                                                $('<div class="error">' + e_message + '</div>').insertAfter($('[name="' + e_field + '"]').eq(0));
                                                if (error_index == 0) {
                                                    error_def.resolve();
                                                }
                                                error_index++;
                                            }
                                        });
                                        error_def.done(function () {
                                            var error = $form.find('.is-invalid').eq(0);
                                            $('html, body').animate({
                                                scrollTop: (error.offset().top - 100),
                                            }, 500);
                                        });
                                    } else {
                                        var m = res['message'] || 'Unable to save variation. Please try again later.';
                                        App.alert(m, 'Oops!', 'error');
                                    }
                                } else {
                                    App.alert(res['message'] || 'Record saved successfully', 'Success!', 'success');
                                    setTimeout(function () {
                                        window.location.href = res['oData']['redirect'];
                                    }, 2500);

                                }
                                //enable submit button
                                $form.find('button[type="submit"]').attr('disabled', false);
                            },
                            error: function (e) {
                                form_in_progress = 0;
                                App.button_loading(false);
                                console.log(e);
                                App.alert("Network error please try again", 'Oops!', 'error');
                                //enable submit button
                                $form.find('button[type="submit"]').attr('disabled', false);
                            }
                        });
                    });
                });
            </script>
@stop