@extends('layouts/user_type/auth')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <div class="d-flex flex-row justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0">Tools</h5>
                        </div>

                        {{-- Replace this single <a> tag with a Bootstrap dropdown --}}
                        <div class="dropdown">
                            <button class="btn bg-gradient-primary btn-sm dropdown-toggle" type="button"
                                id="createToolDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                +&nbsp; Create tool
                            </button>

                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="createToolDropdown">
                                <a class="dropdown-item d-flex align-items-center"
                                    href="{{ route('tool.createTool', ['type' => 'transfer-call', 'id' => $user_id]) }}">
                                    <i class="fa fa-phone me-2"></i>
                                    TransferCall
                                </a>

                                <li>
                                    <a class="dropdown-item d-flex align-items-center" href="{{ route('tool.createTool', ['type' => 'google-calendar', 'id' => $user_id]) }}">
                                        <i class="fa fa-calendar me-2"></i>
                                        Google Calendar
                                    </a>
                                </li>
                                 <li>
                                    <a class="dropdown-item d-flex align-items-center" href="{{ route('tool.createTool', ['type' => 'google-sheet', 'id' => $user_id]) }}">
                                        <i class="fa fa-calendar me-2"></i>
                                        Google Sheet
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item d-flex align-items-center text-nowrap"
                                        href="{{ route('tool.createTool', ['type' => 'google-calendar-check', 'id' => $user_id]) }}">
                                        <i class="fa fa-calendar-check-o me-2"></i>
                                        Google Calendar Check Availability
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item d-flex align-items-center" href="{{ route('tool.createTool', ['type' => 'ghl-calendar', 'id' => $user_id]) }}">
                                        <i class="fa fa-calendar-plus-o me-2"></i>
                                        GHL Calendar
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item d-flex align-items-center" href="{{ route('tool.createTool', ['type' => 'query', 'id' => $user_id]) }}">
                                        <i class="fa fa-search me-2"></i>
                                        Query
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item d-flex align-items-center" href="{{ route('tool.createTool', ['type' => 'send-text', 'id' => $user_id]) }}">
                                        <i class="fa fa-paper-plane me-2"></i>
                                        Send Text
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item d-flex align-items-center" href="{{ route('tool.createTool', ['type' => 'dtmf', 'id' => $user_id]) }}">
                                        <i class="fa fa-keyboard-o me-2"></i>
                                        DTMF
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item d-flex align-items-center" href="{{ route('tool.createTool', ['type' => 'end-call', 'id' => $user_id]) }}">
                                        <i class="fa fa-phone-slash me-2"></i>
                                        End Call
                                    </a>
                                </li>
                            </ul>

                        </div>
                        {{-- End of dropdown --}}
                    </div>
                </div>

                <div class="card-body px-0 pt-0 pb-2">
                    <ul class="nav nav-tabs mx-4 mt-3" id="userTabs" role="tablist">
                        {{-- … your existing tab markup … --}}
                    </ul>

                    <div class="tab-content p-4" id="userTabsContent">
                        <div class="tab-pane fade show active" id="assistanttab1" role="tabpanel">
                            <div class="table-responsive table-responsive-custom1">
                                <table class="table mb-0" id="customerTable">
                                    <thead>
                                        <tr>
                                            <th style="padding: 0.5rem 0.5rem !important;">ID</th>
                                            <th style="padding: 0.5rem 0.5rem !important;">Name</th>
                                            <th style="padding: 0.5rem 0.5rem !important;">Description</th>
                                            <th style="padding: 0.5rem 0.5rem !important;">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($tools as $tool)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $tool->tool_name }}</td>
                                                <td>{{ $tool->tool_description }}</td>
                                                <td>
                                                    <div class="d-flex">
                                                        {{-- Edit: open the same create‐tool form with “transfer-call” --}}
                                                        <a href="{{ route('tool.edit-tool', $tool->id) }}">
                                                            <i class="fa fa-pencil-square-o me-2"></i>
                                                        </a>
                                                        {{-- (Trash can remain unchanged, or you can wire it up later) --}}
                                                        <a href="">
                                                            <i class="fa fa-trash me-2"></i>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                            </div>
                        </div>

                        <div class="tab-pane fade" id="assistanttab2" role="tabpanel">
                            <div class="table-responsive table-responsive-custom2">
                                <table class="table align-items-center mb-0" id="adminTable">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Role</th>
                                            <th>Creation Date</th>
                                            <th>Verified</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection