@extends('admin.admin_dashboard')

@section('customcss')
<style>
body { background: #f4f6f9; }
.content-body { background: #f4f6f9; }

.profile-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    text-align: center;
}

.vendor-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e5e7eb;
    margin-bottom: 10px;
}

.vendor-name {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.vendor-sub { color: #4b5563; font-size: 14px; }

.vendor-badges .badge {
    background: #eef2ff;
    color: #374151;
    border: 1px solid #e5e7eb;
    padding: 4px 8px;
    border-radius: 6px;
    margin: 2px;
}

.tab-navigation {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}

.tab-btn {
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
    padding: 8px 12px;
    border: none;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: 0.2s;
}

.tab-btn:hover { background: #e5e7eb; }
.tab-btn.active { background: #007bff; color: #fff; }

.content-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    min-height: 420px;
    font-size: 13px;
}

.tab-content { display: block; }
.tab-content.d-none { display: none; }

.section-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
    border-bottom: 1px dashed #d1d5db;
    padding-bottom: 4px;
}

.table th, .table td { font-size: 13px; vertical-align: middle; }
.table th { background: #f9fafb; font-weight: 600; color: #374151; }

@media (max-width: 768px) {
    .table th, .table td { font-size: 12px; }
}
</style>
@endsection

@section('admin')
<div class="content-body">
  <div class="container-fluid">
    <div class="row page-titles">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0)">Accounting</a></li>
        <li class="breadcrumb-item"><a href="{{ route('admin.expense_vendors.index') }}">Expense Vendors</a></li>
        <li class="breadcrumb-item active"><a href="javascript:void(0)">Vendor Profile</a></li>
      </ol>
    </div>

    @if(session('success'))
      <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error'))
      <div class="alert alert-danger">{{ session('error') }}</div>
    @endif
    @if($errors->any())
      <div class="alert alert-danger">
        <ul class="mb-0">
          @foreach($errors->all() as $err)
            <li>{{ $err }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <div class="row">
      <div class="col-lg-3">
        <div class="profile-card">
          @if($vendor->photo)
            <img src="{{ asset('storage/' . $vendor->photo) }}" alt="Vendor Photo" class="vendor-avatar mb-1">
          @else
            <img src="{{ asset('asset/images/profile/default.png') }}" alt="Vendor Photo" class="vendor-avatar mb-1">
          @endif

          <h2 class="vendor-name">{{ $vendor->name ?? 'N/A' }}</h2>
          <div class="vendor-sub">({{ $vendor->company_name ?? 'N/A' }})</div>

          <div class="vendor-badges mt-2">
            <span class="badge">Phone: {{ $vendor->primary_phone ?? 'N/A' }}</span>
            <span class="badge">NID: {{ $vendor->nid ?? 'N/A' }}</span>
          </div>

          <div class="tab-navigation mt-3">
            <button class="tab-btn active" data-tab="profile-tab">Profile</button>
            <button class="tab-btn" data-tab="all-bills-tab">All Bills</button>
            <button class="tab-btn" data-tab="due-bills-tab">All Due Bills</button>
            <button class="tab-btn" data-tab="paid-bills-tab">All Paid Bills</button>
            <button class="tab-btn" data-tab="payment-history-tab">All Payment History</button>
          </div>
        </div>
      </div>

      <div class="col-lg-9">
        <div class="content-card">
          <div id="profile-tab" class="tab-content">
            <div class="d-flex align-items-center mb-2">
              <i class="fas fa-user-circle fa-lg text-primary me-2"></i>
              <h5 class="section-title mb-0">Basic Information</h5>
            </div>

            <table class="table table-sm table-bordered mb-4">
              <tbody>
                <tr>
                  <th style="width:30%">Vendor Name</th>
                  <td>{{ $vendor->name ?? 'N/A' }}</td>
                  <th style="width:25%">Company</th>
                  <td>{{ $vendor->company_name ?? 'N/A' }}</td>
                </tr>
                <tr>
                  <th>Father's Name</th>
                  <td>{{ $vendor->father_name ?? 'N/A' }}</td>
                  <th>Mother's Name</th>
                  <td>{{ $vendor->mother_name ?? 'N/A' }}</td>
                </tr>
                <tr>
                  <th>National ID Number</th>
                  <td>{{ $vendor->nid ?? 'N/A' }}</td>
                  <th>Status</th>
                  <td>{{ $vendor->is_active ? 'Active' : 'Inactive' }}</td>
                </tr>
                <tr>
                  <th>Email Address</th>
                  <td>{{ $vendor->email ?? 'N/A' }}</td>
                  <th>Mobile Number</th>
                  <td>{{ $vendor->primary_phone ?? 'N/A' }}</td>
                </tr>
                <tr>
                  <th>Contact Phone</th>
                  <td>{{ $vendor->secondary_phone ?? 'N/A' }}</td>
                  <th>Date Added</th>
                  <td>{{ $vendor->created_at ? $vendor->created_at->format('d M, Y') : 'N/A' }}</td>
                </tr>
                <tr>
                  <th>Short Description</th>
                  <td colspan="3">{{ $vendor->short_description ?? 'N/A' }}</td>
                </tr>
              </tbody>
            </table>
          </div>

          <div id="all-bills-tab" class="tab-content d-none">
            <div class="d-flex align-items-center mb-2">
              <i class="fas fa-file-invoice-dollar fa-lg text-primary me-2"></i>
              <h5 class="section-title mb-0">All Bills</h5>
            </div>

            <div class="table-responsive">
              <table class="table table-sm table-bordered align-middle">
                <thead>
                  <tr>
                    <th>Bill No</th>
                    <th>Date</th>
                    <th>Category</th>
                    <th class="text-end">Total</th>
                    <th class="text-end">Paid</th>
                    <th class="text-end">Due</th>
                    <th>Status</th>
                    <th style="min-width: 130px;">Document</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($allBills as $bill)
                    <tr>
                      <td>
                        <a href="{{ route('admin.expense_bills.show', $bill->id) }}" target="_blank" class="fw-bold text-primary" title="View Bill Details">
                          {{ $bill->bill_no }}
                        </a>
                      </td>
                      <td>{{ optional($bill->bill_date)->format('d - m - Y') }}</td>
                      <td>{{ $bill->category->name ?? 'N/A' }}</td>
                      <td class="text-end">{{ number_format((float) $bill->total_amount, 2) }}</td>
                      <td class="text-end">{{ number_format((float) $bill->paid_amount, 2) }}</td>
                      <td class="text-end">{{ number_format((float) $bill->remaining_amount, 2) }}</td>
                      <td>
                        <span class="badge {{ match($bill->status) { 'draft' => 'badge-secondary', 'approved' => 'badge-info', 'partial' => 'badge-warning', 'paid' => 'badge-success', 'void' => 'badge-danger', default => 'badge-primary' } }}">
                          {{ strtoupper($bill->status) }}
                        </span>
                      </td>
                      <td class="text-nowrap">
                        <div class="d-flex align-items-center gap-1 flex-wrap">
                          @if($bill->documents->count() > 0)
                            @foreach($bill->documents as $doc)
                              @php
                                $ext = strtolower(pathinfo($doc->file_path, PATHINFO_EXTENSION));
                                $iconClass = match($ext) {
                                  'pdf' => 'fa-file-pdf text-danger',
                                  'jpg', 'jpeg', 'png', 'webp' => 'fa-file-image text-primary',
                                  'doc', 'docx' => 'fa-file-word text-info',
                                  default => 'fa-file text-secondary'
                                };
                                $filename = basename($doc->file_path);
                              @endphp
                              <a href="{{ asset('storage/' . $doc->file_path) }}" target="_blank"
                                 class="btn btn-xs btn-light border py-1 px-2"
                                 title="View {{ $filename }} (Uploaded: {{ optional($doc->created_at)->format('d-m-Y') }})">
                                <i class="fa-solid {{ $iconClass }}"></i>
                              </a>
                            @endforeach
                          @else
                            <span class="text-muted small me-1">-</span>
                          @endif

                          @if($bill->status !== 'void')
                            <button type="button" class="btn btn-xs btn-outline-primary py-1 px-2 btn-upload-doc"
                                    data-bill-id="{{ $bill->id }}"
                                    data-bill-no="{{ $bill->bill_no }}"
                                    title="Upload document to {{ $bill->bill_no }}">
                              @if($bill->documents->count() === 0)
                                <i class="fa fa-cloud-arrow-up me-1"></i>Upload
                              @else
                                <i class="fa fa-plus"></i>
                              @endif
                            </button>
                          @endif
                        </div>
                      </td>
                    </tr>
                  @empty
                    <tr><td colspan="8" class="text-center text-muted">No bills found.</td></tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>

          <div id="due-bills-tab" class="tab-content d-none">
            <div class="d-flex align-items-center mb-2">
              <i class="fas fa-exclamation-circle fa-lg text-warning me-2"></i>
              <h5 class="section-title mb-0">All Due Bills</h5>
            </div>

            <div class="table-responsive">
              <table class="table table-sm table-bordered align-middle">
                <thead>
                  <tr>
                    <th>Bill No</th>
                    <th>Date</th>
                    <th>Category</th>
                    <th class="text-end">Total</th>
                    <th class="text-end">Paid</th>
                    <th class="text-end">Due</th>
                    <th>Status</th>
                    <th style="min-width: 130px;">Document</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($dueBills as $bill)
                    <tr>
                      <td>
                        <a href="{{ route('admin.expense_bills.show', $bill->id) }}" target="_blank" class="fw-bold text-primary" title="View Bill Details">
                          {{ $bill->bill_no }}
                        </a>
                      </td>
                      <td>{{ optional($bill->bill_date)->format('d - m - Y') }}</td>
                      <td>{{ $bill->category->name ?? 'N/A' }}</td>
                      <td class="text-end">{{ number_format((float) $bill->total_amount, 2) }}</td>
                      <td class="text-end">{{ number_format((float) $bill->paid_amount, 2) }}</td>
                      <td class="text-end">{{ number_format((float) $bill->remaining_amount, 2) }}</td>
                      <td>
                        <span class="badge {{ match($bill->status) { 'draft' => 'badge-secondary', 'approved' => 'badge-info', 'partial' => 'badge-warning', 'paid' => 'badge-success', 'void' => 'badge-danger', default => 'badge-primary' } }}">
                          {{ strtoupper($bill->status) }}
                        </span>
                      </td>
                      <td class="text-nowrap">
                        <div class="d-flex align-items-center gap-1 flex-wrap">
                          @if($bill->documents->count() > 0)
                            @foreach($bill->documents as $doc)
                              @php
                                $ext = strtolower(pathinfo($doc->file_path, PATHINFO_EXTENSION));
                                $iconClass = match($ext) {
                                  'pdf' => 'fa-file-pdf text-danger',
                                  'jpg', 'jpeg', 'png', 'webp' => 'fa-file-image text-primary',
                                  'doc', 'docx' => 'fa-file-word text-info',
                                  default => 'fa-file text-secondary'
                                };
                                $filename = basename($doc->file_path);
                              @endphp
                              <a href="{{ asset('storage/' . $doc->file_path) }}" target="_blank"
                                 class="btn btn-xs btn-light border py-1 px-2"
                                 title="View {{ $filename }} (Uploaded: {{ optional($doc->created_at)->format('d-m-Y') }})">
                                <i class="fa-solid {{ $iconClass }}"></i>
                              </a>
                            @endforeach
                          @else
                            <span class="text-muted small me-1">-</span>
                          @endif

                          @if($bill->status !== 'void')
                            <button type="button" class="btn btn-xs btn-outline-primary py-1 px-2 btn-upload-doc"
                                    data-bill-id="{{ $bill->id }}"
                                    data-bill-no="{{ $bill->bill_no }}"
                                    title="Upload document to {{ $bill->bill_no }}">
                              @if($bill->documents->count() === 0)
                                <i class="fa fa-cloud-arrow-up me-1"></i>Upload
                              @else
                                <i class="fa fa-plus"></i>
                              @endif
                            </button>
                          @endif
                        </div>
                      </td>
                    </tr>
                  @empty
                    <tr><td colspan="8" class="text-center text-muted">No due bills found.</td></tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>

          <div id="paid-bills-tab" class="tab-content d-none">
            <div class="d-flex align-items-center mb-2">
              <i class="fas fa-check-circle fa-lg text-success me-2"></i>
              <h5 class="section-title mb-0">All Paid Bills</h5>
            </div>

            <div class="table-responsive">
              <table class="table table-sm table-bordered align-middle">
                <thead>
                  <tr>
                    <th>Bill No</th>
                    <th>Date</th>
                    <th>Category</th>
                    <th class="text-end">Total</th>
                    <th class="text-end">Paid</th>
                    <th>Status</th>
                    <th style="min-width: 130px;">Document</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($paidBills as $bill)
                    <tr>
                      <td>
                        <a href="{{ route('admin.expense_bills.show', $bill->id) }}" target="_blank" class="fw-bold text-primary" title="View Bill Details">
                          {{ $bill->bill_no }}
                        </a>
                      </td>
                      <td>{{ optional($bill->bill_date)->format('d - m - Y') }}</td>
                      <td>{{ $bill->category->name ?? 'N/A' }}</td>
                      <td class="text-end">{{ number_format((float) $bill->total_amount, 2) }}</td>
                      <td class="text-end">{{ number_format((float) $bill->paid_amount, 2) }}</td>
                      <td>
                        <span class="badge {{ match($bill->status) { 'draft' => 'badge-secondary', 'approved' => 'badge-info', 'partial' => 'badge-warning', 'paid' => 'badge-success', 'void' => 'badge-danger', default => 'badge-primary' } }}">
                          {{ strtoupper($bill->status) }}
                        </span>
                      </td>
                      <td class="text-nowrap">
                        <div class="d-flex align-items-center gap-1 flex-wrap">
                          @if($bill->documents->count() > 0)
                            @foreach($bill->documents as $doc)
                              @php
                                $ext = strtolower(pathinfo($doc->file_path, PATHINFO_EXTENSION));
                                $iconClass = match($ext) {
                                  'pdf' => 'fa-file-pdf text-danger',
                                  'jpg', 'jpeg', 'png', 'webp' => 'fa-file-image text-primary',
                                  'doc', 'docx' => 'fa-file-word text-info',
                                  default => 'fa-file text-secondary'
                                };
                                $filename = basename($doc->file_path);
                              @endphp
                              <a href="{{ asset('storage/' . $doc->file_path) }}" target="_blank"
                                 class="btn btn-xs btn-light border py-1 px-2"
                                 title="View {{ $filename }} (Uploaded: {{ optional($doc->created_at)->format('d-m-Y') }})">
                                <i class="fa-solid {{ $iconClass }}"></i>
                              </a>
                            @endforeach
                          @else
                            <span class="text-muted small me-1">-</span>
                          @endif

                          @if($bill->status !== 'void')
                            <button type="button" class="btn btn-xs btn-outline-primary py-1 px-2 btn-upload-doc"
                                    data-bill-id="{{ $bill->id }}"
                                    data-bill-no="{{ $bill->bill_no }}"
                                    title="Upload document to {{ $bill->bill_no }}">
                              @if($bill->documents->count() === 0)
                                <i class="fa fa-cloud-arrow-up me-1"></i>Upload
                              @else
                                <i class="fa fa-plus"></i>
                              @endif
                            </button>
                          @endif
                        </div>
                      </td>
                    </tr>
                  @empty
                    <tr><td colspan="7" class="text-center text-muted">No paid bills found.</td></tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>

          <div id="payment-history-tab" class="tab-content d-none">
            <div class="d-flex align-items-center mb-2">
              <i class="fas fa-history fa-lg text-info me-2"></i>
              <h5 class="section-title mb-0">All Payment History</h5>
            </div>

            <div class="table-responsive">
              <table class="table table-sm table-bordered">
                <thead>
                  <tr>
                    <th>Payment No</th>
                    <th>Payment Date</th>
                    <th>Bill No</th>
                    <th>Category</th>
                    <th>Method</th>
                    <th class="text-end">Amount</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($paymentHistory as $payment)
                    <tr>
                      <td>{{ $payment->payment_no }}</td>
                      <td>{{ optional($payment->payment_date)->format('d - m - Y h:i A') }}</td>
                      <td>{{ $payment->bill->bill_no ?? 'N/A' }}</td>
                      <td>{{ $payment->bill->category->name ?? 'N/A' }}</td>
                      <td>{{ strtoupper($payment->paid_from_method_key ?? 'cash') }}</td>
                      <td class="text-end">{{ number_format((float) $payment->amount, 2) }}</td>
                      <td>{{ ucfirst($payment->status) }}</td>
                    </tr>
                  @empty
                    <tr><td colspan="7" class="text-center">No payment history found.</td></tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Upload Document Modal -->
<div class="modal fade" id="vendorBillDocUploadModal" tabindex="-1" aria-labelledby="vendorBillDocUploadModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form id="vendorBillDocUploadForm" action="" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title" id="vendorBillDocUploadModalLabel">
            <i class="fa-solid fa-cloud-arrow-up text-primary me-2"></i>Upload Supporting Document
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-bold">Bill No</label>
            <input type="text" id="modalBillNo" class="form-control bg-light" readonly>
          </div>
          <div class="mb-3">
            <label class="form-label fw-bold">Select File(s) <span class="text-danger">*</span></label>
            <input type="file" name="documents[]" class="form-control" multiple required>
            <small class="text-muted">Allowed: PDF, JPG, JPEG, PNG, WEBP, DOC, DOCX (Max: 4MB per file)</small>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">
            <i class="fa fa-upload me-1"></i> Upload
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('customjs')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const tabs = document.querySelectorAll('.tab-btn');
    const contents = document.querySelectorAll('.tab-content');

    const activeTabKey = 'expense_vendor_active_tab_' + {{ $vendor->id }};
    const savedTab = sessionStorage.getItem(activeTabKey) || (window.location.hash ? window.location.hash.replace('#', '') : null);
    if (savedTab) {
        const targetBtn = document.querySelector(`.tab-btn[data-tab="${savedTab}"]`);
        if (targetBtn) {
            tabs.forEach((btn) => btn.classList.remove('active'));
            contents.forEach((content) => content.classList.add('d-none'));

            targetBtn.classList.add('active');
            const target = document.getElementById(savedTab);
            if (target) {
                target.classList.remove('d-none');
            }
        }
    }

    tabs.forEach((tab) => {
        tab.addEventListener('click', () => {
            tabs.forEach((btn) => btn.classList.remove('active'));
            contents.forEach((content) => content.classList.add('d-none'));

            tab.classList.add('active');
            const target = document.getElementById(tab.dataset.tab);
            if (target) {
                target.classList.remove('d-none');
                sessionStorage.setItem(activeTabKey, tab.dataset.tab);
            }
        });
    });

    // Document Upload Modal Handler
    const modalEl = document.getElementById('vendorBillDocUploadModal');
    if (modalEl && window.bootstrap) {
        const uploadModal = new bootstrap.Modal(modalEl);
        const uploadForm = document.getElementById('vendorBillDocUploadForm');
        const modalBillNo = document.getElementById('modalBillNo');
        const baseUploadUrl = @json(url('admin/accounting/expense-bills'));

        document.querySelectorAll('.btn-upload-doc').forEach(btn => {
            btn.addEventListener('click', function (e) {
                e.preventDefault();
                const billId = this.dataset.billId;
                const billNo = this.dataset.billNo;

                modalBillNo.value = billNo;
                uploadForm.action = `${baseUploadUrl}/${billId}/documents`;
                uploadModal.show();
            });
        });
    }
});
</script>
@endsection