{{-- Extends layout --}}
@extends('layout.default')

@section('styles')

    <!--begin::Page Custom Styles(used by this page)-->
    <style>
        .cart-label{
            right: -1rem;
        }

        .td-qty{
            width: 120px !important;
        }
    </style>
	<!--end::Page Custom Styles-->
@endsection

{{-- Content --}}
@section('content')

    <!--begin::Card-->
    <div class="card card-custom card-stretch gutter-b">
        @if (session('status'))

            {{-- Success Alert --}}
            <div class="alert alert-custom alert-notice alert-light-danger fade show gutter-b" role="alert">
                <div class="alert-icon"><i class="flaticon2-check-mark"></i></div>
                <div class="alert-text">{{session('status')}}</div>
                <div class="alert-close">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true"><i class="ki ki-close"></i></span>
                    </button>
                </div>
            </div>

        @endif

        <!--begin::Wizard Body-->
        <div class="row justify-content-center my-10 px-8 my-lg-15 px-lg-10">
            <div class="col-xl-12 col-xxl-7">
                <!--begin::Wizard Form-->
                <form class="form" id="kt_form">
                    <!--begin::Wizard Step 1-->
                    <div class="pb-5" data-wizard-type="step-content" data-wizard-state="current">
                        <h3 class="mb-10 font-weight-bold text-dark">Select an Outlet to Create COllection</h3>
                        <!--begin::Input-->
                        <div class="form-group">
                            <select class="form-control" id="create_order_outlet_select2" name="outlet_id">
                                                    
                                <option value="0">Select an outlet</option>
                                
                                @foreach ($outlets as $outlet)
                                    
                                    @if ($outlet->id == $selected_outlet)
                                        <option value="{{$outlet->id}}" selected>{{$outlet->name}}</option>                                            
                                    @else
                                        <option value="{{$outlet->id}}">{{$outlet->name}}</option>                                            
                                    @endif
                                    
                                @endforeach

                            </select>
                            <span class="form-text text-muted mt-3">You can also search your outlet</span>
                        </div>
                        <!--end::Input-->
                        <!--begin::Input-->

                    <!--begin::Wizard Actions-->
                    <div class="d-flex justify-content-between border-top mt-5 pt-10">
                        <div class="mr-2">
                        </div>
                        <div>
                            <button type="button" class="btn btn-primary font-weight-bolder text-uppercase px-9 py-4" onclick="outletWisSalesRoute()">Next</button>
                        </div>
                    </div>
                    <!--end::Wizard Actions-->
                </form>
                <!--end::Wizard Form-->
            </div>
        </div>
        <!--end::Wizard Body-->

    </div>
    <!--end::Card-->



@endsection

{{-- Scripts Section --}}
@section('scripts')

    <script>
        function outletWisSalesRoute(){
            let orderOutletId = $("#create_order_outlet_select2").val();
            console.log("orderOutletId");
            console.log(orderOutletId);
            window.location.href = `/collection/${orderOutletId}/create`;

        }
    </script>

    <!--begin::Page Scripts(used by this page)-->
    <script src="{{ asset("js/pages/custom/order/select2.js") }}" type="module">></script>
    <script src="{{ asset("js/pages/crud/forms/widgets/bootstrap-datepicker.js") }}"></script>



    

	<!--end::Page Scripts-->
@endsection