@include('site.header')
<style>
.reqform {
    width: 800px;
    margin: 10px auto;
    box-shadow: 0 0 5px 2px #cccccc;
    padding: 40px;
    border-radius: 10px;
}
.reqform h3 {
    font-size: 24px;
    font-weight: 400;
    color: brown;
    letter-spacing: 0.03em;
    text-align: center;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #2929ef !important;
    border: 1px solid #2929ef !important;
    color: #ffffff !important;
}
</style>
<script>
const indianStates = [
    "Andhra Pradesh", "Arunachal Pradesh", "Assam", "Bihar", "Chhattisgarh",
    "Goa", "Gujarat", "Haryana", "Himachal Pradesh", "Jharkhand",
    "Karnataka", "Kerala", "Madhya Pradesh", "Maharashtra", "Manipur",
    "Meghalaya", "Mizoram", "Nagaland", "Odisha", "Punjab",
    "Rajasthan", "Sikkim", "Tamil Nadu", "Telangana", "Tripura",
    "Uttar Pradesh", "Uttarakhand", "West Bengal",
    "Andaman and Nicobar Islands", "Chandigarh", "Dadra and Nagar Haveli and Daman and Diu",
    "Delhi", "Jammu and Kashmir", "Ladakh", "Lakshadweep", "Puducherry"
];
</script>
    <!-- breadcrumb start -->
    <div class="breadcrumb-section">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="page-title">
                        <h2>{{$page_title??''}}</h2>
                    </div>
                </div>
                <div class="col-sm-6">
                    <nav aria-label="breadcrumb" class="theme-breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{$page_title??''}}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb end -->


    <!-- section start -->
    <section class="section-b-space ratio_asos">
        <div class="collection-wrapper">
            <div class="container">
                <div class="row">
                    <div class="collection-content col">
                        <div class="page-main-content">
                            <div class="reqform">
                                <h3>Post Your Requirement</h3>
                                @if (session('success'))
                                    <div class="alert alert-success">
                                        {{ session('success') }}
                                    </div>
                                @endif

                                <form action="/saveDeal" method="post">
                                    @csrf
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <label for="">Product Name</label>
                                            <input type="text" class="form-control" name="product_name" id="product_name" required />
                                        </div>
                                        <div class="form-group col-md-2">
                                            <label for="">Quantity</label>
                                            <input type="number" class="form-control" name="qty" id="qty" required />
                                        </div>
                                        <div class="form-group col-md-5">
                                            <label for="">Mobile Number</label>
                                            <input type="text" class="form-control" name="mobile" id="mobile" required />
                                        </div>
                                        <div class="form-group col-md-5">
                                            <label for="">City</label>
                                            <input type="text" class="form-control" name="city" id="city" required />
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="">Supplier Preference</label><br>
                                            <input type="radio" name="supplier_preference" id="supplier_preference" value="Anywhere in India" onClick="hideStatesOption()" checked /> Anywhere in India &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <input type="radio" name="supplier_preference" value="Near Me" onClick="hideStatesOption()"  /> Near Me &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <input type="radio" name="supplier_preference" value="Specific States" onClick="showStatesOption()" /> Specific States
                                        </div>
                                        <div class="form-group col-md-12" id="statesOption">
                                            <label for="">States</label>
                                            <select class="form-control" id="states" name="states" multiple="multiple" style="width: 100%;">
                                                <script>
                                                    indianStates.forEach(state => {
                                                        document.write(`<option value="${state}">${state}</option>`);
                                                    });
                                                </script>
                                            </select>
                                        </div>
                                        <div class="form-group text-center">
                                            <p>&nbsp;</p>
                                            <button type="submit" class="btn btn-danger">Submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- section End -->

    @include('site.footer')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    <script src="{{ asset('build/assets/plugins/select2/js/select2.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $("#statesOption").hide();

            $('#states').select2({
                placeholder: "Select States",
                allowClear: true
            });
        });

        function hideStatesOption()
        {
            $("#statesOption").hide();
        }

        function showStatesOption()
        {
            $("#statesOption").show();
        }
    </script>