@extends('layouts.main')
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="la la-user-plus text-primary"></i>
            </span>
            <h3 class="card-label">Create Route</h3>
        </div>
        
    </div>
    <form class="form" id="route_create_form" action="{{route('route.create.submit')}}" method="post" autocomplete="off">
        {{ csrf_field() }}
        <div class="card-body"> 
            <div class="row">
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Job type<span class="text-danger">*</span></label>
                    <select name="job_type" id="job_type" class="form-control" required>
                        <option value="residential">Residential</option>
                        <option value="commercial">Commercial</option>
                        <option value="otr">OTR</option>
                        <option value="nmh">Non-Move Hours</option>
                        <option value="meeting">Meeting/Training</option>
                    </select>
                    <div class="fv-plugins-message-container"></div>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label id="customer_name_display">Customer Name<span class="text-danger">*</span></label>
                    <input type="text" id="customer_name" name="customer_name" class="form-control" required placeholder="Enter Customer Name">
                    <div class="fv-plugins-message-container"></div>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12 non-move__display">
                    <label>Job Zipcode<span class="text-danger">*</span></label>
                    <input type="text" id="zipcode" name="zipcode" class="form-control" required placeholder="Enter Zipcode">
                    <div class="fv-plugins-message-container"></div>
                </div>        
                <div class="form-group col-lg-4 col-md-4 col-sm-12 non-move__display">
                    <label>Job date<span class="text-danger">*</span></label>
                    <div class="input-group date">
                        <input type="text" class="form-control datetimepicker-input" name="job_date" id="job_date" placeholder="Select job date"  data-toggle="datetimepicker" data-target="#job_date" readonly="" required="" />
                        <div class="input-group-append" data-target="#job_date" data-toggle="datetimepicker">
                            <span class="input-group-text">
                                <i class="ki ki-calendar"></i>
                            </span>
                        </div>
                    </div>
                    <div class="fv-plugins-message-container"></div>
                </div> 

                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Team member<span class="text-danger">*</span></label>
                    <select name="team_member" id="team_member" class="form-control" required onchange="getTeamMemberHandaler()">
                        @foreach ($profiles as $profile)
                        <option value="{{ $profile->id }}" data-tid="{{$profile->team_id}}">{{ $profile->profile_last_name }} {{ $profile->profile_first_name }} </option>
                        @endforeach
                    </select>
                    <div class="fv-plugins-message-container"></div>
                </div> 

                <div class="form-group col-lg-4 col-md-4 col-sm-12 non-move__display">
                    <label>Total job revenue<span class="text-danger">*</span></label>
                    <input type="number" id="total_job_revenue" name="total_job_revenue" onkeyup="updateMyJobRevenue()" onchange="updateMyJobRevenue()" class="form-control" required placeholder="Enter total job revenue" value="0.00">
                </div>        
               
                <div class="form-group col-lg-4 col-md-4 col-sm-12 non-move__display">
                    <label>Payment type<span class="text-danger">*</span></label>
                    <select name="payment_type" id="payment_type" class="form-control">
                        <option value="">Select payment Type</option>
                        {{-- <option value="2">Credit Card</option> --}}
                        <option value="4">Visa</option>
                        <option value="5">Mastercard</option>
                        <option value="6">American Express</option>
                        <option value="7">Discover</option>
                        <option value="1">Check</option>
                        <option value="3">Cash</option>
                        <option value="8" disabled>Invoice</option>
                    </select>
                    <div class="fv-plugins-message-container"></div>
                </div> 

                <div class="form-group col-lg-4 col-md-4 col-sm-12">
                    <label>Total Billed Hours<span class="text-danger">*</span></label>
                    <input type="number" id="bill_hours" name="bill_hours" class="form-control" required placeholder="Enter Total Billed Hours" value="0.00">
                    <div class="fv-plugins-message-container"></div>
                </div>

                <div class="form-group col-lg-4 col-md-4 col-sm-12 non-move__display">
                    <label>My job revenue<span class="text-danger">*</span></label>
                    <input type="number" id="my_job_revenue" name="my_job_revenue" class="form-control" required placeholder="Enter my job revenue" value="0.00">
                    <div class="fv-plugins-message-container"></div>
                </div>                

                <div class="form-group col-lg-4 col-md-4 col-sm-12 non-move__display">
                    <label>Credit card Tip<span class="text-danger">*</span></label>
                    <input type="number" id="credit_card_tip" name="credit_card_tip" class="form-control" required placeholder="Enter Credit card tip" value="0.00" onkeyup="updateMyCreditTip()" onchange="updateMyCreditTip()">
                    <div class="fv-plugins-message-container"></div>
                </div>

                <div class="form-group col-lg-4 col-md-4 col-sm-12 non-move__display">
                    <label>Number of team members<span class="text-danger">*</span></label>
                    <input type="number" id="number_of_team_member" name="number_of_team_member" onkeyup="updateMyCreditTip()" onchange="updateMyCreditTip()" class="form-control" required placeholder="Enter number of team member" value="1" min="1" max="8">
                    <div class="fv-plugins-message-container"></div>
                </div> 

                <div class="form-group col-lg-4 col-md-4 col-sm-12 non-move__display">
                    <label>My Credit card Tip<span class="text-danger">*</span></label>
                    <input type="number" id="my_credit_card_tip" name="my_credit_card_tip" class="form-control" required placeholder="Enter my credit card tip" readonly value="0.00">
                    <div class="fv-plugins-message-container"></div>
                </div>

                <div class="form-group col-lg-4 col-md-4 col-sm-12 additional" style="display: none">
                    <label>Additional Team member<span class="text-danger">*</span></label>
                    <select name="additional_team_member[]" id="additional_team_member" class="form-control" multiple="multiple" onchange="getTeamMemberHandaler()">
                        @foreach ($profiles as $profile)
                        <option value="{{ $profile->id }}">{{ $profile->profile_last_name }} {{ $profile->profile_first_name }} </option>
                        @endforeach
                    </select>
                    <div class="fv-plugins-message-container"></div>
                </div>

                <div class="form-group col-lg-4 col-md-4 col-sm-12 non-move__display">
                    <label>BEFORE Drive Time<span class="text-danger">*</span></label>
                    <select name="before_drive_time" id="before_drive_time" class="form-control" required>
                        <option value="30">30</option>
                        <option value="45">45</option>
                        <option value="60">60</option>
                        <option value="0">0</option>
                    </select>
                    <div class="fv-plugins-message-container"></div>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12 non-move__display">
                    <label>AFTER Drive Time<span class="text-danger">*</span></label>
                    <select name="after_drive_time" id="after_drive_time" class="form-control" required>
                        <option value="30">30</option>
                        <option value="45">45</option>
                        <option value="60">60</option>
                        <option value="0">0</option>
                    </select>
                    <div class="fv-plugins-message-container"></div>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12 non-move__display">
                    <div class="row">
                        <label class="col-form-label col-lg-6 col-md-6 col-sm-12">Additional Route Drive Time</label>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                             <input id="is_rouptes" name="is_rouptes" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                        </div>
                    </div>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12 drive_time__display non-move__display hide" style="display: none" >
                    <label>Additional Drive Time<span class="text-danger">*</span></label>
                    <select name="addl_drive_time" id="addl_drive_time" class="form-control" required>
                        <option value="30">30</option>
                        <option value="45">45</option>
                        <option value="60">60</option>
                    </select>
                    <div class="fv-plugins-message-container"></div>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12 non-move__display">
                    <div class="row">
                        <label class="col-form-label col-lg-6 col-md-6 col-sm-12">Fuel Up</label>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                             <input id="is_fuel_up" name="is_fuel_up" data-switch="true" type="checkbox" data-on-text="Yes" data-handle-width="30" data-off-text="No" data-on-color="primary" />
                        </div>
                    </div>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12 driver__display non-move__display hide" style="display: none">
                    <label>Driver<span class="text-danger">*</span></label>
                    <select name="driver_profile_id" id="driver_profile_id" class="form-control">
                    </select>
                    <div class="fv-plugins-message-container"></div>
                </div>
                <div class="form-group col-lg-4 col-md-4 col-sm-12 driver__display non-move__display hide" style="display: none" >
                    <label>Reimbursement</label>
                    <input type="number" id="reimbursement" name="reimbursement" class="form-control" placeholder="Enter Reimbursement" value="0.00">
                    <div class="fv-plugins-message-container"></div>
                </div>
            </div>
        </div> 
        <div class="card-footer">
            <div class="row">
                <div class="col-lg-9 ml-lg-auto">
                    <button type="submit" class="btn btn-primary font-weight-bold mr-2" id="submitBtn">Save</button>
                    <button type="reset" class="btn btn-light-primary font-weight-bold">Cancel</button>
                </div>
            </div>
        </div>
    </form>
