@extends('layout.main')

@section('main-container')
    <div class="col-sm-12 mt-3 mb-3">
        <div class="d-flex align-items-center">
            <!-- Step 1 -->
            <div class="step">
                <div class="dot bg-primary text-white">1</div>
                <div class="step-title">Create Account</div>
            </div>
            <div class="line"></div>

            <!-- Step 2 -->
            <div class="step">
                <div class="dot bg-primary text-white">2</div>
                <div class="step-title">Choose Loan Scheme</div>
            </div>
            <div class="line"></div>

            <!-- Step 3 -->
            <div class="step">
                <div class="dot bg-primary text-white">3</div>
                <div class="step-title">Attachment of Documents</div>
            </div>
            <div class="line"></div>

            <!-- Step 4 -->
            <div class="step">
                <div class="dot bg-primary text-white">4</div>
                <div class="step-title">Inspection</div>
            </div>
            <div class="line"></div>

            <!-- Step 5 -->
            <div class="step">
                <div class="dot bg-primary text-white">5</div>
                <div class="step-title">Decision</div>
            </div>
        </div>
    </div>
    <div class="offset-1 col-sm-10">
        <h1 class="text-center heading mb-4 mt-4">Step 1</h1>
        <div class="card-form">
            <form action="{{ route('user.register') }}" method="POST" class="needs-validation" novalidate>
                @csrf

                <div class="row text-center">
                    <h4 class="w-700">Perosnal Details</h4>
                    <hr class="stylish-hr mb-3 mt-2" style="width: 25%">
                </div>
                
                <div class="row">
                    <div class="com-sm-12 mb-3">
                        <label for="photo"  class="form-label">Photo (Less than 2 MB){!! tooltip('Your photo must be close to your face with clear visibility.') !!}</label>
                        <input type="file" class="form-control">
                    </div>
                </div>
                <div class="row">
                    <!-- Full Name -->
                    <div class="col-sm-6 mb-3">
                        <label for="full_name" class="form-label">Full Name {!! tooltip('Your name must match exactly as it appears on your CNIC.') !!} </label>
                        <input type="text" class="form-control @error('full_name') is-invalid @enderror" id="full_name"
                            name="full_name" value="{{ old('full_name') }}" placeholder="Enter your full name" required>
                        @error('full_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
    
                    <!-- Father Name -->
                    <div class="col-sm-6 mb-3">
                        <label for="father_name" class="form-label">Father Name {!! tooltip('Your father name must match exactly as it appears on his CNIC.') !!}</label>
                        <input type="text" class="form-control @error('full_name') is-invalid @enderror" id="father_name"
                            name="father_name" value="{{ old('father_name') }}" placeholder="Enter your father name" required>
                        @error('father_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
    
    
                <div class="row">
                    <!-- National ID -->
                    <div class="col-sm-6 mb-3">
                        <label for="cnic" class="form-label">CNIC No.</label>
                        <input type="text" class="form-control @error('cnic') is-invalid @enderror" id="cnic"
                            name="cnic" value="{{ old('cnic') }}" placeholder="31303-1234567-8" required>
                        @error('cnic')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
    
                    <!-- Phone No. -->
                    <div class="col-sm-6 mb-3">
                        <label for="phone" class="form-label">Primary Phone No. (Personal) {!! tooltip('Etner correct phone no. we will send an OTP to verify this number.') !!}</label>
                        <input type="text" class="form-control phone-number @error('phone') is-invalid @enderror"
                            id="cnic" name="cnic" value="{{ old('phone') }}" placeholder="0301-1234567" required>
                        @error('phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
    
    
                <!-- Address -->
                <div class="mb-3">
                    <label for="address" class="form-label">Address</label>
                    <textarea class="form-control @error('address') is-invalid @enderror" id="address" name="address"
                        placeholder="Enter your complete address" rows="3" required>{{ old('address') }}</textarea>
                    @error('address')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
    
                <div class="row">
                    <div class="col-sm-4 mb-3">
                        <label for="email" class="form-label">Gender</label>
                        <select name="gender" id="gender" class="form-control">
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                            <option value="other">Other</option>
                        </select>
                        @error('gender')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <!-- Email -->
                    <div class="col-sm-4 mb-3">
                        <label for="email" class="form-label">Email (@)</label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
                            name="email" value="{{ old('email') }}" placeholder="Enter your email" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
        
                    <!-- Phone -->
                    <div class="col-sm-6 mb-3">
                        <label for="phone_home" class="form-label">Secondary Phone No. (Home) {!! tooltip('We need this number to contact in case your personal no. doesn\'t respond. ') !!}</label>
                        <input type="text" class="form-control phone-number @error('phone_home') is-invalid @enderror" id="phone-home"
                            name="phone_home" value="{{ old('phone_home') }}" placeholder="0301-1234567" required>
                        @error('phone_home')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                

                <div class="row text-center mt-5 mb-3">
                    <h4 class="w-700">Organization / Clinic Details</h4>
                    <hr class="stylish-hr mb-3 mt-2" style="width: 40%">
                </div>
    
                <div class="row">
                    <!-- Org Name -->
                    <div class="col-sm-6 mb-3">
                        <label for="org_clinic_name" class="form-label">Organization / Clinic Name</label>
                        <input type="text" class="form-control @error('org_clinic_name') is-invalid @enderror" id="org_clinic_name"
                            name="org_clinic_name" value="{{ old('org_clinic_name') }}" placeholder="Enter organization or clinc name" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <!-- Org Phone -->
                    <div class="col-sm-6 mb-3">
                        <label for="org_clinic_phone" class="form-label">Organization / Clinic Phone</label>
                        <input type="text" class="form-control @error('org_clinic_phone') is-invalid @enderror mobile-landline" id="org_clinic_phone"
                            name="org_clinic_phone" value="{{ old('org_clinic_phone') }}" placeholder="0301-1234567" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
        
                    <!-- Org Address -->
                    <div class="col-sm-12 mb-3">
                        <label for="org_clinic_address" class="form-label">Organization / Clinic Address</label>
                        <textarea class="form-control @error('org_clinic_address') is-invalid @enderror" id="org_clinic_address"
                            name="org_clinic_address" rows="3"  placeholder="Enter your complete organization or clinic address" required>{{ old('org_clinic_address') }}</textarea>
                        @error('org_clinic_address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
    
                <div class="row text-center mt-5 mb-3">
                    <h4 class="w-700">Other Info</h4>
                    <hr class="stylish-hr mb-3 mt-2" style="width: 40%">
                </div>
    
                <div class="row">
                    <!-- Disc Name -->
                    <div class="col-sm-6 mb-3">
                        <label for="org_clinic_name" class="form-label">Discipline</label>
                        <select name="discipline_id" class="form-control link-with" link-with-id="enterprise_id" 
                            url="{{url('/api/get-enterprise')}}"
                            id="discipline_id" required>
                            <option value="">Select Discipline</option>
                            @foreach($data['disciplines'] as $discipline)
                            <option value="{{$discipline->id}}">{{$discipline->name}}</option>
                            @endforeach
                        </select>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <!-- Enterprise Name -->
                    <div class="col-sm-6 mb-3">
                        <label for="enterprise" class="form-label">Enterprises</label>
                        <select name="enterprise_id" class="form-control" id="enterprise_id" required>
                            <option value="">Select Enterprise</option>
                            <!-- include ajax response as option here -->
                        </select>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                </div>
    
    
                <!-- Submit Button -->
                <div class="d-flex mt-3">
                    <div class="tc-search-wrapper text-center">
                        <button type="submit" class="btn btn-primary">Submit and Verify</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection