@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-block align-items-center justify-content-between page-header-breadcrumb">

        <div class="p-2 main-dashboard-header-left mt-2">
            <h5>Create White Label</h5>
        </div>
    </div>
    <!-- End Page Header -->
    <div class="row">
      
         <div id="formAlert" class=""></div>
          <div class="col-xl-6">
              <div class="card custom-card">
                  <div class="card-header justify-content-between">
                     <div class="card-title">
                        Enter the Member Details Correctly
                     </div>
                  </div>
                  <div class="card-body">
                    <form id="memberForm" enctype="multipart/form-data" novalidate>
                     @csrf
                     <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">First Name</label>
                            <input type="text" name="firstname" class="form-control" placeholder="Enter First Name" aria-label="First Name">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Last Name</label>
                            <input type="text" name="lastname" class="form-control" placeholder="Enter Last Name" aria-label="Last Name">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Contact Number</label>
                            <input type="text" name="mobile" class="form-control" placeholder="Enter Contact Number" aria-label="Contact Number">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email Address</label>
                            <input type="email" name="email" class="form-control" placeholder="Enter Email Address" aria-label="Email Address">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">D.O.B.</label>
                            <input type="date" name="dob" class="form-control" placeholder="Select Date of Birth" aria-label="D.O.B.">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">State Name</label>
                            <input type="text" name="state" class="form-control" placeholder="Enter State Name" aria-label="State Name">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">District Name</label>
                            <input type="text" name="district" class="form-control" placeholder="Enter District Name" aria-label="District Name">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">City Name</label>
                            <input type="text" name="city" class="form-control" placeholder="Enter City Name" aria-label="City Name">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Village Name</label>
                            <input type="text" name="village" class="form-control" placeholder="Enter Village Name" aria-label="Village Name">
                        </div>
                        <div class="col-md-6 mb-3">
                            <input type="hidden" name="roleslug" value="{{$roleslug}}">
                            <label class="form-label">Pin Code</label>
                            <input type="text" name="pincode" class="form-control" placeholder="Enter Pin Code" aria-label="Pin Code">
                        </div>

                        <div class="col-md-12 mb-3">
                            <label class="form-label">Address</label>
                            <textarea rows="3" name="address" class="form-control" placeholder="Enter Address" aria-label="Address"></textarea>
                        </div>
                     </div>
                  </div>
              </div>
          </div>

          <div class="col-xl-6">
              <div class="card custom-card">
                  <div class="card-header justify-content-between">
                     <div class="card-title">
                        Enter Business Details
                     </div>
                  </div>
                  <div class="card-body">
                     <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Business Name</label>
                            <input type="text" name="shopname" class="form-control" placeholder="Enter Business Name" aria-label="Business Name">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Business Address</label>
                            <input type="text" name="businessaddress" class="form-control" placeholder="Enter Business Address" aria-label="Business Address">
                        </div>
                     </div>
                  </div>
              </div>

              <div class="card custom-card">
                  <div class="card-header justify-content-between">
                     <div class="card-title">
                        Domain Credentials Details
                     </div>
                  </div>
                  <div class="card-body">
                     <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Domain Name</label>
                            <input type="text" class="form-control" placeholder="Enter Domain Name" aria-label="Domain Name">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Domain URL</label>
                            <input type="text" class="form-control" placeholder="Enter Domain URL" aria-label="Domain URL">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">IP Configuration Details</label>
                            <input type="text" class="form-control" placeholder="Enter IP Configuration Details" aria-label="IP Configuration Details">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Upload Logo</label>
                            <input type="text" class="form-control" placeholder="Enter Logo URL or Upload" aria-label="Upload Logo">
                        </div>
                     </div>
                  </div>
              </div>

              <div class="text-right">
                <button type="submit" class="btn btn-primary">Create Now</button>
              </div>
            </form> 
          </div> 
         
    </div>

</div>

@endsection

@section('scripts')
<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('input[name="_token"]').val()
    }
});

$('#memberForm').on('submit', function(e) {
    e.preventDefault();

    let formData = new FormData(this);
    $('#formAlert').html('Submitting...');

    $.ajax({
        url: "{{ route('member.store') }}",
        type: "POST",
        data: formData,
        contentType: false,
        processData: false,

        success: function(response) {
            $('#formAlert').html('<div class="alert alert-success">✔️ ' + response.message + '</div>');
            $('#memberForm')[0].reset();
        },

        error: function(xhr) {
            if (xhr.status === 422) {
                let errors = xhr.responseJSON.errors;
                let messages = '<div class="alert alert-danger"><ul>';
                $.each(errors, function(key, val) {
                    messages += '<li>' + val[0] + '</li>';
                });
                messages += '</ul></div>';
                $('#formAlert').html(messages);
            } else {
                $('#formAlert').html('<div class="alert alert-danger">❌ Something went wrong. Please try again.</div>');
            }
        }
    });
});
</script>
@endsection