@include('site.saudi.controllers.upper-header')
@include('site.saudi.controllers.header')

<nav aria-label="breadcrumb" class="breadcrumb">
    <div class="container">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item active" aria-current="page">الطلبات</li>
            <li class="breadcrumb-item " aria-current="page"> بيانات العميل</li>

        </ol>
    </div>
</nav>
<!-- start stebs -->
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <ul class="wizard">
                <li class="done">
                    <div class="wizard-steb">
                        <div class="wizard-svg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="25.687" height="37" viewBox="0 0 25.687 37"> <g id="steb1" transform="translate(-16.932 -2.5)"> <circle id="Ellipse_511" data-name="Ellipse 511" cx="3.865" cy="3.865" r="3.865" transform="translate(21.45 2.5)" fill="#515751"/> <path id="Path_18343" data-name="Path 18343" d="M39.307,31.636a9.437,9.437,0,0,0,.934-2.429c0-.54-.662-.81-1.09-.231-.545.733-.779-.347-1.4-.347s-.934,1-1.4.347a.626.626,0,0,0-1.168.231,4.012,4.012,0,0,0,.234,1,1.146,1.146,0,0,0-.35-.077,4.4,4.4,0,0,1-2.686-1.272,5.676,5.676,0,0,1-.467-.964c-.818-1.7-2.025-4.28-4.516-4.28h-.117l-1.207,3.162L25.6,24.7h.039a.333.333,0,0,0,.311-.308v-.578a.333.333,0,0,0-.311-.308H24.9a.333.333,0,0,0-.311.308v.578a.333.333,0,0,0,.311.308h.039l-.467,2.082-1.246-3.2H23.11c-2.8,0-3.893,2.969-4.477,4.588-.078.193-.156.424-.234.578a45.661,45.661,0,0,0-1.441,5.63A1.582,1.582,0,0,0,18.2,36.224c.078,0,.195.039.311.039a1.576,1.576,0,0,0,1.557-1.272,48.308,48.308,0,0,1,1.246-5.051c.078-.193.156-.424.273-.655l.117,6.131L20,49.99a1.862,1.862,0,0,0,3.7.424l1.557-13.225,1.557,13.225a1.873,1.873,0,0,0,1.83,1.619h.195a1.86,1.86,0,0,0,1.635-2.044L28.756,35.415l.117-6.4.117.231a12.089,12.089,0,0,0,.74,1.427,7.022,7.022,0,0,0,4.711,2.583A6.333,6.333,0,0,0,32.727,37c0,2.853,2.219,4.2,4.945,4.2s4.945-1.35,4.945-4.2C42.694,34.99,40.825,32.793,39.307,31.636ZM38.1,38.653v.54a.124.124,0,0,1-.117.116h-.545a.124.124,0,0,1-.117-.116v-.54a1.08,1.08,0,0,1-1.012-.964.1.1,0,0,1,.117-.116h.545c.039,0,.078.039.117.077a.373.373,0,0,0,.35.27h.467a.517.517,0,0,0,.545-.463.532.532,0,0,0-.506-.578h-.35a1.3,1.3,0,0,1-1.324-1.118,1.222,1.222,0,0,1,1.09-1.35v-.54a.124.124,0,0,1,.117-.116h.506a.124.124,0,0,1,.117.116v.54a1.08,1.08,0,0,1,1.012.964.1.1,0,0,1-.117.116H38.45c-.039,0-.078-.039-.117-.077a.373.373,0,0,0-.35-.27h-.467a.517.517,0,0,0-.545.463.532.532,0,0,0,.506.578h.389a1.243,1.243,0,0,1,1.246,1.388A1.125,1.125,0,0,1,38.1,38.653Z" transform="translate(0 -12.545)" fill="#515751"/> </g> </svg>
                        </div>
                        <span>1</span>
                    </div>
                    <p>بيانات العميل</p>
                </li>
                <li class="done">
                    <div class="wizard-steb">
                        <div class="wizard-svg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14.989" height="37" viewBox="0 0 14.989 37"> <g id="steb3" transform="translate(-29.9 -7.556)"> <circle id="Ellipse_508" data-name="Ellipse 508" cx="3.178" cy="3.178" r="3.178" transform="translate(34.219 7.556)" fill="#515751"/> <path id="Path_18341" data-name="Path 18341" d="M44.523,52.311a.945.945,0,0,1-1.158.086,1.387,1.387,0,0,1-.53-1.457H37.3a1.4,1.4,0,0,1-.489,1.59.972.972,0,0,1-.525.158h0a.95.95,0,0,1-.319-.058l-1.351,6.827h2.412V68.52a1.427,1.427,0,1,0,2.819,0V59.457h.912V68.52a1.427,1.427,0,1,0,2.819,0V59.457h2.337Z" transform="translate(-2.683 -25.613)" fill="#515751"/> <path id="Path_18342" data-name="Path 18342" d="M44.729,30.321l-.025-.029a.994.994,0,0,0-.21-.249l-3.136-3.71a2.733,2.733,0,0,0-1.7-.4l.016.012a1.854,1.854,0,0,0-.2-.012h-4.17a1.916,1.916,0,0,0-.473.06,2.036,2.036,0,0,0-1.412.4l-3.365,3.98a.892.892,0,0,0-.139.736,1.239,1.239,0,0,0,.1.458l2.736,6.112a.841.841,0,0,0,1.229.446,1.2,1.2,0,0,0,.374-1.466l-2.212-4.942.891-.851v2.351l1.251,2.794a2.149,2.149,0,0,0,.448.2l5.308,0a2.031,2.031,0,0,0,.295-.108l1.4-3.131v-2.15l.866.826-2.183,4.875a1.2,1.2,0,0,0,.374,1.466.84.84,0,0,0,1.229-.446l2.737-6.112a1.234,1.234,0,0,0,.1-.37A.9.9,0,0,0,44.729,30.321Z" transform="translate(0 -10.744)" fill="#515751"/> </g> </svg>
                        </div>
                        <span>2</span>
                    </div>
                    <p>إختيار العاملة</p>
                </li>
                <li class="active">
                    <div class="wizard-steb">
                        <div class="wizard-svg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="30.6" height="36.48" viewBox="0 0 30.6 36.48"> <g id="noun_choose_86700" transform="translate(-7.736)"> <g id="Group_9475" data-name="Group 9475" transform="translate(7.736)"> <path id="Path_18395" data-name="Path 18395" d="M12.079,0a4.3,4.3,0,0,1,4.342,4.254,4.343,4.343,0,0,1-8.685,0A4.3,4.3,0,0,1,12.079,0Z" transform="translate(-7.736)" fill="#515751" fill-rule="evenodd"/> <path id="Path_18396" data-name="Path 18396" d="M69.751,0a4.3,4.3,0,0,1,4.342,4.254,4.343,4.343,0,0,1-8.685,0A4.3,4.3,0,0,1,69.751,0Z" transform="translate(-43.493)" fill="#515751" fill-rule="evenodd"/> <path id="Path_18397" data-name="Path 18397" d="M37.789,4.371h0c0-.039-.006-.077-.006-.117a2.969,2.969,0,0,1,5.936,0l.143,2.973a4.189,4.189,0,0,0,1.243-2.973,4.354,4.354,0,0,0-8.707,0,4.192,4.192,0,0,0,1.263,3Z" transform="translate(-25.508)" fill="#515751" fill-rule="evenodd"/> <path id="Path_18398" data-name="Path 18398" d="M25.969,21.317l-7.093,2.967a3.863,3.863,0,0,0-2.355,3.963l2.11,9.972a2.63,2.63,0,0,0,2.5,2.082l7.739.227a3.664,3.664,0,0,0,3.282-1.854L39.4,25.884a1.609,1.609,0,0,0-.575-2.174h0a1.617,1.617,0,0,0-1.981.251L33.356,27.5a1.411,1.411,0,0,1-2.414-.933l-.7-18.3a1.805,1.805,0,0,0-1.806-1.734h0a1.805,1.805,0,0,0-1.805,1.713Z" transform="translate(-13.169 -4.05)" fill="#515751"/> </g> </g> </svg>
                        </div>
                        <span>3</span>
                    </div>
                    <p>تحديد المكتب</p>
                </li>

                <li>
                    <div class="wizard-steb">
                        <div class="wizard-svg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="25.212" height="37" viewBox="0 0 25.212 37"> <g id="steb4" transform="translate(-190.235 -146.268)"> <g id="Group_9292" data-name="Group 9292" transform="translate(93.687 132.268)"> <g id="Group_9291" data-name="Group 9291" transform="translate(96.548 14)"> <path id="Path_18344" data-name="Path 18344" d="M242.54,18.052V14h2.155v4.094" transform="translate(-231.011 -14)" fill="#515751"/> <path id="Path_18345" data-name="Path 18345" d="M163.85,18.052V14h2.155v4.052" transform="translate(-158.535 -14)" fill="#515751"/> <path id="Path_18346" data-name="Path 18346" d="M120.614,64.623H97.694a1.145,1.145,0,0,0-1.146,1.144V96.426a1.145,1.145,0,0,0,1.146,1.144h22.92a1.145,1.145,0,0,0,1.146-1.144V65.767A1.145,1.145,0,0,0,120.614,64.623Zm-6.3,0h2.128V68.7h-2.128Zm-6.221,0,2.128.041V68.7H108.09Zm-6.221,0H104V68.7h-2.128ZM118.032,93.68H100.314V91.555h17.718Zm0-5.027H100.314V86.529h17.718Zm0-5.027H100.314V81.5h17.718Zm0-5.027H100.4V76.476h17.636Zm0-5.027H100.4V71.449h17.636Z" transform="translate(-96.548 -60.571)" fill="#515751"/> <path id="Path_18347" data-name="Path 18347" d="M321.23,18.052V14h2.155v4.052" transform="translate(-303.487 -14)" fill="#515751"/> </g> </g> </g> </svg>
                        </div>
                        <span>4</span>
                    </div>
                    <p>تفاصيل الطلب والمرفقات</p>
                </li>
                <li>
                    <div class="wizard-steb">
                        <div class="wizard-svg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="37" height="37" viewBox="0 0 37 37"> <g id="steb5" transform="translate(-0.5)"> <rect id="Rectangle_2723" data-name="Rectangle 2723" width="37" height="37" transform="translate(0.5)" fill="none"/> <path id="Path_18348" data-name="Path 18348" d="M17.009,30.271h0a4.073,4.073,0,0,1-4.061-4.085V19.173a4.073,4.073,0,0,1,4.061-4.085h0V7A2,2,0,0,1,19,5H34.435a1.985,1.985,0,0,1,1.408.587A2.009,2.009,0,0,1,36.427,7v8.085h0a4.073,4.073,0,0,1,4.061,4.085v7.013a4.073,4.073,0,0,1-4.061,4.085h0V36.2a2.009,2.009,0,0,1-.583,1.417,1.985,1.985,0,0,1-1.408.587H19a2,2,0,0,1-1.991-2V30.271Zm17.2-6.441H19.226v11.4a.736.736,0,0,0,.734.738H33.476a.736.736,0,0,0,.734-.738v-11.4Zm0-8.742V7.969a.736.736,0,0,0-.734-.738H19.96a.736.736,0,0,0-.734.738v7.12Z" transform="translate(-7.718 -3.1)" fill="#515751"/> <rect id="Rectangle_2724" data-name="Rectangle 2724" width="10.732" height="2.298" transform="translate(13.634 22.295)" fill="#515751"/> <rect id="Rectangle_2725" data-name="Rectangle 2725" width="8.067" height="2.298" transform="translate(13.678 25.535)" fill="#515751"/> <rect id="Rectangle_2726" data-name="Rectangle 2726" width="10.732" height="2.298" transform="translate(13.634 28.774)" fill="#515751"/> </g> </svg>
                        </div>
                        <span>5</span>
                    </div>
                    <p>طباعة العقد وإختيار
                        طريقة الإشعار</p>
                </li>
                <li>
                    <div class="wizard-steb">
                        <div class="wizard-svg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="27.388" height="37" viewBox="0 0 27.388 37"> <g id="steb6" transform="translate(0 0.001)"> <g id="Group_9293" data-name="Group 9293" transform="translate(0 -0.001)"> <path id="Path_18349" data-name="Path 18349" d="M9.632,10.557V35.142a1.857,1.857,0,0,0,3.714,0V21.583h.7V35.142a1.857,1.857,0,0,0,3.714,0V10.557L27,2.087A1.2,1.2,0,0,0,25.374.315L15.91,8.989H11.477L2.013.315A1.2,1.2,0,1,0,.39,2.087Z" transform="translate(0 0.001)" fill="#515751"/> <circle id="Ellipse_518" data-name="Ellipse 518" cx="3.379" cy="3.379" r="3.379" transform="translate(10.315 1.375)" fill="#515751"/> </g> </g> </svg>
                        </div>
                        <span>6</span>
                    </div>
                    <p>نجاح الطلب</p>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- end stebs -->
