@extends('layouts.app')

@section('content')
<style type="text/css">
  .apexcharts-flip-y{transform:scaleY(-1) translateY(-100%);transform-origin:top;transform-box:fill-box;}
  .apexcharts-flip-x{transform:scaleX(-1);transform-origin:center;transform-box:fill-box;}
  .apexcharts-legend{display:flex;overflow:auto;padding:0 10px;}
  .apexcharts-legend.apx-legend-position-bottom,.apexcharts-legend.apx-legend-position-top{flex-wrap:wrap}
  .apexcharts-legend.apx-legend-position-right,.apexcharts-legend.apx-legend-position-left{flex-direction:column;bottom:0;}
  .apexcharts-legend.apx-legend-position-bottom.apexcharts-align-left,.apexcharts-legend.apx-legend-position-top.apexcharts-align-left,.apexcharts-legend.apx-legend-position-right,.apexcharts-legend.apx-legend-position-left{justify-content:flex-start;}
  .apexcharts-legend.apx-legend-position-bottom.apexcharts-align-center,.apexcharts-legend.apx-legend-position-top.apexcharts-align-center{justify-content:center;}
  .apexcharts-legend.apx-legend-position-bottom.apexcharts-align-right,.apexcharts-legend.apx-legend-position-top.apexcharts-align-right{justify-content:flex-end;}
  .apexcharts-legend-series{cursor:pointer;line-height:normal;display:flex;align-items:center;}
  .apexcharts-legend-text{position:relative;font-size:14px;}
  .apexcharts-legend-text *,.apexcharts-legend-marker *{pointer-events:none;}
  .apexcharts-legend-marker{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-right:1px;}
  .apexcharts-legend-series.apexcharts-no-click{cursor:auto;}
  .apexcharts-legend .apexcharts-hidden-zero-series,.apexcharts-legend .apexcharts-hidden-null-series{display:none!important;}
  .apexcharts-inactive-legend{opacity:.45;}
</style>
<div class="d-flex flex-column flex-root app-root" id="kt_app_root">
         <!--begin::Page-->
         <div class="app-page flex-column flex-column-fluid" id="kt_app_page">
            <!--begin::Wrapper-->
            <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
<div class="d-flex flex-column flex-column-fluid" style="margin-top: -4%;">
  <!--begin::Toolbar-->
  <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
      <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Agency Account Overview</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
          <li class="breadcrumb-item text-muted">
            <a href="index.html" class="text-muted text-hover-primary">Home</a>
          </li>
          <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
          <li class="breadcrumb-item text-muted">Account</li>
        </ul>
      </div>
    </div>
  </div>
  <!--end::Toolbar-->

  <div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">

      <!--begin::Navbar / Header card-->
      <div class="card mb-5 mb-xl-10">
        <div class="card-body pt-9 pb-0">
          <!--begin::Details-->
          <div class="d-flex flex-wrap flex-sm-nowrap">
            <!--begin: Pic-->
            <div class="me-7 mb-4">
              <div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative">
                <img src="{{ isset($agentdetails) && $agentdetails->full_name ? asset('uploads/' . $agentdetails->full_name) : 'https://cdn-icons-png.flaticon.com/512/149/149071.png' }}"
                     alt="image"
                     onerror="this.onerror=null;this.src='https://cdn-icons-png.flaticon.com/512/149/149071.png';">
                <div class="position-absolute translate-middle bottom-0 start-100 mb-6 bg-success rounded-circle border border-4 border-body h-20px w-20px"></div>
              </div>
            </div>
            <!--end::Pic-->

            <!--begin::Info-->
            <div class="flex-grow-1">
              <!--begin::Title-->
              <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                <div class="d-flex flex-column">
                  <div class="d-flex align-items-center mb-2">
                    <a href="#" class="text-gray-900 text-hover-primary fs-2 fw-bold me-1">{{$agentdetails->full_name}}</a>
                    <a href="#"><i class="ki-duotone ki-verify fs-1 text-primary"><span class="path1"></span><span class="path2"></span></i></a>
                  </div>
                  <div class="d-flex flex-wrap fw-semibold fs-6 mb-4 pe-2">
                     <a href="#" class="d-flex align-items-center text-gray-500 text-hover-primary mb-2">
                      <i class="ki-duotone ki-sms fs-4"></i> {{$agentdetails->email}}
                    </a>
                    
                  </div>
                </div>
                 <div class="card-header cursor-pointer">
              <div class="card-title m-0">
                
              </div>
             
              <a href="{{ route('agent.form', ['id' => auth()->id()]) }}"  class="btn btn-sm btn-primary align-self-center"><i class="fa fa-edit"></i> Edit Agent Details</a>
            </div>
              </div>
              <!--end::Title-->

              
              <!--end::Stats-->
            </div>
            <!--end::Info-->
          </div>
          <!--end::Details-->

          <!--begin::Tabs-->
          <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold" id="profileTabs" role="tablist">
  <li class="nav-item mt-2">
    <a class="nav-link text-active-primary ms-0 me-10 py-5 active"
       id="tab-overview-tab"
       data-bs-toggle="tab"
       href="#tab-overview"
       role="tab"
       aria-controls="tab-overview"
       aria-selected="true">Basic Information</a>
  </li>
  <li class="nav-item mt-2">
    <a class="nav-link text-active-primary ms-0 me-10 py-5"
       id="tab-settings-tab"
       data-bs-toggle="tab"
       href="#tab-settings"
       role="tab"
       aria-controls="tab-settings"
       aria-selected="false">Company & Role</a>
  </li>
  <li class="nav-item mt-2">
    <a class="nav-link text-active-primary ms-0 me-10 py-5"
       id="tab-security-tab"
       data-bs-toggle="tab"
       href="#tab-security"
       role="tab"
       aria-controls="tab-security"
       aria-selected="false">Documents</a>
  </li>
