@extends('layouts.master')

@section('title') @lang('translation. Add Orders') @endsection

@section('css')
<!-- select2 css -->
<link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

<!-- dropzone css -->
    <link href="{{ URL::asset('/assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{ URL::asset('/assets/libs/datepicker/datepicker.min.css') }}">
@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') <a href="{{ url('/admin/orders') }}" title="Back">Assets</a> @endslot
@slot('title')  Create New Orders @endslot
@endcomponent

<div class="row">
    <div class="col-12">
    <form  class="needs-validation" id="create_form" action="{{ route('orders.store') }}" method="post" enctype="multipart/form-data" novalidate>
    @csrf
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Order Details</h4>
                <p class="card-title-desc">Fill all information below</p>
                    <div class="mb-3 row">
                        <label for="service_type_id" class="col-md-2 col-form-label">Service Type</label>
                        <div class="col-md-6">
                            <select id="service_type_id" name="service_type_id" class="form-select" required>
                                <option value=''>Select...</option>
                                    @foreach($serviceTypeList as $serviceType)
                                        <option value="{{ $serviceType->id }}">{{ $serviceType->service_type}}</option>
                                    @endforeach 
                            </select>
                            <div  id="service_type_id_errors"  class="invalid-feedback">
                                Required
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="order_date" class="col-md-2 col-form-label">Order Date</label>
                        <div class="col-md-6">
                            <div class="input-group" id="datepicker2">
                                <input type="text" class="form-control" id="order_date" name="order_date" placeholder="Order Date"
                                    
                                    data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                    data-provide="datepicker" data-date-autoclose="true">

                                <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                            </div>
                            <div  id="order_date_errors"  class="invalid-feedback">
                                Required
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="start_date" class="col-md-2 col-form-label">Start Date</label>
                        <div class="col-md-6">
                            <div class="input-group" id="datepicker2">
                                <input type="text" class="form-control" id="start_date" name="start_date" placeholder="Start Date"
                                    
                                    data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                    data-provide="datepicker" data-date-autoclose="true">

                                <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                            </div>
                            <div  id="start_date_errors"  class="invalid-feedback">
                                Required
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="end_date" class="col-md-2 col-form-label">End Date</label>
                        <div class="col-md-6">
                            <div class="input-group" id="datepicker2">
                                <input type="text" class="form-control" id="end_date" name="end_date" placeholder="End Date"
                                    
                                    data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                    data-provide="datepicker" data-date-autoclose="true">

                                <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                            </div>
                            <div  id="end_date_errors"  class="invalid-feedback">
                                Required
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Customer Details</h4>
                <p class="card-title-desc">Fill all information below</p>
                <div class="mb-3 row">
                    <div class="col-md-2">
                            <input class="form-check-input" type="radio" name="user_type" id="user_type1">
                            <label class="form-check-label" for="user_type1">
                                Individual
                            </label>
                    </div>
                    <div class="col-md-2">
                        <input class="form-check-input" type="radio" name="user_type" id="user_type2">
                        <label class="form-check-label" for="user_type2">
                            Corporate
                        </label>
                    </div>
                </div>
                </br>
                <div class="mb-3 row">
                    <label for="customer_phone" class="col-md-2 col-form-label">Phone Number</label>
                    <div class="col-md-6">
                        <input id="customer_phone" name="customer_phone" type="number" class="form-control" placeholder="Phone Number" required>
                        <div  id="customer_phone_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="customer_name" class="col-md-2 col-form-label">Customer Name</label>
                    <div class="col-md-6">
                        <input id="customer_name" name="customer_name" type="text" class="form-control" placeholder="Customer Name" required>
                        <div  id="customer_name_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="customer_email" class="col-md-2 col-form-label">Email</label>
                    <div class="col-md-6">
                        <input id="customer_email" name="customer_email" type="text" class="form-control" placeholder="Email" required>
                        <div  id="customer_email_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="address" class="col-md-2 col-form-label">Address</label>
                    <div class="col-md-6">
                        <input id="address" name="address" type="text" class="form-control" placeholder="Address" required>
                        <div  id="address_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="country" class="col-md-2 col-form-label">Country</label>
                    <div class="col-md-6">
                        <input id="country" name="country" type="text" class="form-control" placeholder="Country" required>
                        <div  id="country_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="postal_code" class="col-md-2 col-form-label">Postal Code</label>
                    <div class="col-md-6">
                        <input id="postal_code" name="postal_code" type="text" class="form-control" placeholder="Postal Code" required>
                        <div  id="postal_code_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="state_name" class="col-md-2 col-form-label">State</label>
                    <div class="col-md-6">
                        <input id="state_name" name="state_name" type="text" class="form-control" placeholder="State" required>
                        <div  id="state_name_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="city_name" class="col-md-2 col-form-label">City</label>
                    <div class="col-md-6">
                        <input id="city_name" name="city_name" type="text" class="form-control" placeholder="City" required>
                        <div  id="city_name_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="district" class="col-md-2 col-form-label">District</label>
                    <div class="col-md-6">
                        <input id="district" name="district" type="text" class="form-control" placeholder="District" required>
                        <div  id="district_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Order Cost/Payment Details</h4>
                <p class="card-title-desc">Fill all information below</p>
                <div class="mb-3 row">
                    <label for="order_sub_total" class="col-md-2 col-form-label">Cost</label>
                    <div class="col-md-6">
                        <input id="order_sub_total" name="order_sub_total" type="text" class="form-control" placeholder="Cost" required>
                        <div  id="order_sub_total_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="payment_status" class="col-md-2 col-form-label">Payment Status</label>
                    <div class="col-md-6">
                        <select name="payment_status" class="form-control select2">
                            <option value="">Select...</option>
                            @foreach($activityStatusList as $activityStatus)
                            @if($activityStatus->type == 'Payment')
                                <option value="{{ $activityStatus->activity_status }}">{{ $activityStatus->activity_status}}</option>
                            @endif 
                            @endforeach 
                        </select>
                        <div  id="payment_status_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="payment_type_id" class="col-md-2 col-form-label">Payment Type</label>
                    <div class="col-md-6  inline-flex-radio">
                        @foreach($paymentTypeList as $paymentType)
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="payment_type_id" id="payment_type{{ $paymentType->id }}" value="{{ $paymentType->id }} ">
                                <label class="form-check-label" for="payment_type{{ $paymentType->id }}">
                                    {{ $paymentType->payment_type }}
                                </label>
                            </div>
                        @endforeach 

                        <div  id="payment_type_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Order Delivery Details</h4>
                <p class="card-title-desc">Fill all information below</p>
                <div class="mb-3 row">
                    <label for="delivery_date" class="col-md-2 col-form-label">Delivery Dtae</label>
                    <div class="col-md-6">
                        <input class="form-control" type="date" id="delivery_date" name="delivery_date" placeholder="Delivery Date" >
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="deliver_type" class="col-md-2 col-form-label">Delivery Type</label>
                    <div class="col-md-2">
                        <input class="form-check-input" type="radio" name="deliver_type" id="deliver_type1">
                        <label class="form-check-label" for="deliver_type1">
                            Store Pickup
                        </label>
                    </div>
                    <div class="col-md-2">
                        <input class="form-check-input" type="radio" name="deliver_type" id="deliver_type2">
                        <label class="form-check-label" for="deliver_type2">
                            Angel Delivery
                        </label>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="payment_type" class="col-md-2 col-form-label">Delivery Address</label>
                    <div class="col-md-6">
                        <select name="delivery_address" class="form-control select2">
                            <option>Select...</option>
                            <option value="Pending">Pending</option>
                            <option value="Accepted">Accepted</option>
                            <option value="Angel Accepted">Angel Accepted</option>
                            <option value="Waiting">Waiting</option>
                            <option value="Failed">Cancelled</option>
                            <option value="Pending">Pending</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="payment_type" class="col-md-2 col-form-label">Delivery Angel</label>
                    <div class="col-md-6">
                        <select name="category_id" class="form-control select2">
                            <option>Select...</option>
                            <option value="Pending">Pending</option>
                            <option value="Accepted">Accepted</option>
                            <option value="Angel Accepted">Angel Accepted</option>
                            <option value="Waiting">Waiting</option>
                            <option value="Failed">Cancelled</option>
                            <option value="Pending">Pending</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Order Status</h4>
                <p class="card-title-desc">Fill all information below</p>
                <div class="mb-3 row">
                    <label for="status" class="col-md-2 col-form-label">Order Status can be edited only 2 days before the delivery date and time</label>
                    <div class="col-md-6  inline-flex-radio">
                        @foreach($paymentTypeList as $paymentType)
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="payment_type_id" id="payment_type{{ $paymentType->id }}" value="{{ $paymentType->id }} ">
                                <label class="form-check-label" for="payment_type{{ $paymentType->id }}">
                                    {{ $paymentType->payment_type }}
                                </label>
                            </div>
                        @endforeach 

                        <div  id="payment_type_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </form>
    </div>
