@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    .row{
        align-items: center;
    }
    #datatable tbody tr td:nth-child(10) {
        white-space: normal;
        word-wrap: break-word;
        max-width: 200px;
    }
    #datatable tbody tr td:nth-child(14),
    #datatable tbody tr td:nth-child(15) {
        white-space: normal;
        word-wrap: break-word;
        max-width: 250px;
    }
    
    #datatable tbody ul {
        display: flex;
    }

    @media only screen and (max-width: 575px) {
        .page-title-right {
            text-align: center;
        }
        div#datatable_length,
        div#datatable_filter {
            text-align: right;
        }
        .mb-3.d-flex {
            width: 200px;
            margin: 0 0 0 auto;
        }
    }
    .tag-status {
        width: 230px;
    }
    
    @media only screen and (max-width: 680px) {
        .page-title-right {
            text-align: center;
        }
        div#datatable_filter,
        div#datatable_length {
            text-align: right;
        }
        .mb-3.d-flex {
            width: 200px;
            margin: 0 0 0 auto;
        }
         
        div#datatable_length {
            text-align: left;
        }
    }

    .client-btn tr td {
        padding: 10px 10px !important;
    }
    .client-btn .btn-primary {
        color: #2762e4 !important;
        background-color: #bcd4ff !important;
        border-color: #bcd4ff !important;
        padding-top: 3px;
        padding-bottom: 3px;
        font-weight: 500;
        font-size: 10px;
    }
    .page-title-box {
        padding-bottom: 12px;
    }
   
</style>

<div class="page-content client-tr">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    @include('../reachassuree_admin/comman/header')
                    <div class="page-title-right">
                        <a type="button" data-bs-toggle="modal" data-bs-target="#modalAddTag" id="addTagBtn" class="btn btn-primary w-md"><i class="bx bx-plus font-size-16 align-middle me-2"></i>Tag</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->  

        <!-- start row -->
        <div class="row">
            <div class="card" id="card">
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-xl-2">
                            <label for="tag" class="form-label" style="align-self: center;">Tag</label>
                            <select class="form-control" name="tag" id="tag"></select>
                        </div>
                        <div class="col-xl-3">
                            <label for="select_riap_plan" class="form-label">Select Plan</label>
                            <select class="form-control select2-ajax" name="select_riap_plan[]" id="select_riap_plan" multiple>
                                <option value="">Select Any Option</option>
                                <option value="Client Registration">Client Registration</option>
                                <option value="Policies Entry">Policies Entry</option>
                                <option value="Documents Upload">Documents Upload</option>
                                <option value="SMS Allotted">SMS Allotted</option>
                            </select>
                        </div>
                        <div class="col-xl-2">
                            <label for="used_unit_count" class="form-label">From Used Unit Count</label>
                            <input type="text" class="form-control" name="used_unit_count" id="used_unit_count" placeholder="From Used Unit Count" value="" autocomplete="off">
                        </div>
                        <div class="col-xl-2">
                            <label for="to_count" class="form-label">To Used Unit Count</label>
                            <input type="text" class="form-control" name="to_count" id="to_count" placeholder="To Used Unit Count" value="" autocomplete="off">
                        </div>
                        <div class="col-md-1">
                            <label class="form-label" for="btnClear">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <button type="button" onclick="clearFilterFields();" class="form-control btn btn-primary" id="btnClear">Clear</button>
                        </div>
                        <div class="col-xl-2 float-end pt-3">
                            <div class="float-end">
                                <input type="hidden" name="token" value='