@extends('admin.layouts.admin')
@section('title', 'Danh sách nền tảng')

@section('content')
    <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 NỀN TẢNG</div>
                </div>
                <div class="card-body py-2">
                    <ul class="nav nav-pills nav-primary mb-3" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link active" id="list-tab" data-bs-toggle="tab" href="#list" role="tab"
                                aria-selected="true">
                                <i class="fad fa-list me-2"></i>Danh Sách
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="new-tab" data-bs-toggle="tab" href="#new" role="tab"
                                aria-selected="false" tabindex="-1">
                                <i class="fad fa-receipt me-2"></i>Tạo Mới
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="list" role="tabpanel">
                    
                        <div class="card-body">
                            <form action="">
                                <div class="row">
                                    <div class="col-md-8">
                                        <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-4">
                                        <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="fad fa-search"></i> Tìm kiếm
                                            </button>
                                            <a href="{{ route('admin.service.platform') }}" class="btn btn-secondary w-100">
                                                <i class="fa fa-rotate-right"></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>Thứ tự</th>
                                            <th>Tên nền tảng</th>
                                            <th>Đường dẫn</th>
                                            <th>Biểu tượng</th>
                                            <th>Trạng thái</th>
                                            <th>Ngày tạo</th>
                                        </tr>
                                    </thead>
                                    <tbody class="fw-bold">
                                        @if ($platforms->isEmpty())
                                            @include('admin.components.table-search-not-found', [
                                                'colspan' => 8,
                                            ])
                                        @else
                                            @foreach ($platforms as $platform)
                                                <tr>
                                                    <td>{{ $platform->id }}</td>
                                                    <td>
                                                        <a href="{{ route('admin.service.platform.edit', ['id' => $platform->id]) }}"
                                                            class="btn btn-sm btn-success"
                                                            data-bs-toggle="tooltip" title="Xem chi tiết">
                                                            <i class="fad fa-eye"></i>
                                                        </a>
                                                        <a href="javascript:void(0);"
   class="btn btn-sm btn-danger"
   onclick="confirmDelete('{{ route('admin.service.platform.delete', ['id' => $platform->id]) }}')">
    <i class="fad fa-trash"></i>
</a>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(url) {
        Swal.fire({
            title: "Bạn có chắc chắn muốn xóa?",
            text: "Hành động này không thể hoàn tác!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Xóa",
            cancelButtonText: "Hủy"
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = url;
            }
        });
    }
</script>

                                                    </td>
                                                    <td>
                                                        <span
                                                            class="badge fs-6 fw-bold bg-success">{{ $platform->order }}</span>
                                                    </td>
                                                    <td>{{ $platform->name }}</td>
                                                    <td>{{ $platform->slug }}</td>
                                                    <td>
                                                        <img src="{{ $platform->image }}" alt="{{ $platform->name }}"
                                                            class="img-fluid" style="max-width: 50px">
                                                    </td>
                                                    <td>
                                                        @if ($platform->status == 'active')
                                                            <span class="badge bg-success">Hoạt động</span>
                                                        @else
                                                            <span class="badge bg-danger">Không hoạt động</span>
                                                        @endif
                                                    </td>
                                                    <td>{{ $platform->created_at }}</td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>
                                <div class="d-flex justify-content-center align-items-center">
                                    {{ $platforms->appends(request()->all())->links('pagination::bootstrap-4') }}
                                </div>
                            </div>
                        
                    </div>
                </div>
                <div class="tab-pane fade" id="new" role="tabpanel">
                     
                        <div class="card-body">
                            <form action="{{ route('admin.service.platform.create') }}" method="POST">
                                @csrf
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" name="name"
                                        placeholder="Tên nền tảng của dịch vụ" value="{{ old('name') }}">
                                    <label for="name">Tên nền tảng</label>
                                </div>
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" name="slug"
                                        placeholder="Đường dẫn của nền tảng" value="{{ old('slug') }}">
                                    <label for="slug">Đường dẫn</label>
                                </div>
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" name="image" placeholder="Nhập hình ảnh"
                                        value="{{ old('image') }}">
                                    <label for="image">Hình ảnh</label>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-primary col-12">
                                        <i class="fas fa-save"></i> Thêm mới
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
           
                </div>
            </div>
        </div>
        
    </div>
@endsection