@extends('layouts.admin_app')
@section('header')
@endsection
@section('content')
<style>
    .table th,
    .table td {
        white-space: nowrap;
        /* 禁止文字換行 */
        text-align: center;
        /* 內容置中 */
        overflow: hidden;
        /* 隱藏超出內容 */
        text-overflow: ellipsis;
        /* 超出用省略號顯示 */
    }

    .table th {
        width: auto;
        /* 可根據內容自適應，但不要超出 */
    }

    .table {
        width: 100%;
        /* 撐滿父容器 */
    }

</style>

<div clas="content-wrapper">
    <div class="row">
        <div class="col-md-12">
            <div class="card-body">
                <!-- Basic Breadcrumb -->
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0);">首頁</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0);">設定</a>
                        </li>
                        <li class="breadcrumb-item active">優惠代碼</li>
                    </ol>
                </nav>
            </div>
        </div>


        <!-- Basic Layout -->
        <div class="row">
<div class="col-xl">
    <div class="card mb-12" style="margin-bottom: 20px;">
        <h5 class="card-header">Excel 匯入</h5>
        <div class="card-body">

            <!-- Tabs -->
            <ul class="nav nav-tabs" id="importTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="cafeg-tab" data-bs-toggle="tab" data-bs-target="#cafeg-form"
                        type="button" role="tab" aria-controls="cafeg-form" aria-selected="true">朗立臣</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="teamaster-tab" data-bs-toggle="tab" data-bs-target="#teamaster-form"
                        type="button" role="tab" aria-controls="teamaster-form" aria-selected="false">飲力星球</button>
                </li>
            </ul>

            <!-- Tab Content -->
            <div class="tab-content mt-4" id="importTabsContent">

                <!-- 朗立臣 (cafeg) -->
                <div class="tab-pane fade show active" id="cafeg-form" role="tabpanel" aria-labelledby="cafeg-tab">
                    <form action="{{ route('admin.promocode.create') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-4">
                            <label for="formFile1" class="form-label">匯入 Excel（朗立臣）</label>
                            <input class="form-control" name="file" type="file" id="formFile1">
                            <input type="hidden" name="from" value="cafeg">
                        </div>
                        <button type="submit" class="btn btn-primary">送出</button>
                    </form>
                </div>

                <!-- 飲力星球 (teamaster) -->
                <div class="tab-pane fade" id="teamaster-form" role="tabpanel" aria-labelledby="teamaster-tab">
                    <form action="{{ route('admin.promocode.create') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-4">
                            <label for="formFile2" class="form-label">匯入 Excel（飲力星球）</label>
                            <input class="form-control" name="file" type="file" id="formFile2">
                            <input type="hidden" name="from" value="teamaster">
                        </div>
                        <button type="submit" class="btn btn-success">送出</button>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>


            <!-- DataTable with Buttons -->
            <div class="card">
                <div class="card-datatable table-responsive pt-0">
                    <table class="datatables-basic table table-bordered">
                        <thead>
                            <tr>
                                <th style="width: 20%; !important">來源</th>
                                <th style="width: 20%; !important"> 優惠碼</th>
                                <th style="width: 15%; !important">優惠類型</th>
                                <th style="width: 20%; !important">折扣比例</th>
                                <th style="width: 15%; !important"> 是否派發</th>
                                <th style="width: 30%; !important">生效期間</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($data as $item)
                            <tr>
                                <td>{{$item->getFromLabelAttribute()}}</td>
                                <td><strong class="text-danger blod">{{$item->code}}</strong></td>
                                <td>{{$item->type}}</td>
                                <td> {{ number_format($item->discount, 0) }}</td>
                                <td>
                                 @if($item->used_count == 0)
                                  尚未派發
                                 @else

                                    {{ $item->getMember->name??'id :' . $item->used_count }}

                                 @endif

                                </td>
                                <td>{{$item->valid_from}}  </td>
                            </tr>
                            @endforeach
                        </tbody>


                    </table>
                    &nbsp;
                </div>
            </div>
        </div>

        {{$data->links()}}

    </div>
    @endsection
    @section('scripts')
    @if (session('success'))
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            Swal.fire({
                title: '成功'
                , text: "{{ session('success') }}"
                , icon: 'success'
                , confirmButtonText: '确定'
            });
        });

    </script>
    @endif
    @if (session('error'))
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            Swal.fire({
                title: '失敗'
                , text: "{{ session('error') }}"
                , icon: 'error'
                , confirmButtonText: '确定'
            });
        });

    </script>
    @endif
    <script>
        $(document).ready(function() {
            $('.datatables-basic').DataTable({
                columnDefs: [{
                        width: "20%"
                        , targets: 0
                    }
                    , {
                        width: "15%"
                        , targets: 1
                    }
                    , {
                        width: "20%"
                        , targets: 2
                    }
                    , {
                        width: "15%"
                        , targets: 3
                    }
                    , {
                        width: "30%"
                        , targets: 4
                    }
                ]
                , autoWidth: false // 禁止自動計算列寬
            });
        });

    </script>
    @endsection
