@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;">

                    <div class="card-body">
                        <form action="{{route('admin.promocode.create')}}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <h5 class="card-header">輸入檔案</h5>
                            <div class="card-body">
                                <div class="mb-4">
                                    <label for="formFile" class="form-label">檔案類型 excels</label>
                                    <input class="form-control" name="file" type="file" id="formFile">
                                </div>


                            </div>

                            <button type="submit" class="btn btn-primary">Send</button>
                        </form>
                    </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: 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><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