@extends('layouts.master')

<style>

.container ul {
  list-style: none;
  display: flex;
  width: 100%;
}
.container li {
  flex: 1;
  height: 50px;
  margin-right: 5px;
  display: inline-flex;
  position: relative;
  background: #d7d7d7;
}
.container li::before {
  background: #d7d7d7;
}
.container li::after {
  border-left: 30px solid #d7d7d7;
}
.container li.current {
  background: #c13050;
  color: white;
}
.container li.current::before {
  background: #c13050;
}
.container li.current::after {
  border-left: 30px solid #c13050;
}

.container li.contentodd {
  background: #33a4c7;
  color: white;
}
.container li.contentodd::before {
  background: #33a4c7;
}
.container li.contentodd::after {
  border-left: 30px solid #33a4c7;
}


.container li.pending {
  background: #b8c733;
  color: white;
}
.container li.pending::before {
  background: #b8c733;
}
.container li.pending::after {
  border-left: 30px solid #b8c733;
}

.container li.completed {
  background: #187a0d;
  color: white;
}
.container li.completed::before {
  background: #187a0d;
}
.container li.completed::after {
  border-left: 30px solid #187a0d;
}
.container li::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 30px solid white;
  border-bottom: 25px solid transparent;
}
.container li::after {
  content: "";
  display: inline-block;
  background: transparent;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  right: -30px;
  position: absolute;
  z-index: 1;
}
.container .content {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 5px 0px 5px 6px;
}
.container li:first-child::before {
  display: none;
}
.container li:last-child {
  margin-right: 0px;
}
.container li:last-child::after {
  display: none;
}
.container .status-name {
  font-size: 12px;
  line-height: 15px;
  display: inline-block;
  word-break: break-word;
}
.container mat-icon.status-done {
  height: 20px;
  width: 20px;
  font-size: 21px;
  color: white;
}
</style>
@section('body')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-6">
                    <h3>
                    User Dashboard</h3>
                </div>
                <div class="col-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a class="home-item" href="{{url('user/dashboard')}}"><i data-feather="home"></i></a></li>
                        <li class="breadcrumb-item"><a href="{{url('user/dashboard')}}">User Dashboard</a></li>
                        <li class="breadcrumb-item active">Salokha</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <label class="form-label" for="profile"><b>Application No.</b></label>
            <select class="js-example-basic-single col-sm-12 select2-hidden-accessible" tabindex="-1" aria-hidden="true" name="application_no" id="application_no">
                @if($res)
                @foreach ($res as $val)
                    <option value="{{$val->id}}">{{ $val->application_no }}</option>
                @endforeach
                @else<option value="">Select Application No</option>
                @endif
            </select>

        </div>
    </div>
    <hr>
    <div class="container" id="steperApplication">
    </div>


    @push('scripts')
    <script>
        $(document).ready(function(){
            $("#application_no").change(function(){
                var application_no = $(this).val();
                getApplicationStep(application_no)

            });

            // get data when page is load
            var application_no = $('#application_no').val();
            getApplicationStep(application_no)

            function getApplicationStep(application_no){
                if(application_no == null)
                {
                    let html = `<table class="table table-bordered">
                            <thead>
                                <tr align="center">
                                    <td>There is no Application request Found
                                </tr>
                            </thead>
                        </table>`;
                        $('#steperApplication').html(html)
                }else{
                    $.ajax({
                        type: 'POST',
                        url: '/get-application-status',
                        beforeSend: function()
                        {
                            $('.loader-wrapper').css('background', '#ffffff73');
                            $('.loader-wrapper').show()
                            console.log('loader')
                        },
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "application_no": application_no,
                        },
                        success:function(data) {
                            $('#steperApplication').html(data.data)
                        },
                        error: function(xhr) {
                            $('.loader-wrapper').css('background', '#fff');
                            $('.loader-wrapper').hide()
                            $(placeholder).removeClass('loading');
                        },
                        complete: function() {
                            $('.loader-wrapper').css('background', '#fff');
                            $('.loader-wrapper').hide()
                            $(placeholder).removeClass('loading');
                        },
                    });
                }
            }
        });
    </script>
    @endpush

@endsection