{{-- resources/views/admin/hope_coffee/all_coffee_stock.blade.php --}}
@extends('admin.admin_dashboard')

@section('admin')
<<<<<<< HEAD
<div class="page-content">
  <!-- Breadcrumb & Add Sale -->
  <div class="page-breadcrumb 
              d-flex flex-column flex-sm-row 
              align-items-center justify-content-between 
              mb-3 p-3 rounded shadow-sm" 
       style="background-color: #6F4E37; color: white;">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb mb-0 p-0">
        <li class="breadcrumb-item">
          <a href="{{ route('admin.dashboard') }}" style="color:white">
            <i class="bx bx-home-alt"></i>
          </a>
        </li>
        <li class="breadcrumb-item active text-white" aria-current="page">
          Stock Ledger
        </li>
      </ol>
    </nav>
    @can('add_coffee_sale.view')
    <a href="{{ route('coffee.sales.create') }}" 
       class="btn text-white d-flex align-items-center shadow-sm" 
       style="background-color: #A67B5B;">
      <i class="bx bx-plus-circle me-2"></i> Add Sale
    </a>
    @endcan
  </div>

  <!-- Cumulative Balance -->
<div class="row g-3 mb-4">
  <!-- Cumulative Coffee Stock -->
  <div class="col-md-6">
    <div class="card border-0 shadow-sm rounded-3">
      <div class="card-header d-flex align-items-center py-2 rounded-top-3" style="background-color: #4b2e05; color: #d2b48c;">
        <i class="bx bx-bar-chart me-2 fs-5"></i>
        <span class="fw-semibold fs-6">Cumulative Coffee Stock</span>
      </div>
      <div class="card-body py-3">
        <h5 class="fw-bold fs-3" style="color: #8b5e3c;">
          {{ number_format($cumulativeStock, 0) }} <small class="text-muted fs-5">kg</small>
        </h5>
      </div>
    </div>
  </div>

  <!-- Total MC Deduction -->
  <div class="col-md-6">
    <div class="card border-0 shadow-sm rounded-3">
      <div class="card-header d-flex align-items-center py-2 rounded-top-3" style="background-color: #6f4e37; color: #f5deb3;">
        <i class="bx bx-droplet me-2 fs-5"></i>
        <span class="fw-semibold fs-6">Total MC Deduction</span>
      </div>
      <div class="card-body py-3">
        <h5 class="fw-bold fs-3" style="color: #a9746e;">
          {{ number_format($cumulativeMcDed, 0) }} <small class="text-muted fs-5">kg</small>
        </h5>
      </div>
    </div>
  </div>
</div>

<div class="row g-3 mb-4">
  <!-- Cumulative Screen 18 Stock -->
  <div class="col-md-6">
    <div class="card border-0 shadow-sm rounded-3">
      <div class="card-header d-flex align-items-center py-2 rounded-top-3" style="background-color: #4b2e05; color: #d2b48c;">
        <i class="bx bx-bar-chart me-2 fs-5"></i>
        <span class="fw-semibold fs-6">Cumulative Screen 18 Stock</span>
      </div>
      <div class="card-body py-3">
        <h5 class="fw-bold fs-3" style="color: #8b5e3c;">
          {{ number_format($cumulativeScreen18, 0) }} <small class="text-muted fs-5">kg</small>
        </h5>
      </div>
    </div>
  </div>

  <!-- Actual Screen 18 Stock -->
  <div class="col-md-6">
    <div class="card border-0 shadow-sm rounded-3">
      <div class="card-header d-flex align-items-center py-2 rounded-top-3" style="background-color: #6f4e37; color: #f5deb3;">
        <i class="bx bx-package me-2 fs-5"></i>
        <span class="fw-semibold fs-6">Actual Screen 18 Stock</span>
      </div>
      <div class="card-body py-3">
        <h5 class="fw-bold fs-3" style="color: #a9746e;">
          {{ number_format($actualScreen18Stock, 0) }}<small class="text-muted fs-5"></small>
        </h5>
      </div>
    </div>
  </div>
</div>

