@extends('admin.admin_dashboard')

@section('admin')
<style>
  .input-group { overflow: visible !important; }
  .select2-container--open .select2-dropdown { z-index: 9999; }
  .card-header-custom {
    background-color: #f7f7f7;
    border-bottom: 1px solid #e0e0e0;
    padding: 1rem 1.5rem;
    font-weight: 600;
  }
  .is-valid { border-color: #198754 !important; }
  .is-invalid { border-color: #dc3545 !important; }
</style>

<div class="page-content">
  <div class="d-flex align-items-center justify-content-between mb-4 p-3 bg-light rounded shadow-sm">
    <div class="d-flex align-items-center">
      <i class="bx bx-seed fs-3" style="color: #6f4f1f;"></i>
      <h4 class="mb-0 ms-2">Old Stock Coffee Sale</h4>
    </div>
    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addBuyerModal" id="add-buyer-btn">
      <i class="bx bx-plus me-1"></i> Add Buyer
    </button>
  </div>

  <div class="card shadow-sm rounded-lg border-0 mb-5">
    <div class="card-header card-header-custom">New Sale (Old Stock)</div>
    <div class="card-body p-4">
      <form action="{{ route('coffee.sales.old.store') }}" method="POST">
        @csrf

        <div class="row mb-3">
          <label class="col-sm-3 col-form-label">Buyer</label>
          <div class="col-sm-9">
            <select class="form-select select2" id="single-select-field" name="buyer_id" required>
              <option value="">Select a Buyer</option>
              @foreach($buyers as $buyer)
                <option value="{{ $buyer->id }}">{{ $buyer->name }}</option>
              @endforeach
            </select>
          </div>
        </div>

        <div class="row mb-3">
          <label class="col-sm-3 col-form-label">Ungraded Weight (kg)</label>
          <div class="col-sm-9">
            <input type="number" name="ungraded_weight" id="ungraded_weight" class="form-control text-end" required>
          </div>
        </div>

        <div class="row mb-3">
          <label class="col-sm-3 col-form-label">Samples (kg)</label>
          <div class="col-sm-9">
            <input type="number" name="samples" id="samples" class="form-control text-end">
          </div>
        </div>

        <div class="row mb-3">
          <label class="col-sm-3 col-form-label">Dry Loss/Gain (kg)</label>
          <div class="col-sm-9">
            <input type="number" name="dry_loss_gain" id="dry_loss" class="form-control text-end">
          </div>
        </div>

        <div class="row mb-3">
          <label class="col-sm-3 col-form-label">MC Deduction (kg)</label>
          <div class="col-sm-9">
            <input type="number" name="mc_deduction" id="mc_deduction" class="form-control text-end">
          </div>
        </div>

        <div class="row mb-3">
          <label class="col-sm-3 col-form-label">Net Weight (kg)</label>
          <div class="col-sm-9">
            <input type="number" name="net_weight" id="net_weight" class="form-control text-end" readonly>
          </div>
        </div>

        <div class="row mb-4">
          <label class="col-sm-3 col-form-label">Selling Price (UGX/kg)</label>
          <div class="col-sm-3">
            <input type="number" step="0.01" name="selling_price" class="form-control text-end" required>
          </div>
          <label class="col-sm-3 col-form-label">Date Sold</label>
          <div class="col-sm-3">
            <input type="date" name="date_sold" class="form-control" required>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-9 offset-sm-3 text-end">
            <button type="submit" class="btn btn-primary btn-lg w-auto">
              <i class="bx bx-check me-2"></i> Save Old Stock Sale
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>


@endsection

@push('scripts')
<script>
  $(document).ready(function () {
    $('.select2').select2({ theme: 'bootstrap-5', width: '100%' });

    $(document).on('input', '#ungraded_weight, #samples, #dry_loss, #mc_deduction', function () {
      calculateNetWeight();
    });

    function calculateNetWeight() {
      let gross = parseFloat($('#ungraded_weight').val()) || 0;
      let samples = parseFloat($('#samples').val()) || 0;
      let dryLoss = parseFloat($('#dry_loss').val()) || 0;
      let mcDeduct = parseFloat($('#mc_deduction').val()) || 0;

      let net = gross - samples - dryLoss - mcDeduct;
      $('#net_weight').val(net.toFixed(2));
    }
  });
</script>
@endpush