@extends('layouts.layout')

@section('body_class', 'nav-md')

@section('css')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
@endsection

@section('body_content')
    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')
            <div class="right_col" role="main">
                <div class="page-title">
                    <div class="title_left">
                        <h3>Banner Promo</h3>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <form id="form_banner_promo" class="form-horizontal">
                    @if (isset($banner_promo))
                        <input type="hidden" value="{{ encrypt($banner_promo->id) }}" name="id">
                    @endif

                    <div class="row">
                        <div class="col-xs-12">
                            <ol class="breadcrumb">
                                <li><a href="{{ url('/dashboard') }}">Home</a></li>
                                <li><a href="{{ url('/banner_promo') }}">Banner Promo</a></li>
                                <li class="active">Detail</li>
                            </ol>
                        </div>

                        <div class="col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>Data</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Title*</label>
                                    <div class="col-sm-10">
                                        <input name="title" type="text" class="form-control" placeholder="Title" value="{{ @$banner_promo->title }}" >
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Start From *</label>
                                    <div class="col-sm-10">
                                        <input name="start_date" type="date" class="form-control" placeholder="Start Date" value="{{ @$banner_promo->start_date }}" >
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">To *</label>
                                    <div class="col-sm-10">
                                        <input name="end_date" type="date" class="form-control" placeholder="End Date" value="{{ @$banner_promo->end_date }}" >
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Pop Up (App)</label>
                                    <div class="col-sm-10">
                                        <label class="radio-inline-pop-up" style="margin-right: 10px;"><input type="radio" name="pop_up" value="show" style="margin-right: 5px;" @if (@$banner_promo->ispopup == 'show') checked @endif>Show</label>
                                        <label class="radio-inline-pop-up"><input type="radio" name="pop_up" value="hide" style="margin-right: 5px;" @if (@$banner_promo->ispopup == 'hide') checked @endif>Hide</label>
                                    </div>
                                </div>
                                

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">
                                        Image @if (!isset($banner_promo)) * @endif
                                        <br/>
                                        <!--(Recommended size 3969x1800)-->
                                        (Recommended image JPG/PNG)
                                    </label>
                                    <div class="col-sm-10">
                                        <input name="image" type="file" class="form-control input-image" >
                                        <span id="helpBlock" class="help-block">size 1365x619 Choose file banner</span>
                                        <br>
                                        <img id="preview-image" style="display:none; width:20%; margin-top:5px;" />

										@if (isset($banner_promo->image))
                                        <img style="width:50%" src="https://lakuemas.oss-ap-southeast-5.aliyuncs.com/images/banners/{{ $banner_promo->image }}" />
                                        {{-- <img style="width:20%; margin-top:5px;" src="https://lakuemasdev.oss-ap-southeast-5.aliyuncs.com/images/banners/{{ $banner_promo->image }}" /> --}}
										@endif
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">
                                        Image Pop Up @if (!isset($banner_promo)) * @endif
                                        <br/>
                                        (Recommended image JPG/PNG)
                                    </label>
                                    <div class="col-sm-10">
                                        <input name="popup_image" type="file" class="form-control input-popup-image" accept="image/*">
                                        <span id="helpBlock" class="help-block">size 500x600 Choose file Pop up</span>
                                        <br>

                                        <!-- Preview image baru -->
                                        <img id="preview-popup-image" style="display:none; width:20%; margin-top:5px;" />

                                        <!-- Preview image lama -->
                                        @if (isset($banner_promo->popup_image))
                                            <img id="old-popup-image" style="width:50%; margin-top:10px;" 
                                                src="https://lakuemas.oss-ap-southeast-5.aliyuncs.com/images/banners/{{ $banner_promo->popup_image }}" />
                                            {{-- <img style="width:20%; margin-top:5px;" src="https://lakuemasdev.oss-ap-southeast-5.aliyuncs.com/images/banners/{{ $banner_promo->popup_image }}" /> --}}

                                        @endif
                                    </div>
                                </div>

								<div class="form-group">
									<label class="col-sm-2 control-label">Home Display</label>
									<div class="col-sm-10">
										<label class="checkbox-inline"><input type="checkbox" id="chkShowHome" name="chkShowHome" value="1"{{ (@$banner_promo->ishome==1 ? ' checked' : '') }}>Display Banner Promo at homepage</label>
									</div>
								</div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Link to *</label>
                                    <div class="col-sm-10">
                                        <label class="radio-inline"><input type="radio" name="optradio" value="permalink" checked>Permalink</label>
                                        <label class="radio-inline"><input type="radio" name="optradio" value="url">Web Url</label>
                                        <label class="radio-inline"><input type="radio" name="optradio" value="none">Only Banner</label>
                                    </div>
                                </div>

                                <div id="url" class="form-group" style="display:none">
                                    <label class="col-sm-2 control-label">Url</label>
                                    <div class="col-sm-10">
                                        <input id="url_value" name="url" type="text" class="form-control" placeholder="url" value="{{ @$banner_promo->url }}" >
                                    </div>
                                </div>

                                <div id="permalink">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Permalink</label>
                                        <div class="col-sm-10">
                                            <input name="permalink" type="text" class="form-control" placeholder="Permalink" value="{{ @$banner_promo->permalink }}" >
                                        </div>
                                    </div>

                                    <!--<div class="form-group">
                                        <label class="col-sm-2 control-label">Ringkasan</label>
                                        <div class="col-sm-10">
                                            <textarea name="sm_text" class="form-control" placeholder="Ringkasan">{{ @$banner_promo->sm_text }}</textarea>
                                        </div>
                                    </div>-->

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Content</label>
                                        <div class="col-sm-10">
                                            <textarea name="content" class="form-control summernote" placeholder="Content" >{!! @$banner_promo->content !!}</textarea>
                                        </div>
                                    </div>
                                </div>

								<div class="form-group">
									<label class="col-sm-2 control-label">Status</label>
									<div class="col-sm-10">
										<label class="radio-inline"><input type="radio" name="optstatus" value="1"@if (@$banner_promo->isactive == 1) checked @endif>Aktif</label>
										<label class="radio-inline"><input type="radio" name="optstatus" value="0"@if (@$banner_promo->isactive == 0) checked @endif>Tidak Aktif</label>
									</div>
								</div>

                                {{-- <div class="form-group">
                                    <label class="col-sm-2 control-label">
                                        Image @if (!isset($banner_promo)) * @endif
                                        <br/>
                                        <!--(Recommended size 3969x1800)-->
                                        (Recommended image JPG/PNG & size 1365x619)
                                    </label>
                                    <div class="col-sm-10">
                                        <input name="image" type="file" class="form-control input-image" >
                                        <span id="helpBlock" class="help-block">Kosongkan jika gambar tidak ingin diganti</span>
                                        <br>
										@if (isset($banner_promo->image))
                                        <img style="width:50%" src="https://lakuemas.oss-ap-southeast-5.aliyuncs.com/images/banners/{{ $banner_promo->image }}" />
										@endif
                                    </div>
                                </div> --}}
                            </div>
                        </div>
                    </div>

                        


                        <div class="col-xs-12 hidden">
                            <div class="x_panel">
                                <div class="x_content">
                                    <div class="alert alert_placeholder"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-12">
                            <div class="x_panel">
                                <div class="x_content">
                                    <div class="text-center loading hidden"><i
                                            class="fa fa fa-spinner fa-pulse"></i></span></div>
                                    <div class="submit text-center">
                                        <button class="btn btn-primary">Save</button>
                                        <a href="{{ route('banner_promo_list') }}" class="btn btn-default">Cancel</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            @include('includes.footer')
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
    <script src="{{ url('/js/banner_promo_detail.min.js') }}"></script>
    <script>
        document.addEventListener('submit', function (e) {
                if (!e.target || e.target.id !== 'form_banner_promo') return;

                const popUpShow = document.querySelector('input[name="pop_up"][value="show"]').checked;
                if (!popUpShow) return;

                const popupImageInput = document.querySelector('.input-popup-image');
                const hasNewFile = popupImageInput.files && popupImageInput.files.length > 0;

                const oldPopupImage = document.getElementById('old-popup-image');
                const hasOldImage = oldPopupImage && oldPopupImage.style.display !== 'none';

                if (!hasNewFile && !hasOldImage) {
                    alert('Popup Image wajib diisi jika Pop Up (App) dipilih "Show"!');
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    popupImageInput.focus();
                }
            }, 
        true);
        document.querySelector('.input-image').addEventListener('change', function (event) {
            const preview = document.getElementById('preview-image');
            const oldImage = document.getElementById('old-image');
            const file = event.target.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                }
                reader.readAsDataURL(file);

                // Sembunyikan gambar lama kalau ada
                if (oldImage) oldImage.style.display = 'none';
            } else {
                preview.style.display = 'none';
                preview.src = '';
                if (oldImage) oldImage.style.display = 'block';
            }
        });

        document.querySelector('.input-popup-image').addEventListener('change', function (event) {
            const preview = document.getElementById('preview-popup-image');
            const oldImage = document.getElementById('old-popup-image');
            const file = event.target.files[0];

            if (file) {
                const validTypes = ['image/jpeg', 'image/png', 'image/gif']; // ✔ GIF ditambahkan
                if (!validTypes.includes(file.type)) {
                    alert('Hanya file JPG, PNG, atau GIF yang diperbolehkan!');
                    event.target.value = ''; // reset input
                    preview.style.display = 'none';
                    if (oldImage) oldImage.style.display = 'block';
                    return;
                }

                const reader = new FileReader();
                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };
                reader.readAsDataURL(file);

                if (oldImage) oldImage.style.display = 'none';
            } else {
                preview.style.display = 'none';
                preview.src = '';
                if (oldImage) oldImage.style.display = 'block';
            }
        });

        $(function() {
            $(".fa-bars").trigger("click");
        });
    </script>
@endsection