@extends('layouts.admin')

@section('title', $month->name . ' - ' . $category->name)

@section('content')
<style>
  body {
    background-color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  /* --- Breadcrumb Tab Style --- */
  .breadcrumb-tabs {
    display: flex;
    gap: 2px;
    background-color: #f0f2f8;
    border-radius: 10px;
    overflow: hidden;
    margin: 40px 0 30px 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
  }

  .breadcrumb-tab {
    padding: 12px 20px;
    background: white;
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4a;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    display: inline-block;
  }

  .breadcrumb-tab:hover {
    background-color: #f6f9ff;
  }

  .breadcrumb-tab.active {
    color: #2b2b2b;
    font-weight: 600;
    border-bottom: 2px solid #6366f1;
  }

  /* --- Folder Container & Card --- */
  .folder-container {
    display: flex;
    flex-wrap: wrap;
    gap: 35px 40px;
    padding: 20px 10px;
  }

  .folder-card {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .folder-card:hover {
    transform: scale(1.05);
  }

  .folder-icon {
    width: 64px;
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  }

  .folder-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
  }

  .folder-card a {
    text-decoration: none;
    color: inherit;
  }

  .arrow {
    opacity: 0;
    transition: margin-left 0.3s ease, opacity 0.3s ease;
  }

  .folder-card:hover .arrow {
    margin-left: 4px;
    opacity: 1;
  }

  @media (max-width: 768px) {
    .folder-card {
      width: 80px;
    }
    .folder-label {
      font-size: 12px;
    }
  }
</style>

<div class="container">
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show mt-3 mb-3" role="alert">
    {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
@if (session('error'))
<div class="alert alert-danger alert-dismissible fade show mt-3 mb-3" role="alert">
    {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
  <!-- Breadcrumb -->
  <div class="breadcrumb-tabs" role="tablist">
    <a href="{{ route('dashboard') }}" class="breadcrumb-tab">🏠 Dashboard</a>
    <a href="{{ route('uploader.company.show', $company->id) }}" class="breadcrumb-tab">📁 {{ $company->name }}</a>
    <a href="{{ route('uploader.year.show', ['company'=>$company->id, 'year'=>$year->id]) }}" class="breadcrumb-tab">📂 {{ $year->display_year }}</a>
    <a href="{{ route('uploader.category.show', ['company'=>$company->id, 'year'=>$year->id, 'category'=>$category->id]) }}" class="breadcrumb-tab">📂 {{ $category->name }}</a>
    <span class="breadcrumb-tab active">🗓 {{ $month->name }}</span>
  </div>

  {{-- Dynamic Add Button --}}
  @if (auth()->user()->role === 'admin' || auth()->user()->role === 'accounts')
  <div class="row">
    <div class="col-12">
      <div class="d-flex justify-content-end gap-2 mt-4 mb-4">
        @if($category->name === 'Purchase')
        <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#companyModal">
            ➕ Add Parties
        </button>

        <button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editCompanyModal">
            ✏️ Edit Party
        </button>
        @elseif($category->name === 'Expenses')
        <form method="POST" action="{{ route('month.addItem') }}" class="d-flex gap-2">
                    @csrf
                    <input type="hidden" name="month_id" value="{{ $month->id }}">
                    <input type="hidden" name="category_name" value="{{ $category->name }}">

                    <input type="text" name="name" class="form-control"
                        placeholder="Enter subcategory" required>

                    <button type="submit" class="btn btn-primary">
                        + Add
                    </button>
                </form>
        @elseif($category->name === 'Sales')
        <a href="{{ route('uploader.sales.show', ['company' => $company->id, 'year' => $year->id, 'category' => $category->id, 'month' => $month->id, 'sale' => 'new']) }}" class="btn btn-outline-primary">
          📁 Sales
        </a>
        @elseif($category->name === 'Banking')
        <a href="{{ route('uploader.banking.show', ['company' => $company->id, 'year' => $year->id, 'category' => $category->id, 'month' => $month->id, 'banking' => 'new']) }}" class="btn btn-outline-primary">
          🏦 Banking
        </a>
        @endif
        
      </div>
    </div>
  </div>
  @endif

  {{-- Items Grid --}}
  <h5 class="mt-4 mb-3">
    @if($category->name === 'Purchase')
    📁 Existing Parties
    @elseif($category->name === 'Expenses')
    📁 Existing Subcategories
    @elseif($category->name === 'Sales')
    📁 Sales Items
    @else
    📁 Banking Items
    @endif
  </h5>

  @php
    $items = $category->name === 'Purchase' ? $subfolders : 
             ($category->name === 'Expenses' ? $expenseSubCategories : 
             ($category->name === 'Sales' ? $sales : $bankings));
  @endphp

  @if($items && $items->count() > 0)
  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-4 folder-container">
    @foreach($items as $item)
    <div class="col">
      <div class="folder-card w-100">
        <a href="{{ $category->name === 'Purchase' ? route('uploader.subfolder.show', [
            'company' => $company->id, 'year' => $year->id, 'category' => $category->id, 
            'month' => $month->id, 'subfolder' => $item->id
          ]) : ($category->name === 'Expenses' ? route('uploader.subcategory.show', [
            'company' => $company->id, 'year' => $year->id, 'category' => $category->id,
            'month' => $month->id, 'subcategory' => $item->id
          ]) : route('uploader.' . strtolower($category->name) . '.show', [
            'company' => $company->id, 'year' => $year->id, 'category' => $category->id, 
            'month' => $month->id, 'sale' => $item->id
          ])) }}">

          <img src="{{ asset('images/open-folder.png') }}" alt="Folder Icon" class="folder-icon">
          <div class="folder-label">{{ $item->name ?? $item->title }} <span class="arrow">→</span></div>
        </a>
      </div>
    </div>
    @endforeach
  </div>
  @else
  <div class="text-center py-5">
    <img src="{{ asset('images/empty-folder.png') }}" style="width:120px; opacity:0.5;" class="mb-3">
    <p class="text-muted fs-5">No {{ strtolower($category->name) }} items yet.</p>
  </div>
  @endif