</div>
<!-- end row -->

@endsection
@section('script')
    <!-- select 2 plugin -->
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>

    <!-- dropzone plugin -->
    <script src="{{ URL::asset('/assets/libs/dropzone/dropzone.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
    <!--tinymce js-->
    <script src="{{ URL::asset('/assets/libs/tinymce/tinymce.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/form-editor.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/datepicker/datepicker.min.js') }}"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#customer_phone").change(function(){
            
            $("#customer_name").val('');
            $("#customer_email").val('');
            $("#address").val('');
            $("#country").val('');
            $("#postal_code").val('');
            $("#city_name").val('');
            $("#state_name").val('');
            $("#district").val('');

            let actionUrl = "{{ route('user.by-phone-number') }}";
            let phoneNum = $(this).val();
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: {
                    "_token": "{{ csrf_token() }}",
                    "phone_number" : phoneNum
                },
                success: function(response){ 
                    user = response.data;
                    $("#customer_name").val(user.name);
                    $("#customer_email").val(user.email);
                    $("#address").val(user.address.address);
                    $("#country").val(user.address.country);
                    $("#postal_code").val(user.address.postal_code);
                    $("#city_name").val(user.address.city.city);
                    $("#state_name").val(user.address.state.state);
                    $("#district").val(user.address.district.district);
                    $('#customer_phone_errors').css('display', 'none');

                },
                error: function (data) {
                    $('#customer_phone_errors').html(data.responseJSON.message); 
                    $('#customer_phone_errors').css('display', 'block');
                },
            });
        });
        $( "#create_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('order.validate') }}";
            form = $( "#create_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){ 
                    $('.needs-validation').addClass('validated');
                    form.unbind().submit(); 
                },
                error: function (data) {
                    console.log('An error occurred.');
                    response = data.responseJSON;
                    if(response.status == false){
                        $.each(response.errors, function(i, item) {
                            $('#'+i+'_errors').html(response.errors[i]); 
                            $('#'+i+'_errors').css('display', 'block');
                        });
                    }
                },
            });
        });
    });
    </script>
@endsection