</ul>

          <!--end::Tabs-->
        </div>
      </div>
      <!--end::Navbar / Header card-->

      <!--begin::Tab Content-->
      <div class="tab-content" id="profileTabsContent">
        <!-- Overview -->
        <div class="tab-pane fade show active" id="tab-overview" role="tabpanel" aria-labelledby="tab-overview-tab">
          <div class="card mb-5 mb-xl-10" id="kt_profile_details_view">
           

            <div class="card-body p-9">
              <div class="row mb-7">
                <label class="col-lg-4 fw-semibold text-muted">Full Name</label>
                <div class="col-lg-8">
                  <span class="fw-bold fs-6 text-gray-800">{{ $agentdetails->full_name ?? 'N/A' }}</span>
                </div>
              </div>

              <div class="row mb-7">
                <label class="col-lg-4 fw-semibold text-muted">Mobile Number</label>
                <div class="col-lg-8 d-flex align-items-center">
                  <span class="fw-bold fs-6 text-gray-800 me-2">{{ $agentdetails->mobile_number ?? 'N/A' }}</span>
                  @if(isset($agentdetails->phone))
                    <span class="badge badge-success">Verified</span>
                  @endif
                </div>
              </div>

              <div class="row mb-7">
                <label class="col-lg-4 fw-semibold text-muted">Company Name</label>
                <div class="col-lg-8">
                  <a href="#" class="fw-semibold fs-6 text-gray-800 text-hover-primary">{{ $agentdetails->company_name ?? 'N/A' }}</a>
                </div>
              </div>

              <div class="row mb-7">
                <label class="col-lg-4 fw-semibold text-muted">Branch</label>
                <div class="col-lg-8">
                  <span class="fw-bold fs-6 text-gray-800">{{ $agentdetails->department ?? 'N/A' }}</span>
                </div>
              </div>

              <div class="row mb-7">
                <label class="col-lg-4 fw-semibold text-muted">Address</label>
                <div class="col-lg-8">
                  <span class="fw-bold fs-6 text-gray-800">{{ ($agentdetails->city ?? 'N/A') . ', ' . ($agentdetails->address ?? '') . ', ' . ($agentdetails->pincode ?? '') }}</span>

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

        <!-- Settings -->
        <div class="tab-pane fade" id="tab-settings" role="tabpanel" aria-labelledby="tab-settings-tab">
          <div class="card p-5">
            <div class="card-body p-9">
              <div class="row mb-7">
                <label class="col-lg-4 fw-semibold text-muted">Department</label>
                <div class="col-lg-8">
                  <span class="fw-bold fs-6 text-gray-800">{{ $agentdetails->department ?? 'N/A' }}</span>
                </div>
              </div>

              <div class="row mb-7">
                <label class="col-lg-4 fw-semibold text-muted">Role</label>
                <div class="col-lg-8 d-flex align-items-center">
                  <span class="fw-bold fs-6 text-gray-800 me-2">{{ $agentdetails->role ?? 'N/A' }}</span>
                  @if(isset($agentdetails->phone))
                    <span class="badge badge-success">Verified</span>
                  @endif
                </div>
              </div>

              <!-- <div class="row mb-7">
                <label class="col-lg-4 fw-semibold text-muted">PAN / Tax ID</label>
                <div class="col-lg-8">
                  <a href="#" class="fw-semibold fs-6 text-gray-800 text-hover-primary">{{ $agentdetails->pan_tax_id ?? 'N/A' }}</a>
                </div>
              </div>

              <div class="row mb-7">
                <label class="col-lg-4 fw-semibold text-muted">GST Number</label>
                <div class="col-lg-8">
                  <span class="fw-bold fs-6 text-gray-800">{{ $agentdetails->gst_number ?? 'N/A' }}</span>
                </div>
              </div> -->

              <div class="row mb-7">
                <label class="col-lg-4 fw-semibold text-muted">Company Type</label>
                <div class="col-lg-8">
                  <span class="fw-bold fs-6 text-gray-800">{{ $agentdetails->company_type ?? 'N/A' }}</span>

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

        <!-- Security -->
       <div class="tab-pane fade" id="tab-security" role="tabpanel" aria-labelledby="tab-security-tab">
  <div class="card p-5">
  <div class="row g-5">

    {{-- Image Proof Section --}}
    <div class="col-12 mt-4">
      <h5 class="fw-semibold mb-3">Uploaded Documents</h5>
      <div class="row g-4">

        {{-- Company Logo / Profile --}}
        <div class="col-md-6 text-center">
          <label class="form-label fw-bold">Company Logo / Profile</label>
          <div class="border rounded p-3">
            <img src="{{ asset('uploads/' . $agentdetails->logo_path) }}" 
                 alt="Company Logo" class="img-fluid rounded" style="max-height:180px;">
          </div>
        </div>

        {{-- Trade License --}}
        <div class="col-md-6 text-center">
          <label class="form-label fw-bold">Trade License / Registration</label>
          <div class="border rounded p-3">
            <img src="{{ asset('uploads/' . $agentdetails->trade_license_path) }}" 
                 alt="Trade License" class="img-fluid rounded" style="max-height:180px;">
          </div>
        </div>

        {{-- PAN --}}
        <div class="col-md-6 text-center">
          <label class="form-label fw-bold">PAN / Tax Proof</label>
          <div class="border rounded p-3">
            <img src="{{ asset('uploads/' . $agentdetails->pan_proof_path) }}" 
                 alt="PAN Proof" class="img-fluid rounded" style="max-height:180px;">
          </div>
        </div>

        {{-- GST --}}
        <div class="col-md-6 text-center">
          <label class="form-label fw-bold">GST Proof</label>
          <div class="border rounded p-3">
            <img src="{{ asset('uploads/' . $agentdetails->gst_proof_path) }}" 
                 alt="GST Proof" class="img-fluid rounded" style="max-height:180px;">
          </div>
        </div>

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