</div>




{{-- Dynamic Modals --}}
@if (auth()->user()->role === 'admin' || auth()->user()->role === 'accounts')
  {{-- Add Parties Modal --}}
  @if($category->name === 'Purchase')
<div class="modal fade" id="companyModal" tabindex="-1" aria-labelledby="companyModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title" id="companyModalLabel">➕ Add Parties</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>


<form action="{{ route('company.folder.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="month_id" value="{{ $month->id }}">
    <div class="modal-body">

                    <div class="mb-4">
                        <label class="form-label fw-semibold">Upload CSV</label>
                        <input type="file" name="csv_file" accept=".csv" class="form-control">
                        <div class="form-text mt-2">
                            <strong>CSV format:</strong><br> One company name per line, <em>no headers</em>.<br> Example:
                            <pre class="bg-light border p-2 mt-2 rounded">Zap Enterprises
Flipkart Pvt Ltd
Amazon India Ltd</pre>
                        </div>
                    </div>
                    <hr>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Or add a single Party</label>
                        <input type="text" name="name" class="form-control" placeholder="e.g. Zap Enterprises">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary w-100">✅ Save</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- ================= EDIT MODAL ================= -->
<div class="modal fade" id="editCompanyModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header bg-light">
                <h5 class="modal-title">✏️ Edit Parties</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                @if($companies->count())
                <ul class="list-group">

                    @foreach($companies as $company_folder)
                    <li class="list-group-item d-flex justify-content-between align-items-center">

                        <!-- Edit -->
                        <form method="POST"
                              action="{{ route('company.folder.update', $company_folder->id) }}"
                              class="d-flex w-100 gap-2">

                            @csrf
                            @method('PUT')

                            <input type="text"
                                   name="name"
                                   value="{{ $company_folder->name }}"
                                   class="form-control">

                            <button class="btn btn-success btn-sm">✏️</button>
                        </form>

                        <!-- Delete -->
                        <form method="POST"
                              action="{{ route('company.folder.delete', $company_folder->id) }}"
                              onsubmit="return confirm('Delete this party?')">

                            @csrf
                            @method('DELETE')

                            <button class="btn btn-danger btn-sm">🗑️</button>
                        </form>

                    </li>
                    @endforeach

                </ul>
                @else
                    <p>No Parties Available</p>
                @endif

            </div>

        </div>
    </div>
</div>
  @endif

  {{-- Add Subcategory Modal --}}
  @if($category->name === 'Expenses')
  <div class="modal fade" id="subcatModal">
    <div class="modal-dialog">
      <form method="POST" action="{{ route('month.addItem') }}">
        @csrf
        <input type="hidden" name="month_id" value="{{ $month->id }}">
        <input type="hidden" name="category_name" value="Expenses">
        <div class="modal-content">
          <div class="modal-header bg-light">
            <h5>➕ Add Subcategory</h5>
          </div>
          <div class="modal-body">
            <input type="text" name="subcat_name" class="form-control mb-3" placeholder="Subcategory Name" required>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Add Subcategory</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  @endif

 
  @endif

@endsection