{{-- resources/views/stocks/movement.blade.php --}}
@extends('layouts.main')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<style>
  .filters .form-label { font-weight: 600; }
  .dt-details-btn, .btn-user-dates { cursor: pointer; }
  .child-table td, .child-table th { padding: .35rem .5rem; }
  .child-wrap { background: #f8fafc; border-left: 3px solid #0d6efd; padding: .5rem .75rem; }
  #daily-summary-table tfoot td,
  #by-user-summary-table tfoot td { border-top: 2px solid #dee2e6; }
  .d-none { display: none !important; }
</style>
@endpush

@section('content')
<div class="content-wrapper">
  <div class="content-header">
    <div class="container-fluid p-0">
      <h1 class="h3 mb-3">Stock Movement</h1>
    </div>
  </div>

  <div class="container-fluid">

    {{-- Filters --}}
    <div class="card mb-3">
      <div class="card-body">
        <form id="filtersForm" class="filters">
          <div class="row g-3 align-items-end">
            <div class="col-md-3">
              <label for="date_from" class="form-label">From</label>
              <input type="date" id="date_from" class="form-control" />
            </div>
            <div class="col-md-3">
              <label for="date_to" class="form-label">To</label>
              <input type="date" id="date_to" class="form-control" />
            </div>
            <div class="col-md-3">
              <label for="user_id" class="form-label">User</label>
              <select id="user_id" class="form-select">
                <option value="">All Users</option>
                @foreach(($users ?? []) as $u)
                  <option value="{{ $u->id }}">{{ $u->name }}</option>
                @endforeach
              </select>
            </div>

            <div class="col-md-3">
              <label for="type" class="form-label">Movement Type</label>
              <select id="type" class="form-select">
                <optgroup label="Movements">
                  <option value="all" selected>All</option>
                  <option value="in">Cement In</option>
                  <option value="out_production">Cement Out → Production</option>
                  <option value="out_selling">Cement Out → Selling</option>
                  {{-- NEW: combine Production + Selling (only Out) --}}
                  <option value="out_prod_selling">Cement Out → Production + Selling</option>
                </optgroup>
                <optgroup label="Summaries">
                  <option value="summary_daily">Daily Summary (In / Out / Net / Balance)</option>
                  <option value="summary_user">By User Summary</option>
                </optgroup>
              </select>
            </div>

            <div class="col-12 d-flex gap-2">
              <button type="button" id="applyFilters" class="btn btn-primary">
                <i class="fa fa-filter me-1"></i> Apply
              </button>
              <button type="button" id="resetFilters" class="btn btn-outline-secondary">
                <i class="fa fa-undo me-1"></i> Reset
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

    {{-- Daily Summary (In / Out / Net / Running Balance) --}}
    <div id="card-daily" class="card mb-3 d-none">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">Daily Summary (In / Out / Net / Balance)</h5>
        <small class="text-muted">Respects filters above</small>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-sm table-striped" id="daily-summary-table">
            <thead>
              <tr>
                <th style="width: 140px;">Date</th>
                <th>Supplier</th>
                <th>Stock In</th>
                <th>Stock Out</th>
                <th>Net (In - Out)</th>
                <th>Balance (Running)</th>
              </tr>
            </thead>
            <tbody>
              <tr><td colspan="6" class="text-muted">Use Apply to load…</td></tr>
            </tbody>
            <tfoot>
              <tr class="fw-bold">
                <td colspan="2">Totals (All Suppliers)</td>
                <td id="sum-in">0</td>
                <td id="sum-out">0</td>
                <td id="sum-net">0</td>
                <td id="sum-balance">—</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>

    {{-- By User Summary (with per-user date breakdown) --}}
    <div id="card-user" class="card mb-4 d-none">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">By User Summary</h5>
        <small class="text-muted">Totals per user (respects filters above)</small>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-sm table-striped" id="by-user-summary-table">
            <thead>
              <tr>
                <th>User</th>
                <th>Stock In</th>
                <th>Stock Out</th>
                <th>Net (In - Out)</th>
                <th style="width:100px;">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr><td colspan="5" class="text-muted">Use Apply to load…</td></tr>
            </tbody>
            <tfoot>
              <tr class="fw-bold">
                <td>Totals</td>
                <td id="user-sum-in">0</td>
                <td id="user-sum-out">0</td>
                <td id="user-sum-net">0</td>
                <td></td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>

    {{-- Movement Log --}}
    <div id="card-log" class="card">
      <div class="card-header"><h5 class="card-title mb-0">Movement Log</h5></div>
      <div class="card-body">
        <table id="movement-table" class="table table-striped w-100">
          <thead>
            <tr>
              <th>ID</th>
              <th>Date/Time</th>
              <th>User</th>
              <th>Supplier</th>
              <th>Movement</th>
              <th>Quantity</th>
              <th>Production (Bricks)</th>
              <th>Details</th>
              <th>Remarks</th>
            </tr>
          </thead>
          <tfoot>
            <tr class="fw-bold bg-light">
              <td colspan="5" class="text-end">TOTAL (Current Page):</td>
              <td id="movement-total">0</td>
              <td colspan="3"></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

  </div>
</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

<script>
  // --- UI toggling depending on Movement Type
  function toggleSections() {
    const t = ($('#type').val() || '').toLowerCase();

    // hide all
    $('#card-daily').addClass('d-none');
    $('#card-user').addClass('d-none');
    $('#card-log').addClass('d-none');

    if (t === 'summary_daily') {
      $('#card-daily').removeClass('d-none');
    } else if (t === 'summary_user') {
      $('#card-user').removeClass('d-none');
    } else {
      // Movement view for: all / in / out_* types
      $('#card-log').removeClass('d-none');
    }
  }

  function renderChildTable(rows) {
    let html = `
      <div class="child-wrap">
        <div class="table-responsive">
          <table class="table table-sm table-bordered child-table">
            <thead>
              <tr>
                <th>Brick Type</th>
                <th>Expected</th>
                <th>Actual</th>
                <th>Fault</th>
                <th>Good</th>
                <th>Status</th>
                <th>Remark</th>
              </tr>
            </thead>
            <tbody>
    `;
    (rows || []).forEach(r => {
      html += `
        <tr>
          <td>${r.brick_type ?? '—'}</td>
          <td>${Number(r.expected ?? 0).toLocaleString()}</td>
          <td>${Number(r.actual ?? 0).toLocaleString()}</td>
          <td>${Number(r.fault ?? 0).toLocaleString()}</td>
          <td>${Number(r.good ?? 0).toLocaleString()}</td>
          <td>${r.status ?? '—'}</td>
          <td>${r.remark ?? '—'}</td>
        </tr>`;
    });
    html += `</tbody></table></div></div>`;
    return html;
  }

  // Per-user dates breakdown table
  function renderUserDatesTable(rows) {
    if (!rows || !rows.length) {
      return '<div class="child-wrap"><em class="text-muted">No dated actions for this user in the selected filters.</em></div>';
    }
    let html = `
      <div class="child-wrap">
        <div class="table-responsive">
          <table class="table table-sm table-bordered child-table">
            <thead>
              <tr>
                <th>Date</th>
                <th>In</th>
                <th>Out</th>
                <th>Net</th>
              </tr>
            </thead>
            <tbody>
    `;
    let tin=0,tout=0,tnet=0;
    rows.forEach(r => {
      const i = Number(r.in||0), o = Number(r.out||0), n = Number(r.net||0);
      tin += i; tout += o; tnet += n;
      html += `
        <tr>
          <td>${r.day}</td>
          <td>${i.toLocaleString()}</td>
          <td>${o.toLocaleString()}</td>
          <td>${n.toLocaleString()}</td>
        </tr>`;
    });
    html += `
            </tbody>
            <tfoot>
              <tr class="fw-bold">
                <td>Totals</td>
                <td>${tin.toLocaleString()}</td>
                <td>${tout.toLocaleString()}</td>
                <td>${tnet.toLocaleString()}</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>`;
    return html;
  }

  // Load summaries (Daily + By User); controller respects filters & type
  function loadSummaries() {
    const params = {
      date_from: $('#date_from').val() || '',
      date_to:   $('#date_to').val()   || '',
      user_id:   $('#user_id').val()   || '',
      type:      $('#type').val()      || 'all',
    };

    const $dailyBody = $('#daily-summary-table tbody')
      .html('<tr><td colspan="6" class="text-muted">Loading...</td></tr>');
    const $userBody  = $('#by-user-summary-table tbody')
      .html('<tr><td colspan="5" class="text-muted">Loading...</td></tr>');

    $.ajax({
      url: '{{ route("stocks.movement.summary") }}',
      data: params,
      success: function (res) {
        // ---- Daily ----
        const daily = res.daily || [];
        const dTot  = res.daily_totals || {in:0, out:0, net:0, balance:0};

        if (!daily.length) {
          $dailyBody.html('<tr><td colspan="6" class="text-muted">No data for selected filters.</td></tr>');
        } else {
          let html = '';
          daily.forEach(r => {
            html += `
              <tr>
                <td>${r.day}</td>
                <td>${r.supplier_name}</td>
                <td>${Number(r.in).toLocaleString()}</td>
                <td>${Number(r.out).toLocaleString()}</td>
                <td>${Number(r.net).toLocaleString()}</td>
                <td>${Number(r.balance).toLocaleString()}</td>
              </tr>`;
          });
          $dailyBody.html(html);
        }
        $('#sum-in').text(Number(dTot.in).toLocaleString());
        $('#sum-out').text(Number(dTot.out).toLocaleString());
        $('#sum-net').text(Number(dTot.net).toLocaleString());
        $('#sum-balance').text(Number(dTot.balance).toLocaleString());

        // ---- By-user + per-user dates ----
        const byUser      = res.by_user || [];
        const uTot        = res.by_user_totals || {in:0, out:0, net:0};
        const byUserDates = res.by_user_dates || {}; // user_id => [{day,in,out,net}]

        if (!byUser.length) {
          $userBody.html('<tr><td colspan="5" class="text-muted">No data for selected filters.</td></tr>');
        } else {
          let uhtml = '';
          byUser.forEach(r => {
            const uid = Number(r.user_id);
            uhtml += `
              <tr data-user-id="${uid}">
                <td>${r.user_name}</td>
                <td>${Number(r.in).toLocaleString()}</td>
                <td>${Number(r.out).toLocaleString()}</td>
                <td>${Number(r.net).toLocaleString()}</td>
                <td>
                  <button class="btn btn-sm btn-outline-primary btn-user-dates" data-user="${uid}">Details</button>
                </td>
              </tr>`;
          });
          $userBody.html(uhtml);
        }
        $('#user-sum-in').text(Number(uTot.in).toLocaleString());
        $('#user-sum-out').text(Number(uTot.out).toLocaleString());
        $('#user-sum-net').text(Number(uTot.net).toLocaleString());

        // Save dates map globally for click handler
        window.BY_USER_DATES = byUserDates;
      },
      error: function () {
        $dailyBody.html('<tr><td colspan="6" class="text-danger">Failed to load summary.</td></tr>');
        $userBody.html('<tr><td colspan="5" class="text-danger">Failed to load summary.</td></tr>');
        $('#sum-in, #sum-out, #sum-net, #sum-balance, #user-sum-in, #user-sum-out, #user-sum-net').text('0');
      }
    });
  }

  $(function () {
    // Movement DataTable (used when Movement Type is a movement, not a summary)
    const table = $('#movement-table').DataTable({
      processing: true,
      serverSide: true,
      searching: false,
      lengthMenu: [
        [10, 25, 50, 100, -1],
        [10, 25, 50, 100, 'All'] // "Show All" option
      ],
      ajax: {
        url: '{{ route("cements.movement") }}',
        data: function (d) {
          d.date_from = $('#date_from').val();
          d.date_to   = $('#date_to').val();
          d.user_id   = $('#user_id').val();
          d.type      = $('#type').val(); // all | in | out_production | out_selling | out_prod_selling | summary_*
        }
      },
      order: [[1, 'desc']],
      footerCallback: function (row, data, start, end, display) {
        let totalQty = 0;

        data.forEach(function (row) {
          // row.total is formatted (e.g. "1,234") so strip commas
          const qty = parseFloat(String(row.total).replace(/,/g, '')) || 0;
          totalQty += qty;
        });

        $('#movement-total').text(totalQty.toLocaleString());
      },
      columns: [
        { data: 'id', name: 'id', width: '60px' },
        { data: 'created_at', name: 'created_at' },
        { data: 'user', name: 'user.name' },
        { data: 'supplier_name', name: 'supplier.name' },
        { data: 'transaction_label', name: 'transaction_type' },
        { data: 'total', name: 'total' },
        { data: 'production_summary', name: 'production_summary', defaultContent: '—' },
        {
          data: null,
          orderable: false,
          searchable: false,
          width: '80px',
          render: function (row) {
            const isProd = (row.transaction_type === 'out'
              && (row.transaction_type_description || '').toLowerCase() === 'production');
            if (!isProd) return '—';
            return `<button class="btn btn-sm btn-outline-primary dt-details-btn" data-id="${row.id}">Details</button>`;
          }
        },
        { data: 'remarks', name: 'remarks', render: d => d ? d : '—' },
      ],
      createdRow: function (row, data) {
        $(row).data('bricks_rows', data.bricks_rows || []);
      }
    });

    // Initial view
    toggleSections();

    // Change of Movement Type toggles sections immediately
    $('#type').on('change', function () {
      toggleSections();
    });

    // Apply filters
    $('#applyFilters').on('click', function () {
      const t = ($('#type').val() || '').toLowerCase();
      if (t === 'summary_daily' || t === 'summary_user') {
        loadSummaries();
      } else {
        $('#movement-table').DataTable().ajax.reload();
      }
    });

    // Reset
    $('#resetFilters').on('click', function () {
      $('#date_from').val('');
      $('#date_to').val('');
      $('#user_id').val('');
      $('#type').val('all').trigger('change');
      $('#movement-table').DataTable().ajax.reload();
    });

    // Enter to apply
    $('#filtersForm input').on('keydown', function(e){
      if (e.key === 'Enter') {
        e.preventDefault();
        $('#applyFilters').click();
      }
    });

    // Movement → child-row toggle for Production details
    $('#movement-table tbody').on('click', '.dt-details-btn', function () {
      const tr  = $(this).closest('tr');
      const row = table.row(tr);

      if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
        $(this).text('Details');
      } else {
        const payload = $(tr).data('bricks_rows') || [];
        row.child(renderChildTable(payload)).show();
        tr.addClass('shown');
        $(this).text('Hide');
      }
    });

    // By User Summary → expand/collapse per-user date details
    $('#by-user-summary-table tbody').on('click', '.btn-user-dates', function () {
      const $btn = $(this);
      const uid  = Number($btn.data('user'));
      const $tr  = $btn.closest('tr');

      if ($tr.hasClass('shown')) {
        $tr.next('.user-dates-row').remove();
        $tr.removeClass('shown');
        $btn.text('Details');
        return;
      }

      const rows = (window.BY_USER_DATES && window.BY_USER_DATES[uid]) ? window.BY_USER_DATES[uid] : [];
      const childHtml = `<tr class="user-dates-row"><td colspan="5">${renderUserDatesTable(rows)}</td></tr>`;

      $tr.next('.user-dates-row').remove();
      $tr.after(childHtml);
      $tr.addClass('shown');
      $btn.text('Hide');
    });
  });
</script>
@endpush