@extends('layouts.admin')

@section('style')
    @parent
{{--    <link rel="stylesheet" href="{{ asset('assets/bower/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css') }}">--}}
    <link rel="stylesheet" href="{{ mix('css/admin-setting-style.css') }}">
    <link rel="stylesheet" href="{{ mix('css/admin-maint-style.css') }}">
@endSection

@section('script')
    @parent
{{--    <script src="{{ asset('assets/bower/moment/min/moment.min.js') }}"></script>--}}
{{--    <script src="{{ asset('assets/bower/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js') }}"></script>--}}
    <script src="{{ mix('js/admin/admin-maint.js') }}"></script>
    <script>
        $(document).ready(()=>{
            window.sKaleHelper.RegisterDateRangePicker($('[name=start_datetime]'), 'YYYY-MM-DD HH:mm:ss',{
                singleDatePicker: true,
                timePicker: true,
            });
            window.sKaleHelper.RegisterDateRangePicker($('[name=end_datetime]'), 'YYYY-MM-DD HH:mm:ss',{
                singleDatePicker: true,
                timePicker: true,
            });
        })
    </script>
@endsection

@section('content')
    @php
        $page_title = __(isset($banner) ? 'admin_setting.titleEditBanner' : 'admin_setting.titleCreateBanner');
        $parent = 'admin.settings.banner';
    @endphp

