@extends('layouts.app')

@section('content')
@php
    $canCreateRequiredDocument = auth()->check() && auth()->user()->hasPermission('KYC_required_document', 'create');
@endphp
<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item active" aria-current="page">Required Documents</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto"> 
                @if ($canCreateRequiredDocument)
                    <a href="{{ route('userKycDoc.create') }}" class="btn btn-primary">Add Required Document</a>
                @endif
            </div>
        </div>

        <hr />

        <div class="card">
            <div class="card-body">
                <h6 class="mb-3">Required Documents List</h6>

                <div class="table-responsive">
                    <table id="required-documents-table" class="table table-striped table-bordered align-middle" style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Country</th>
                                <th>Document Name</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
      #required-documents-table .rd-doc-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }

    #required-documents-table .rd-doc-row:last-child {
        margin-bottom: 0;
    
    }

    #required-documents-table .rd-doc-name {
       
        font-weight: 600;
        
    }

   

   
    #required-documents-table td {
    vertical-align: top;
}

#required-documents-table .rd-doc-wrap {
    display: flex;
    flex-wrap: wrap;        /* line full hone par next line */
    gap: 6px;
    width: 100%;            /* table column ki full width use kare */
}

#required-documents-table .rd-doc-badge {
    white-space: nowrap;    /* text break nahi hoga */
}
</style>


@include('includes.commonjs')

<script>
    $(function () {
        initBulkActionModule({
            bulkActionUrl: "{{ route('requireDocuments.bulkAction') }}",
            csrfToken: "{{ csrf_token() }}",
            namespace: 'required-documents-index',
            tableSelector: '#required-documents-table',
            dataTableOptions: {
                processing: true,
                serverSide: true,
                ajax: "{{ route('requireDocuments.index') }}",
                order: [[1, 'asc']],
                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'country_name',
                        name: 'country_name'
                    },
                    {
                        data: 'documents',
                        name: 'documents',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'status_badge',
                        name: 'status_badge',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                columnDefs: [
                    {
                        targets: [3, 4],
                        className: 'text-start align-middle'
                    }
                ]
            },
            selectors: {
                singleActionButton: '.single-action-btn',
                statusToggleButton: '.status-toggle-btn'
            }
        });
    });
</script>
@endsection