@extends('web.layout.master')

@section('content')

<div class="container order-details-wrapper" id="printableArea">
    <div class="row text-center">
       
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                @if(Session::has('alert-' . $msg))

                <div class="alert alert-{{ $msg }} mt-2"><p>{{ Session::get('alert-' . $msg) }}</p></div>
                @endif
            @endforeach
            @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="col-md-3">

            <img src="{{ asset('assets/web') }}/images/call.png" alt="logo" class="main-logo otherbtn"
                style="width: 80px;">
            <h3>Call</h3>
            @php
                $start_time = !empty($setting->start_time) ? date('h A',strtotime($setting->start_time)) : 7;
                $end_time = !empty($setting->end_time) ? date('h A',strtotime($setting->end_time)) : 23;
            @endphp
            {{-- <p><a href="tel:866.243.2721" class="text-decoration-none text-black otherbtn">866.243.2721</a><br/>{{ $start_time .'-'. $end_time }} CT</p> --}}
            <p><a href="tel:866.243.2721" class="text-decoration-none text-black otherbtn">866.243.2721</a><br/>7am-7pm CT Mon - Sat</p>

        </div>
        <div class="col-md-3">
            <a href="#" class="text-decoration-none text-black emailbtn">
                <img src="{{ asset('assets/web') }}/images/email.png" alt="logo" class="main-logo emailbtn"
                    style="width: 80px;">
                <h3>Email</h3>
                <p>info@partswarehouse.com <br/> 6am-2am CT</p>
            </a>
        </div>
        <div class="col-md-3">
            <img src="{{ asset('assets/web') }}/images/chat.png" alt="logo" class="main-logo otherbtn"
                style="width: 80px;">
            <h3>Text</h3>
            <p>972.381.4644 <br/> 6am-2am CT</p>
        </div>
        <div class="col-md-3">
            <img src="{{ asset('assets/web') }}/images/mail-2.png" alt="logo" class="main-logo otherbtn"
                style="width: 80px;">
            <h3>Mail</h3>
            <p>2578 State Highway 276 <br /> Rockwall, TX 75032</p>
        </div>


        <form id="RarelyOrderedForm" style="display: none" action="{{ route('rarely-ordered-add-process') }}"
            method="post">
            @csrf
            <div class="text-start">
                <h3>How can we help you?</h3>
                <h5>If you don't see your model or part listed, let us set it up for you!</h5>
            </div>
            <input aria-labelledby="PartsWarehouse" type="hidden"
                value="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" name="productcode">

            <div class="row mt-4">
                <div class="col-md-2 mt-2">
                    <div class="form-group text-start">
                        <label for="label">Brand?</label>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <input aria-labelledby="PartsWarehouse" type="text" class="form-control"
                            value="{{ old('brand') }}" name="brand" id="brand" placeholder="Enter brand"
                            autocomplete="off" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-2 mt-2">
                    <div class="form-group text-start">
                        <label for="label">Model Description?</label>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-group mt-2">
                        <input aria-labelledby="PartsWarehouse" type="text" class="form-control"
                            value="{{ old('model_description') }}" name="model_description" id="model_description"
                            placeholder="Enter model description" autocomplete="off" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-2 mt-2">
                    <div class="form-group text-start">
                        <label for="label">Model Number?</label>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-group mt-2">
                        <input aria-labelledby="PartsWarehouse" type="text" class="form-control"
                            value="{{ old('model_number') }}" name="model_number" id="model_number"
                            placeholder="Enter model number" autocomplete="off" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-2 mt-2">
                    <div class="form-group text-start">
                        <label for="label">Part Number?</label>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-group mt-2">
                        <input aria-labelledby="PartsWarehouse" type="text" class="form-control" name="part_number"
                            id="part_number" value="" placeholder="Enter part number" autocomplete="off" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-2 mt-2">
                    <div class="form-group text-start">
                        <label for="label">More Info & Other Questions? </label>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-group mt-2">
                        <textarea class="form-control" rows="4" name="additional_information"
                            placeholder="Enter More Info & Other Questions ..." spellcheck="false" required></textarea>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-md-2 mt-2">
                    <div class="form-group text-start">
                        <label for="label"><b>Email address:</b><span class="text-danger">(*Required)</span> </label>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-group mt-2">
                        <input aria-labelledby="PartsWarehouse" type="email" class="form-control"
                            value="{{ old('email') }}" name="email" id="email" placeholder="Enter email"
                            autocomplete="off" required>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-md-2 mt-2">
                    <div class="form-group text-start">
                        <label for="label">Phone Number: </label>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-group mt-2">
                        <input aria-labelledby="PartsWarehouse" type="text" class="form-control"
                            value="{{ old('phone') }}" name="phone" id="phone" placeholder="Enter phone"
                            autocomplete="off" required>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 mt-2">

                </div>
                <div class="col-md-5 text-start">
                    <div class="form-group mt-2">
                        <div class="captcha">
                            <span>{!! captcha_img() !!}</span>
                            <button type="button" class="btn btn-danger" class="reload" id="reload">
                                &#x21bb;
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-2 mt-2">

                </div>
                <div class="col-md-5">
                    <div class="form-group mb-4">
                        <input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha" required>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-4 text-start">
                    <button aria-labelledby="..." type="submit" class="btn btn-danger w-50 mb-3">SUBMIT</button>
                </div>


            </div>

        </form>

    </div>



</div>
<script type="text/javascript">
    $('#reload').click(function () {
        $.ajax({
            type: 'GET',
            url: '{{ route("reload-captcha") }}',
            dataType:"json",
            success: function (data) {
                $(".captcha span").html(data.captcha);
            }
        });
    });
</script>
<script>
    $('.emailbtn').click(function () {
        $('#RarelyOrderedForm').show();
    });
    $('.otherbtn').click(function () {
        $('#RarelyOrderedForm').hide();
    });

</script>
@endsection