@extends('layouts/horizontalLayout')

@section('title', 'User Info')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/jquery-sticky/jquery-sticky.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave-phone.js')}}"></script>
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('assets/js/form-layouts.js')}}"></script>
<script>
$(document).ready(function() {
  $('.select2').select2({ placeholder: "Select value", allowClear: true });

  // Auto-fill galleryurl field
  $('#fullname').on('input', function() {
    let text = $(this).val()
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, '-') // replace non-alphanumeric with hyphen
      .replace(/^-+|-+$/g, ''); // trim hyphens
    $('#galleryurl').val(text);
    $('#live-galleryurl').text(text);
  });

  // Show success popup and redirect after 10 seconds if session('success') exists
  @if(session('success'))
    setTimeout(function() {
      $('#successModal').modal('hide');
      window.location.href = "{{ route('dashboard') }}";
    }, 10000);
    $('#successModal').modal('show');
  @endif
});
</script>
@endsection

@section('content')

<h4 class="fw-bold py-3 mb-4">
    Welcome
</h4>
@if(session('success'))
  <!-- Modal -->
  <div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header bg-success text-white">
          <h5 class="modal-title" id="successModalLabel">Success</h5>
        </div>
        <div class="modal-body">
          {{ session('success') }}<br>
          <small class="text-muted">You will be redirected to your dashboard in 10 seconds...</small>
        </div>
      </div>
    </div>
  </div>
@endif
@if(session('info'))
  <div class="alert alert-info">{{ session('info') }}</div>
@endif
@if($errors->any())
  <div class="alert alert-danger">
    <ul class="mb-0">
      @foreach($errors->all() as $error)
        <li>{{ $error }}</li>
      @endforeach
    </ul>
  </div>
@endif

