@extends('layouts.master')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <!-- Toastify CSS -->
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <!-- Page Header -->
    <div class="d-flex align-items-center justify-content-between page-header-breadcrumb flex-wrap gap-2">
        <div>
            <nav>
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Payout</a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Setting</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Withdraw Categories</li>
                </ol>
            </nav>
            <h1 class="page-title fw-medium fs-18 mb-0">Withdraw Categories</h1>
        </div>

    </div>
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="">
                <x-slot name="header">
                    <div class="card-title d-flex gap-2">
                        <x-form.dropdown label="Bulk Actions" class="bulk-actions">
                            <li><a class="dropdown-item" href="#" id="enable" data-id="payout_cat">Active</a></li>
                            <li><a class="dropdown-item" href="#" id="disable" data-id="payout_cat">Disable</a></li>
                        </x-form.dropdown>
                        <div>
                            <input class="form-control" type="text" id="search" placeholder="Search Here"
                                aria-label=".form-control-sm example">
                        </div>
                    </div>
                    <a href="{{route("admin.payout.cat.create")}}" class="btn btn-primary btn-wave align-items-center add-cat">
                            <i class="ri-add-line me-1 align-middle"></i>Add Category
                        </a>
                </x-slot>

                @php
                    $columns = [
                        ['checkbox' => true, 'class' => 'ps-4'],
                        ['label' => 'Category'],
                        ['label' => 'Status'],
                        ['label' => 'Action'],
                    ];
                @endphp

                <x-ui.table id="data_table" :columns="$columns"></x-ui.table>
            </x-ui.card>
        </div>
    </div>

@endsection

@section('scripts')
    @include('layouts.components.common-script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    @vite('resources/assets/js/modal.js')
    @vite('resources/assets/js/select2.js')

    <script>
        $(document).ready(function() {
            const table = new DataTableUtility('data_table', "{{ route('admin.payout.cat.data') }}", {

            }, [{
                    data: 'id',
                    orderable: false,
                    render: function(data, type, row) {
                        return `<input class="form-check-input sub_chk" type="checkbox" id="checkboxNoLabeljob22" data-id="${data}" value="${data}">`;
                    }
                },
                {
                    data: 'title',
                    render: function(data, type, row) {
                        return `<div class="d-flex">
                                <span class="avatar avatar-md border p-1 bg-light">
                                    <img src="{{ asset('uploads/') }}/` + row.image + `" alt="">
                                </span>
                                <div class="ms-2">
                                    <p class="fw-medium fs-14 mt-2 d-flex align-items-center">` + data + `</p>
                                </div>
                            </div>`;
                    }
                },
                {
                    data: 'status',
                    render: function(data, type, row) {
                        return (data == 1) ?
                            `<span class="badge fw-semibold badge-pill bg-success-transparent text-success fs-11">Active</span>` :
                            `<span class="badge fw-semibold badge-pill bg-danger-transparent text-danger fs-11">Inactive</span>`;
                    }
                },
                {
                    data: null,
                    orderable: false,
                    render: function(data, type, row) {
                        return `
                            <a href="/admin/payout/settings/withdrawal-categories/edit/`+row.id+`" class="btn btn-icon btn-sm btn-info-light btn-wave waves-effect waves-light edit-cat" id="${row.id}">
                                <i class="ri-edit-line"></i>
                            </a>
                            <a href="javascript:void(0);" id="` + row.id + `" data-id="withdraw_cat" class="joblist-btn btn btn-icon btn-sm btn-primary2-light btn-wave waves-effect waves-light deleteItem">
                                <i class="ri-delete-bin-line"></i>
                            </a>`;
                    }
                }
            ]);
            table.initialize();

        });

    </script>
@endsection