@extends('admin.layouts.contentLayoutMaster')

@section('title','活動領取')

@section('vendor-styles')
{{-- 日期時間下拉 --}}
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/flatpickr/flatpickr.min.css') }}">

<link rel="stylesheet" type="text/css" href="{{asset('css/pages/dashboard-analytics.css')}}">
@endsection

@section('page-styles')
<style>
    .products_list {
        max-height: 500px;
        overflow-y: scroll;
    }
</style>
@endsection

@section('content')
<section id="basic-horizontal-layouts">
    <div class="row match-height justify-content-center">
        <div class="col-md-10 col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title"></h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="form-body">
                            <div class="row">
                                <div class="col-md-1 offset-md-3">
                                    <label>廠商名稱</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    {{ $activity->firm->name }}
                                </div>
                                <div class="col-md-1 offset-md-3">
                                    <label>活動名稱</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    {{ $activity->name }}
                                </div>

                                <div class="col-md-1 offset-md-3">
                                    <label>商品列表</label>
                                </div>
                                <div class="col-md-6 form-group products_list">
                                    <input type="hidden" id="products_id" name="products_id">
                                    <div class="table-responsive" id="products_table">
                                        <table class="table table-hover mb-0">
                                            <thead>
                                                <tr>
                                                    <th>圖片</th>
                                                    <th>名稱</th>
                                                    <th>價格</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @if ($activity->products->isNotEmpty())
                                                    @foreach ($activity->products as $item)
                                                        <tr>
                                                            <td>
                                                                <img src="{{ $item->image_path }}" alt="" style="width:50px;">
                                                            </td>
                                                                
                                                            <td class="text-bold-500">{{ $item->name }}</td>
                                                            <td class="text-bold-500">$ {{ number_format($item->price) }}</td>
                                                        </tr>
                                                    @endforeach
                                                @else 
                                                    <tr>
                                                        <td colspan="4" class="text-center">
                                                            無商品
                                                        </td>
                                                    </tr>
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="col-md-1 offset-md-3">
                                    <label>活動介紹</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    <div 
                                        id="editor-container" 
                                        style="margin-bottom:50px;max-height: 300px;overflow-y: auto;font-size: 1rem;"
                                    >
                                        {!! old('description', $activity->description) !!}
                                    </div>
                                    <input type="hidden" name="description" id="description" value="{{ old('description', $activity->description) }}">
                                </div>
                                {{-- <div class="col-md-1 offset-md-3">
                                    <label>商品圖片</label>
                                </div>
                                <div class="col-md-6 form-group">
                                <input class="form-control" id="path" name="path" placeholder="圖片路徑" type="text" value="{{ old('path', $activity->path) }}">
                                    @if ($errors->has('path')) 
                                        @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('price') ]) 
                                    @endif
                                </div> --}}

                                <div class="col-md-1 offset-md-3">
                                    <label>利潤</label>
                                </div>
                                <div class="col-md-6 form-group">
                                   {{ $activity->bonus_percent * 100 }} %
                                </div>
                                <div class="col-md-1 offset-md-3">
                                    <label>時程表</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    <ul class="widget-timeline mb-0">
                                        <li class="timeline-items timeline-icon-{{  $activity->check_at->isPast() ? 'primary' : 'light'}} active">
                                            <div class="timeline-time">
                                                {{ $activity->check_at->format('Y-m-d H:i') }}
                                            </div>
                                            <h6 class="timeline-title">
                                                對帳時間
                                            </h6>
                                           {{-- <p class="timeline-text"> </p> <div class="timeline-content"> </div> --}}
                                        </li>
                                        <li class="timeline-items timeline-icon-{{  $activity->freight_at->isPast() ? 'primary' : 'light'}} active">
                                            <div class="timeline-time">
                                                {{ $activity->freight_at->format('Y-m-d H:i') }}
                                            </div>
                                            <h6 class="timeline-title">
                                                出貨時間
                                            </h6>
                                            {{-- <p class="timeline-text"> </p> <div class="timeline-content"> </div> --}}
                                        </li>
                                        <li class="timeline-items timeline-icon-{{  $activity->publish_end_at->isPast() ? 'primary' : 'light'}} active">
                                            <div class="timeline-time">
                                                {{ $activity->publish_end_at->format('Y-m-d H:i') }}
                                            </div>
                                            <h6 class="timeline-title">
                                                結團時間
                                            </h6>
                                            {{-- <p class="timeline-text"> </p> <div class="timeline-content"> </div> --}}
                                        </li>
                                        <li class="timeline-items timeline-icon-{{  $activity->publish_start_at->isPast() ? 'primary' : 'light'}} active">
                                            <div class="timeline-time">
                                                {{ $activity->publish_start_at->format('Y-m-d H:i') }}
                                            </div>
                                            <h6 class="timeline-title">
                                                開團時間
                                            </h6>
                                            {{-- <p class="timeline-text"> </p> <div class="timeline-content"> </div> --}}
                                        </li>
                                        <li class="timeline-items timeline-icon-{{  $activity->try_out_at->isPast() ? 'primary' : 'light'}} active">
                                            <div class="timeline-time">
                                                {{ $activity->try_out_at->format('Y-m-d H:i') }}
                                            </div>
                                            <h6 class="timeline-title">
                                                試吃領取時間
                                            </h6>
                                           {{-- <p class="timeline-text"> </p> <div class="timeline-content"> </div> --}}
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-1 offset-md-3">
                                    <label>活動狀態</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    <span class="badge {{ config('activity.activity_status_options.admin_button_class')[$activity->activity_status] }} ">
                                        {{ config('activity.activity_status')[$activity->activity_status] }}
                                    </span>
                                </div>                                
                                <div class="col-md-1 offset-md-3">
                                    <label>領取狀態</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    @if ($is_matched)
                                        <span class="match_status badge badge-light-success">已領取</span>
                                    @else 
                                        <span class="match_status badge badge-light-secondary">未領取</span>
                                    @endif
                                </div>                                
                            </div>
                            <div class="card-footer">
                                <div class="row">
                                    <div class="col-lg-8 ml-lg-auto">

                                        @if (in_array($activity->activity_status, config('activity.activity_status_options.can_match')) && !$is_matched)
                                            {{-- 可領取 --}}
                                            <button class="btn btn-primary glow mr-1 mb-1 match" type="button">領取</button>
                                        @elseif ($is_matched)
                                            <a href="javascript:;" class="copy-url" data-url="{{ Route('frontend.shopping', $activity_match->uuid) }}">
                                                <button class="btn btn-primary glow mr-1 mb-1" type="button">複製網址</button>
                                            </a>
                                        @endif
                                        
                                        <a href="{{ url()->previous() }}">
                                            <button class="btn btn-light glow mr-1 mb-1" type="button">回上一頁</button>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('vendor-scripts')
{{-- 日期時間下拉 --}}
<script src="{{ asset('plugins/flatpickr/flatpickr.min.js') }}"></script>
{{-- Quill Editor套件 --}}
<script src="{{ asset('vendors/js/editors/quill/katex.min.js') }}"></script>
<script src="{{ asset('vendors/js/editors/quill/quill.js') }}"></script>
<script src="{{ asset('vendors/js/editors/quill/quill.min.js') }}"></script>
{{-- touchspin 按鈕 --}}
<script src="{{ asset('vendors/js/forms/spinner/jquery.bootstrap-touchspin.js') }}"></script>
@endsection

@section('page-scripts')
<script>
    
    $('body').on('click', '.match', function() {
        let self = $(this);
        let data = { 
            'id': '{{ $activity->id }}'
        };
        let url = '{{ route("ajax.admin.activity_match.set.match") }}';
        $.post(url, data, function(response) {
            if (response.status === true) {
                self.parent().prepend(`
                    <a href="javascript:;" class="copy-url" data-url="${response.data.frondendUrl}">
                        <button class="btn btn-primary glow mr-1 mb-1" type="button">複製網址</button>
                    </a>
                `);
                self.hide();
                let match_status = self.closest('.card-body').find('.match_status');
                match_status.addClass('badge-light-success').removeClass('badge-light-secondary').text('已領取');
            }
         }, 'json')
    });

    $('body').on('click', '.copy-url', function() {
        let url = $(this).attr('data-url');
        let input = $('<input>');
        $('body').append(input);
        input.val(url).select();
        document.execCommand('copy');
        input.remove();
        Swal.fire({
            title: '已複製',
            html: `網址 ： <a href="${url}" target="_blank">點此前往</a>`,
            icon: 'success',
        });
    });

</script>
@endsection