@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Your Profile'])
    
    <div id="alert">
        @include('components.alert')
    </div>
    <div class="container-fluid py-4">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    <h4 style="text-align: center; margin-top:20px;">Add User</h4>
                    
                    <form  method="POST" action="/revolver-user" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                        <div class="form-group col-md-4 mx-auto">
                            <label for="name">Name:</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" placeholder="Enter name" name="name">
                            @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        

                        <div class="form-group col-md-4 mx-auto">
                            <label for="address">Address:</label>
                            <input type="text" class="form-control @error('address') is-invalid @enderror" id="address" placeholder="Enter address" name="address">
                            @error('address')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        
                                                <div class="form-group col-md-4 mx-auto">
                            <label for="city">City:</label>
                            <input type="text" class="form-control @error('city') is-invalid @enderror" id="city" placeholder="Enter city" name="city">
                            @error('city')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="form-group col-md-4 mx-auto">
                            <label for="state">State:</label>
                            <input type="text" class="form-control @error('state') is-invalid @enderror" id="state" placeholder="Enter state" name="state">
                            @error('state')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="form-group col-md-4 mx-auto">
                            <label for="zip">Zip:</label>
                            <input type="text" class="form-control @error('zip') is-invalid @enderror" id="zip" placeholder="Enter zip code" name="zip">
                            @error('zip')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>







                         <div class="form-group col-md-4 mx-auto">
                            <label for="date_of_birth">Date of Birth:</label>
                            <input type="date" class="form-control" id="date_of_birth" name="date_of_birth">
                        </div>


                        <div class="form-group col-md-4 mx-auto">
                            <label for="semi_auto">Semi-Auto:</label>
                            <select class="form-control" id="semi_auto" name="semi_auto">
                            <option value="" disabled selected>Select an option</option> <!-- Placeholder -->
                                <option value="X">X</option>
                                <option value="N/A">N/A</option>
                            </select>
                        </div>

                        <div class="form-group col-md-4 mx-auto">
                            <label for="revolver">Revolver:</label>
                            <select class="form-control" id="revolver" name="revolver">
                            <option value="" disabled selected>Select an option</option> <!-- Placeholder -->
                            <option value="X">X</option>
                                <option value="N/A">N/A</option>
                            </select>
                        </div>

                        <div class="form-group col-md-4 mx-auto">
            <label for="patrol_reilif">Patrol Rifle:</label>
            <select class="form-control" id="patrol_reilif" name="patrol_reilif">
           <option value="" disabled selected>Select an option</option> <!-- Placeholder -->
             <option value="X">X</option>
           <option value="N/A">N/A</option>
           </select>
             </div>

                        <div class="form-group col-md-4 mx-auto">
                            <label for="verification">Verification Number:</label>
                            <input type="text" class="form-control @error('verification') is-invalid @enderror" id="verification" placeholder="Enter verification number" name="verification">
                            @error('verification')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="form-group col-md-4 mx-auto">
                            <label for="status">Status:</label>
                            <select class="form-control @error('status') is-invalid @enderror" id="status" name="status">
                            <option value="" disabled selected>Select an option</option> <!-- Placeholder -->
                            <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                            @error('status')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        







                        <div class="form-group col-md-4 mx-auto">
                            <label for="expire_date">Expiration Date:</label>
                            <input type="date" class="form-control" id="expire_date" name="expire_date">
                        </div>



                        <div class="form-group col-md-6 mx-auto">
                            <label for="images">Upload Images</label>
                            <input type="file" class="form-control-file btn btn-lg btn-primary btn-lg w-100 mt-4 mb-0 @error('images') is-invalid @enderror" id="images" name="images[]" multiple>
                            @error('images')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>


 
                    

                        <div class="form-group mx-auto text-center">
                            <button type="submit" class="btn btn-lg btn-primary btn-lg w-50 mt-4 mb-0">Submit</button>
                        </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
        @include('layouts.footers.auth.footer')
    </div>
@endsection

<style>
    .card{
        padding: 15px;
    }
</style>