@extends('admin.layouts.app')
@section('title', 'Routes')
@section('content')
    <div class="row">
        <div class="col-md-12">

            @include('admin.includes.alerts')
            <div class="mb-3 card">
                <div class="card-body">
                    <ul class="tabs-animated-shadow nav-justified tabs-animated nav">
                        <li class="nav-item">
                            <a role="tab" class="nav-link active" id="tab-c1-0" data-toggle="tab" href="#tab-animated1-0">
                                <span class="nav-text">AGENT PROFILE</span>
                            </a>
                        </li>

                        <li class="nav-item">
                            <a role="tab" class="nav-link" id="tab-c1-3" data-toggle="tab" href="#tab-animated1-3">
                                <span class="nav-text">SUB AGENTS</span>
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <br>
                        <div class="tab-pane active" id="tab-animated1-0" role="tabpanel">
                            <!-- Profile Section -->
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-body text-center">
                                            <img src="{{ asset('images/agent-dp.png') }}" alt="Profile Picture"
                                                class="img-fluid rounded-circle mb-3">
                                            <h4 class="card-title">{{ $agent->name }}</h4>
                                            <p class="card-text">{{ $agent->email }}</p>
                                            <p class="card-text"><strong>Role :</strong>
                                                @if ($agent->is_supervisor == 1)
                                                    Supervisor Agent
                                                @else
                                                    Normal Agent
                                                @endif
                                            </p>
                                            <p class="card-text">
                                                @if ($agent->type == 1)
                                                    <span class="mb-2 mr-2 badge badge-dark">Non Commision</span>
                                                @elseif($agent->type == 2)
                                                    <span class="mb-2 mr-2 badge badge-success">Commision Based</span>
                                                @else
                                                    <span class="mb-2 mr-2 badge badge-danger">Supervisor</span>
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5 class="card-title">Profile Details</h5>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="control-label"><strong>Full Name:</strong></label>
                                                    <p>{{ $agent->name }}</p>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="control-label"><strong>Email:</strong></label>
                                                    <p>{{ $agent->email }}</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="control-label"><strong>Phone Number:</strong></label>
                                                    <p>{{ $agent->msisdn }}</p>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="control-label"><strong>Address:</strong></label>
                                                    <p>{{ $agent->address }}</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12 d-flex">
                                                    {!! Form::open([
                                                        'style' => 'display: inline-block;',
                                                        'method' => 'GET',
                                                        'route' => ['agents.edit', $agent->agent],
                                                    ]) !!}
                                                    {!! Form::submit('Edit Profile', ['class' => 'mb-2 mr-2 btn btn-sm btn-primary']) !!}
                                                    {!! Form::close() !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Additional Sections (Tabs or Accordions) -->
                                    {{-- <div class="mt-4">
                                        <ul class="nav nav-tabs" id="profileTabs" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" id="account-settings-tab" data-toggle="tab"
                                                    href="#account-settings" role="tab" aria-controls="account-settings"
                                                    aria-selected="true">Account Settings</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" id="activity-log-tab" data-toggle="tab"
                                                    href="#activity-log" role="tab" aria-controls="activity-log"
                                                    aria-selected="false">Activity Log</a>
                                            </li>
                                        </ul>
                                        <div class="tab-content" id="profileTabsContent">
                                            <div class="tab-pane fade show active" id="account-settings" role="tabpanel"
                                                aria-labelledby="account-settings-tab">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <!-- Account Settings Form -->
                                                        <form>
                                                            <div class="form-group">
                                                                <label for="username">Username</label>
                                                                <input type="text" class="form-control" id="username"
                                                                    value="john.doe">
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="password">Password</label>
                                                                <input type="password" class="form-control" id="password"
                                                                    placeholder="Enter new password">
                                                            </div>
                                                            <button type="submit" class="btn btn-primary">Save
                                                                Changes</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="activity-log" role="tabpanel"
                                                aria-labelledby="activity-log-tab">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <!-- Activity Log -->
                                                        <ul>
                                                            <li>Logged in at 9:00 AM on August 9, 2024</li>
                                                            <li>Updated profile picture at 10:30 AM on August 8, 2024</li>
                                                            <!-- More log entries -->
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div> --}}

                                </div>
                            </div>
                        </div>


                        <div class="tab-pane" id="tab-animated1-3" role="tabpanel">
                            <div class="pull-right" style="margin-top: 15px; margin-bottom: 15px;">
                                @if ($agent->is_supervisor == 1)
                                    {!! Form::open([
                                        'style' => 'display: inline-block;',
                                        'method' => 'GET',
                                        'onsubmit' => "return confirm('" . trans("Print Supervisor's Agents?") . "');",
                                        'route' => ['agents.print', $agent->agent],
                                    ]) !!}
                                    {!! Form::submit('Print', ['class' => 'mb-2 mr-2 btn btn-sm btn-primary']) !!}
                                    {!! Form::close() !!}
                                @endif
                            </div>
                            <table style="width: 100%;"
                                class="table table-responsive table-hover table-striped table-bordered">

                                <thead>
                                    <tr>
                                        <th width="2%">#</th>
                                        <th width="8%">Name</th>
                                        <th width="8%">Phone Number</th>
                                        <th width="5%">Address</th>
                                        <th width="5%">Type</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($sub_agents as $index => $sub_agent)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $sub_agent->name }}</td>
                                            <td>{{ $sub_agent->msisdn }}</td>
                                            <td>{{ $sub_agent->address }}</td>
                                            <td>
                                                @if ($sub_agent->type == 1)
                                                    <span class="mb-2 mr-2 badge badge-dark">Non Commision</span>
                                                @elseif($sub_agent->type == 2)
                                                    <span class="mb-2 mr-2 badge badge-success">Commision Based</span>
                                                @else
                                                    <span class="mb-2 mr-2 badge badge-danger">Supervisor</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5">
                                                No Sub Agent Found!
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="d-block text-center card-footer">
                    <a href="{{ route('Agents') }}" class="btn-wide btn btn-link">BACK</a>

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