@extends('theme::user.layouts.app')

@section('content')

<div class="card">
    <div class="d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex justify-content-center align-items-sm-center align-items-md-center align-items-lg-center align-items-xl-center align-items-xxl-center" style="height: 100px;background: linear-gradient(90deg, #7db979, #26bbaa);margin-right: 0px;">
        <div class="justify-content-start" style="margin-left: 20px;">
            <div class="col d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex justify-content-center align-items-sm-center align-items-md-center align-items-lg-center justify-content-xl-start align-items-xl-center justify-content-xxl-center align-items-xxl-center" style="width: 262px;"><img src="/themes/tailwind/images/clipboard-image-30.png" style="width: 80px;margin-left: 10px;">
                <h1 style="font-size: 20px;color: rgb(0,0,0);margin-bottom: 0px;">Other Requests </h1>
            </div>
        </div>
    </div>
    <div class="card-body" style="overflow: auto;height: 650px;">
        <form>
            <div style="margin-right: 150px;margin-left: 150px;">
                <div class="col">
                    <div class="row" style="margin: 0px;">
                        <div class="col-xxl-12" style="margin-top: 20px;margin-bottom: 20px;">
                            <h1 style="font-size: 24px;text-align: center;color: rgb(7,7,7);">Service Inquiry </h1>
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col">
                            <h1 style="color: rgb(0,0,0);font-size: 24px;">Please be specific of the enquiry you want to submit in this Enquiry Form,&nbsp;<br>so we can return to you fast with the information you looking for.</h1>
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Enquiry title</h1>
                        </div>
                        <div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-start" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Enquiry details</h1>
                        </div>
                        <div class="col"><textarea class="form-control" style="height: 250px;border-color: #6D7581;border-top-left-radius: 25px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;color: rgb(0,0,0);font-size: 20px;"></textarea></div>
                    </div>
                    <div class="row" style="margin-top: 30px;">
                        <div class="col d-xxl-flex justify-content-end justify-content-xxl-center align-items-xxl-center">
                            <div id="modal-open">
                                <div class="modal fade" role="dialog" tabindex="-1" id="exampleModal" aria-labelledby="exampleModalLabel">
                                    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-body">
                                                <h6 style="color: #364257;">Your enquiry submitted successfully</h6>
                                            </div>
                                            <div class="modal-footer d-xxl-flex justify-content-xxl-center align-items-xxl-center"><button class="btn" style="width: 200px;background: #9B0025;color: rgb(255,255,255);border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;" type="button" data-bs-dismiss="modal">Back</button></div>
                                        </div>
                                    </div>
                                </div><button class="btn btn-warning" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal" style="background: #009B9A;border-style: none;color: var(--bs-card-bg);border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 44px;">Submit</button>
                            </div>
                            <div style="padding-right: 10px;"></div>
                            <div style="margin-right: 10px;border-style: none;"></div>
                            <div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Leave</button></div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection