@extends('layouts.app')
@section('title', isset($customer) ? 'Edit Customer' : 'Tambah Customer')

@section('content')
<div class="content-wrapper">
  <div class="col-12 grid-margin stretch-card">
    <div class="card" style="box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border-radius: 12px;">
      <div class="card-body p-4">
        <h4 class="card-title text-primary mb-4" style="font-weight: 600; letter-spacing: 0.5px;">
          <i class="mdi mdi-account-circle-outline mr-2"></i>
          {{ isset($customer) ? 'Edit Customer' : 'Tambah Customer' }}
        </h4>
        <form id="customerForm" class="forms-sample" method="POST">
          @csrf
          <div class="row">
            <div class="col-md-12">
              <h5 class="text-primary font-weight-bold"><i class="mdi mdi-account-plus mr-2"></i>Buat User</h5>
              <hr class="mb-4" style="border-color: rgba(26, 115, 232, 0.1); border-width: 2px;">
              <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                      <label for="user_name" class="text-dark">Marking Code</label>
                      <input type="hidden" name="user_id" value="{{ $customer->user_id ?? '' }}">
                      <input type="text" name="user_name" class="form-control" id="user_name" placeholder="Masukkan nama user"
                        value="{{ $customer->user->name ?? '' }}" style="border-left: 4px solid #1a73e8;">
                      <div id="user_name-error" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                      <label for="user_email" class="text-dark">Email User</label>
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text bg-primary text-white"><i class="mdi mdi-email"></i></span>
                        </div>
                        <input type="email" name="user_email" class="form-control" id="user_email" placeholder="Masukkan email user"
                          value="{{ $customer->user->email ?? '' }}">
                      </div>
                      <div id="user_email-error" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                      <label for="user_password" class="text-dark">Password User {!! isset($customer) ? '<small class="text-info"><i class="mdi mdi-information-outline"></i> (Biarkan kosong jika tidak diganti)</small>' : '' !!}</label>
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text bg-primary text-white"><i class="mdi mdi-lock"></i></span>
                        </div>
                        <input type="text" name="user_password" class="form-control" id="user_password" placeholder="Masukkan password user">
                      </div>
                      <div id="user_password-error" class="invalid-feedback"></div>
                    </div>
                </div>
              </div>
            </div>

            <br><hr><br>

            <div class="col-md-12">
              <h5 class="text-primary font-weight-bold mt-4"><i class="mdi mdi-account-card-details mr-2"></i>Data Customer</h5>
              <hr class="mb-4" style="border-color: rgba(26, 115, 232, 0.1); border-width: 2px;">
              <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Nama Lengkap</label>
                        <input type="text" name="full_name" class="form-control" id="full_name" placeholder="Nama Lengkap"
                          value="{{ $customer->full_name ?? '' }}">
                        <div id="full_name-error" class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                      <label>Nama Perusahaan</label>
                      <input type="text" name="company_name" class="form-control" id="company_name" placeholder="Nama Perusahaan"
                        value="{{ $customer->company_name ?? '' }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                      <label>Alamat</label>
                      <textarea class="form-control" name="address" id="address" rows="2" placeholder="Alamat Lengkap">{{ $customer->address ?? '' }}</textarea>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Nomor Telepon</label>
                        <input type="text" name="phone_number" class="form-control" id="phone_number" placeholder="Nomor Telepon"
                          value="{{ $customer->phone_number ?? '' }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>WhatsApp</label>
                        <input type="text" name="whatsapp" class="form-control" id="whatsapp" placeholder="Nomor WA"
                          value="{{ $customer->whatsapp ?? '' }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Nomor KTP</label>
                        <input type="text" name="id_card" class="form-control" id="id_card" placeholder="Nomor KTP"
                          value="{{ $customer->id_card ?? '' }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>NPWP</label>
                        <input type="text" name="npwp" class="form-control" id="npwp" placeholder="NPWP"
                          value="{{ $customer->npwp ?? '' }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>No Rekening Bank</label>
                        <input type="text" name="bank_number" class="form-control" id="bank_number" placeholder="No Rekening"
                          value="{{ $customer->bank_number ?? '' }}">
                    </div>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group mt-4 pt-2" 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($customer) ? 'Update' : 'Submit' }}
            </button>
            <a href="{{ route('customers.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 = {
      user_name: $('#user_name').val(),
      user_email: $('#user_email').val(),
      user_password: $('#user_password').val(),
      full_name: $('#full_name').val(),
      company_name: $('#company_name').val(),
      address: $('#address').val(),
      phone_number: $('#phone_number').val(),
      whatsapp: $('#whatsapp').val(),
      id_card: $('#id_card').val(),
      npwp: $('#npwp').val(),
      bank_number: $('#bank_number').val(),
      _token: '{{ csrf_token() }}'
    };

    // validasi sederhana
    if (data.user_name == '' || data.user_email == '' || (!'{{ isset($customer) }}' && data.user_password == '') || data.full_name == '') {
      Swal.fire({
        title: "Error!",
        text: "Nama User, Email User, {{ isset($customer) ? '' : 'Password User, ' }}dan Nama Customer wajib diisi!",
        icon: "error"
      });
      return;
    }

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

    $.ajax({
      url: url,
      method: method,
      data: data,
      success: function(response){
        if (response.success) {
          Swal.fire({
            title: "Success!",
            text: "{{ isset($customer) ? 'Data customer berhasil diupdate!' : 'Data customer berhasil ditambahkan!' }}",
            icon: "success"
          });
          setTimeout(() => { window.location.href = "{{ route('customers.index') }}"; }, 1000);
        } else {
          Swal.fire({
            title: "Gagal!",
            text: response.message || "Terjadi error saat menyimpan data.",
            icon: "error"
          });
        }
      },
      error: function(){
        Swal.fire({
          title: "Gagal!",
          text: "Terjadi error saat menghubungi server.",
          icon: "error"
        });
      }
    });
  });
});
</script>
@stop