@extends('admin.layouts.admin')
@section('title', 'Cấu hình voucher giảm giá')

@section('content')

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="ribbon ribbon-primary ribbon-clip">CẤU HÌNH MÃ  VOUCHER</div>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.voucher.create') }}" method="POST"> 
                    @csrf
                    <div class="form-floating mb-3">

                        <div>

                            <div class="input-group mb-3">

                                <input type="text" name="name" id="name" class="form-control" placeholder="Nhập dữ liệu"
                                    value="">
                                <button type="button" id="generateButton" class="btn btn-success "><i
                                        class="ti ti-shuffle"></i> Tạo mã voucher ngẫu
                                    nhiên</button>
                            </div>




                        </div>




                    </div>
                    <div class="form-floating mb-3">
                        <input type="number" name="percent" id="percent" class="form-control" placeholder="Nhập dữ liệu"
                            value="">
                        <label for="percent">Phần trăm giảm giá</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="number" name="limitUser" id="limitUser" class="form-control"
                            placeholder="Nhập dữ liệu" value="">
                        <label for="limitUser">Giới hạn lượt sử dụng (nhập 0 sẽ là không giới hạn)</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" name="user_voucher" id="user_voucher" class="form-control"
                            placeholder="Nhập dữ liệu" value="">
                        <label for="user_voucher">Người dùng cụ thể (mỗi người dùng cách bởi dấu |) (nhập 0 sẽ là tất cả
                            thành viên)</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="date" name="timeStart" id="timeStart" class="form-control"
                            placeholder="Nhập dữ liệu" value="">
                        <label for="timeStart">Ngày bắt đầu sử dụng voucher</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="date" name="timeEnd" id="timeEnd" class="form-control" placeholder="Nhập dữ liệu"
                            value="">
                        <label for="timeEnd">Ngày kết thúc sử dụng voucher</label>
                    </div>
                    
 
                    <div class="form-floating mb-3">
                        <select name="status" id="status" class="form-control">
                            <option value="active" >
                                Hoat động
                            </option>
                            <option value="inactive">
                                Không hoạt động
                            </option>
                        </select>
                        <label for="status">Trạng thái</label>
                    </div>
 
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-save"></i>
                            Lưu cấu hình
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



<div class="row">
    <div class="col-md-12">
 
                    <div class="card">
                        <div class="card-header">
                            <div class="ribbon ribbon-primary ribbon-clip">DANH SÁCH MÃ  VOUCHER</div>
                        </div>
                        <div class="card-body">
                            <form action="">
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Tìm kiếm dữ liệu"
                                                name="search" value="{{ request()->search }}">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group d-flex justify-content-between align-items-center gap-2">
                                            <button type="submit" class="btn btn-primary w-100">
                                                <i class="ti ti-search"></i> Tìm kiếm
                                            </button>
                                            <a href="{{ route('admin.voucher') }}" class="btn btn-secondary w-100">
                                                <i class="ti ti-rotate-clockwise"></i> Làm mới
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="table-responsive">
                                <table class="table table-hover table-vcenter text-center mb-0">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Thao tác</th>
                                             
                                            <th>Mã voucher</th>
                                            <th>Phần trăm giảm giá</th>
                                            <th>Thời gian bắt đầu</th>
                                            <th>Thời gian kết thúc</th>
                                             <th>Trạng thái</th>
                                            <th>Ngày tạo</th>
                                        </tr>
                                    </thead>
                                    <tbody class="fw-bold">
                                        @if ($vouchers->isEmpty()) 
                                            @include('admin.components.table-search-not-found', [ 
                                                'colspan' => 8,
                                            ])
                                        @else
                                            @foreach ($vouchers as $vouch)
                                                <tr>
                                                    <td>{{ $vouch->id }}</td>
                                                    <td>
                                                        
                                                        <form action="{{ route('admin.voucher.delete', $vouch->id) }}" method="POST" style="display: inline;">
                                        @csrf
                                        <button type="submit" class="btn btn-danger btn-sm" data-bs-toggle="tooltip" title="Xóa"><i class="fad fa-trash"></i></button>
                                    </form>
                                                        
                                                    </td>
                                                     
                                                    <td>{{ $vouch->name }}</td>
                                                    <td>{{ $vouch->percent }} %</td>
                                                    <td>{{ $vouch->timeStart }}</td>
                                                    <td>{{ $vouch->timeEnd }}</td>
                                                    <td>{!! statusVoucher($vouch->status) !!}</td> 
                                                    <td>{{ $vouch->created_at }}</td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>
                                <div class="d-flex justify-content-center align-items-center">
                                    {{ $vouchers->appends(request()->all())->links('pagination::bootstrap-4') }}
                                </div>
                            </div>
                        </div>
                    </div>
                 
</div>
@endsection

@section('script')

<script>

    function generateRandomString() {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';
        let result = '';
        for (let i = 0; i < 8; i++) {
            result += characters.charAt(Math.floor(Math.random() * characters.length));
        }
        return result;
    }

    document.getElementById('generateButton').addEventListener('click', function () {
        const randomString = generateRandomString(); // Gọi hàm để sinh chuỗi ngẫu nhiên
        document.getElementById('name').value = randomString; // Đặt giá trị cho ô input
    });
</script>

@endsection