@extends('frontend.layout.app')
@section('title', 'Blank')

@section('description', 'service appionment page meta description')
@section('keywords', 'service appionment page meta keywordes')

@section('robots', 'service appionment page robots')

@section('ogTitle', 'service appionment page og title')
@section('ogDescription', 'service appionment page og description')
@section('ogImage', 'service appionment page og image')
@section('ogUrl', 'service appionment page og url')

@section('twitterCard', 'service appionment page twitter card')
@section('twitterTitle', 'service appionment page twitter title')
@section('twitterDescription', 'service appionment twitter description')

@push('css')
    <style>
        .note {
            text-align: center;
            background: -webkit-linear-gradient(left, #ff1515, #ce3600);
            color:
                #fff;
            font-weight: bold;
            padding-top: 22px;
            padding-bottom: 15px;
        }

        .form-content {
            background:
                white;
            padding: 4%;
            border: 1px solid #ced4da;
            margin-bottom: 2%;
        }

        #reg_form .form-group input {
            background: rgba(22, 70, 158, .18);
            color: #17479e;
        }

        .custom-select {
            background: rgba(22, 70, 158, .18);
            color: #17479e;
        }
    </style>
@endpush

@section('content')

    <div class="container">
        <div class="row tm-padding-section">
            <div class="col-md-6">
                <img src="{{ asset('public/assets/frontend/images/service-appointment.jpg') }}"
                    alt="Service appointment request">
            </div>
            <div class="col-md-6">
                <h3>Service Appointment Request</h3>
                <form action="{{ route('sevice_appointment_request_save') }}" method="post">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="text" name="name" class="form-control" id="name"
                                    placeholder="your Name" required="">
                            </div>
                        </div>
                        <div class="col-md-6"></div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="text" name="user_id" class="form-control" id="user_id"
                                    placeholder="Your User ID" required="">
                            </div>
                        </div>
                        <div class="col-md-6"></div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="text" name="phone" class="form-control" id="mobile"
                                    placeholder="Mobile number" required="">
                            </div>
                        </div>
                        <div class="col-md-6"></div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <input type="email" name="email" class="form-control" id="email"
                                    placeholder="Email">
                            </div>
                        </div>
                        <div class="col-md-6"></div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <input type="date" name="date" class="form-control" id="date" placeholder="Date">
                            </div>
                        </div>
                        <div class="col-md-6"></div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <input type="time" name="time" class="form-control" id="time" placeholder="Time">
                            </div>
                        </div>
                        <div class="col-md-6"></div>

                        {{-- Start:: Service Type --}}
                        <div class="col-md-8">
                            <h5 style="margin-bottom: 0">Service Type</h5>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="New Device Purchase and Installation"
                                    id="service_type_1" checked name="service_type[]">
                                <label class="form-check-label" for="service_type_1">
                                    New Device Purchase and Installation
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="Device Open from Vehicle"
                                    id="service_type_2" checked name="service_type[]">
                                <label class="form-check-label" for="service_type_2">
                                    Device Open from Vehicle
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="Device Re Install in Vehicle"
                                    id="service_type_3" checked name="service_type[]">
                                <label class="form-check-label" for="service_type_3">
                                    Device Re Install in Vehicle
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="Device Open and Reinstall in Vehicle"
                                    id="service_type_4" checked name="service_type[]">
                                <label class="form-check-label" for="service_type_4">
                                    Device Open and Reinstall in Vehicle
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="Device Related After Sales Support"
                                    id="service_type_5" checked name="service_type[]">
                                <label class="form-check-label" for="service_type_5">
                                    Device Related After Sales Support
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="Electric Wiring Related Support"
                                    id="service_type_6" checked name="service_type[]">
                                <label class="form-check-label" for="service_type_6">
                                    Electric Wiring Related Support
                                </label>
                            </div>
                        </div>
                        {{-- End:: Service Type --}}

                        <div class="col-sm-8 mt-3">
                            <div class="form-group">
                                <input type="text" name="location" class="form-control" id="location"
                                    placeholder="Preference Location for Service">
                            </div>
                        </div>

                        <div class="col-sm-8">
                            <div class="form-group">
                                <label for="message">Remarks</label>
                                <textarea class="form-control" name="remarks" id="remarks" rows="3" placeholder="Remarks" required=""></textarea>
                            </div>
                        </div>

                        <div class="col-sm-8 text-center">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('js')
@endpush