
<style>
    #floating_btns{
        display: none;
    }
    @media only screen and (max-width: 991.98px) {
        .title{
            width: 25%
        }
    }

    .agency-container {
        width: 94%;
        max-width: 1600px;
        margin: 0 auto;
    }
    .agency-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 6px 24px rgba(74, 20, 129, 0.10);
        overflow: hidden;
    }
    .agency-card-header {
        padding: 24px 28px;
        border-bottom: 1px solid #eee;
    }
    .agency-card-header h3 {
        margin: 0;
        color: #4a1481;
        font-size: 26px;
    }
    .agency-card-header p {
        margin: 4px 0 0;
        color: #6c757d;
        font-size: 16px;
    }
    .agency-table {
        margin-bottom: 0;
    }
    .agency-table thead th {
        background: #4a1481;
        color: #fff;
        border: none;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 0.3px;
        white-space: nowrap;
        padding: 16px 20px;
    }
    .agency-table tbody td {
        vertical-align: middle;
        padding: 16px 20px;
        font-size: 16px;
        border-top: 1px solid #f0edf3;
    }
    .agency-table tbody tr:nth-child(even) {
        background: #f9f7fb;
    }
    .agency-table tbody tr:hover {
        background: #f1eaf8;
    }
    .agency-table .agency-name {
        font-weight: 600;
        font-size: 17px;
        color: #212529;
    }
    .agency-table a {
        color: #4a1481 !important;
        word-break: break-all;
    }
    .agency-table a:hover {
        color: #f89010 !important;
        text-decoration: none;
    }
    .agency-badge {
        display: inline-block;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }
    .agency-badge-collection {
        background: #fff1e0;
        color: #c46d00;
    }
    .agency-badge-legal {
        background: #ece3f6;
        color: #4a1481;
    }
    .agency-code {
        font-family: monospace;
        font-size: 16px;
    }
</style>

<main class="horizontal_scroll">

    @include('front.layouts.header')

<!-- Page Title
			============================================= -->
    <section id="slider" class="slider-element slider-parallax swiper_wrapper clearfix cover_size">
        <div class="slider-parallax-inner cover_image_size">
            <div class="swiper-container swiper-parent">
                    <div class="swiper-slide dark" style="background-image: url('/assets/front/img/others/kyc-policy.jpg');">
                        <div class="container clearfix">
                            <div class="slider-caption topmargin">
                            <h1 class="title">Collection Outsourced Agency List</h1>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Content
    ============================================= -->
    <section id="content">

        <div class="content-wrap clearfix">

            <div class="container-fluid agency-container clearfix">
                <div class="agency-card">
                    <div class="agency-card-header">
                        <h3>List of Empanelled Agencies</h3>
                    </div>
                    <div class="table-responsive">
                        <table class="table agency-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Agency Name</th>
                                    <th>Agency Type</th>
                                    <th>Mobile No</th>
                                    <th>Email Id</th>
                                    <th>Agency Code</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($agencies as $index => $agency)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td class="agency-name">{{ $agency['name'] }}</td>
                                        <td>
                                            <span class="agency-badge {{ $agency['type'] === 'Legal Partner' ? 'agency-badge-legal' : 'agency-badge-collection' }}">
                                                {{ $agency['type'] }}
                                            </span>
                                        </td>
                                        <td><a href="tel:+91{{ $agency['mobile'] }}">{{ $agency['mobile'] }}</a></td>
                                        <td><a href="mailto:{{ $agency['email'] }}">{{ $agency['email'] }}</a></td>
                                        <td class="agency-code">{{ $agency['code'] }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Go To Top
    ============================================= -->
    <div id="gotoTop" class="icon-angle-up"></div>

    <!-- External JavaScripts
    ============================================= -->
    <script src="/HTML/js/jquery.js"></script>
    <script src="/HTML/js/plugins.js"></script>

    <!-- Footer Scripts
    ============================================= -->
    <script src="/HTML/js/functions.js"></script>

</main>

@include('front.layouts.footer')
