@extends('admin.layouts.master')
@section('style')
    <style>
        .table {
            vertical-align: middle !important;
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Danh sách mã bảo hành</h4>

                <div class="page-title-right">
                    <a href="{{ route('admin.product_details.create') }} "><button
                            class="btn btn-primary btn-sm float-end mb-2 me-3">Thêm
                            mới</button></a>
                </div>

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


    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="GET" action="{{ route('admin.product_details.index') }}" class="mb-3">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label">Mã bảo hành</label>
                                <input type="text" name="code" class="form-control" placeholder="Nhập mã bảo hành" value="{{ $filters['code'] ?? '' }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Sản phẩm</label>
                                <select name="product_id" class="form-select select2" onchange="this.form.submit()">
                                    <option value="">-- Tất cả sản phẩm --</option>
                                    @foreach($products as $product)
                                        <option value="{{ $product->id }}" {{ (isset($filters['product_id']) && $filters['product_id'] == $product->id) ? 'selected' : '' }}>
                                            {{ $product->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Trạng thái</label>
                                <select name="active" class="form-select" onchange="this.form.submit()">
                                    <option value="">-- Tất cả trạng thái --</option>
                                    <option value="1" {{ (isset($filters['active']) && $filters['active'] == '1') ? 'selected' : '' }}>Chưa kích hoạt</option>
                                    <option value="2" {{ (isset($filters['active']) && $filters['active'] == '2') ? 'selected' : '' }}>Đã kích hoạt</option>
                                    <option value="3" {{ (isset($filters['active']) && $filters['active'] == '3') ? 'selected' : '' }}>Chờ KH kích hoạt</option>
                                </select>
                            </div>
                            <div class="col-md-3 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary me-2">
                                    <i class="bx bx-search-alt"></i> Lọc
                                </button>
                                <a href="{{ route('admin.product_details.index') }}" class="btn btn-secondary">
                                    <i class="bx bx-reset"></i> Xóa lọc
                                </a>
                            </div>
                        </div>
                    </form>

                    <table class="table table-bordered text-center dt-responsive  nowrap w-100">
                        <thead class="text-center">
                            <tr>
                                <th class="text-center">ID</th>
                                <th class="text-center">Tên sản phẩm</th>
                                <th class="text-center">Ảnh</th>
                                <th class="text-center">Mã bảo hành</th>
                                <th class="text-center">Trạng thái</th>
                                <th class="text-center">Thao tác</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($productDetails as $productDetail)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>

                                    <td>{{ $productDetail->product->name }}</td>
                                    <td><img width="100" height="100"
                                            src="{{ $productDetail->product->image && Storage::exists($productDetail->product->image) ? Storage::url($productDetail->product->image) : asset('images/logomini.png') }}"
                                            alt=""></td>
                                    <td>{{ $productDetail->code }}</td>
                                    <td>
                                        @switch($productDetail->active)
                                            @case(1)
                                                <span class="badge bg-primary">Chưa kích hoạt</span>
                                            @break

                                            @case(2)
                                                <span class="badge bg-success">Đã kích hoạt</span>
                                            @break

                                            @case(3)
                                                <span class="badge bg-danger">Chờ KH kích hoạt</span>
                                            @break

                                            @default
                                                <span class="badge bg-dark">Không rõ thông tin</span>
                                        @endswitch

                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('admin.product_details.edit', $productDetail) }}" class="btn btn-warning btn-sm">Sửa</a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <div >
                        {{ $productDetails->links() }}
                    </div>

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

@section('script')
@endsection