@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
    @if($errors->first('stops') != null)
    <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>{{ $errors->first('stops') }}</strong></div>
    @endif
<div class="container" style="max-width:100% !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>
                            <input type="hidden" name="vehicle_no" id="vehicle_no">
                        </div>
                        <div class="card-body">
                            <form action="{{ route('admin.user.post_route') }}" method="post" id="createRoute" 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)
                                                        <option value="{{ $value['id'] }}" readonly>{{ $value['name'] }}</option>
                                                    @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="name" id="name" class="form-control">
                                            <span class="text-danger">{{ $errors->first('name') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Vehicle</label>
                                            {{-- <input type="text" name="vehicle" id="vehicle" class="form-control">
                                            <span class="text-danger">{{ $errors->first('vehicle') }}</span> --}}
                                            <select class="form-control" name="vehicleId" id="vehicle">
                                                @if ($data)
                                                    @foreach ($vehicle as $key => $value)
                                                        <option value="{{ $key }}" readonly>{{ $value }}</option>
                                                    @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">
                                            <span class="text-danger">{{ $errors->first('pdf') }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <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>
                                    </div>
                                </div><br>
                                <button type="button" name="add" id="add" class="btn btn-success">   Add  </button> <br>
                                <div class="card mt-3 dynamicTable" id="dynamicTable">
                                    <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 route_id" name="stops[0][addressId]" id="route_id">
                                                        @if($data)
                                                            @foreach ($data['data'] as $key => $value)
                                                                <option value="{{ $value['id'] }}" readonly>{{ $value['name'] }}</option>
                                                            @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][name]" id="stop_name_first" class="form-control">
                                                        <span class="text-danger">{{ $errors->first('stops[][name]') }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Arrival time</label>
                                                    {{-- <input type="date" name="stops[0][scheduledArrivalTime]" placeholder="Enter Start Date" id="arrival_start_date1" class="form-control flatpickr-input arrival_start_date"> --}}
                                                    <input type="time" name="stops[0][scheduledArrivalTime]" placeholder="Enter Start Date" id="arrival_start_date1" class="form-control flatpickr-input arrival_start_date">
                                                    <span class="text-danger">{{ $errors->first('stops[][scheduledArrivalTime]') }}</span>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Departure time</label>
                                                    {{-- <input type="date" name="stops[0][scheduledDepartureTime]" placeholder="Enter Start Date" id="departure_end_date1" class="form-control flatpickr-input arrival_start_date" required> --}}
                                                    <input type="time" name="stops[0][scheduledDepartureTime]" placeholder="Enter Start Date" id="departure_end_date1" class="form-control flatpickr-input departure_end_date" required>
                                                    <span class="text-danger">{{ $errors->first('stops[][scheduledDepartureTime]') }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </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 () {

    $('#vehicle').on('change', function() {
        $('#vehicle_no').val(document.getElementById('vehicle').options[document.getElementById('vehicle').selectedIndex].text);
    });
    $('#createRoute').validate({
        ingnore:[],
        rules: {
            region_id: {
                required: true
            },
            name: {
                required: true
            },
            vehicleId: {
                required: true
            },
            "stops[0][name]": {
                required: true
            },
            route_type: {
                required: true
            },
            pdf: {
                required: true,
                extension: 'pdf'
            }
        },
        messages: {
            region_id: {
                required: "Please select region"
            },
            name: {
                required: "Please enter route name"
            },
            vehicleId: {
                required: "Please select vehicle"
            },
            "stops[0][name]": {
                required: "Please enter stop name"
            },
            route_type: {
                required: "Please select route type"
            },
            pdf: {
                required: "Please select PDF file",
                extension: "Please select 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.");

    $('.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 = 1;
    $("#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 route_id" name="stops['+(i-1)+'][addressId]" 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)+'][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)+'][scheduledArrivalTime]" 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)+'][scheduledDepartureTime]" 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>');
        let val = $('#hid_val').val();
        $('#hid_val').attr('value', ++val);
        console.log(val);
        $("#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());
                }
                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++;
            });
        });
    });
    $(document).on('click', '.remove-tr', function () {
        i = 0;
        $(this).parent().parent().parent().remove();
        let val = $('#hid_val').val();
        $('#hid_val').attr('value',--val);
        console.log(val);
        $('.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', '#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