@extends('layouts.layout')
@section('body_class', 'nav-md')
@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="row">
                        <div class="col-md-6 col-sm-12">
                            <div class="title_left">
                                <h3><i class="fa fa-opencart"></i> Webstore Flash Deal</h3>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            @include('pages.webstore.campaign_flashsale.steps_wizard')
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                
                <form id="form_add_campaign" class="form-horizontal" method="post" action="{{ route($routeName) }}">
                    <input type="hidden" name="campaign_id" value="{{ $fs_campaign->id }}">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="x_panel">
                                <div class="x_content">
                                    <div class="x_title">
                                        <div class="row">
                                            <div class="col-sm-8">
                                                <div class="title_left">
                                                    <h2>Flash Deal Schedule</h2>
                                                    <div class="clearfix"></div>
                                                </div>
                                            </div>
                                            <div class="col-sm-4 text-right">
                                                <b>{{ ucwords($fs_campaign->status) }}</b>
                                            </div>
                                        </div>
                                    </div>

                                    {{ csrf_field() }}

                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Campaign Time :</label>
                                        <div class="col-xs-12 col-sm-2">
                                            <input type="time" class="form-control" name="time_start" id="time_start"
                                                value="{{ $timestart }}" required/>
                                        </div>
                                        <div class="col-xs-12 col-sm-2">
                                            <input type="time" class="form-control" name="time_end" id="time_end"
                                                value="{{ $timeend }}" required/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-12">
                            <div class="x_panel">
                                <div class="x_content">
                                    <div class="x_title">
                                        <div class="row">
                                            <div class="col-sm-8">
                                                <div class="title_left">
                                                    <h2>New Flash Deal - Product List</h2>
                                                    <div class="clearfix"></div>
                                                </div>
                                            </div>
                                            <div class="col-sm-4 text-right">
                                                <button type="button" class="btn btn-primary" onclick="productListModal()"><i class="fa fa-plus"></i> Add Product</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="zoom: 1">
                                        <table class="table table-bordered">
                                            <tr>
                                                <th class="text-center" width="20%">Product Photo</th>
                                                <th width="30%">Product Name</th>
                                                <th>SKU</th>
                                                <th>Current Price</th>
                                                <th width="12%">Promo Price</th>
                                                <th width="10%">Quota</th>
                                                <!-- <th>Limit Per User</th> -->
                                                <th>Action</th>
                                            </tr>
                                            @if($fs_campaign_schedule)
                                                @foreach($fs_campaign_schedule->campaign_details as $key => $row)
                                                    @php
                                                        $product_photo = $row->product_photo;
                                                        $product_name = $row->product_name;
                                                        $promo_price = $row->promo_price;
                                                        $promo_price_fe = $row->promo_price;

                                                        if(!$product_photo) $product_photo = $row->product->img_thumbnail;
                                                        if(!$product_name) $product_name = $row->product->name;
                                                    @endphp
                                                    <tr>
                                                        <td>
                                                            <input type="hidden" name="detail_id[]" value="{{ $row->id }}">
                                                            <div class="row">
                                                                <div class="col-md-5 col-sm-12 text-center">
                                                                    <img src="{{ env('ALIYUN_OSS_IMAGE_URL') . '/ecommerce/product/' . $product_photo }}" width="60" style="border: 1px solid #eee; padding: 3px;">
                                                                </div>
                                                                <div class="col-md-7 col-sm-12 text-center">
                                                                    <button type="button" class="btn btn-sm btn-success" onclick="productChangeImageModal('{{ $row->id }}')"><i class="fa fa-image"></i> Change Photo</button>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td><textarea class="form-control" name="product_name[]" required>{{ $product_name }}</textarea></td>
                                                        <td>{{ $row->product->sku }}</td>
                                                        <td>
															<input type="hidden" id="normal_price_{{ $key }}" value="{{ $row->product->price }}">
                                                            <div style="text-decoration: line-through; color: #999;">{{ number_format($row->product->price) }}</div>
                                                            <div>{{ number_format($row->product->current_price) }}</div>
                                                        </td>
                                                        <td>
                                                            <table width="100%">
                                                                <tr>
                                                                    <td width="65%"><input type="text" class="form-control input-number input-number-{{ $key }}" id="promo_price_{{ $key }}" name="promo_price[]" value="{{ $promo_price }}" style="width: 110px;" onkeyup="liveCalculate({{ $key }})" required></td>
                                                                    <td style="padding-left: 5px;"><span id="percentage_{{ $key }}">{{ $row->promo_percentage_fe }}</span>%</td>
                                                                </tr>
                                                            </table>    
                                                        </td>
                                                        <td><input type="number" class="form-control" name="quota[]" value="{{ $row->quota }}" required></td>
                                                        <td><button type="button" class="btn btn-sm btn-danger" onclick="deleteProductConfirm('{{ $row->id }}')"><i class="fa fa-1x fa-times"></i></button></td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr>
                                                    <td colspan="10">No data</td>
                                                </tr>
                                            @endif
                                        </table>

                                        <div class="text-center">
                                            <!-- <button class="btn btn-sm btn-success" onclick="saveProduct()"><i class="fa fa-save"></i> Save & Validate</button> -->
                                            <button type="button" class="btn btn-sm btn-danger" onclick="cancelConfirm()"><i class="fa fa-times"></i> Cancel</button>
                                            <button type="submit" class="btn btn-sm btn-primary">Save & Next <i class="fa fa-arrow-right"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                
                @include('pages.webstore.campaign_flashsale.log_activity')
            </div>
            @include('includes.footer')
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="formProductList" role="dialog" aria-labelledby="formProductList" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div id="formProductListContent" class="modal-content">
            </div>
        </div>
    </div>
    <div class="modal fade" id="formImage" role="dialog" aria-labelledby="formImage" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div id="formImageContent" class="modal-content">
                <div class="modal-header">
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="title_left">
                                <h5 class="modal-title" id="exampleModalLongTitle"><i class="fa fa-image"></i> Product Photo</h5>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                        <div class="col-sm-4 text-right">
                        </div>
                    </div>
                </div>
                <div class="modal-body" style="zoom: 0.9; margin-bottom: 20px;">
                    <form id="changePhotoForm" method="post" action="{{ route('webstore_flashsale_add_product_photo') }}" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <input type="hidden" name="campaign_detail_id" id="campaign_detail_id">
                        <div style="background: #F1F8E9; border:1px solid #AED581; padding: 10px; margin-bottom: 10px;">
                            <div style="margin-bottom: 10px;">
                                Choose Image
                            </div>
                            <div>
                                <input type="file" id="fileImage" name="photo" accept="image/*" required>
                            </div>
                        </div>
                        <div class="text-center">
                            <img id="imgPreview" src="{{ asset('/images/no-img.jpg') }}" style="border:1px solid #ccc; padding: 5px; margin-bottom: 10px;" width="75%">
                            <div>
                                <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection


