@extends('master-user')


@section('content')
<section class="py-8">
  <div class="max-w-2xl mx-auto px-4">
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h2 class="text-2xl font-bold text-[#3a3058] mb-6">Add Business Information</h2>
      <form id="business-form" action="{{ route('business.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="name" class="block font-medium text-gray-700 mb-1">Business Name <span class="text-red-500">*</span></label>
            <input type="text" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" name="name" id="name" placeholder="Enter business name" required>
          </div>
          <div>
            <label for="email" class="block font-medium text-gray-700 mb-1">Business Email</label>
            <input type="email" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" name="email" id="email" placeholder="Enter email">
          </div>
          <div>
            <label for="phone" class="block font-medium text-gray-700 mb-1">Phone</label>
            <input type="text" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" name="phone" id="phone" placeholder="Enter phone number">
          </div>
          <div>
            <label for="address" class="block font-medium text-gray-700 mb-1">Address</label>
            <textarea class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" name="address" id="address" rows="3" placeholder="Enter address"></textarea>
          </div>
          <div>
            <label for="website" class="block font-medium text-gray-700 mb-1">Website</label>
            <input type="url" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" name="website" id="website" placeholder="https://example.com">
          </div>
          <div>
            <label for="logo" class="block font-medium text-gray-700 mb-1">Logo</label>
            <input type="file" class="block w-full border border-gray-300 rounded-md px-4 py-2 text-base" name="logo" id="logo">
          </div>
          <div>
            <label for="gst_number" class="block font-medium text-gray-700 mb-1">GST Number</label>
            <input type="text" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" name="gst_number" id="gst_number" placeholder="Enter GST number">
          </div>
          <div>
            <label for="pan_number" class="block font-medium text-gray-700 mb-1">PAN Number</label>
            <input type="text" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" name="pan_number" id="pan_number" placeholder="Enter PAN number">
          </div>
          <div class="md:col-span-2">
            <label for="registration_number" class="block font-medium text-gray-700 mb-1">Registration Number</label>
            <input type="text" class="block w-full border border-gray-300 rounded-md px-4 py-2 focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 text-base" name="registration_number" id="registration_number" placeholder="Enter registration number">
          </div>
        </div>
        <div class="pt-4 text-center">
          <button type="submit" class="btn btn-primary bg-yellow-500 text-[#3a3058] border-yellow-500 hover:bg-yellow-400 hover:text-[#3a3058] py-2 px-8 rounded-md font-semibold shadow">Submit</button>
        </div>
      </form>
    </div>
  </div>
</section>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.5/jquery.validate.min.js"></script>
<script>
    // Client-side Validation
    $(document).ready(function () {
        $('#business-form').validate({
            rules: {
                name: {
                    required: true,
                    maxlength: 255
                },
                email: {
                    email: true
                },
                phone: {
                    digits: true,
                    minlength: 10,
                    maxlength: 15
                },
                website: {
                    url: true
                }
            }
        });
    });
</script>
@endsection