@extends('admin.layout.app')

@section('title', 'Add End Client')

@section('content')
<!-- Content -->
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="card">
    <div class="row">
      <div class="col-md-12">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">End Client Registration Form</h5>
          <a href="{{ route('admin.endclient.index') }}" class="btn btn-sm btn-secondary">
            <i class="bx bx-arrow-back"></i> Back
          </a>
        </div>
      <div class="col-xl">
        <div class="card mb-4">
          <div class="card-body">
            @if ($errors->any())
              <div class="alert alert-danger">
                  <ul>
                      @foreach ($errors->all() as $error)
                          <li>{{ $error }}</li>
                      @endforeach
                  </ul>
              </div>
          @endif
          <form action="{{ route('admin.endclient.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <!-- Company Name -->
            <div class="mb-3 col-md-6">
            <label class="form-label" for="company_name">Company Name</label>
            <input type="text" id="company_name" name="company_name" class="form-control" required>
            </div>
            <div class="row">
              <!-- First Name -->
              <div class="mb-3 col-md-6">
                <label class="form-label" for="first_name">First Name</label>
                <div class="input-group input-group-merge">
                  <span class="input-group-text"><i class="bx bx-user"></i></span>
                  <input type="text" id="first_name" name="first_name" class="form-control" required>
                </div>
              </div>

              <!-- Last Name -->
              <div class="mb-3 col-md-6">
                <label class="form-label" for="last_name">Last Name</label>
                <div class="input-group input-group-merge">
                  <span class="input-group-text"><i class="bx bx-user"></i></span>
                  <input type="text" id="last_name" name="last_name" class="form-control" required>
                </div>
              </div>

              <!-- Email -->
              <div class="mb-3 col-md-6">
                <label class="form-label" for="email">Email</label>
                <div class="input-group input-group-merge">
                  <span class="input-group-text"><i class="bx bx-envelope"></i></span>
                  <input type="email" id="email" name="email" class="form-control" required>
                </div>
              </div>

              <!-- Phone -->
              <div class="mb-3 col-md-6">
                <label class="form-label" for="phone">Phone</label>
                <div class="input-group input-group-merge">
                  <span class="input-group-text"><i class="bx bx-phone"></i></span>
                  <input type="text" id="phone" name="phone" class="form-control" required>
                </div>
              </div>

              <!-- Client of -->
              <div class="mb-3 col-md-6">
                <label class="form-label" for="phone">Client of</label>
                <div class="input-group input-group-merge">
                  {{-- <span class="input-group-text"><i class="bx bx-phone"></i></span> --}}
                  <select name="user_ids[]" class="form-control select2" multiple required>
                    @foreach ($users as $user)
                        <option value="{{ $user->id }}">
                            {{ $user->first_name }} {{ $user->last_name }} @if($user->company) ({{ $user->company }}) @endif
                        </option>
                    @endforeach
                </select>
                </div>
              </div>

              <!-- Address Section -->
              <div class="col-12">
                <h6 class="mb-3">Address Information</h6>
              </div>

              <div class="mb-3 col-md-6">
                <label class="form-label" for="address_line">Address Line</label>
                <input type="text" id="address_line" name="address_line" class="form-control" required>
              </div>
              <div class="mb-3 col-md-6">
                <label class="form-label" for="city">City</label>
                <input type="text" id="city" name="city" class="form-control" required>
              </div>
              <div class="mb-3 col-md-6">
                <label class="form-label" for="state">State</label>
                <input type="text" id="state" name="state" class="form-control">
              </div>
              <div class="mb-3 col-md-6">
                <label class="form-label" for="postal_code">Postal Code</label>
                <input type="text" id="postal_code" name="postal_code" class="form-control">
              </div>
              <!-- Country -->
              
            @include('admin.components.country-dropdown', ['name' => 'country', 'selected' => old('country')])
              <button type="submit" class="btn btn-primary mt-2">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
    </div>
  </div>
</div>

@endsection
@push('scripts')
<script src="/csstemplate/libs/downloaded/select2.min.js"></script>
<script>
  // $(document).ready(function() {
  document.addEventListener("DOMContentLoaded", function () {
    $('.select2').select2();
    });
</script>
@endpush