</div>
<!--end::Card-->
@endsection

@section('sub_header')
<div class="subheader py-2 py-lg-6 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Create Route</h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="{{route('route.list')}}" class="text-muted">Routes</a>
                    </li>
                    <li class="breadcrumb-item text-muted">
                        <a href="#" class="text-muted">Create</a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        
    </div>
</div>
@endsection
@section('theam_css')
<link href="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />

@endsection

@section('js_file')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection

@section('page_js')
    <script>
        $(document).ready(function(){

            @if(Session::has('success'))
                toastr.success("{{Session::get('success')}}");
            @endif 
            @if(Session::has('error'))
                toastr.error("{{Session::get('error')}}");
            @endif 

            $('#team_member').select2({
                placeholder: "Select Team Member",
            });

            $('#additional_team_member').select2();

            $('body').on('focus','#job_date',function(){
                $(this).datetimepicker({
                    format: moment_date_format
                });
            })

            $('body').on('change','#job_type',function(){
                let job_type = this.value;
                // if(job_type == 'commercial'){
                //     $('#payment_type').val("8"); 
                //     $('#payment_type option:not(:selected)').prop('disabled', true);
                //     otherchanges();
                // }else if(job_type == 'nmh' || job_type == 'meeting'){
                //     nonMovechanges();
                // }else if(job_type == 'otr'){
                //     stopForm();
                // }else{
                //     $('#payment_type').val("1");  
                //     $('#payment_type option:not(:selected)').prop('disabled', false);
                //     otherchanges();
                // }
                if(job_type == 'residential'){
                    $("#payment_type option[value='8']").prop('disabled', true);
                    otherchanges();
                }else if(job_type == 'nmh' || job_type == 'meeting'){
                    nonMovechanges();
                }else if(job_type == 'otr'){
                    stopForm();
                }else{
                    $("#payment_type option[value='8']").prop('disabled', false);
                    otherchanges();
                }
            })

            $("#is_rouptes").bootstrapSwitch({
                onSwitchChange: function(e, state) { 
                    if(state === true){
                        $('.drive_time__display').removeClass('hide');
                        $('.drive_time__display').addClass('show');
                        $('.drive_time__display').show();
                        $('#before_drive_time').val(0);
                        $('#after_drive_time').val(0);
                    }else{
                        $('.drive_time__display').removeClass('show');
                        $('.drive_time__display').addClass('hide');
                        $('.drive_time__display').hide();
                        $('#before_drive_time').val(30);
                        $('#after_drive_time').val(30);
                    }
                }
            });

            $("#is_fuel_up").bootstrapSwitch({
                onSwitchChange: function(e, state) { 
                    if(state === true){
                        getTeamMemberHandaler();
                        $('.driver__display').removeClass('hide');
                        $('.driver__display').addClass('show');
                        $('.driver__display').show();
                        $('#driver_profile_id').select2({
                            placeholder: "Select Driver",
                        });
                    }else{
                        $('.driver__display').removeClass('show');
                        $('.driver__display').addClass('hide');
                        $('.driver__display').hide();
                        $('#driver_profile_id').select2("destroy"); 
                    }
                }
            });
            
            const form = document.getElementById('route_create_form');
            const fv = FormValidation.formValidation(
               form,
                {
                    fields: {
                        customer_name: {
                            validators: {
                                notEmpty: {
                                    message: 'This Field is required'
                                },
                            }
                        },
                        team_member: {
                            validators: {
                                notEmpty: {
                                    message: 'Team member is required'
                                },
                            }
                        },
                        
                        job_type: {
                            validators: {
                                notEmpty: {
                                    message: 'Job type is required'
                                }
                            }
                        },                       
                        
                        bill_hours: {
                            validators: {
                                notEmpty: {
                                    message: 'Total Billed Hours is required'
                                },
                            }
                        }
                       
                    },

                    plugins: { //Learn more: https://formvalidation.io/guide/plugins
                        trigger: new FormValidation.plugins.Trigger(),
                        // Bootstrap Framework Integration
                        bootstrap: new FormValidation.plugins.Bootstrap(),
                        // Validate fields when clicking the Submit button
                        submitButton: new FormValidation.plugins.SubmitButton(),
                        // Submit the form when all fields are valid
                        //defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                    }
                }
            );

            fv.on('core.form.valid', function() {
                var button = KTUtil.getById("submitBtn");
                KTUtil.btnWait(button, "spinner spinner-right spinner-white pr-15", "Submitting");
                const submitform = $('#route_create_form');
                $(".fv-plugins-message-container").html('')
                $.ajax({
                    url : submitform.attr('action'),
                    type : 'post',
                    dataType : "json",
                    data : submitform.serialize(),
                    success: function(response) {
                        if(response.status){
                            window.location.href= response.return_url
                            toastr.success(response.message);
                        } else {
                            if(response.message){
                                toastr.error(response.message);
                            }
                            if(response.errors){
                                Object.keys(response.errors).forEach(element_name => {
                                    var errors = response.errors[element_name];
                                    var inp=$(submitform).find('[id="'+element_name+'"]')
                                    $(inp).addClass('is-invalid')
                                    $(inp).closest('.form-group').find('.fv-plugins-message-container').html('<div data-field="'+element_name+'" data-validator="callback" class="fv-help-block">'+errors[0]+'</div>')
                                });
                            }
                        }
                        KTUtil.btnRelease(button);
                    },
                    error: function(response) {
                        KTUtil.btnRelease(button);
                    }
                });
            });
            
        });

        function updateMyJobRevenue(){
            $("#my_job_revenue").val($("#total_job_revenue").val()) ; 
        }        

        function updateMyCreditTip(){
            let credit_card_tip=$("#credit_card_tip").val();
            let number_of_team_member=$("#number_of_team_member").val();

            if(credit_card_tip!="" && number_of_team_member!=""){
                let my_credit_card_tip = credit_card_tip/number_of_team_member
                $("#my_credit_card_tip").val(my_credit_card_tip.toFixed(2))
            }else{
                $("#my_credit_card_tip").val(0.00)
            }
            let team_member = $('#team_member').select2('data');
            $('#additional_team_member option').prop('disabled', false);
            $('#additional_team_member option[value="'+team_member[0].id+'"]').prop('disabled', true);
            
            if(number_of_team_member >= 2 && number_of_team_member <= 8){
                number_of_team_member = number_of_team_member - 1;
                $(".additional").show()
                $('#additional_team_member').select2("destroy");                
                $('#additional_team_member').select2({
                    placeholder: "Select Additional Team member",
                    maximumSelectionLength: number_of_team_member
                });
            }else{                
                $(".additional").hide()
            }
        }

        function getTeamMemberHandaler(){
            let team_member = $('#team_member').select2('data');
            $('#additional_team_member option').prop('disabled', false);
            $('#additional_team_member option[value="'+team_member[0].id+'"]').prop('disabled', true);
            let team_members = $('#additional_team_member').select2('data');
            $('#driver_profile_id').find('option').remove(); 
            $.each(team_member, function (key, profile) {
                $("#driver_profile_id").append("<option value='"+profile.id+"'>"+profile.text+"</option>");
            });
            $.each(team_members, function (key, profile) {
                $("#driver_profile_id").append("<option value='"+profile.id+"'>"+profile.text+"</option>");
            });
        }

        function nonMovechanges(){
            $('#customer_name_display').html(`Daily Tasks<span class="text-danger">*</span>`);
            $('#job_date').val(moment(new Date()).format("MM/DD/YYYY"));
            $('.non-move__display').hide();
            $('#zipcode, #job_date ,#payment_type, #my_job_revenue, #credit_card_tip, #my_credit_card_tip, #before_drive_time, #after_drive_time').prop('required',false);
        }
        function otherchanges(){
            $('#customer_name_display').html(`Customer Name<span class="text-danger">*</span>`);
            $('.non-move__display').show();
            $('.non-move__display.hide').hide();
            $('#zipcode, #job_date ,#payment_type, #my_job_revenue, #credit_card_tip, #my_credit_card_tip, #before_drive_time, #after_drive_time').prop('required',true);
        }
        function stopForm(){
            $("#route_create_form :input").prop('disabled', true);
            Swal.fire({
                title: "Call Operations manager",
                icon: "warning",
                showCancelButton: true,
                showConfirmButton: false,
                allowOutsideClick: false,                
            }).then(function(result) {
                if (result.dismiss === "cancel") {
                    $("#route_create_form :input").prop('disabled', false);
                    $("#job_type").val('residential');
                }
            });
        }

    </script>
@endsection