<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header sticky-element bg-label-secondary d-flex justify-content-sm-between align-items-sm-center flex-column flex-sm-row">
        <h5 class="card-title mb-sm-0 me-2">Please fill in the following details before we start</h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <h5 class="my-4">Business Details</h5>
            <form method="POST" action="{{ route('user-info.store') }}">
              @csrf
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label" for="fullname">Business Name</label>
                  <input type="text" id="fullname" name="fullname" class="form-control" placeholder="Eg. Dream Wedding Studios" value="{{ old('fullname', auth()->user()->company_name ?? '') }}" required />
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="galleryurl">Your Gallery URL</label>
                  <div class="input-group input-group-merge">
                    <span class="input-group-text" id="galleryurl-addon">stream.acehosting.in/</span>
                    <input class="form-control" type="text" id="galleryurl" name="galleryurl" placeholder="dream-wedding" aria-label="galleryurl" aria-describedby="galleryurl-addon" value="{{ old('galleryurl', auth()->user()->gallery_url ?? '') }}" required />
                  </div>
                  <div class="form-text mt-1">
                    All your gallery links will have this domain<br>
                    <ul class="mb-0 ps-3 small text-muted">
                      <li>No space allowed</li>
                      <li>No special characters</li>
                      <li>Only Lower Case letters</li>
                      <li>Files are stored securely in our project directory</li>
                      <li>Accessible at <b>stream.acehosting.in/<span id="live-galleryurl">{{ old('galleryurl', auth()->user()->gallery_url ?? '') }}</span></b></li>
                    </ul>
                  </div>
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="phone">Contact Number</label>
                  <input type="text" id="phone" name="phone" class="form-control phone-mask" placeholder="Mobile Number" value="{{ old('phone', auth()->user()->mobile ?? '') }}" required />
                </div>
                <div class="col-md-6">
                  <label class="form-label" for="email">Email</label>
                  <input type="email" id="email" name="email" class="form-control" placeholder="Your Email" value="{{ old('email', auth()->user()->email ?? '') }}" required />
                </div>
                <div class="col-12">
                  <label class="form-label" for="address">Address</label>
                  <textarea name="address" class="form-control" id="address" rows="2" placeholder="Your Business Address" required>{{ old('address', auth()->user()->address ?? '') }}</textarea>
                </div>
                <div class="col-md-4">
                  <label class="form-label" for="city">City</label>
                  <input type="text" id="city" name="city" class="form-control" placeholder="Your City" value="{{ old('city', auth()->user()->city ?? '') }}" required />
                </div>
                <div class="col-md-4">
                  <label class="form-label" for="state">State</label>
                  <select id="state" name="state" class="select2 form-select" data-allow-clear="true" required>
                    <option value="">Select value</option>
                    <option value="Andhra Pradesh">Andhra Pradesh</option>
                    <option value="Arunachal Pradesh">Arunachal Pradesh</option>
                    <option value="Assam">Assam</option>
                    <option value="Bihar">Bihar</option>
                    <option value="Chhattisgarh">Chhattisgarh</option>
                    <option value="Goa">Goa</option>
                    <option value="Gujarat">Gujarat</option>
                    <option value="Haryana">Haryana</option>
                    <option value="Himachal Pradesh">Himachal Pradesh</option>
                    <option value="Jharkhand">Jharkhand</option>
                    <option value="Karnataka">Karnataka</option>
                    <option value="Kerala">Kerala</option>
                    <option value="Madhya Pradesh">Madhya Pradesh</option>
                    <option value="Maharashtra">Maharashtra</option>
                    <option value="Manipur">Manipur</option>
                    <option value="Meghalaya">Meghalaya</option>
                    <option value="Mizoram">Mizoram</option>
                    <option value="Nagaland">Nagaland</option>
                    <option value="Odisha">Odisha</option>
                    <option value="Punjab">Punjab</option>
                    <option value="Rajasthan">Rajasthan</option>
                    <option value="Sikkim">Sikkim</option>
                    <option value="Tamil Nadu">Tamil Nadu</option>
                    <option value="Telangana">Telangana</option>
                    <option value="Tripura">Tripura</option>
                    <option value="Uttar Pradesh">Uttar Pradesh</option>
                    <option value="Uttarakhand">Uttarakhand</option>
                    <option value="West Bengal">West Bengal</option>
                    <option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
                    <option value="Chandigarh">Chandigarh</option>
                    <option value="Dadra and Nagar Haveli and Daman and Diu">Dadra and Nagar Haveli and Daman and Diu</option>
                    <option value="Delhi">Delhi</option>
                    <option value="Jammu and Kashmir">Jammu and Kashmir</option>
                    <option value="Ladakh">Ladakh</option>
                    <option value="Lakshadweep">Lakshadweep</option>
                    <option value="Puducherry">Puducherry</option>
                  </select>
                </div>
                <div class="col-md-4">
                  <label class="form-label" for="country">Country</label>
                  <select id="country" name="country" class="select2 form-select" data-allow-clear="true" required>
                    <option value="">Select value</option>
                    <option value="India">India</option>
                    <option value="United States">United States</option>
                    <option value="United Kingdom">United Kingdom</option>
                    <option value="Australia">Australia</option>
                    <option value="Canada">Canada</option>
                    <option value="Singapore">Singapore</option>
                    <option value="Malaysia">Malaysia</option>
                    <option value="United Arab Emirates">United Arab Emirates</option>
                  </select>
                </div>
              </div>
              <h5 class="my-4">Have a Referral Code?</h5>
              <div class="row g-3 align-items-end">
                <div class="col-lg-11 col-sm-10 col-8">
                  <input type="text" name="referral_code" class="form-control" placeholder="REFERRAL CODE" value="{{ old('referral_code', auth()->user()->referral_code ?? '') }}">
                </div>
                <div class="col-lg-1 col-sm-2 col-4">
                  <button type="button" class="btn btn-primary w-100">Apply</button>
                </div>
              </div>
              <div class="d-flex justify-content-end mt-4">
                <button type="submit" class="btn btn-primary">
                  Save Details
                </button>
              </div>
            </form>

            @if(auth()->user()->gallery_qr)
              <hr>
              <div class="mt-4 text-center">
                  <h5>Your Gallery QR Code</h5>
                  <img src="{{ asset(auth()->user()->gallery_qr) }}" alt="Gallery QR Code" style="max-width:200px;">
                  <p class="mt-2">Scan this QR to access your gallery:</p>
                  <a href="https://stream.acehosting.in/{{ auth()->user()->gallery_url }}">
                      https://stream.acehosting.in/{{ auth()->user()->gallery_url }}
                  </a>
              </div>
            @endif

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection