@extends('layouts.app')

@section('content')
<div class="register-page">

    <!-- HEADER -->
    <div class="register-header">
        <h2>Register Account</h2>
        <p>Create an account or log in to explore about our app.</p>
    </div>
@include('components.stepper', ['step' => 2])
    <!-- FORM CARD -->
    <form method="POST"
          action="/registration/shop"
          class="register-card"
          enctype="multipart/form-data">
        @csrf

        <h4>Shop Detail</h4>
        <p class="small-text">Store information</p>

        <!-- SHOP NAME -->
        <label>Shop Name <span class="required">*</span></label>
        <input type="text" name="shop_name" class="form-control custom-input">
        <div class="error-text"></div>

        <!-- CONTACT PERSON -->
        <label class="mt-1">Contact Person Name <span class="required">*</span></label>
        <input type="text" name="contact_person" class="form-control custom-input">
        <div class="error-text"></div>

        <!-- SHOP PHONE -->
        <label class="mt-1">Shop Contact Number <span class="required">*</span></label>
        <input type="text" name="shop_phone" class="form-control custom-input">
        <div class="error-text"></div>

        <!-- EMAIL -->
        <label class="mt-1">Shop Email</label>
        <input type="email" name="shop_email" class="form-control custom-input">
        <div class="error-text"></div>

        <!-- ADDRESS -->
        <label class="mt-1">Shop Address <span class="required">*</span></label>
        <textarea name="shop_address"
                  rows="3"
                  class="form-control custom-input"
                  style="height:auto"></textarea>
        <div class="error-text"></div>

        <!-- STATE -->
        <label class="mt-1">State <span class="required">*</span></label>
        <select id="stateSelect" name="state" class="form-control custom-input">
            <option value="">Select State</option>
            <option value="Uttar Pradesh">Uttar Pradesh</option>
            <option value="Maharashtra">Maharashtra</option>
            <option value="Madhya Pradesh">Madhya Pradesh</option>
            <option value="Delhi">Delhi</option>
            <option value="Bihar">Bihar</option>
            <option value="Rajasthan">Rajasthan</option>
        </select>
        <div class="error-text"></div>

        <!-- DISTRICT -->
        <label class="mt-1">District <span class="required">*</span></label>
        <select id="districtSelect"
                name="district"
                class="form-control custom-input"
                disabled>
            <option value="">Select District</option>
        </select>
        <div class="error-text"></div>

        <!-- PINCODE -->
        <label class="mt-1">Pincode <span class="required">*</span></label>
        <input type="text" name="pincode" class="form-control custom-input">
        <div class="error-text"></div>

        <!-- FIRM TYPE -->
        <label class="mt-1">Firm Type <span class="required">*</span></label>
        <select name="firm_type" class="form-control custom-input">
            <option value="">Select Firm Type</option>
            <option value="Proprietorship">Proprietorship</option>
            <option value="Partnership">Partnership</option>
            <option value="Private Limited">Private Limited</option>
            <option value="LLP">LLP</option>
        </select>
        <div class="error-text"></div>

        <!-- BUSINESS TYPE -->
        <label class="mt-1">Business Type <span class="required">*</span></label>
        <select name="business_type" class="form-control custom-input">
            <option value="">Select Business Type</option>
            <option value="Retail">Retail</option>
            <option value="Wholesale">Wholesale</option>
            <option value="Distributor">Distributor</option>
            <option value="Service">Service</option>
        </select>
        <div class="error-text"></div>

        <!-- IMAGE -->
        <label class="mt-1">Shop Image</label>
        <input type="file"
               id="shopImage"
               name="shop_image"
               class="form-control custom-input"
               accept="image/*">

        <!-- IMAGE PREVIEW -->
        <img id="imagePreview"
             style="display:none;
                    margin-top:10px;
                    width:100%;
                    max-height:180px;
                    object-fit:cover;
                    border-radius:12px;" />

        <!-- BUTTONS -->
        <div class="action-row mt-3">
            <a href="/registration/basic-info" class="back-btn">
                ← Back
            </a>

            <button type="submit" class="otp-btn">
                Continue →
            </button>
        </div>

    </form>

</div>
@endsection