@extends('layouts.admin')

@section('content')

@if ($message = Session::get('success'))
<div class="alert alert-light-success border-0 mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x close" data-dismiss="alert">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    </button>
    <strong>{{ $message }}</strong>
</div>
@elseif ($message = Session::get('error'))
<div class="alert alert-light-danger border-0 mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x close" data-dismiss="alert">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    </button>
    <strong>{{ $message }}</strong>
</div>
@endif
<div class="container" style="max-width:100% !important; margin-right:1px !important;">
    <div class="container">
        <div class="layout-px-spacing">
            <div class="row">
                <div class="col-md-12">
                    <div class="card mt-3">
                        <div class="card-header">
                            <h4 class="card-title">Route</h4>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('admin.user.edit_route') }}" method="post" id="updateRoute" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Region Name</label>
                                            <select class="form-control" name="region_id" id="region_id">
                                                @if ($regions)
                                                    @foreach ($regions as $key => $value)
                                                        @if($value['id'] == $region_id)
                                                            <option value="{{ $value['id'] }}" readonly selected="">{{ $value['name'] }}</option>
                                                        @else
                                                            <option value="{{ $value['id'] }}" readonly>{{ $value['name'] }}</option>
                                                        @endif
                                                    @endforeach
                                                @endif
                                            </select>
                                            <span class="text-danger">{{ $errors->first('region_id') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Route Name</label>
                                            <input type="text" name="route_name" id="route_name" class="form-control" value="{{$routes['name']}}">
                                            <input type="hidden" name="route_id" id="route_id" class="form-control" value="{{$routes['id']}}">
                                            <span class="text-danger">{{ $errors->first('route_name') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Vehicle</label>
                                            <select class="form-control" name="vehicle" id="vehicle">
                                                @if ($vehicles)
                                                    @foreach ($vehicles as $key => $value)
                                                        @if($key == $routes['vehicle_id'])
                                                            <option value="{{ $key }}" readonly selected="">{{ $value }}</option>
                                                        @else
                                                            <option value="{{ $key }}" readonly>{{ $value }}</option>
                                                        @endif
                                                    @endforeach
                                                @endif
                                                
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Route PDF</label>
                                            <input type="file" name="pdf" id="pdf" class="form-control" value="{{$route_pdf}}">
                                            <span class="text-danger">{{ $errors->first('pdf') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                            @if($is_holiday_route == 0)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="route_type" id="reguler_route" value="0" checked>
                                                    <label class="form-check-label" for="reguler_route">
                                                        Reguler Route
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="route_type" id="saturday_route" value="1">
                                                    <label class="form-check-label" for="saturday_route">
                                                        Saturday/Holiday Route
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="route_type" id="sunday_route" value="2">
                                                    <label class="form-check-label" for="sunday_route">
                                                        Sunday Route
                                                    </label>
                                                </div>
                                                <span class="text-danger">{{ $errors->first('route_type') }}</span>
                                            @elseif ($is_holiday_route == 1)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="route_type" id="reguler_route" value="0">
                                                    <label class="form-check-label" for="reguler_route">
                                                        Reguler Route
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="route_type" id="saturday_route" value="1" checked>
                                                    <label class="form-check-label" for="saturday_route">
                                                        Saturday/Holiday Route
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="route_type" id="sunday_route" value="2">
                                                    <label class="form-check-label" for="sunday_route">
                                                        Sunday Route
                                                    </label>
                                                </div>
                                                <span class="text-danger">{{ $errors->first('route_type') }}</span>
                                            @elseif($is_holiday_route == 2)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="route_type" id="reguler_route" value="0">
                                                    <label class="form-check-label" for="reguler_route">
                                                        Reguler Route
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="route_type" id="saturday_route" value="1">
                                                    <label class="form-check-label" for="saturday_route">
                                                        Saturday/Holiday Route
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="route_type" id="sunday_route" value="2" checked>
                                                    <label class="form-check-label" for="sunday_route">
                                                        Sunday Route
                                                    </label>
                                                </div>
                                                <span class="text-danger">{{ $errors->first('route_type') }}</span>
                                            @endif
                                        <br>
                                    </div>
                                </div>
                                <button type="button" name="add" id="add" class="btn btn-success"> Add </button> <br>
                                <div class="card mt-3 dynamicTable" id="dynamicTable">
                                    <div class="stops">
                                        <div class="card-header">
                                            <h4 class="card-title stop_card">Stop1</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label>Select Address</label>
                                                        <select class="form-control" name="stops[0][address_id]" id="route_id">
                                                            @php $tmp_var = 0; @endphp
                                                            @if ($address && $stops)
                                                                @foreach ($address as $key => $value)
                                                                    @if ($key == $stops[0]['address']['id'])
                                                                        @php $tmp_var = $key; @endphp
                                                                    @endif
                                                                @endforeach
                                                            @endif

                                                            @if ($address)
                                                                @foreach ($address as $key => $value)
                                                                    @if ($tmp_var != 0)
                                                                        @if ($tmp_var == $key)
                                                                            <option value="{{ $key }}" readonly selected="">{{ $value }}</option>
                                                                        @else
                                                                            <option value="{{ $key }}" readonly>{{ $value }}</option>
                                                                        @endif
                                                                    @else
                                                                        <option value="{{ $key }}" readonly>{{ $value }}</option>
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <div class="form-group">
                                                            <label>Stop Name</label>
                                                            <input type="text" name="stops[0][stop_name]" id="stop_name_first" class="form-control" value="{{ $stops[0]['name'] }}">
                                                            <span class="text-danger">{{ $errors->first('stops[0][stop_name]') }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label>Arrival time</label>
                                                        <input type="time" name="stops[0][arr_time]" placeholder="Enter Start Time" id="arrival_start_date1" class="form-control arrival_start_date"  value="{{ isset($stops[0]['scheduledArrivalTime']) ? $stops[0]['scheduledArrivalTime'] : '' }}">
                                                        <span class="text-danger">{{ $errors->first('stops[0][arr_time]') }}</span>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label>Departure time</label>
                                                        <input type="time" name="stops[0][dep_time]" placeholder="Enter End Time" id="departure_end_date1" class="form-control  departure_end_date"  value="{{ ($stops[0]['scheduledDepartureTime']) ? $stops[0]['scheduledDepartureTime'] : '' }}">
                                                        <span class="text-danger">{{ $errors->first('stops[0][dep_time]') }}</span>
                                                    </div>
                                                </div>
                                                <button type="button" class="btn btn-danger btn-lg remove-tr">Remove</button>
                                            </div>
                                        </div>
                                    </div>
                                    @php $i=1; $j=1;@endphp
                                    @foreach($stops as $key => $value)
                                        @php    
                                            if($i==1){
                                                $i++;
                                                continue;
                                            }
                                        @endphp
                                        <div class="stops">
                                            <div class="card-header">
                                                <h4 class="card-title stop_card">Stop{{++$j}}</h4>

                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label>Select Address</label>
                                                            <select class="form-control" name="stops[{{$j-1}}][address_id]" id="route_id">
                                                                @php $tmp_var = 0; @endphp
                                                            @if ($address)
                                                                @foreach ($address as $key2 => $value2)
                                                                    @if ($key2 == $value['address']['id'])
                                                                        @php $tmp_var = $key2; @endphp
                                                                    @endif
                                                                @endforeach
                                                            @endif

                                                            @if ($address)
                                                                @foreach ($address as $key2 => $value2)
                                                                    @if ($tmp_var != 0)
                                                                        @if ($tmp_var == $key2)
                                                                            <option value="{{ $key2 }}" readonly selected="">{{ $value2 }}</option>
                                                                        @else
                                                                            <option value="{{ $key2 }}" readonly>{{ $value2 }}</option>
                                                                        @endif
                                                                    @else
                                                                        <option value="{{ $key2 }}" readonly>{{ $value2 }}</option>
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                            @php $tmp_var = 0; @endphp
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <div class="form-group">
                                                                <label>Stop Name</label>
                                                                <input type="text" name="stops[{{$j-1}}][stop_name]" id="stop_name_first" class="form-control" value="{{ $value['name'] }}">
                                                                <span class="text-danger">{{ $errors->first('stops[$j-1][stop_name]') }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label>Arrival time</label>
                                                            <input type="time" name="stops[{{$j-1}}][arr_time]" placeholder="Enter Start Time" id="arrival_start_date{{$j}}" class="form-control arrival_start_date" value="{{ isset($stops[$j-1]['scheduledArrivalTime']) ? $stops[$j-1]['scheduledArrivalTime'] : '' }}">
                                                            <span class="text-danger">{{ $errors->first('stops[$j-1][arr_time]') }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label>Departure time</label>
                                                            <input type="time" name="stops[{{$j-1}}][dep_time]" placeholder="Enter End Time" id="departure_end_date{{$j}}" class="form-control departure_end_date" value="{{ isset($stops[$j-1]['scheduledDepartureTime']) ? $stops[$j-1]['scheduledDepartureTime'] : '' }}">
                                                            <span class="text-danger">{{ $errors->first('stops[$j-1][dep_time]') }}</span>
                                                        </div>
                                                    </div>
                                                    <button type="button" class="btn btn-danger btn-lg remove-tr">Remove</button>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="card-footer mt-3">
                                    <button type="submit" class="btn btn-fill btn-outline-primary">Submit</button>
                                    <a href="{{ route('admin.user.get_route')}}" class="btn btn-outline-danger">Cancel</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page_scripts')
<script>
$(document).ready(function () {
    $('#updateRoute').validate({
        ingnore:[],
        rules: {
            region_id: {
                required: true
            },
            name: {
                required: true
            },
            vehicle: {
                required: true
            },
            "stops[0][stop_name]": {
                required: true
            },
            pdf: {
                extension: 'pdf'
            }
        },
        messages: {
            region_id: {
                required: "Please select region"
            },
            name: {
                required: "Please enter route name"
            },
            vehicle: {
                required: "Please select vehicle"
            },
            "stops[0][stop_name]": {
                required: "Please enter stop name"
            },
            pdf: {
                extension: "Please upload pdf file"
            }
        },
        highlight: function(element, errorClass, validClass) {
			$(element).addClass('is-invalid');
		},
		unhighlight: function(element, errorClass, validClass) {
			$(element).removeClass('is-invalid');
		}
    });

    jQuery.validator.addMethod("extension", function (value, element, param) {
        param = typeof param === "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
        return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
    }, "Please enter a value with a valid extension.");

        let k = 1;
        $('.arrival_start_date').each(function() {
            if (k > 1) {
                $(this).attr('min', $('#departure_end_date'+(k-1)).val());
                $('#departure_end_date'+(k)).attr('min', $(this).val());
            }
            else {
                $('#departure_end_date'+(k)).attr('min', $(this).val());
                console.log($(this).val());
            }
            k++;
        });
        
        let l = 1;
        $('.departure_end_date').each(function() {
            if (l > 1) {
                $(this).attr('min', $('#arrival_start_date'+(l)).val());
                $('#arrival_start_date'+(l)).attr('min', $('#departure_end_date'+(l-1)).val());
            }
            else {
                $(this).attr('min', $('#arrival_start_date'+(l)).val());
                console.log($('#arrival_start_date'+(l)).val());
            }
            l++;
        });

        $('.arrival_start_date').on('change', function() {
            let k = 1;
            $('.arrival_start_date').each(function() {
                if (k > 1) {
                    $(this).attr('min', $('#departure_end_date'+(k-1)).val());
                    $('#departure_end_date'+(k)).attr('min', $(this).val());
                }
                else {
                    $('#departure_end_date'+(k)).attr('min', $(this).val());
                    console.log($(this).val());
                }
                k++;
            });
        });

        $('.departure_end_date').on('change', function() {
            let l = 1;
            $('.departure_end_date').each(function() {
                if (l > 1) {
                    $(this).attr('min', $('#arrival_start_date'+(l)).val());
                    $('#arrival_start_date'+(l)).attr('min', $('#departure_end_date'+(l-1)).val());
                }
                else {
                    $(this).attr('min', $('#arrival_start_date'+(l)).val());
                    console.log($('#arrival_start_date'+(l)).val());
                }
                l++;
            });
        });

    var i = "{{$j}}";
    $("#add").click(function () {
        $(".dynamicTable").append('<div class="stops"><div class="card-header"><h4 class="card-title stop_card">Stop'+ ((++i)) +'</h4></div><div class="card-body"><div class="row"><div class="col-md-3"><div class="form-group"><label>Select Address</label><select class="form-control" name="stops['+(i-1)+'][address_id]" id="route_id"></select></div></div><div class="col-md-3"><div class="form-group"><div class="form-group"><label>Stop Name</label><input type="text" name="stops['+(i-1)+'][stop_name]" id="stop_name_first'+i+'" class="form-control"><span class="text-danger">{{ $errors->first('stop_name_first') }}</span></div></div></div><div class="col-md-3"><div class="form-group"><label>Arrival time</label><input type="time" name="stops['+(i-1)+'][arr_time]" placeholder="Enter Start Date" id="arrival_start_date'+i+'" class="form-control arrival_start_date" required="required"><span class="text-danger">{{ $errors->first('arrival_start_date') }}</span></div></div><div class="col-md-3"><div class="form-group"><label>Departure time</label><input type="time" name="stops['+(i-1)+'][dep_time]" placeholder="Enter Start Date" id="departure_end_date'+i+'" class="form-control departure_end_date"><span class="text-danger">{{ $errors->first('departure_end_date') }}</span></div></div><button type="button" class="btn btn-danger btn-lg remove-tr">Remove</button></div></div></div>');
        $("#stop_name_first"+i).rules("add", {
            required: true,
            messages: {
                required : 'Please enter stop name',
            }
        });
        $('#departure_end_date'+(i-1)).prop('required',true);

        $('.arrival_start_date').off('change');
        $('.departure_end_date').off('change');

        $('.arrival_start_date').on('change', function() {
            let k = 1;
            $('.arrival_start_date').each(function() {
                if (k > 1) {
                    $(this).attr('min', $('#departure_end_date'+(k-1)).val());
                    $('#departure_end_date'+(k)).attr('min', $(this).val());
                }
                k++;
            });
        });

        $('.departure_end_date').on('change', function() {
            let l = 1;
            $('.departure_end_date').each(function() {
                if (l > 1) {
                    $(this).attr('min', $('#arrival_start_date'+(l)).val());
                    $('#arrival_start_date'+(l)).attr('min', $('#departure_end_date'+(l-1)).val());
                }
                l++;
            });
        });
    });
    $(document).on('click', '.remove-tr-first', function() {
        i = 0;
        $(this).parent().parent().find('div').first().remove();
        $(this).parent().parent().remove();
        
        $('.card-header > h4.stop_card').each(function() {
            $(this).html(`Stop${++i}`);

            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input:first').attr('name','stops['+(i-1)+'][scheduledArrivalTime]');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input:first').attr('name','stops['+(i-1)+'][scheduledDepartureTime]');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input:first').attr('id','arrival_start_date'+i);
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input:first').attr('id','departure_end_date'+i);
            
            val = $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input:first').val();
            val2 = $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input:first').val();
            class_data = $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input[type="hidden"]').attr('class');
            class_data2 = $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input[type="hidden"]').attr('class');

            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input[type="text"]').attr('class', '');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input[type="text"]').attr('class', class_data);
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input[type="text"]').attr('class', '');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input[type="text"]').attr('class', class_data2);

            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(1)').children().children('select:nth-child(2)').attr('name','stops['+(i-1)+'][addressId]');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(2)').children().children().children('input:nth-child(2)').attr('name','stops['+(i-1)+'][name]');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input:first').attr('name','stops['+(i-1)+'][scheduledArrivalTime]');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input:first').attr('name','stops['+(i-1)+'][scheduledDepartureTime]');

            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(1)').children().children('select:nth-child(2)').attr('id',"route_id"+i);
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(2)').children().children().children('input:nth-child(2)').attr('id',"stop_name_first"+i);
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input:first').attr('id', "arrival_start_date"+i);
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input:first').attr('id', "departure_end_date"+i);

            $("#stop_name_first"+i).rules("add", {
                required: true,
                messages: {
                    required : 'Please enter stop name',
                }
            }); 
            if ($('.someclass').length == i) {
                $('#departure_end_date'+i).removeAttr('required');
            }
        });
    });
    $(document).on('click', '.remove-tr', function () {
        i = 0;
        $(this).parent().parent().parent().remove();
        $('.card-header > h4.stop_card').each(function() {
            $(this).html(`Stop${++i}`);

            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input:first').attr('name','stops['+(i-1)+'][arr_time]');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input:first').attr('name','stops['+(i-1)+'][dep_time]');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input:first').attr('id','arrival_start_date'+i);
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input:first').attr('id','departure_end_date'+i);
            
            val = $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input:first').val();
            val2 = $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input:first').val();
            class_data = $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input[type="hidden"]').attr('class');
            class_data2 = $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input[type="hidden"]').attr('class');

            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input[type="text"]').attr('class', '');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input[type="text"]').attr('class', class_data);
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input[type="text"]').attr('class', '');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input[type="text"]').attr('class', class_data2);

            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(1)').children().children('select:nth-child(2)').attr('name','stops['+(i-1)+'][address_id]');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(2)').children().children().children('input:nth-child(2)').attr('name','stops['+(i-1)+'][stop_name]');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input:first').attr('name','stops['+(i-1)+'][arr_time]');
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input:first').attr('name','stops['+(i-1)+'][dep_time]');

            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(1)').children().children('select:nth-child(2)').attr('id',"route_id"+i);
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(2)').children().children().children('input:nth-child(2)').attr('id',"stop_name_first"+i);
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(3)').children().children('input:first').attr('id', "arrival_start_date"+i);
            $(this).parent().parent().children('div:nth-child(2)').children().children('div:nth-child(4)').children().children('input:first').attr('id', "departure_end_date"+i);

            $("#stop_name_first"+i).rules("add", {
                required: true,
                messages: {
                    required : 'Please enter stop name',
                }
            }); 
            if ($('.someclass').length == i) {
                $('#departure_end_date'+i).removeAttr('required');
            }
        });
    });

    $(document).on('click', '#logout', function() {
        console.log('logout');
        var tmp_jconfirm = $('.jconfirm-holder').attr('style');
        
        $('.jconfirm-holder').attr('zIndex','9999');
        console.log('--------------');
        console.log('logout clicked');
        console.log('--------------');
        var $this = $(this);
        var token = "{{csrf_token()}}";
        
        $.confirm({
            title: 'Sky!',
            content: 'Are you sure you want to logout?',
            type: 'red',
            buttons: {
                delete: {
                    text: 'Yes, Logout',
                    btnClass: 'btn-red',
                    action: function() {
                        $.ajax({
                            type: "POST",
                            url: "{{ route('logout') }}",
                            data: {_token: token},
                            success: function (response) {
                                window.location.href = login;
                            },
                        });
                    }
                },
                cancel: function () {
                    $this.attr('disabled', false).html(' <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg> <span>Log Out</span>');
                }
            }
        });
    });    

});

</script>
@endsection