@extends('admin.layouts.layout')

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
@endsection

@section('content')
<div class="customer-agent-type-index">
<div class="mb-4">    
    <div class="servicestitle">
        <h3>{{ $module }}</h3>
        <div class="services_searchbtn d-flex align-items-center gap-2 ms-auto">
            <div class="contact_btns">
                @if($permission['create'])
                <a href="{{ route($routePrefix . '.create') }}" class="add_btn btn">
                    <img src="{{ asset('images/add.svg') }}"> Add {{ $module }}
                </a>
                @endif
            </div>
        </div>
    </div>

    <div class="service_contentarea">
        @if(isset($data) && count($data) > 0)
        <table class="table service_table" id="agent-type-table">
            <thead>
                <tr>
                    <th>Type Title</th>
                    <th>User Category</th>
                    @foreach($customer_agent_type_options as $option)
                    <th class="text-center">{{ $option->option }}</th>
                    @endforeach
                    @if($permission['edit'])
                    <th class="text-center">Action</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @foreach($data as $key => $type)
                <tr>
                    <td>
                        <strong>{{ $type->title }}</strong>
                    </td>
                    <td>
                        <span class="badge bg-info">{{ $type->userType ? $type->userType->name : 'N/A' }}</span>
                    </td>
                    @php
                    $settings = is_string($type->settings) ? json_decode($type->settings, true) : $type->settings;
                    @endphp

                    @foreach($customer_agent_type_options as $option)
                    <td class="text-center">
                        @if(is_array($settings) && isset($settings[$option->id]))
                        <span class="text-success"><i class="fas fa-check-circle"></i></span>
                        @else
                        <span class="text-danger"><i class="fas fa-times-circle"></i></span>
                        @endif
                    </td>
                    @endforeach
                    @if($permission['edit'])
                    <td class="text-center">
                        <a href="{{ route($routePrefix . '.edit', $type->id) }}" class="btn btn-sm" title="Edit Type">
                            <img src="{{ asset('images/edit.svg') }}" alt="Edit">
                        </a>
                    </td>
                    @endif
                </tr>
                @endforeach
            </tbody>
        </table>
        @if($data->hasPages())
        <div class="pagination-container">
            {!! $data->appends(request()->query())->links() !!}
        </div>
        @endif
        @else
        <div class="alert alert-info">
            <div class="text-center py-4">
                <div class="text-muted">No records found.</div>
            </div>
        </div>
        @endif
    </div>
</div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Make sure Font Awesome is loaded
        if (!document.querySelector('link[href*="font-awesome"]')) {
            const fontAwesomeLink = document.createElement('link');
            fontAwesomeLink.rel = 'stylesheet';
            fontAwesomeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css';
            document.head.appendChild(fontAwesomeLink);
        }
    });
</script>
@endsection