@extends('layouts.app')
@section('title', isset($product) ? 'Edit Product' : 'Add Product')

@section('content')
<div class="content-wrapper">
  <div class="col-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">{{ isset($product) ? 'Edit Product' : 'Add Product' }}</h4>
        <form id="ProductForm" class="forms-sample" method="POST">
          @csrf
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label>Customer</label>
                <select name="customer_id" id="customer_id" class="form-control">
                  <option value="">Select Customer</option>
                  @foreach($customers as $customer)
                    <option value="{{ $customer->id }}" {{ isset($product) && $product->customer_id == $customer->id ? 'selected' : '' }}>
                      {{ $customer->full_name }}
                    </option>
                  @endforeach
                </select>
                <div id="customer_id-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Category</label>
                <select name="category_id" id="category_id" class="form-control">
                  <option value="">Select Category</option>
                  @foreach($categories as $category)
                    <option value="{{ $category->id }}" {{ isset($product) && $product->category_id == $category->id ? 'selected' : '' }}>
                      {{ $category->name }}
                    </option>
                  @endforeach
                </select>
                <div id="category_id-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Product Code</label>
                <input type="text" name="product_code" class="form-control" id="product_code" placeholder="Enter Product Code" value="{{ $product->product_code ?? '' }}">
                <div id="product_code-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Product Name</label>
                <input type="text" name="name" class="form-control" id="name" placeholder="Enter Product Name" value="{{ $product->name ?? '' }}">
                <div id="name-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label>Description</label>
                <textarea name="description" class="form-control" id="description" rows="4" placeholder="Enter Product Description">{{ $product->description ?? '' }}</textarea>
                <div id="description-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label>Quantity</label>
                <input type="number" name="quantity" class="form-control" id="quantity" placeholder="Enter Quantity" value="{{ $product->quantity ?? '' }}">
                <div id="quantity-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label>Weight (kg)</label>
                <input type="number" step="0.01" name="weight_kg" class="form-control" id="weight_kg" placeholder="Enter Weight per Unit" value="{{ $product->weight_kg ?? '' }}">
                <div id="weight_kg-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label>Total Weight (kg)</label>
                <input type="number" step="0.01" name="total_weight_kg" class="form-control" id="total_weight_kg" placeholder="Enter Total Weight" value="{{ $product->total_weight_kg ?? '' }}">
                <div id="total_weight_kg-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label>Length (m)</label>
                <input type="number" step="0.01" name="length_m" class="form-control" id="length_m" placeholder="Enter Length" value="{{ $product->length_m ?? '' }}">
                <div id="length_m-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label>Width (m)</label>
                <input type="number" step="0.01" name="width_m" class="form-control" id="width_m" placeholder="Enter Width" value="{{ $product->width_m ?? '' }}">
                <div id="width_m-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label>Height (m)</label>
                <input type="number" step="0.01" name="height_m" class="form-control" id="height_m" placeholder="Enter Height" value="{{ $product->height_m ?? '' }}">
                <div id="height_m-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                  <label>Volume CBM</label>
                  <input type="number" step="0.01" name="volume_cbm" class="form-control" id="volume_cbm" placeholder="Enter Height" value="{{ $product->volume_cbm ?? '' }}">
                  <div id="volume_cbm-error" class="invalid-feedback"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                  <label>Total Volume CBM</label>
                  <input type="number" step="0.01" name="total_volume_cbm" class="form-control" id="total_volume_cbm" placeholder="Enter Height" value="{{ $product->total_volume_cbm ?? '' }}">
                  <div id="total_volume_cbm-error" class="invalid-feedback"></div>
                </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Declared Value</label>
                <input type="number" step="0.01" name="declared_value" class="form-control" id="declared_value" placeholder="Enter Declared Value" value="{{ $product->declared_value ?? '' }}">
                <div id="declared_value-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Origin Country</label>
                <input type="text" name="origin_country" class="form-control" id="origin_country" placeholder="Enter Origin Country" value="{{ $product->origin_country ?? 'China' }}">
                <div id="origin_country-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Destination</label>
                <input type="text" name="destination" class="form-control" id="destination" placeholder="Enter Destination" value="{{ $product->destination ?? '' }}">
                <div id="destination-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Is Fragile</label>
                <select name="is_fragile" id="is_fragile" class="form-control">
                  <option value="1" {{ isset($product) && $product->is_fragile ? 'selected' : '' }}>Yes</option>
                  <option value="0" {{ isset($product) && !$product->is_fragile ? 'selected' : '' }}>No</option>
                </select>
                <div id="is_fragile-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Is Liquid</label>
                <select name="is_liquid" id="is_liquid" class="form-control">
                  <option value="1" {{ isset($product) && $product->is_liquid ? 'selected' : '' }}>Yes</option>
                  <option value="0" {{ isset($product) && !$product->is_liquid ? 'selected' : '' }}>No</option>
                </select>
                <div id="is_liquid-error" class="invalid-feedback"></div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Is Custom Clearance</label>
                <select name="is_custom_clearance" id="is_custom_clearance" class="form-control">
                  <option value="1" {{ isset($product) && $product->is_custom_clearance ? 'selected' : '' }}>Yes</option>
                  <option value="0" {{ isset($product) && !$product->is_custom_clearance ? 'selected' : '' }}>No</option>
                </select>
                <div id="is_custom_clearance-error" class="invalid-feedback"></div>
              </div>
            </div>
          </div>
          <div class="form-group mt-4 pt-3" style="border-top: 1px solid #eee;">
            <button type="button" id="btn-save" class="btn btn-primary me-2 px-4" style="font-weight: 500; letter-spacing: 0.5px;">
              <i class="mdi mdi-content-save mr-1"></i> {{ isset($product) ? 'Update' : 'Submit' }}
            </button>
            <a href="{{ route('products.index') }}" class="btn btn-light px-4" style="font-weight: 500;">
              <i class="mdi mdi-close-circle mr-1"></i> Cancel
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@stop