<section class="content">
    <div class="row">
        <div class="col-12 col-lg-10 mx-auto">
            <div class="card card-info card-outline shadow">
                <form class="form-horizontal" method="POST" action="{{ route('admin.settings.save.banner', ['banner_id' => $banner->id]) }}"
                      autocomplete="off" enctype="multipart/form-data">
                    @csrf
                    <div class="card-header">
                        <h3 class="card-title">{{ __('admin_setting.labelDetails') }}</h3>
                    </div>

                    <div class="card-body">

                            <div class="form-group row {{ $errors->has('position') ? 'has-error' : '' }}">
                                <label class="col-sm-3 control-label">
                                    <span>{{ __('admin_setting.labelPosition') }}</span>
                                    <span class="required">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <select name="position" class="form-control select2">
                                        @foreach ($positions as $key => $position)
                                            <option value="{{ $key }}" {{ ($key === (old('position') ?? $banner->position)) ? 'selected' : '' }}>{{ $position }}</option>
                                        @endforeach
                                    </select>

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

                            <div class="form-group row {{ $errors->has('desktop_img') ? 'has-error' : '' }}">
                                <label class="col-sm-3 control-label">
                                    <span>{{ __('admin_setting.labelDesktopImage') }}</span>
                                    <span class="required">*</span><br/>
                                    <small class="text-muted">Recommended Size: 2500 x 1310px</small>

                                </label>

                                <div class="col-sm-9">
                                    <input type="file" class="custom-file-input" name="desktop_img" id="desktop_img" accept="image/*">
                                    <label class="custom-file-label" for="desktop_img">{{ __('admin_setting.labelFilePicker') }}</label>

                                    @if($errors->has('desktop_img'))
                                        <small class="help-block">{{ $errors->first('desktop_img') }}</small>
                                    @endif
                                </div>
                                <div class="col-sm-3"></div>
                                <div class="col-sm-9 file-viewer {{ $banner->desktop_image_url == '' ? 'd-none' : ''}}">
                                    <img src="{{ asset($banner->desktop_image_url) }}" alt="preview">
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('mobile_img') ? 'has-error' : '' }}">
                                <label class="col-sm-3 control-label">
                                    <span>{{ __('admin_setting.labelMobileImage') }}</span>
                                    <span class="required">*</span><br/>

                                    <small class="text-muted">Recommended Size: 1568 x 1776px</small>
                                </label>

                                <div class="col-sm-9">
                                    <input type="file" class="custom-file-input" name="mobile_img" id="mobile_img" accept="image/*">
                                    <label class="custom-file-label" for="mobile_img">{{ __('admin_setting.labelFilePicker') }}</label>

                                    @if($errors->has('mobile_img'))
                                        <small class="help-block">{{ $errors->first('mobile_img') }}</small>
                                    @endif
                                </div>
                                <div class="col-sm-3"></div>
                                <div class="col-sm-9 file-viewer {{ $banner->mobile_image_url == '' ? 'd-none' : ''}}">
                                    <img src="{{ asset($banner->mobile_image_url) }}" alt="preview">
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('start_datetime') ? 'has-error' : '' }}">
                                <label class="col-sm-3 control-label">
                                    <span>{{ __('admin_setting.labelStartDateTime') }}</span>
                                    <span class="required">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <div class="input-group input-group">
                                        <div class="input-group-prepend"><div class="input-group-text"><i class="fas fa-calendar"></i></div></div>
                                        <input type="text" class="form-control datetimepicker" name="start_datetime" required
                                               value="{{ (old('start_datetime') ?? $banner->start_datetime) ?? $now }}">
                                    </div>
                                    @if($errors->has('start_datetime'))
                                        <small class="help-block">{{ $errors->first('start_datetime') }}</small>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('end_datetime') ? 'has-error' : '' }}">
                                <label class="col-sm-3 control-label">
                                    <span>{{ __('admin_setting.labelEndDateTime') }}</span>
                                    <span class="required">*</span>
                                </label>
                                <div class="col-sm-9">

                                    <div class="input-group input-group">
                                        <div class="input-group-prepend"><div class="input-group-text"><i class="fas fa-calendar"></i></div></div>
                                        <input type="text" class="form-control datetimepicker" name="end_datetime" required
                                            value="{{ (old('end_datetime') ?? $banner->end_datetime) ?? $now }}">
                                    </div>
                                    @if($errors->has('end_datetime'))
                                        <small class="help-block">{{ $errors->first('end_datetime') }}</small>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row {{ $errors->has('name') ? 'has-error' : '' }}">
                                <label class="col-sm-3 control-label">
                                    <span>{{ __('admin_setting.labelUrl') }}</span>
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="action_link" value="{{ old('action_link') ?? $banner->action_link }}">
                                    @if($errors->has('name'))
                                        <small class="help-block">{{ $errors->first('action_link') }}</small>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('name') ? 'has-error' : '' }}">
                                <label class="col-sm-3 control-label">
                                    <span>{{ __('admin_setting.labelName') }}</span><br/>
                                    <small class="text-muted">For internal reference only</small>
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="name" value="{{ old('name') ?? $banner->name }}">
                                    @if($errors->has('name'))
                                        <small class="help-block">{{ $errors->first('name') }}</small>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('description') ? 'has-error' : '' }}">
                                <label class="col-sm-3 control-label">
                                    <span>{{ __('admin_setting.labelDescription') }}</span><br/>
                                    <small class="text-muted">For internal reference only</small>
                                </label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="description" value="{{ old('description') ?? $banner->description }}">
                                    @if($errors->has('description'))
                                        <small class="help-block">{{ $errors->first('description') }}</small>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row {{ $errors->has('status') ? 'has-error' : '' }}">
                                <label class="col-sm-3 control-label">
                                    <span>{{ __('admin_setting.labelStatus') }}</span>
                                    <span class="required">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <select name="status" class="form-control select2">
                                        @foreach ($statuses as $status)
                                            <option value="{{ $status }}" {{ ($status === (old('status') ?? $banner['status']))  ? 'selected' : '' }}>
                                                {{ $status }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @if($errors->has('status'))
                                        <small class="help-block">{{ $errors->first('status') }}</small>
                                    @endif
                                </div>
                            </div>


                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-info float-right">
                            {{ __(isset($banner) ? 'admin_setting.btnSave' : 'admin_setting.btnSubmit') }}
                        </button>

                        @if(isset($banner))
                            <button type="button" data-route="{{ route('admin.settings.delete.banner', ['banner_id' => $banner->id]) }}" class="btn btn-danger float-right btn-delete mr-2">
                                <i class="fas fa-trash" aria-hidden="true"></i>&nbsp;
                                {{ __('admin_setting.btnDelete') }}
                            </button>
                        @endif
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

@component('components.utility.modal_confirmation_delete')
@endcomponent

@endsection