@extends('administrative.layouts.main')
@section('title', 'Create New Customer')
@section('content')
  <x-breadcrumb custom="true">
    <li class="inline-flex items-center">
      <a href="{{ route('administrative.dashboard') }}" class="text-sm font-medium text-primary text-primary-hover">
        <i class="fas fa-home me-1"></i>
        Dashboard
      </a>
    </li>
    <li class="inline-flex items-center">
      <a href="{{ route('administrative.user', ['type' => 'user']) }}"
        class="text-sm font-medium text-primary text-primary-hover">Users</a>
    </li>
    <li class="inline-flex items-center">
      <a href="#" class="text-sm font-medium">Create</a>
    </li>
  </x-breadcrumb>

  <div class="flex justify-between items-center mt-5">
    <div>
      <h4 class="text-2xl font-semibold">Create New Customer</h4>
    </div>
  </div>

  <div class="mt-6 rounded-lg bg-white p-4 shadow-[0_0_10px_0_rgba(183,192,206,0.2)]">
    <form class="grid md:grid-cols-2 gap-4" action="{{ route('administrative.user.store') }} " method="POST"
      enctype="multipart/form-data" autocomplete="off">
      @csrf

      <div class="form-group">
        <label for="customer_code">Customer Id (From Ybx)</label>
        <x-input id="customer_code" name="customer_code" autocomplete="off" placeholder="Enter customer id"
          value="{{ old('customer_code') }}" required />
        @error('customer_code')
          <div class="text-danger-500">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="customer_name">Customer Name</label>
        <x-input id="customer_name" name="customer_name" autocomplete="off" placeholder="Enter customer name"
          value="{{ old('customer_name') }}" />
        @error('customer_name')
          <div class="text-danger-500">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="first_name">First Name</label>
        <x-input id="first_name" name="first_name" autocomplete="off" placeholder="Enter first name"
          value="{{ old('first_name') }}" required />
        @error('first_name')
          <div class="text-danger-500">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="last_name">Last Name</label>
        <x-input id="last_name" name="last_name" autocomplete="off" placeholder="Enter last name"
          value="{{ old('last_name') }}" />
        @error('last_name')
          <div class="text-danger-500">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="username">Userame</label>
        <x-input id="username" name="username" autocomplete="off" placeholder="Enter username"
          value="{{ old('username') }}" />
        @error('username')
          <div class="text-danger-500">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <x-input type="email" id="email" name="email" autocomplete="off" placeholder="Enter email address"
          value="{{ old('email') }}" />
        @error('email')
          <div class="text-danger-500">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="phone_number">Phone Number</label>
        <x-input id="phone_number" name="phone_number" autocomplete="off" placeholder="Enter phone number"
          value="{{ old('phone_number') }}" required />
        @error('phone_number')
          <div class="text-danger-500">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <x-input type="password" id="password" name="password" autocomplete="off" placeholder="Enter password"
          required />
        @error('password')
          <div class="text-danger-500">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="role_id">Role</label>
        <x-select id="role_id" name="role_id" required>
          <option selected disabled>Select your Role</option>
          @foreach ($roles as $value)
            <option value="{{ $value->id }}" @selected($value->id == old('role_id'))>
              {{ ucwords(str_replace('_', ' ', $value->name)) }}
            </option>
          @endforeach
        </x-select>
        @error('role_id')
          <div class="text-danger-500">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="data_retention">Data Retention</label>
        <x-select name="data_retention" id="data_retention">
          @for ($i = 1; $i < 7; $i++)
            <option value="{{ $i }}" @selected(old('data_retention') == $i)>
              {{ $i . ($i > 1 ? ' Months' : ' Month') }}
            </option>
          @endfor
        </x-select>
        @error('data_retention')
          <div class="text-danger-500">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="permitted_report">Permitted Report</label>
        <x-select name="permitted_report" id="permitted_report">
          <option value="all">All</option>
        </x-select>
        @error('permitted_report')
          <div class="text-danger-500">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="status">Status</label>
        <x-select name="status" id="status">
          <option value="true" @selected(old('status') === true)>Active</option>
          <option value="false" @selected(old('status') === false)>Inactive</option>
        </x-select>
        @error('status')
          <div class="text-danger-500">{{ $message }}</div>
        @enderror
      </div>

      <div class="md:col-span-2">
        <x-button type="submit" variant="blue">Submit</x-button>
      </div>
    </form>
  </div>
@endsection
@section('pageScripts')
  <script>
    $('#customer_code').on('change', function() {
      var customer_code = $('#customer_code').val();
      $('#sub_button').prop('disabled', true);
      $.ajax({
        url: '/administrative/user/user-info-ybx/' + customer_code,
        method: 'GET',
        success: function(response) {
          if (response.data) {
            $('#customer_name').val(response.data['customer_name']);
            $('#first_name').val(response.data['first_name']);
            $('#last_name').val(response.data['last_name']);
            $('#username').val(response.data['username']);
            $('#email').val(response.data['email']);
            $('#phone_number').val(response.data['phone_number']);
          } else {
            console.log(response.message);
          }
          $('#sub_button').prop('disabled', false);
        },
        error: function(xhr, status, error) {
          $('#sub_button').prop('disabled', false);
          console.error(error);
        }
      });
    });
  </script>
@endsection