@extends('layouts.admin')


@section('style')

     <!-- daterange picker -->
{{--     <link rel="stylesheet" href="{{ asset('assets/bower/bootstrap-daterangepicker/daterangepicker.css') }}">--}}
{{--     <!-- bootstrap datepicker -->--}}
{{--     <link rel="stylesheet" href="{{ asset('assets/bower/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') }}">--}}
{{--    <!-- bootstrap datetime picker-->--}}
{{--    <link rel="stylesheet" href="{{ asset('assets/bower/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css') }}">--}}
{{--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css">--}}
{{--    <link rel="stylesheet" href="{{ asset('assets/bower/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css') }}">--}}
    <link rel="stylesheet" href="{{ mix('css/admin-maint-style.css') }}">
@endSection

@section('script')
    <!-- date-range-picker -->
    <script src="{{ asset('assets/bower/moment/min/moment.min.js') }}"></script>
{{--     <script src="{{ asset('assets/bower/bootstrap-daterangepicker/daterangepicker.js') }}"></script>--}}
{{--    <!-- bootstrap datetime picker-->--}}
{{--    <script src="{{ asset('assets/bower/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js') }}"></script>--}}
{{--    --}}{{-- <!-- bootstrap datepicker --> --}}
{{--     <script src="{{ asset('assets/bower/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>--}}
{{--    <script src="{{ asset('assets/bower/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.min.js') }}"></script>--}}
{{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>--}}
{{--    <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>--}}
    <script src="{{ asset('assets/bower/ckeditor/ckeditor.js') }}"></script>
    <script src="{{ mix('js/admin/admin-maint.js') }}"></script>
    <script>
        $(function(){
            const el_promo_icon = $('input[name=promo_icon]');
            const is_edit_img = {{ ($campaign['promo_icon'] ?? '') !== '' ? 1 : 0 }};

            $('select[name=campaign_type]').on('change', function() {
                if (el_promo_icon.val() != '' || is_edit_img) {
                    is_edit_img = false;
                    return;
                }
                const el_opt = $(this).find('option:selected');
                const img_src = el_opt.attr('data-img');
                const viewer = el_promo_icon.parent().parent().children('.file-viewer');
                if (!img_src) {
                    viewer.addClass('d-none');
                    return;
                }
                viewer.removeClass('d-none')
                    .find('img')
                    .attr('src', img_src);
            }).trigger('change');

            // temp fix tooltip
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
@endSection

@section('content')

    <!-- Content Header (Page header) -->
    @php
        $page_title = isset($campaign) ?  __('heading.title_edit_campaign').' <small>'.$campaign['name'].'</small>':__('heading.title_create_campaign');
    @endphp

    <!-- Main content -->
    <section class="content">
        <div class="row">

            <div class="col-md-12">
                <form class="form-horizontal" action="{{ $post_url }}" method="POST" enctype="multipart/form-data" autocomplete="off">
                    @csrf
                    <div class="card card-primary card-outline shadow">

                        <div class="card-header">
                            <h3 class="card-title">Details</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">

                            @if ($errors->has('data-error'))
                                <div class="form-group row has-error">
                                    <label class="col-sm-2 control-label"></label>
                                    <div class="col-sm-10">
                                        <span class="help-block">{{ $errors->first('data-error') }}</span>
                                    </div>
                                </div>
                            @endif

                            <!-- text input -->
                            <div class="form-group row {{ $errors->has('name') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">
                                    <i class="fas fa-question-circle" aria-hidden="true" data-toggle="tooltip" title="Campaign Name for internal understandability"></i>
                                    <span>Name</span>
                                    <span class="required">*</span>
                                </label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="Flash Promo SG"
                                           name="name" value="{{ $campaign['name'] ?? old('name') }}">

                                    @if ($errors->has('name'))
                                        <small class="help-block">{{ $errors->first('name') }}</small>
                                    @endif
                                </div>
                            </div>

                            {{--
                            <div class="form-group row {{ $errors->has('slug') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">Slug <span class="required">*</span></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="flash-promo-sg"
                                           name="slug" value="{{ $campaign['slug'] ?? old('slug') }}">

                                    @if ($errors->has('slug'))
                                        <small class="help-block">{{ $errors->first('slug') }}</small>
                                    @endif
                                </div>
                            </div>
                            --}}

                            <div class="form-group row {{ $errors->has('campaign_type') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">Type <span class="required">*</span></label>
                                <div class="col-sm-10">
                                    <select class="form-control" name="campaign_type">
                                        @foreach($campaign_types as $type => $img)
                                            <option value="{{ $type }}"
                                                data-img='{{ asset($img) }}'
                                                {{ $type === ($campaign['campaign_type'] ?? $old['campaign_type']) ? 'selected' : '' }}
                                            >{{ $type }}</option>
                                        @endforeach
                                    </select>

                                    @if ($errors->has('campaign_type'))
                                        <small class="help-block">{{ $errors->first('campaign_type') }}</small>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('campaign_start_date') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">
                                    <i class="fas fa-question-circle" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="When the campaign start. Please ensure only one campaign within the timeframe. If there are two or more campaign fall within the period, either one will be selected"></i>
                                    <span>Start Date</span>
                                    <span class="required">*</span></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control datetimepicker" placeholder="2021-12-31 00:00:00"
                                           name="campaign_start_date" value="{{ ($campaign['campaign_start_date'] ?? old('campaign_start_date')) ?? $campaign_date['start'] }}">

                                    @if ($errors->has('campaign_start_date'))
                                        <small class="help-block">{{ $errors->first('campaign_start_date') }}</small>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('campaign_end_date') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">
                                    <i class="fas fa-question-circle" aria-hidden="true" data-toggle="tooltip" title="When the campaign ended. Please ensure only one campaign within the timeframe. If there are two or more campaign fall within the period, either one will be selected"></i>
                                    <span>End Date</span>
                                    <span class="required">*</span></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control datetimepicker" placeholder="2021-12-31 23:59:59"
                                           name="campaign_end_date" value="{{ ($campaign['campaign_end_date'] ?? old('campaign_end_date')) ?? $campaign_date['end'] }}">

                                    @if ($errors->has('campaign_end_date'))
                                        <small class="help-block">{{ $errors->first('campaign_end_date') }}</small>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('registration_start_date') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">
                                    <i class="fas fa-question-circle" aria-hidden="true" data-toggle="tooltip" title="When the campaign open for registration. After the registration period, no further vouchers are allowed to register"></i>
                                    <span>Registration Start Date</span>
                                    <span class="required">*</span></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control datetimepicker" placeholder="2021-12-31 00:00:00"
                                           name="registration_start_date" value="{{ ($campaign['registration_start_date'] ?? old('registration_start_date')) ?? $registration_date['start'] }}">

                                    @if ($errors->has('registration_start_date'))
                                        <small class="help-block">{{ $errors->first('registration_start_date') }}</small>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('registration_end_date') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">
                                    <i class="fas fa-question-circle" aria-hidden="true" data-toggle="tooltip" title="When the campaign ended for registration. After the registration period, no further vouchers are allowed to register"></i>
                                    <span>Registration End Date</span>
                                    <span class="required">*</span></label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control datetimepicker" placeholder="2021-12-31 23:59:59"
                                           name="registration_end_date" value="{{ ($campaign['registration_end_date'] ?? old('registration_end_date')) ?? $registration_date['end'] }}">

                                    @if ($errors->has('registration_end_date'))
                                        <small class="help-block">{{ $errors->first('registration_end_date') }}</small>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('promo_icon') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">Promo Icon <span class="required">*</span></label>
                                <div class="col-sm-10">
                                    <input type="file" class="custom-file-input" name="promo_icon"
                                        id="promo_icon" accept="image/*">
                                    <label class="custom-file-label" for="promo_icon">Choose File</label>

                                    @if ($errors->has('promo_icon'))
                                        <small class="help-block">{{ $errors->first('promo_icon') }}</small>
                                    @endif
                                </div>
                                <div class="col-sm-2"></div>
                                <div class="col-sm-10 file-viewer {{ $campaign['promo_icon'] == '' ? 'd-none' : ''}}">
                                    <img src="{{ asset($campaign['promo_icon']) }}" alt="preview">
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('tnc') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">Term and conditions</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control txt-editor" rows="5" name="tnc"
                                        data-input="tnc-content">{!! htmlentities($campaign['tnc'] ?? old('tnc')) !!}</textarea>

                                    @if ($errors->has('tnc'))
                                        <small class="help-block">{{ $errors->first('tnc') }}</small>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('campaign_banner') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">Banner</label>
                                <div class="col-sm-10">
                                    <input type="file" class="custom-file-input" name="campaign_banner"
                                        id="campaign_banner" accept="image/*">
                                    <label class="custom-file-label" for="campaign_banner">Choose File</label>

                                    @if ($errors->has('campaign_banner'))
                                        <small class="help-block">{{ $errors->first('campaign_banner') }}</small>
                                    @endif
                                </div>

                                <div class="col-sm-2"></div>
                                <div class="col-sm-10 file-viewer {{ $campaign['campaign_banner'] == '' ? 'd-none' : ''}}">
                                    <img src="{{ $campaign['campaign_banner'] }}" alt="preview">
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('status') ? 'has-error' : '' }} ">
                                <label class="col-sm-2 control-label">Status <span class="required">*</span></label>
                                <div class="col-sm-10">
                                    <select class="form-control" name="status">
                                        @foreach($statuses as $status)
                                            <option value="{{ $status }}"
                                                {{ $status === ($campaign['status'] ?? $old['status']) ? 'selected' : '' }}
                                            >{{ $status }}</option>
                                        @endforeach
                                    </select>

                                    @if ($errors->has('status'))
                                        <small class="help-block">{{ $errors->first('status') }}</small>
                                    @endif
                                </div>
                            </div>

                        </div>
                        <!-- /.card-body -->


                        <div class="card-footer">
                            @if(isset($campaign))
                                <button type="submit" class="btn btn-info float-right">Save</button>
                                {{-- note: do not simply change the name of button, it will post the data for reference--}}
                            @else
                                <button type="submit" class="btn btn-info float-right">Submit</button>
                            @endif
                        </div>
                    </div>

                </form>
            </div>

        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->

@endsection