@extends('layouts.base_portal')
@section('inner_content')
    <div class="row h-100" v-if="$store.getters.isAdmin">
        <div class="col bg-white p-t-15 p-b-15">
            <div class="row no-margin">
                <div class="col-12">
                    <form method="post">
                        @csrf
                        <div class="row">
                            <div class="col">
                                <div class="form-group no-margin form-group-default b-rad-none" onclick="clearOtherFields('marking')">
                                    <label class="text-primary">Customer Marking</label>
                                    <input class="form-control marking" type="text" name="marking" placeholder="" value="{{$marking}}">
                                </div>
                            </div>
                            <!-- <div class="col">
                                <div class="form-group no-margin form-group-default b-rad-none">
                                    <label class="text-primary">Email</label>
                                    <input class="form-control" type="text" name="email" placeholder="" value="{{$email}}">
                                </div>
                            </div> -->
                            <div class="col">
                                <div class="form-group no-margin form-group-default b-rad-none" onclick="clearOtherFields('orderNo')">
                                    <label class="text-primary">Order No</label>
                                    <input class="form-control orderNo" type="text" name="orderNo" placeholder="" value="{{$orderNo}}">
                                </div>
                            </div>
                            <div class="col-auto">
                                <button class="btn btn-primary lh-40" type="submit">Search</button>
                            </div>
                            <div class="col-auto">
                                <a href="{{route('support')}}" class="btn btn-default lh-40" type="submit">Reset</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            @if ($orderNoNotFound || $markingNotFound)
                <div class="h-100 row align-items-center justify-content-center p-t-50 p-b-50">
                    <div class="col-10">
                        <div class="row align-items-center justify-content-center  hint-text">
                            <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
                        </div>
                        <div class="row text-center">
                            <div class="col">
                                <div class="row m-t-20">
                                    <div class="col">
                                        <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Result Not Found</p>
                                    </div>
                                </div>
                                <div class="row m-t-5 align-items-center justify-content-center hide">
                                    <div class="col">
                                        <small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found, Try adjusting your filters to find what you are looking for.</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            @if($markingReturn && !$markingNotFound)
                <div class="row m-t-20">
                    <div class="col m-l-30">
                        @foreach($markingReturn as $marking)
                            <user-company-component class="m-l-5" :data="{{$marking}}"></user-company-component>
                        @endforeach
                    </div>
                </div>
            @endif

            <div class="row m-t-20">
                <div class="col m-l-30">
                    <search-customer-by-email-component></search-customer-by-email-component>
                </div>
            </div>
        </div>
    </div>             
@endsection
<script>
    function clearOtherFields(fieldName) {
        var allFieldNameArray = ['marking', 'orderNo'];

        allFieldNameArray.forEach(function(value, key) {
            if (value != fieldName) {
                $('.' + value).val('');
            }
        });
    }
</script>