@extends('layouts.new-app')
@section('content')
<div class="container-fluid">
    <div class="row breadcrumbcustomize">
        <div class="col-md-12 col-sm-12 col-lg-6">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/home') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Operator AB</li>
                </ol>
            </nav>
        </div>
        <div class="col-md-12 col-sm-12 col-lg-6">
            <div class="row">
                <div class="col-md-6 col-sm-6 col-lg-6">
                    <div class="float-right">
                        <div class="btn-group">
                            <button type="button" class="btn btnfacility dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="facultyBtn">
                            <i class="fa fa-info-circle" aria-hidden="true"></i> Faciliy Info
                            </button>
                            @include('faculty')
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6 col-lg-6">
                    <div class="float-right" style="width:100%">
                        <div class="progressbarcontaier">
                            <div class="progress">
                                <div class="progress-bar" style="width:{{ ($percentage<=100)?$percentage:'100' }}%"></div>
                            </div>
                            <div class="progress-status">{{ ($percentage<=100)?$percentage:'100' }}% Completed</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<section>
    <div class="container-fluid" style="margin-top: 20px;">
        <div class="row">
            <div class="col-md-6 col-sm-6">
                <h5 class="caption">Operator Class 'AB' Course Content</h5>
            </div>
            <div class="col-md-6 col-sm-6 text-right courseduration"> <a href="#" id="collapse-expand">Collapse All</a><a href="#" id="collapse-init">Expand All</a><span class="chapters">10 Chapters</span>Time: 00:00:000</div>
        </div>
        <div id="accordion" class="accordion">
            <div class="card mb-0">
                <div class="accordionseparater">
                    <div class="card-header collapsed" data-toggle="collapse" href="#collapse1">
                        <a class="card-title">  Chapter 1: INTRODUCTION </a>
                    </div>
                    <div id="collapse1" class="card-body collapse" data-parent="#accordion">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-lg-2 introduction">
                                <i class="fa fa-play-circle-o" aria-hidden="true"></i> INTRODUCTION
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-8 introtext">
                                This chapter discusses the primary responsibility training requirements and certification of Class AB operators as well as recordkeeping and reporting requirements
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-2 courseduration">
                                <a href="{{ url('/user/page/1-1-1') }}">Start Course</a>Time: 00:12:57
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordionseparater">
                    <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                        <a class="card-title"> Chapter 2: REGISTRATION </a>
                    </div>
                    <div id="collapse2" class="card-body collapse" data-parent="#accordion">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-lg-2">
                                <i class="fa fa-play-circle-o" aria-hidden="true"></i> REGISTRATION
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-8 introtext">
                                This should be done in order to inform the TCEQ about your installed UST/AST system at a facility. Self-certification: This is an additional step for motor-fuel UST systems to notify the TCEQ that the motor-fuel UST system complies with certain technical and administrative requirements. Self-certification is necessary for the owner or operator to obtain a delivery certificate.
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-2 courseduration">
                                <a href="{{ url('/user/page/1-2-1') }}">Start Course</a>Time: 00:09:06
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordionseparater">
                    <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                        <a class="card-title"> Chapter 3: UST SYSTEM COMPONENTS </a>
                    </div>
                    <div id="collapse3" class="card-body collapse" data-parent="#accordion">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-lg-2">
                                <i class="fa fa-play-circle-o" aria-hidden="true"></i> UST SYSTEM COMPONENTS
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-8 introtext"></div>
                            <div class="col-md-12 col-sm-12 col-lg-2 courseduration">
                                <a href="{{ url('/user/page/1-3-1') }}">Start Course</a>Time: 00:13:52
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordionseparater">
                    <div class="card-header collapsed" data-toggle="collapse" href="#collapse4">
                        <a class="card-title">  Chapter 4: RELEASE PREVENTION </a>
                    </div>
                    <div id="collapse4" class="card-body collapse" data-parent="#accordion">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-lg-2">
                                <i class="fa fa-play-circle-o" aria-hidden="true"></i> RELEASE PREVENTION
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-8 introtext"></div>
                            <div class="col-md-12 col-sm-12 col-lg-2 courseduration">
                                <a href="{{ url('/user/page/1-4-1') }}">Start Course</a>Time: 00:14:51
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordionseparater">
                    <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse5">
                        <a class="card-title">Chapter 5: CORROSION PROTECTION </a>
                    </div>
                    <div id="collapse5" class="card-body collapse" data-parent="#accordion">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-lg-2">
                                <i class="fa fa-play-circle-o" aria-hidden="true"></i> CORROSION PROTECTION
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-8 introtext"></div>
                            <div class="col-md-12 col-sm-12 col-lg-2 courseduration">
                                <a href="{{ url('/user/page/1-5-1') }}">Start Course</a>Time: 00:09:10
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordionseparater">
                    <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse6">
                        <a class="card-title"> Chapter 6: RELEASE DETECTION </a>
                    </div>
                    <div id="collapse6" class="card-body collapse" data-parent="#accordion">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-lg-2">
                                <i class="fa fa-play-circle-o" aria-hidden="true"></i> RELEASE DETECTION
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-8 introtext"></div>
                            <div class="col-md-12 col-sm-12 col-lg-2 courseduration">
                                <a href="{{ url('/user/page/1-6-1') }}">Start Course</a>Time: 00:27:01
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordionseparater">
                    <div class="card-header collapsed" data-toggle="collapse" href="#collapse7">
                        <a class="card-title">  Chapter 7: RECORD KEEPING </a>
                    </div>
                    <div id="collapse7" class="card-body collapse" data-parent="#accordion">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-lg-2">
                                <i class="fa fa-play-circle-o" aria-hidden="true"></i> RECORD KEEPING
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-8 introtext">
                                This Chapter discusses about maintaining records demonstrating UST compliance.
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-2 courseduration">
                                <a href="{{ url('/user/page/1-7-1') }}">Start Course</a>Time: 00:04:57
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordionseparater">
                    <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse8">
                        <a class="card-title"> Chapter 8: RELEASE REPORTING AND RESPONSE </a>
                    </div>
                    <div id="collapse8" class="card-body collapse" data-parent="#accordion">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-lg-2">
                                <i class="fa fa-play-circle-o" aria-hidden="true"></i> RELEASE REPORTING AND RESPONSE
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-8 introtext">
                                This chapter discusses in preparing the operators for the release and initial response actions. Topics include recognizing warning signs/alarms due to leaks, knowing the location of Emergency stop button, posting emergency contact information, managing fuel deliveries
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-2 courseduration">
                                <a href="{{ url('/user/page/1-8-1') }}">Start Course</a>Time: 00:04:37
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordionseparater">
                    <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse9">
                        <a class="card-title"> Chapter 9: TEMPORARY AND PERMANENT CLOSURE </a>
                    </div>
                    <div id="collapse9" class="card-body collapse" data-parent="#accordion">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-lg-2">
                                <i class="fa fa-play-circle-o" aria-hidden="true"></i> TEMPORARY AND PERMANENT CLOSURE
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-8 introtext"></div>
                            <div class="col-md-12 col-sm-12 col-lg-2 courseduration">
                                <a href="{{ url('/user/page/1-9-1') }}">Start Course</a>Time: 00:06:03
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordionseparater">
                    <div class="card-header collapsed" data-toggle="collapse" href="#collapse10">
                        <a class="card-title">  Chapter 10: FINANCIAL RESPONSIBILITY </a>
                    </div>
                    <div id="collapse10" class="card-body collapse" data-parent="#accordion">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-lg-2">
                                <i class="fa fa-play-circle-o" aria-hidden="true"></i> FINANCIAL RESPONSIBILITY
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-8 introtext">
                                This chapter covers financial responsibility statuses and financial assurance mechanisms as well as recordkeeping and
                                reporting requirements
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-2 courseduration">
                                <a href="{{ url('/user/page/1-10-1') }}">Start Course</a>Time: 00:07:54
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-lg-12 chapterbuttons">
            <div class="row">
                <div class="col-md-6 col-sm-6 col-lg-6">
                    <a href="{{ url('/home') }}" class="btn btn-outline-primary buttoncustom">CANCEL</a>
                </div>
                <div class="col-md-6 col-sm-6 col-lg-6 rightbuttons">
                    <a href="{{ ($pre!='')?url('/user/page/'.$pre):url('/user/page/1-1-1') }}" type="button" class="btn btn-warning buttonorange">
                    @if($percentage==100)
                    Course Completed
                    @elseif($percentage<'100' & $percentage!=0)
                    Resume Course
                    @else
                    Begin Course
                    @endif
                    </a>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
</section>
<script>
    $(function () {
        $("#collapse-expand").hide();
        $('#collapse-init').click(function () {
            if($(".card-header.collapsed")){
                $(".card-header").removeClass("collapsed");
                $('.card-body').addClass("show");
                $('.card-body').addClass("leftborder");
                $(this).hide();
                $("#collapse-expand").show();
            }
        });

        $('#collapse-expand').click(function () {
            $(".card-header").addClass("collapsed");
            $('.card-body').removeClass("show");
            $('.card-body').removeClass("leftborder");
            $(this).hide();
            $('#collapse-init').show();
        });
    });
</script>
@endsection