@section('footer')
<script type="text/javascript">
$(document).ready(function(){
  $.ajaxSetup({
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
  });

  $('#btn-save').on('click', function(){
    var data = {
      customer_id: $('#customer_id').val(),
      category_id: $('#category_id').val(),
      product_code: $('#product_code').val(),
      name: $('#name').val(),
      description: $('#description').val(),
      quantity: $('#quantity').val(),
      weight_kg: $('#weight_kg').val(),
      total_weight_kg: $('#total_weight_kg').val(),
      volume_cbm: $('#volume_cbm').val(),
      total_volume_cbm: $('#total_volume_cbm').val(),
      length_m: $('#length_m').val(),
      width_m: $('#width_m').val(),
      height_m: $('#height_m').val(),
      declared_value: $('#declared_value').val(),
      origin_country: $('#origin_country').val(),
      destination: $('#destination').val(),
      is_fragile: $('#is_fragile').val(),
      is_liquid: $('#is_liquid').val(),
      is_custom_clearance: $('#is_custom_clearance').val(),
      _token: '{{ csrf_token() }}'
    };
    console.log(data)

    var url = "{{ isset($product) ? route('products.update', $product->id) : route('products.store') }}";
    var method = "{{ isset($product) ? 'PATCH' : 'POST' }}";

    $.ajax({
      url: url,
      method: method,
      data: data,
      beforeSend: function() {
        Swal.fire({
            title: "Loading!",
            text: "{{ isset($product) ? 'Product updating, wait a minute...' : 'Product creating, wait a minute...' }}",
            icon: "warning"
          });
      },
      success: function(response){
        if (response.success) {
          Swal.fire({
            title: "Success!",
            text: "{{ isset($product) ? 'Product successfully updated!' : 'Product successfully added!' }}",
            icon: "success"
          });
          setTimeout(() => { window.location.href = "{{ route('products.index') }}"; }, 1000);
        } else {
          Swal.fire({
            title: "Failed!",
            text: response.message || "An error occurred while saving data.",
            icon: "error"
          });
        }
      },
      error: function(){
        Swal.fire({
          title: "Failed!",
          text: "An error occurred while contacting the server.",
          icon: "error"
        });
      }
    });
  });
});
</script>
@stop