@extends('layouts.app')
@section('title', isset($ratePlan) ? 'Edit Rate Plan' : 'Add Rate Plan')

@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($ratePlan) ? 'Edit Rate Plan' : 'Add Rate Plan' }}</h4>
        <form id="RatePlanForm" class="forms-sample" method="POST">
          @csrf
          <div class="row">
            <div class="col-md-12">
              <hr>
              <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                      <label>Name</label>
                      <input type="text" name="name" class="form-control" id="name" placeholder="Rate Plan Name"
                        value="{{ $ratePlan->name ?? '' }}">
                      <div id="name-error" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                      <label>Price per CBM</label>
                      <input type="number" name="price_per_cbm" class="form-control" id="price_per_cbm" placeholder="Price per CBM"
                        value="{{ $ratePlan->price_per_cbm ?? '' }}">
                      <div id="price_per_cbm-error" class="invalid-feedback"></div>
                    </div>
                </div>
                {{-- <div class="col-md-6">
                    <div class="form-group">
                      <label>Price per KG</label>
                      <input type="number" name="price_per_kg" class="form-control" id="price_per_kg" placeholder="Price per KG"
                        value="{{ $ratePlan->price_per_kg ?? '' }}">
                      <div id="price_per_kg-error" class="invalid-feedback"></div>
                    </div>
                </div> --}}
                {{-- <div class="col-md-6">
                    <div class="form-group">
                      <label>KG Threshold</label>
                      <input type="number" name="kg_threshold" class="form-control" id="kg_threshold" placeholder="KG Threshold"
                        value="{{ $ratePlan->kg_threshold ?? '' }}">
                      <div id="kg_threshold-error" class="invalid-feedback"></div>
                    </div>
                </div> --}}
                <div class="col-md-6">
                    <div class="form-group">
                      <label>Is Custom</label>
                      <select name="is_custom" id="is_custom" class="form-control">
                        <option value="1" {{ isset($ratePlan) && $ratePlan->is_custom ? 'selected' : '' }}>Yes</option>
                        <option value="0" {{ isset($ratePlan) && !$ratePlan->is_custom ? 'selected' : '' }}>No</option>
                      </select>
                      <div id="is_custom-error" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                      <label>Effective From</label>
                      <input type="date" name="effective_from" class="form-control" id="effective_from"
                        value="{{ isset($ratePlan) ? date('Y-m-d', strtotime($ratePlan->effective_from)) : '' }}">
                      <div id="effective_from-error" class="invalid-feedback"></div>
                    </div>
                </div>
              </div>
            </div>

            <br><hr><br>
          </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($ratePlan) ? 'Update' : 'Submit' }}
            </button>
            <a href="{{ route('rateplans.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 = {
        name: $('#name').val(),
        price_per_cbm: $('#price_per_cbm').val(),
        price_per_kg: $('#price_per_kg').val(),
        kg_threshold: $('#kg_threshold').val(),
        is_custom: $('#is_custom').val(),
        effective_from: $('#effective_from').val(),
        _token: '{{ csrf_token() }}'
    };

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

    $.ajax({
        url: url,
        method: method,
        data: data,
        success: function(response){
            if (response.success) {
                Swal.fire({
                    title: "Success!",
                    text: "{{ isset($ratePlan) ? 'Rate Plan successfully updated!' : 'Rate Plan successfully added!' }}",
                    icon: "success"
                });
                setTimeout(() => { window.location.href = "{{ route('rateplans.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