@extends('mommy.layouts.contentLayoutMaster')

@section('title','銷售清單')

@section('vendor-styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/tables/datatable/datatables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('plugins/flatpickr/flatpickr.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/extensions/toastr.css') }}">
@endsection

@section('page-styles')

@endsection

@section('content')
    <section>
        <form action="">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">搜尋</h4>
                            <a class="heading-elements-toggle"><i class="bx bx-dots-vertical font-medium-3"></i></a>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    <li>
                                        <a data-action="collapse"><i class="bx bx-chevron-down"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <fieldset class="form-group">
                                            <label for="keyword">關鍵字</label>
                                            <input class="form-control" id="keyword" name="keyword"
                                                   placeholder="廠商名稱、活動名稱" type="text"
                                                   value="{{ app('request')->input('keyword') }}">
                                        </fieldset>
                                    </div>
                                    <div class="col-md-4">
                                        <h6>活動狀態</h6>
                                        <fieldset class="form-group">
                                            <select class="form-control" id="activity_status" name="activity_status">
                                                <option value=""></option>
                                                @if (!empty(config('activity.activity_status')))
                                                    @foreach (config('activity.activity_status') as $key => $value)
                                                        <option value="{{ $key }}" {{ app('request')->input('activity_status') == (string)$key ? 'selected' : '' }} >{{ $value }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </fieldset>
                                    </div>
                                    <div class="col-md-4">
                                        <h6>開團時間</h6>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <input class="form-control flatpickr2" id="publish_start_at_start"
                                                       name="publish_start_at_start" placeholder="起" type="text"
                                                       value="{{  app('request')->input('publish_start_at_start') }}">
                                            </div>
                                            <div class="col-md-6">
                                                <input class="form-control flatpickr2" id="publish_start_at_end"
                                                       name="publish_start_at_end" placeholder="迄" type="text"
                                                       value="{{  app('request')->input('publish_start_at_end') }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <h6>結團時間</h6>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <input class="form-control flatpickr2" id="publish_end_at_start"
                                                       name="publish_end_at_start" placeholder="起" type="text"
                                                       value="{{  app('request')->input('publish_end_at_start') }}">
                                            </div>
                                            <div class="col-md-6">
                                                <input class="form-control flatpickr2" id="publish_end_at_end"
                                                       name="publish_end_at_end" placeholder="迄" type="text"
                                                       value="{{  app('request')->input('publish_end_at_end') }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <h6>年月搜尋</h6>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <fieldset class="form-group">
                                                    <select class="form-control" id="publish_year" name="publish_year">
                                                        @php
                                                            $now = \Carbon\Carbon::now();
                                                            $last_year = $now->copy()->subYears(1)->format('Y');
                                                            $now_year  = $now->format('Y');
                                                            $next_year = $now->copy()->addYears(1)->format('Y');
                                                        @endphp
                                                        <option value=""></option>
                                                        <option value="{{ $last_year }}" {{ app('request')->input('publish_year') == (string)$last_year ? 'selected' : '' }} >{{ $last_year }}</option>
                                                        <option value="{{ $now_year }}" {{ app('request')->input('publish_year') == (string)$now_year ? 'selected' : ''  }} >{{ $now_year  }}</option>
                                                        <option value="{{ $next_year }}" {{ app('request')->input('publish_year') == (string)$next_year ? 'selected' : '' }} >{{ $next_year }}</option>

                                                    </select>
                                                </fieldset>
                                            </div>
                                            <span style="padding-top:7px;">
                                            /
                                        </span>
                                            <div class="col-md-5">
                                                <fieldset class="form-group">
                                                    <select class="form-control" id="publish_month"
                                                            name="publish_month">
                                                        <option value=""></option>
                                                        @for ($month = 1; $month <= 12; $month++)
                                                            <option value="{{ $month }}" {{ app('request')->input('publish_month') == (string)$month ? 'selected' : '' }}>{{ $month }}</option>
                                                        @endfor
                                                    </select>
                                                </fieldset>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-content collapse show">
                            <div class="card-footer">
                                <div class="d-flex justify-content-end">
                                    <button class="btn btn-primary glow mr-1 mb-1" type="submit">搜尋</button>
                                    <button class="btn btn-light glow mr-1 mb-1" type="reset" data-force="1">清空
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </section>

    <section>
        <div class="row" id="table-hover-row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">列表</h4>
                    </div>
                    <div class="card-content">
                        {{-- <div class="table-responsive"> --}}
                        <div class="card-body card-dashboard">
                            <table class="table" id="list_table">
                                <thead>
                                <tr>
                                    <th>活動名稱</th>
                                    {{--                                    <th class="text-center">試吃時間</th>--}}
                                    <th class="text-center">開團時間</th>
                                    <th class="text-center">結團時間</th>
                                    <th class="text-center">活動狀態</th>
                                    <th class="text-center">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                @if ($matches->isNotEmpty())
                                    @foreach ($matches as $match)
                                        <tr>
                                            <td>{{ $match->activity->name }}</td>
                                            {{--                                            <td class="text-center">--}}
                                            {{--                                                {{ $match->activity->try_out_at->format('Y-m-d H:i') }}--}}
                                            {{--                                            </td>--}}
                                            <td class="text-center">
                                                {{ $match->activity->publish_start_at->format('Y-m-d H:i') }}
                                            </td>
                                            <td class="text-center">
                                                {{ $match->activity->publish_end_at->format('Y-m-d H:i') }}
                                            </td>
                                            <td class="text-center">
                                            <span class="badge {{ config('activity.activity_status_options.admin_button_class')[$match->activity->activity_status] }} ">
                                                {{ config('activity.activity_status')[$match->activity->activity_status] }}
                                            </span>
                                            </td>
                                            <td class="text-center">
                                                <a href="javascript:;">
                                                    <button class="btn btn-outline-primary mr-1" type="button"
                                                            data-toggle="modal" data-target="#getShoppingUrlModel"
                                                            data-shopping-url="{{ route('frontend.shopping', $match->uuid) }}"
                                                            data-uuid="{{ $match->uuid }}"
                                                            data-id="{{ $match->activity->id }}"
                                                            data-name="{{ $match->activity->name }}">取得連結
                                                    </button>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    @include('mommy.panels.list-no-data')
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer">
                        {{-- {{ $matches->withQueryString()->links('mommy.panels.pagination') }} --}}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Modal -->
    <div class="modal fade" id="getShoppingUrlModel" tabindex="-1" role="dialog"
         aria-labelledby="getShoppingUrlModelLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="getShoppingUrlModelLabel">取得連結</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-body">
                        <div class="row">
                            <div class="col-md-3">
                                <label>廣告活動來源</label>
                            </div>
                            <div class="col-md-9 form-group">
                                <input class="form-control update_shopping_url" id="utm_source" name="utm_source"
                                       placeholder="廣告活動來源(utm_source)" type="text">
                            </div>
                            <div class="col-md-3">
                                <label>廣告活動媒介</label>
                            </div>
                            <div class="col-md-9 form-group">
                                <input class="form-control update_shopping_url" id="utm_medium" name="utm_medium"
                                       placeholder="廣告活動媒介(utm_medium)" type="text">
                            </div>
                            <div class="col-md-3">
                                <label>廣告活動名稱</label>
                            </div>
                            <div class="col-md-9 form-group">
                                <input class="form-control update_shopping_url" id="utm_campaign" name="utm_campaign"
                                       placeholder="廣告活動名稱(utm_campaign)" type="text">
                            </div>

                            <div class="col-md-12">
                                <label>銷售頁連結</label>
                            </div>
                            <div class="col-md-9 form-group">
                                <textarea class="form-control" name="shopping_url" id="shopping_url"
                                          rows="5"
                                          disabled></textarea>
                            </div>
                            <div class="col-md-3 form-group">
                                <button class="btn btn-outline-primary mr-1" type="button" id="copy_url">
                                    複製
                                </button>
                            </div>

                            <div class="col-md-12">
                                <label>銷售頁QR code</label>
                            </div>
                            <div class="col-md-9 form-group">
                                {{-- qr code --}}
                                <img src="" alt="" id="qrcode" style="width: 100%;min-height: 350px;">
                            </div>
                            <div class="col-md-3 form-group">
                                <button class="btn btn-outline-primary mr-1" type="button" id="save_qrcode">
                                    儲存圖片
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('vendor-scripts')
    <script src="{{ asset('vendors/js/tables/datatable/datatables.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('plugins/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/toastr.min.js') }}"></script>
@endsection

@section('page-scripts')

    @if ($matches->isNotEmpty())
        <script>
            $('#list_table').DataTable({
                "info": false,
                'order': [
                    [2, 'desc']
                    // [4, 'desc']
                ]
            });
        </script>
    @endif

    <script>
        const generateQrcodeUrl = '{{ route('mommy.sell.generateQrcode') }}';

        flatpickr(".flatpickr2", {
            enableTime: true,
            dateFormat: "Y-m-d H:i",
        });

        let currentShoppingUrl = '';

        $('#getShoppingUrlModel').on('show.bs.modal', function (event) {
            let button = $(event.relatedTarget);
            let shoppingUrl = button.data('shopping-url');
            currentShoppingUrl = shoppingUrl;

            $('#utm_source').val('');
            $('#utm_medium').val('');
            $('#utm_campaign').val('');
            $('#shopping_url').text(`${currentShoppingUrl}`);
            generateQrcode();
        });

        $('.update_shopping_url').on('blur', function () {
            let utm_source  = $('#utm_source').val();
            let utm_medium  = $('#utm_medium').val();
            let utm_campaign= $('#utm_campaign').val();

            let query = {utm_source, utm_medium, utm_campaign};
            let queryString = Object.keys(query)
                .filter(key => query[key])
                .map(key => query[key] && `${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`)
                .join('&');

            $('#shopping_url').text(`${currentShoppingUrl}?${queryString}`);
            generateQrcode();
        });

        $('#copy_url').on('click', function () {
            var textarea = document.createElement('textarea');
            textarea.textContent = $('#shopping_url').text().trim();
            document.body.appendChild(textarea);
            var selection = document.getSelection();
            var range = document.createRange();
            range.selectNode(textarea);
            selection.removeAllRanges();
            selection.addRange(range);
            document.execCommand('copy')
            selection.removeAllRanges();
            document.body.removeChild(textarea);
            toastr.success('已複製');
        });

        function generateQrcode() {
            let url = $('#shopping_url').text().trim();
            $('#qrcode').attr('src', '');
            axios.post(generateQrcodeUrl, {url}).then((response) => {
                $('#qrcode').attr('src', response.data.data.base64Image);
            })
        }

        $('#save_qrcode').on('click', function() {
            let downloadLink = document.createElement('a');
            downloadLink.href =  $('#qrcode').attr('src');
            downloadLink.download = 'qrcode.png'; // 下載的檔案名稱

            // 觸發虛擬連結的點擊事件
            downloadLink.click();
        });

    </script>
@endsection