@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="pt-1 ratio_asos">
    <div class="collection-wrapper">
        <div class="container">
            <div class="mb-2 row">
                <div class="text-center col-sm-12">
                    <img src="{{ asset('images/offer_banner.jpeg') }}" width="800px" alt="">
                </div>
            </div>
            <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
                            <p style="color:#000000;">Looking for the right product, service or solution? Share your requirements with us and
                                we’ll connect you with the best matches quickly and efficiently.</p>
                            <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="text-center form-group">
                                        <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>