@section("scripts")
    @include('includes.helper_js')
	<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.0.7/cleave.min.js"></script>
    <script type="text/javascript" src="{{ asset('/js/imageTools.js') }}"></script>
    <script type="text/javascript">
		$(document).ready(function() {
			let textNumber = $('.input-number').length;
			for(var i=0; i<textNumber; i++) {
				new Cleave(".input-number-" + i, {
					numeral: !0,
					numeralThousandsGroupStyle: "thousand",
					numeralPositiveOnly: !0,
				})
			}
		})
		
		function liveCalculate(key) {
			let normal_price = parseInt($('#normal_price_' + key).val());
			let promo_price = parseInt($('#promo_price_' + key).val().replace(',', '').replace(',', '').replace(',', '').replace(',', ''));
			
			let res = Math.round(-1*((promo_price-normal_price)/normal_price*100));
			$('#percentage_' + key).html(res);
		}
		
        $('#form_add_campaign').on('submit', function() {
            let time_start = parseInt((($('#time_start').val()).replace('-', '')).replace('-', ''));
            let time_end = parseInt((($('#time_end').val()).replace('-', '')).replace('-', ''));

            if(time_start > time_end) {
                alert('Tanggal mulai tidak boleh lebih besar dari tanggal berakhirnya campaign.');
                return false;
            }

            $('#cover-spin').show();
            return true;
        });

        function productChangeImageModal(detailId) {
            let campaign_detail_id = $('#campaign_detail_id').val(detailId);
            $('#formImage').modal('show');
        }

        $("#changePhotoForm").on("change", "#fileImage", function() {
            var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
            if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                alert('Format file hanya boleh JPG, JPEG atau PNG');
                document.getElementById('fileImage').value= null;
                $('#changePhotoForm #imgPreview').attr('src', "{{ asset('/images/no-img.jpg') }}");
                return false;
            }

            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#changePhotoForm #imgPreview').attr('src', e.target.result);
                };
                reader.readAsDataURL(this.files[0]);
            }
        })

        function productListModal() {
            let time_start = $('#time_start').val();
            let time_end = $('#time_end').val();
            if(time_start == '' || time_end == '') {
                alert('Jam mulai dan akhir tidak boleh kosong');
                return false;
            }
			
            let time_start_check = parseInt(((time_start).replace('-', '')).replace('-', ''));
            let time_end_check = parseInt(((time_end).replace('-', '')).replace('-', ''));

            if(time_start_check > time_end_check) {
                alert('Tanggal mulai tidak boleh lebih besar dari tanggal berakhirnya campaign.');
                return false;
            }

            $('#cover-spin').fadeIn();
            $.ajax({
                url: "{{ url('webstore/campaign_flashsale/get-product') }}?campaignId={{ $request['campaignId'] }}&timestart="+time_start+"&timeend="+time_end,
                method: "GET",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function(response) {
                    $('#formProductListContent').html(response);

                    $('#formProductList').modal('show');
                    $('#cover-spin').hide();
                },
                error: function(response) {
                    var response = response.responseJSON;
                    alert(response.error);
                    $('#cover-spin').hide();
                }
            });
        }
        

        $("#changePhotoForm").on("submit", function() {
            $('#cover-spin').show();
        })

        function cancelConfirm() {
            if (confirm('Apakah Anda yakin ingin membatalkan Campaign ini ?')) {
                $('#cover-spin').show();
                location = '{{ route("webstore_flashsale_cancel") }}?campaignId={{ $request["campaignId"] }}';
            }
        }

        function deleteProductConfirm(detailId) {
            if (confirm('Apakah Anda yakin ingin menghapus product dari campaign ini ?')) {
                $('#cover-spin').show();
                location = '{{ url("webstore/campaign_flashsale/delete-product") }}/' + detailId;
            }
        }
    </script>
@endsection