<!-- start body steb -->
<form  method="post" action="{{route('third_name_order_submit')}}">
    @csrf
    <div class="container">
        <div class="box-border">
            <div class="row">

                <div class="col-sm-6">
                    <div class="input-group">
                        <h6><strong>بلد المكتب</strong></h6>
                        <select name="country_id" required  class="form-control" id="country">
                            <option disabled selected>برجاء اختيار البلد</option>
                            @foreach($countries as $country)
                                <option value="{{$country->id}}">{{$country->name[App::getLocale()]}}</option>
                            @endforeach

                        </select>

                        @if ($errors->has('country_id'))
                            <small class="text-danger">{{ $errors->first('country_id') }}</small>
                        @endif
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="input-group">
                        <h6><strong>المكتب</strong></h6>
                        <select name="office_id"  required class="form-control" id="office">
                            <option selected disabled> برجاء اختيار البلد أولا </option>
                        </select>
                    </div>
                </div>

            </div>
            <div class="clearfix"></div>


        </div>
        <div class="button-sub">

            <a href="{{route('second_name_order')}}" class="btn-rej">السابق</a>
            <button type="submit" class="btn-req">التالى</button>
        </div>
    </div>
</form>

<!-- start body steb -->



@include('site.saudi.controllers.footer')

<script>
    $("#country").on('change',function (){
       var country_id = $("#country").val();
        $.ajax({
            type: 'GET',
            url: '{{route('getOfficesByCountry')}}',
            data: {country_id: country_id},

            success: function (data) {

                $("#office").html(data.officesResult);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                errorFunction();
            }
        });
    });
</script>