<div class="row g-3 mb-4">
  <!-- Actual Ungraded Stock -->
  <div class="col-md-6">
    <div class="card border-0 shadow-sm rounded-3">
      <div class="card-header d-flex align-items-center py-2 rounded-top-3" style="background-color: #4b2e05; color: #d2b48c;">
        <i class="bx bx-package me-2 fs-5"></i>
        <span class="fw-semibold fs-6">Actual Ungraded Stock</span>
      </div>
      <div class="card-body py-3">
        <h5 class="fw-bold fs-3" style="color: #8b5e3c;">
          {{ number_format($actualUngradedStock, 0) }} <small class="text-muted fs-5">kg</small>
        </h5>
      </div>
    </div>
  </div>

  <!-- Actual MC Deduction -->
  <div class="col-md-6">
    <div class="card border-0 shadow-sm rounded-3">
      <div class="card-header d-flex align-items-center py-2 rounded-top-3" style="background-color: #6f4e37; color: #f5deb3;">
        <i class="bx bx-droplet me-2 fs-5"></i>
        <span class="fw-semibold fs-6">Actual MC Deduction</span>
      </div>
      <div class="card-body py-3">
        <h5 class="fw-bold fs-3" style="color: #a9746e;">
          {{ number_format($actualMcDed, 0) }} <small class="text-muted fs-5">kg</small>
        </h5>
      </div>
    </div>
  </div>
</div>


<div class="row g-3 mb-4">
  <!-- Actual Ungraded Stock -->
  <div class="col-md-6">
    <div class="card border-0 shadow-sm rounded-3">
      <div class="card-header d-flex align-items-center py-2 rounded-top-3" style="background-color: #4b2e05; color: #d2b48c;">
        <i class="bx bx-package me-2 fs-5"></i>
        <span class="fw-semibold fs-6">Sales</span>
      </div>
      <div class="card-body py-3">
        <h5 class="fw-bold fs-3" style="color: #8b5e3c;">
          {{ number_format($cummulativesales, 0) }} <small class="text-muted fs-5">kg</small>
        </h5>
      </div>
    </div>
  </div>

   <!-- Actual Ungraded Stock -->
  <div class="col-md-6">
    <div class="card border-0 shadow-sm rounded-3">
      <div class="card-header d-flex align-items-center py-2 rounded-top-3" style="background-color: #4b2e05; color: #d2b48c;">
        <i class="bx bx-transfer me-2 fs-5"></i>
        <span class="fw-semibold fs-6">Stock Transfer</span>
      </div>
      <div class="card-body py-3">
        <h5 class="fw-bold fs-3" style="color: #8b5e3c;">
          {{ number_format($cummulativeStockTransfer, 0) }} <small class="text-muted fs-5">kg</small>
        </h5>
      </div>
    </div>
  </div>