</div>

      </div>
      <!--end::Tab Content-->

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

{{-- Fallback JS: works even if Bootstrap Tab JS is not loaded --}}
<script>
document.addEventListener("DOMContentLoaded", function () {
  var tabLinks = document.querySelectorAll('#profileTabs .nav-link');
  var panes = document.querySelectorAll('#profileTabsContent .tab-pane');

  function activateTabByHash(hash) {
    var targetLink = document.querySelector('#profileTabs .nav-link[href="'+hash+'"]');
    var targetPane = document.querySelector(hash);
    if (!targetLink || !targetPane) return;

    tabLinks.forEach(function(l){ l.classList.remove('active'); l.setAttribute('aria-selected','false'); });
    panes.forEach(function(p){ p.classList.remove('show','active'); });

    targetLink.classList.add('active');
    targetLink.setAttribute('aria-selected','true');
    targetPane.classList.add('active','show');
  }

  tabLinks.forEach(function(link){
    link.addEventListener('click', function(e){
      // If Bootstrap JS exists, let it handle but still sync URL
      if (!window.bootstrap) e.preventDefault();
      var hash = link.getAttribute('href');
      activateTabByHash(hash);
      if (history.replaceState) history.replaceState(null, '', hash);
    });
  });

  // On load: respect URL hash (#tab-settings, #tab-security)
  if (window.location.hash && document.querySelector('#profileTabs .nav-link[href="'+window.location.hash+'"]')) {
    activateTabByHash(window.location.hash);
  }
});
</script>
@endsection