@extends('frontend.m9')
@section('content')
@php $language = session()->get('language'); @endphp
    <div id="content" role="main">
        <div class="pre-order__banner-area">
            <img src="{{asset('images/pre_order_banner.jpg')}}" alt="banner image" height="100%" class="pre-order__banner-image" />
        </div>
        
        <!--====================== Pre-Order Form =================-->
        <div class="pre-order__container">
            <form class="pre-order__flex-container" action="{{url('pre-order')}}" method="post">
                @csrf
                
                <div class="pre-order__card">
                    <div class="pre-order__form-group" style="width: 100% !important">
                        <img src="{{asset('images/p1.jpg')}}" />
                    </div>
                </div>
                
                <div class="pre-order__card">
                    <div class="pre-order__form-group" style="width: 100% !important">
                        <img src="{{asset('images/p2.jpg')}}" />
                    </div>
                </div>
                
                <div class="pre-order__card">
                    <div class="pre-order__form-group" style="width: 100% !important">
                        <img src="{{asset('images/p3.jpg')}}" />
                    </div>
                </div>
                
                <div class="pre-order__card">
                    <div class="pre-order__form-group" style="width: 100% !important">
                        <p>Please select the model and color which you want to make an order <span style="color:red;">*</spanplabel>
                        @if($errors->has('model'))
                            <p class="pre-order__help-block">
                                {{ $errors->first('model') }}
                            </p>
                        @endif
                    </div>
                    
                    <div class="pre-order__radio_flex">
                        <div>
                            <label class="radio-img">
                                <input type="radio" name="model" value="Galaxy S22+ Black (8/256 GB)" />
                                <div class="image" style="background-image: url(https://m9estore.com/images/black.jpg)"></div>
                                <label class="label">Galaxy S22+ Black (8/256 GB)</label>
                            </label>
                        </div>
                        <div>
                            <label class="radio-img">
                                <input type="radio" name="model" value="Galaxy S22+ White (8/256 GB)" />
                                <div class="image" style="background-image: url(https://m9estore.com/images/white.jpg)"></div>
                                <p class="label">Galaxy S22+ White (8/256 GB)</p>
                            </label>
                        </div>
                        <div>
                            <label class="radio-img">
                                <input type="radio" name="model" value="Galaxy S22+ Green (8/256 GB)" />
                                <div class="image" style="background-image: url(https://m9estore.com/images/photo1.jpg)"></div>
                                <p class="label">Galaxy S22+ Green (8/256 GB)</p>
                                
                            </label>
                        </div>
                        
                    </div>
                    <div class="pre-order__radio_flex">
                        <div>
                            <label class="radio-img">
                                <input type="radio" name="model" value="Galaxy S22 Black (8/256 GB)" />
                                <div class="image" style="background-image: url(https://m9estore.com/images/black.jpg)"></div>
                                <p class="label">Galaxy S22 Black (8/256 GB)</p>
                            </label>
                        </div>
                        <div>
                            <label class="radio-img">
                                <input type="radio" name="model" value="Galaxy S22 White (8/256 GB)" />
                                <div class="image" style="background-image: url(https://m9estore.com/images/white.jpg)"></div>
                                <p class="label">Galaxy S22 White (8/256 GB)</p>
                            </label>
                        </div>
                        <div>
                            <label class="radio-img">
                                <input type="radio" name="model" value="Galaxy S22 Green (8/256 GB)" />
                                <div class="image" style="background-image: url(https://m9estore.com/images/photo1.jpg)"></div>
                                <p class="label">Galaxy S22 Green (8/256 GB)</p>
                                
                            </label>
                        </div>
                        
                    </div>
                    
                    <div class="pre-order__radio_flex" style="align-items: center; justify-content: center;">
                        <div>
                            <label class="radio-img">
                                <input type="radio" name="model" value="Galaxy S22 Ultra Black (12/256 GB)" />
                                <div class="image" style="background-image: url(https://m9estore.com/images/Black-Burgundy.jpg)"></div>
                                <p class="label">Galaxy S22 Ultra Black (12/256 GB)</p>
                            </label>
                        </div>
                        <div>
                            <label class="radio-img">
                                <input type="radio" name="model" value="Galaxy S22 Ultra Burgundy (12/256 GB)" />
                                <div class="image" style="background-image: url(https://m9estore.com/images/Black-Ultra.jpg)"></div>
                                <p class="label">Galaxy S22 Ultra Burgundy (12/256 GB)</p>
                            </label>
                        </div>
                        
                    </div>
                    
                </div>
                
                <div class="pre-order__card">
                    <div class="pre-order__form-group">
                        <label>Name <span style="color:red;">*</span></label>
                        <input name="name" type="text" class="pre-order__input-control" value="{{ old('name') }}" placeholder="Enter Your Name" />
                        @if($errors->has('name'))
                            <p class="pre-order__help-block">
                                {{ $errors->first('name') }}
                            </p>
                        @endif
                    </div>
                </div>
                
                <div class="pre-order__card">
                    <div class="pre-order__form-group">
                        <label>Email <span style="color:red;">*</span></label>
                        <input name="email" type="email" class="pre-order__input-control" value="{{ old('email') }}" placeholder="Enter Your Email"/>
                        @if($errors->has('email'))
                            <p class="pre-order__help-block">
                                {{ $errors->first('email') }}
                            </p>
                        @endif
                    </div>
                </div>
                
                <div class="pre-order__card">
                    <div class="pre-order__form-group">
                        <label>Phone Number <span style="color:red;">*</span></label>
                        <input name="phone_number" type="text" class="pre-order__input-control" value="{{ old('phone_number') }}" placeholder="Enter Your Phone Number" />
                        @if($errors->has('phone_number'))
                            <p class="pre-order__help-block">
                                {{ $errors->first('phone_number') }}
                            </p>
                        @endif
                    </div>
                </div>
                
                <div class="pre-order__card">
                    <div class="pre-order__form-group">
                        <label>Address <span style="color:red;">*</span></label>
                        <input name="address" type="text" class="pre-order__input-control" value="{{ old('address') }}" placeholder="Enter Your Address"/>
                        @if($errors->has('address'))
                            <p class="pre-order__help-block">
                                {{ $errors->first('address') }}
                            </p>
                        @endif
                    </div>
                </div>
                
                <div class="pre-order__card">
                    <div class="pre-order__form-group" style="width: 100% !important">
                        <p>Will you accept if Samsung contacts your number?  <span style="color:red;">*</span></p>
                        <input id="l1" name="question" type="radio" value="yes"/>
                        <label for="l1" style="margin-top: 5px;">Yes</label>
                        
                        <input id="l2" name="question" type="radio" value="no" />
                        <label for="l2" style="margin-top: 10px;">No</label>
                        @if($errors->has('question'))
                            <p class="pre-order__help-block">
                                {{ $errors->first('question') }}
                            </p>
                        @endif
                    </div>
                </div>
                
                <div style="margin-top: 30px !important;">
                    <input type="submit" value="Submit" class="button">
                </div>
                
            </form>
        </div>
    </div>
@endsection