</div>








 @can('coffee_stock_flow.view')
  <!-- Ledger Table -->
  <div class="card shadow-sm rounded-lg border-0">
    <div class="card-body p-4">
      <div class="table-responsive">
        <table class="table table-hover table-striped table-bordered align-middle">
          <thead class="text-white" style="background-color:#6F4E37">
            <tr>
              <th style="width: 40px;"></th>
              <th>#</th>
              <th>Date</th>
              <th>Type</th>
              <th>Reference</th>
              <th>Party</th>
              <th class="text-end">Qty</th>
              <th class="text-end">Balance</th>
            </tr>
          </thead>
          <tbody>
            @foreach($ledger as $i => $row)
            <tr>
              {{-- expand/collapse button --}}
              <td class="text-center">
                <button type="button" class="btn btn-sm btn-outline-secondary toggle-details">+</button>
              </td>
              <td class="text-center fw-bold">{{ $i+1 }}</td>
              <td>{{ $row->date }}</td>
              <td>
                <span class="badge bg-{{ $row->type==='in' ? 'success' : 'danger' }}">
                  {{ strtoupper($row->type) }}
                </span>
              </td>
              <td>{{ $row->ref }}</td>
              <td>{{ $row->party }}</td>
              <td class="text-end">{{ number_format($row->qty,2) }}</td>
              <td class="text-end fw-bold">{{ number_format($row->balance,2) }}</td>
            </tr>
            <tr class="details-row bg-light" style="display:none">
              <td colspan="8">
                @if($row->type==='in')
                  {{-- Payment Voucher details for this GRN --}}
                  @php
                    $pv = \App\Models\PaymentVoucher::where('grn_id', $row->record_id)->first();
                  @endphp
                  @if($pv)
                    <strong>Purchase (Voucher #{{ $pv->id }}):</strong>
                    <ul class="mb-0">
                      <li>Ungraded Qty: {{ number_format((float) $pv->total_quantity, 2) }} kg</li>
                      <li>Moisture Content: {{ number_format($pv->moisture_content,1) }}%</li>
                      <li>MC Deduction: {{ number_format($pv->mc_ded,2) }} kg</li>
                    </ul>
                  @else
                    <em>No payment voucher found for GRN#{{ $row->record_id }}.</em>
                  @endif
                @else
                  {{-- Sale details for this sale --}}
                  @php
                    $sale = \App\Models\CoffeeSale::with('buyer')->find($row->record_id);
                  @endphp
                  @if($sale)
                    <strong>Sale (Sale #{{ $sale->id }}):</strong>
                    <ul class="mb-0">
                      <li>Gross Weight: {{ number_format($sale->gross_weight,2) }} kg</li>
                      <li>Samples: {{ number_format($sale->samples,2) }} kg</li>
                      <li>Dry Loss/Gain: {{ number_format($sale->dry_loss_gain,2) }} kg</li>
                      <li>MC Deduction: {{ number_format($sale->mc_deduction,2) }} kg</li>
                      <li>Net Weight: {{ number_format($sale->net_weight,2) }} kg</li>
                    </ul>
                  @else
                    <em>No sale record found for Sale#{{ $row->record_id }}.</em>
                  @endif
                @endif
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
 @endcan
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function(){
  document.querySelectorAll('.toggle-details').forEach(function(btn){
    btn.addEventListener('click', function(){
      const tr = this.closest('tr');
      const details = tr.nextElementSibling;
      if(details.style.display === 'none'){
        details.style.display = '';
        this.textContent = '−';
      } else {
        details.style.display = 'none';
        this.textContent = '+';
      }
    });
  });
});
=======
@php
    $fmt = fn ($n) => number_format((float) $n, 0);
    $operations = $operations ?? [];
@endphp

<div class="page-content chm-stock-summary-page">
  <div class="container-fluid">

    <x-chm.page-header
      title="Green Bean Stock Summary"
      subtitle="Purchases, processing, sales, and estimated stock on hand."
      icon="bx bx-coffee"
    >
      <x-slot:breadcrumb>
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
        <li class="breadcrumb-item">Hope Coffee</li>
        <li class="breadcrumb-item active" aria-current="page">Stock summary</li>
      </x-slot:breadcrumb>
      <x-slot:actions>
        <form method="GET" id="stock-year-form" class="d-flex align-items-center gap-2 mb-0">
          <label for="stock-year" class="small text-muted mb-0">Year</label>
          <select id="stock-year" name="year" class="form-select form-select-sm chm-stock-year-select" data-width="7rem">
            @foreach($availableYears ?? [now()->year] as $y)
              <option value="{{ $y }}" @selected(($year ?? now()->year) == $y)>{{ $y }}</option>
            @endforeach
          </select>
        </form>
      </x-slot:actions>
    </x-chm.page-header>

    <div id="stock-insight-slot" class="d-none" aria-hidden="true"></div>

    {{-- Quick actions --}}
    <div class="card chm-card border-0 shadow-sm mb-4">
      <div class="card-body py-3">
        <div class="d-flex flex-wrap align-items-center gap-2">
          <span class="small text-muted me-1 fw-semibold text-uppercase">Actions</span>
          @can('coffee_sales.add')
            <a href="{{ route('coffee.sales.create') }}" class="btn btn-primary btn-sm">
              <i class="bx bx-plus-circle me-1"></i> Record sale
            </a>
          @endcan
          @can('grn.add')
            <a href="{{ route('add.grn.form') }}" class="btn btn-outline-secondary btn-sm">
              <i class="bx bx-receipt me-1"></i> Record GRN
            </a>
          @endcan
          @can('payment_valuation_final.view')
            <a href="{{ route('all.payment.vouchers') }}" class="btn btn-outline-secondary btn-sm">
              <i class="bx bx-wallet me-1"></i> Payment vouchers
            </a>
          @endcan
          @can('coffee_sales.view')
            <a href="{{ route('coffee.sales.index') }}" class="btn btn-outline-secondary btn-sm">
              <i class="bx bx-cart me-1"></i> All sales
            </a>
          @endcan
          @can('coffee_processing.record')
            <a href="{{ route('coffee.processing.create') }}" class="btn btn-outline-secondary btn-sm">
              <i class="bx bx-cog me-1"></i> Record processing
            </a>
          @endcan
        </div>
      </div>
    </div>

    {{-- Persona tabs --}}
    <ul class="nav nav-pills mb-3 gap-1" role="tablist">
      <li class="nav-item">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#stock-tab-operations" type="button" role="tab">
          <i class="bx bx-package me-1"></i> Operations
        </button>
      </li>
      <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#stock-tab-management" type="button" role="tab" data-stock-load-analytics="1">
          <i class="bx bx-trending-up me-1"></i> Management
        </button>
      </li>
      <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#stock-tab-finance" type="button" role="tab" data-stock-load-analytics="1">
          <i class="bx bx-wallet me-1"></i> Finance
        </button>
      </li>
    </ul>

    <div class="tab-content">

      <div class="tab-pane fade show active" id="stock-tab-operations" role="tabpanel">
        <p class="text-muted small mb-3">
          @if(($year ?? now()->year) == now()->year)
            {{ $year }} stock left from this year's FAQ purchases minus Screen 18 and sales.
          @else
            Stock left at 31 Dec {{ $year }} (all purchases and sales through that date).
          @endif
        </p>

        <div class="row g-4 mb-2">
          @foreach([
            ['Actual Screen 18 Stock', 'actual_screen18_stock', 'success', 'bx-grid-alt'],
            ['Actual Ungraded Stock', 'actual_ungraded_stock', 'primary', 'bx-package'],
            ['Actual MC Deduction', 'actual_mc_deduction', 'info', 'bx-droplet'],
            ['Sales', 'sales', 'warning', 'bx-cart'],
            ['Beverage Stock', 'beverage_stock', 'secondary', 'bx-transfer'],
          ] as [$label, $key, $color, $icon])
            <div class="col-md-6 col-xl-4">
              <div class="card chm-card border-0 shadow-sm h-100 stock-ops-card">
                <div class="card-body text-center d-flex flex-column justify-content-center py-3">
                  <div class="stock-ops-icon text-{{ $color }} mb-2"><i class="bx {{ $icon }}"></i></div>
                  <div class="stock-ops-label">{{ $label }}</div>
                  <div class="stock-ops-value text-{{ $color }}">{{ $fmt($operations[$key] ?? 0) }}<span class="stock-ops-unit"> kg</span></div>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      </div>

      <div class="tab-pane fade" id="stock-tab-management" role="tabpanel">
        <div class="stock-analytics-loading text-center py-5 text-muted">
          <div class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></div>
          Loading charts and comparisons…
        </div>
      </div>

      <div class="tab-pane fade" id="stock-tab-finance" role="tabpanel">
        <div class="stock-analytics-loading text-center py-5 text-muted">
          <div class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></div>
          Loading finance summary…
        </div>
      </div>

    </div>{{-- tab-content --}}

  </div>
</div>
@endsection

@push('styles')
<style>
.chm-stock-summary-page .stock-ops-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--chm-muted, #6c757d);
    margin-bottom: 0.5rem;
}
.chm-stock-summary-page .stock-ops-card .stock-ops-value {
    font-size: 1.625rem;
}
.chm-stock-summary-page .stock-ops-value {
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
}
.chm-stock-summary-page .stock-ops-unit {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--chm-muted, #6c757d);
}
.chm-stock-summary-page .stock-ops-icon {
    font-size: 1.25rem;
    line-height: 1;
}
.chm-stock-summary-page .stock-ops-card {
    min-height: auto;
}
.chm-stock-summary-page .stock-figure {
    font-size: 1.625rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
}
.chm-stock-summary-page .stock-figure-unit {
    font-size: 0.875rem;
}
.chm-stock-summary-page .select2-container--bootstrap-5 {
    min-width: 7rem;
}
</style>
@endpush

