@extends('web.layout.master')

@section('content')


<div class="container">
    <div class="row justify-content-center">
        <div class="col-sm-7 mx-auto ">
            <div class="text-center mt-5 text-black font-weight-bold login-title">
                <label class="fs-2">Track Your Order</label>

            </div>
            <div class="text-center">
                <p>Please enter your order number and email address below to view details & shipping information.</p>
            </div>

            @foreach (['danger', 'warning', 'success', 'info'] as $msg)
            @if(Session::has('alert-' . $msg))
                <p class="alert alert-{{ $msg }}" role="alert">{{ Session::get('alert-' . $msg) }}</p>
            @endif
        @endforeach
            <form action="{{ route('order-tracking-process') }}" id="trackingOrderForm" method="post">
                @csrf
                <div class="input-group login-text-box-group mb-3">
                    <label class="form-label" for="order_number">Order Number</label>
                    <input aria-labelledby="PartsWarehouse" type="number" id="order_number" name="order_number" class="form-control login-text-box" aria-describedby="basic-addon1"
                        value="" autocomplete="off" aria-label="..." required>
                </div>
                <div class="input-group login-text-box-group mb-3">
                    <label class="form-label" for="email">Email Address</label>
                    <input aria-labelledby="PartsWarehouse" type="email" id="email" name="email" class="form-control login-text-box"
                        aria-describedby="basic-addon1" autocomplete="off" aria-label="..." required>
                </div>

                <div class="mb-3 text-center mt-4">
                    <button aria-labelledby="..." type="submit" class="btn btn-danger ml-2 mr-2 bg-secondary w-25">Track Order</button>
                </div>
            </form>

        </div>
    </div>
</div>
<script>
    $( document ).ready(function() {

        $('#order_number').focus();

        $('#trackingOrderForm').validate({
            rules: {
                email: {
                    required: true,
                    email: true
                },
                order_number:{
                    required: true
                }
            },
            messages: {
                email: {
                    required: "Please enter a email address",
                    email: "Please enter a valid email address"
                },
                order_number: {
                    required: "Please enter a order number"
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                $(element).parents('.form-group').append(error)
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });
</script>
@endsection