@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">
								<a href="{{ route('webstore_flashsale') }}" class="btn btn-info"><i class="fa fa-arrow-left"></i> Kembali</a>
                        
                                <h3><i class="fa fa-opencart"></i> Webstore Campaign Overview</h3>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12 text-right">
						</div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            
                <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>Campaign Detail</h2>
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4 text-right">
                                            @if($fs_campaign->status == 'active')
                                                <b class="text-success">Activated Until : </b> <span style="font-family:'Courier New', Courier, monospace; font-size: 15px; color: #000;">{{ $fs_campaign->campaign_schedule[0]->start_date }}</span>
                                            @elseif($fs_campaign->status == 'ongoing')
                                                <b class="text-danger"><i class="fa fa-fire" style="font-size: 16px; color: #FFA000;"></i> On Going Until : </b> <span style="font-family:'Courier New', Courier, monospace; font-size: 15px; color: #000;">{{ $fs_campaign->campaign_schedule[0]->end_date }}</span>
                                            @elseif($fs_campaign->status == 'expired')
                                                <b class="text-danger" style="color: #8E24AA;">Expired On : </b> <span style="font-family:'Courier New', Courier, monospace; font-size: 15px; color: #000;">{{ @$fs_campaign->campaign_logs()->where('status_to', 'expired')->orderBy('id', 'desc')->first()->created_at }}</span>
                                            @else
                                                <b>{{ ucwords($fs_campaign->status) }}</b>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                {{ csrf_field() }}
                                <div class="row" style="margin-bottom: 5px; padding-left: 10px;">
                                    <label class="col-xs-12 col-sm-2 control-label">Campaign Type</label>
                                    <div class="col-xs-12 col-sm-5">{{ $fs_campaign->campaign_type->name }}</div>
                                </div>
                                <div class="row" style="margin-bottom: 5px; padding-left: 10px;">
                                    <label class="col-xs-12 col-sm-2 control-label">Campaign Date</label>
                                    <div class="col-xs-12 col-sm-5">{{ $fs_campaign->date_start }} <b>s/d</b> {{ $fs_campaign->date_end }}</div>
                                </div>
                                <div class="row" style="margin-bottom: 5px; padding-left: 10px;">
                                    <label class="col-xs-12 col-sm-2 control-label">Campaign Name</label>
                                    <div class="col-xs-12 col-sm-5">{{ $fs_campaign->name }}</div>
                                </div>
                                <div class="row" style="margin-bottom: 5px; padding-left: 10px;">
                                    <label class="col-xs-12 col-sm-2 control-label">Campaign Sponsor</label>
                                    <div class="col-xs-12 col-sm-5">{{ $fs_campaign->campaign_sponsor->name }}</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>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>
                                
                                <div class="row" style="margin-bottom: 5px; padding-left: 10px;">
                                    <label class="col-xs-12 col-sm-2 control-label">Campaign Time</label>
                                    <div class="col-xs-12 col-sm-5">{{ $timestart }} <b>s/d</b> {{ $timeend }}</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">
                                        </div>
                                    </div>
                                </div>
                                <div style="zoom: 1">
                                    <table class="table table-bordered">
                                        <tr>
                                            <th class="text-center" width="20%">Product Photo</th>
                                            <th width="40%">Product Name</th>
                                            <th>Current Price</th>
                                            <th width="12%">Promo Price</th>
                                            <th width="10%">Quota</th>
                                            <!-- <th>Limit Per User</th> -->
                                        </tr>
                                        @if($fs_campaign->campaign_schedule[0])
                                            @foreach($fs_campaign->campaign_schedule[0]->campaign_details as $row)
                                                @php
                                                    $product_photo = $row->product_photo;
                                                    $product_name = $row->product_name;
                                                    $promo_price = $row->promo_price;

                                                    if(!$product_photo) $product_photo = $row->product->img_thumbnail;
                                                    if(!$product_name) $product_name = $row->product->name;
                                                    if(!$promo_price) $promo_price = $row->product->current_price;
                                                @endphp
                                                <tr>
                                                    <td class="text-center">
                                                        <input type="hidden" name="detail_id[]" value="{{ $row->id }}">
                                                        <img src="{{ env('ALIYUN_OSS_IMAGE_URL') . '/ecommerce/product/' . $product_photo }}" width="60" style="border: 1px solid #eee; padding: 3px;">
                                                    </td>
                                                    <td>{{ $product_name }}</td>
                                                    <td class="number_font">
                                                        <div style="text-decoration: line-through; color: #999;">{{ number_format($row->product->price) }}</div>
                                                        <div>{{ number_format($row->product->current_price) }}</div>
                                                    </td>
                                                    <td class="number_font">
                                                        {{ number_format($promo_price) }} | {{ $row->promo_percentage_fe }}%
                                                    </td>
                                                    <td class="number_font">{{ $row->quota }}</td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="10">No data</td>
                                            </tr>
                                        @endif
                                    </table>
                                    
                                    <div class="text-center">
                                        @if($fs_campaign->status == 'inactive')
                                            @if($fs_campaign->userlei_submitted_by == auth()->user()->id)
												<div style="height: 50px; border: 0px solid #f00;">
													<a href="{{ url('webstore/campaign_flashsale/edit-campaign/' . $fs_campaign->id) }}" class="btn btn-sm btn-warning"><i class="fa fa-edit"></i> Edit</a>
												</div>
                                                <span class="alert" style="border: 1px solid #ccc; font-weight: bold; font-size: 15px;"><i class="fa fa-clock-o"></i> Waiting for Approval</span>
                                            @else
                                                <button type="button" class="btn btn-sm btn-danger" onclick="showPIN(0)"><i class="fa fa-times"></i> Reject</button>
                                                <button type="submit" class="btn btn-sm btn-primary" onclick="showPIN(1)"><i class="fa fa-check"></i> Approve</button>
                                            @endif
										@elseif($fs_campaign->status == 'active')
                                               <button type="button" class="btn btn-sm btn-danger" onclick="showPIN(1)">Deactivate Campaign</button>
										@elseif($fs_campaign->status == 'ongoing')
                                               <button type="button" class="btn btn-sm btn-danger" onclick="showPIN(1)">Expired Campaign Now</button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @include('pages.webstore.campaign_flashsale.log_activity')
            </div>
            @include('includes.footer')
        </div>
    </div>

    <div class="modal fade" id="pinModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel"><span id="contentPIN" style="color: #f44336;"></span></h4>
            </div>
            <form id="form-pin" method="POST">
                <div class="text-center" style="padding-top: 10px;">Input Your PIN</div>
                {{ csrf_field() }}
                <input type="hidden" name="campaign_id" value="{{ $fs_campaign->id }}">    
                <input type="hidden" id="status_approval" name="status_approval">    
                <div class="modal-body">
                    <input type="password" name="pin" id="pin" class="form-control" placeholder="PIN" style="text-align: center;">

                    <div id="noReferensi" style="margin-top: 20px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary btn-submit">Submit</button>
                </div>
            </form>
            </div>
        </div>
    </div>