@push('scripts')
<script>
(function ($) {
    'use strict';

    const analyticsUrl = @json(route('all.coffee.stock.analytics', ['year' => $year ?? now()->year]));
    let analyticsLoaded = false;
    let analyticsLoading = false;
    let chartsReady = false;

    function initYearSelect() {
        const $year = $('#stock-year');
        if (!$year.length || !$.fn.select2) {
            return;
        }

        if ($year.hasClass('select2-hidden-accessible')) {
            $year.select2('destroy');
        }

        $year.select2({
            theme: 'bootstrap-5',
            width: $year.data('width') || '7rem',
            minimumResultsForSearch: Infinity,
            dropdownParent: $(document.body),
        }).on('change.stockYear', function () {
            document.getElementById('stock-year-form').submit();
        });
    }

    function loadChartJs() {
        if (window.Chart) {
            return Promise.resolve();
        }

        return new Promise(function (resolve, reject) {
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js';
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    function renderCharts(chartData) {
        if (chartsReady || !window.Chart || !chartData) {
            return;
        }

        const navy = '#1e3a5f';
        const green = '#3ecf8e';
        const blue = '#5b9bd5';
        const amber = '#f0ad4e';

        const flowEl = document.getElementById('stockFlowChart');
        if (flowEl) {
            new Chart(flowEl.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: chartData.flow.labels,
                    datasets: [{
                        label: 'kg',
                        data: chartData.flow.values,
                        backgroundColor: [navy, green, blue, amber],
                        borderRadius: 6,
                        maxBarThickness: 56,
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: { callback: (v) => v.toLocaleString() },
                        },
                    },
                },
            });
        }

        const monthlyEl = document.getElementById('stockMonthlyChart');
        if (monthlyEl) {
            new Chart(monthlyEl.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: chartData.monthly.labels,
                    datasets: [{
                        label: 'FAQ purchased',
                        data: chartData.monthly.values,
                        backgroundColor: 'rgba(30, 58, 95, 0.75)',
                        borderColor: navy,
                        borderWidth: 1,
                        borderRadius: 4,
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: { callback: (v) => v.toLocaleString() },
                        },
                    },
                },
            });
        }

        chartsReady = true;
    }

    function mountAnalytics(html) {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');

        const hero = doc.getElementById('stock-analytics-hero');
        const management = doc.getElementById('stock-analytics-management');
        const finance = doc.getElementById('stock-analytics-finance');
        const chartNode = doc.getElementById('stock-chart-data');

        if (hero) {
            const slot = document.getElementById('stock-insight-slot');
            slot.innerHTML = hero.innerHTML;
            slot.classList.remove('d-none');
            slot.removeAttribute('aria-hidden');
        }

        if (management) {
            document.getElementById('stock-tab-management').innerHTML = management.innerHTML;
        }

        if (finance) {
            document.getElementById('stock-tab-finance').innerHTML = finance.innerHTML;
        }

        let chartData = null;
        if (chartNode) {
            try {
                chartData = JSON.parse(chartNode.textContent);
            } catch (e) {}
        }

        loadChartJs().then(function () {
            renderCharts(chartData);
        }).catch(function () {});
    }

    function loadAnalytics() {
        if (analyticsLoaded || analyticsLoading) {
            return;
        }

        analyticsLoading = true;

        fetch(analyticsUrl, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
        })
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('Failed to load analytics');
                }
                return response.text();
            })
            .then(function (html) {
                mountAnalytics(html);
                analyticsLoaded = true;
            })
            .catch(function () {
                document.querySelectorAll('.stock-analytics-loading').forEach(function (el) {
                    el.innerHTML = '<span class="text-danger">Could not load analytics. Please refresh.</span>';
                });
            })
            .finally(function () {
                analyticsLoading = false;
            });
    }

    $(function () {
        initYearSelect();

        document.querySelectorAll('[data-stock-load-analytics]').forEach(function (tab) {
            tab.addEventListener('shown.bs.tab', loadAnalytics, { once: true });
        });

        if ('requestIdleCallback' in window) {
            requestIdleCallback(loadAnalytics, { timeout: 3000 });
        } else {
            setTimeout(loadAnalytics, 1500);
        }
    });
})(window.jQuery);
>>>>>>> origin/main
</script>
@endpush