@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">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</div>
    <div class="card-body p-4">
      <form action="{{ route('coffee.sales.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">Type</label>
          <div class="col-sm-9">
            <select name="sale_type" id="sale_type" class="form-select" required>
              <option value="">Select Type</option>
              <option value="ungraded">Ungraded Only</option>
              <option value="graded">Graded Only</option>
              <option value="both">Both Graded and Ungraded</option>
            </select>
          </div>
        </div>

        <div class="row mb-3" id="screen_lines_section" style="display:none;">
          <label class="col-sm-3 col-form-label">Screen 18 Weight (kg)</label>
          <div class="col-sm-9">
            <input type="number" name="screen18_weight" class="form-control text-end screen-weight" id="screen18_weight">
            <input type="hidden" name="screens[]" value="Screen 18">
          </div>
        </div>

        <div class="row mb-3" id="ungraded_section" style="display:none;">
          <label class="col-sm-3 col-form-label">Ungraded Weight (kg)</label>
          <div class="col-sm-9">
            <input type="number" name="ungraded_weight" class="form-control text-end" id="ungraded_weight">
          </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 datepicker" 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 Coffee Sale
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- Add Buyer Modal --}}
<div class="modal fade" id="addBuyerModal" tabindex="-1">
  <div class="modal-dialog"><div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Add New Buyer</h5>
      <button class="btn-close" data-bs-dismiss="modal"></button>
    </div>
    <div class="modal-body">
      <form id="addBuyerForm" action="{{ route('add.buyer.store') }}" method="POST">
        @csrf
        <div class="mb-3">
          <label class="form-label">Buyer Name</label>
          <input type="text" class="form-control" name="name" required>
        </div>
        <div class="mb-3">
          <label class="form-label">Company Name</label>
          <input type="text" class="form-control" name="company_name">
        </div>
        <div class="mb-3">
          <label class="form-label">Contact Number</label>
          <input type="text" class="form-control" name="contact_number" required>
        </div>
        <button type="submit" class="btn btn-success w-100">Save Buyer</button>
      </form>
    </div>
  </div></div>
</div>
@endsection

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

    function toggleWeightSections(type) {
      if (type === 'ungraded') {
        $('#screen_lines_section').hide();
        $('#ungraded_section').show();
      } else if (type === 'graded') {
        $('#screen_lines_section').show();
        $('#ungraded_section').hide();
      } else if (type === 'both') {
        $('#screen_lines_section').show();
        $('#ungraded_section').show();
      } else {
        $('#screen_lines_section').hide();
        $('#ungraded_section').hide();
      }
    }

    $('#sale_type').on('change', function () {
      const type = $(this).val();
      toggleWeightSections(type);
      calculateNetWeight();
    }).trigger('change');

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

    function calculateNetWeight() {
      const type = $('#sale_type').val();
      let gradedWeight = parseFloat($('#screen18_weight').val()) || 0;
      let ungradedWeight = parseFloat($('#ungraded_weight').val()) || 0;
      let gross = 0;

      if (type === 'graded') gross = gradedWeight;
      else if (type === 'ungraded') gross = ungradedWeight;
      else if (type === 'both') gross = gradedWeight + ungradedWeight;

      let samples = parseFloat($('#samples').val()) || 0;
      let dryLoss = parseFloat($('#dry_loss').val()) || 0;
      let mcDeduct = parseFloat($('#mc_deduction').val()) || 0;
      const net = gross - samples - dryLoss - mcDeduct;
      $('#net_weight').val(net.toFixed(2));
    }

    new bootstrap.Tooltip(document.getElementById('add-buyer-btn'), {
      title: 'Add Buyer',
      placement: 'top',
      trigger: 'hover'
    });
  });

   $('#addBuyerForm').on('submit', function (e) {
      e.preventDefault();
      let form = $(this);
      $.post(form.attr('action'), form.serialize())
        .done(res => {
          if (res.success && res.buyer) {
            let newOption = new Option(res.buyer.name, res.buyer.id, true, true);
            $('#single-select-field').append(newOption).trigger('change');
            $('#addBuyerModal').modal('hide');
            form[0].reset();
            Swal.fire('Success', 'Buyer added successfully.', 'success');
          }
        })
        .fail(xhr => {
          let msg = 'Error occurred.';
          if (xhr.responseJSON?.errors) {
            msg = Object.values(xhr.responseJSON.errors).flat().join('\n');
          }
          Swal.fire('Error', msg, 'error');
        });
    });


</script>
@endpush