@endsection


@section("scripts")
    @include('includes.helper_js')
    <script type="text/javascript" src="{{ asset('/js/imageTools.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.form-control').attr('disabled', true);
        });
        
        @if(($fs_campaign->userlei_submitted_by != auth()->user()->id) && ($fs_campaign->status == 'inactive'))    
            function showPIN(status) {
                let msg = 'Apakah Anda yakin ingin mem-Batalkan campaign ini ?';
                if(status == '1') {
                    msg = 'Apakah Anda yakin ingin meng-Aktifkan campaign ini ?';
                }

                $('#contentPIN').html(msg);
                $('#status_approval').val(status);
                $('#pin').attr('disabled', false);
                $('#pinModal').modal('show');
            }

            $(".btn-submit").on("click", function() {
                $('#cover-spin').show();
                $(".btn-approve").attr("disabled", "disabled").html('<i class="fa fa fa-spinner fa-pulse"></i>');
                $.ajax({
                    url: "{{ route('webstore_flashsale_approval_process') }}",
                    method: "POST",
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    data: $("#form-pin").serialize(),
                    success: function(response) {
                        location = "{{ route('webstore_flashsale') }}";
                    },
                    error: function(response) {
                        $('#cover-spin').hide();
                        var response = response.responseJSON;
                        alert(response.error);
                        $(".btn-approve").removeAttr("disabled", "disabled").html('<i class="fa fa-check"></i> Approve');
                    }
                });
                return false;
            })
        @elseif(($fs_campaign->userlei_submitted_by != auth()->user()->id) && ($fs_campaign->status == 'active')) 
            function showPIN(status) {
                let msg = 'Apakah Anda yakin ingin meng-Deactive-kan campaign ini ?';
				
                $('#contentPIN').html(msg);
                $('#status_approval').val(status);
                $('#pin').attr('disabled', false);
                $('#pinModal').modal('show');
            }

            $(".btn-submit").on("click", function() {
                $('#cover-spin').show();
                $(".btn-approve").attr("disabled", "disabled").html('<i class="fa fa fa-spinner fa-pulse"></i>');
                $.ajax({
                    url: "{{ route('webstore_flashsale_setto_deactive_process') }}",
                    method: "POST",
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    data: $("#form-pin").serialize(),
                    success: function(response) {
                        location = "{{ route('webstore_flashsale') }}";
                    },
                    error: function(response) {
                        $('#cover-spin').hide();
                        var response = response.responseJSON;
                        alert(response.error);
                        $(".btn-approve").removeAttr("disabled", "disabled").html('<i class="fa fa-check"></i> Approve');
                    }
                });
                return false;
            })  
		@elseif(($fs_campaign->userlei_submitted_by != auth()->user()->id) && ($fs_campaign->status == 'ongoing')) 
            function showPIN(status) {
                let msg = 'Apakah Anda yakin ingin meng-Expired-kan campaign ini ?';
				
                $('#contentPIN').html(msg);
                $('#status_approval').val(status);
                $('#pin').attr('disabled', false);
                $('#pinModal').modal('show');
            }

            $(".btn-submit").on("click", function() {
                $('#cover-spin').show();
                $(".btn-approve").attr("disabled", "disabled").html('<i class="fa fa fa-spinner fa-pulse"></i>');
                $.ajax({
                    url: "{{ route('webstore_flashsale_setto_expired_process') }}",
                    method: "POST",
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    data: $("#form-pin").serialize(),
                    success: function(response) {
                        location = "{{ route('webstore_flashsale') }}";
                    },
                    error: function(response) {
                        $('#cover-spin').hide();
                        var response = response.responseJSON;
                        alert(response.error);
                        $(".btn-approve").removeAttr("disabled", "disabled").html('<i class="fa fa-check"></i> Approve');
                    }
                });
                return false;
            })  
        @endif
		$('#form-pin').on('keyup keypress', function(e) {
		  var keyCode = e.keyCode || e.which;
		  if (keyCode === 13) { 
			e.preventDefault();
			return false;
		  }
		});
    </script>
@endsection