@extends('layouts.app')


@section('third_party_stylesheets')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{asset('admin_lte')}}/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet"
          href="{{asset('admin_lte')}}/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="{{asset('admin_lte')}}/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">


@endsection

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Details</h1>
                </div>
                {{--                <div class="col-sm-6">--}}
                {{--                    <ol class="breadcrumb float-sm-right">--}}
                {{--                        <li class="breadcrumb-item"><a href="#">Home</a></li>--}}
                {{--                        <li class="breadcrumb-item active">Simple Tables</li>--}}
                {{--                    </ol>--}}
                {{--                </div>--}}
            </div>
        </div><!-- /.container-fluid -->

    </section>
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">

                <div class="col-md-12">
                    <div class="card card-secondary">
                        <div class="card-header">
                            <h3 class="card-title">List Detail</h3>

                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <form method="POST" enctype="multipart/form-data"
                                  action="{{route('occupationList.update')}}">
                                @csrf

                                <div class="form-group">
                                    <label for="inputOccupationListName">Occupation List Name</label>
                                    <input type="text" id="occupationListName" disabled class="form-control"
                                           value="{{$occupationListInfo['occupation_list_name']}}">
                                </div>
                                <div class="form-group">
                                    <label for="inputState">State</label>
                                    <input type="text" disabled id="state" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="inputRegion">Region</label>
                                    <input type="text" disabled id="region" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="inputRegion">List Link</label>
                                    <div class="input-group mb-3">
                                        <input type="text" name="list_link" value="{{$occupationListInfo['list_link']}}" class="form-control rounded-0">
                                        <span class="input-group-append">
                                            <a type="button" href="{{$occupationListInfo['list_link']}}" target="_blank" rel="noopener noreferrer" class="btn btn-info btn-flat">Go!</a>
                                      </span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputSpentBudget">Status</label>
                                    <select id="inputStatus" class="form-control custom-select" name="status">
                                        <option disabled="">Select one</option>
                                        @if($occupationListInfo['status'] == 'out')
                                            <option selected value="out">Open</option>
                                            <option value="not out">Closed</option>
                                        @else
                                            <option value="out">Open</option>
                                            <option selected value="not out">Closed</option>
                                        @endif
                                    </select>
                                </div>
                                <input type="text" hidden name="listId" class="form-control"
                                       value="{{$occupationListInfo['id']}}">
                                <div class="row">
                                    <div class="col-12">
                                        <a href="#" class="btn btn-secondary">Cancel</a>
                                        <input type="submit" value="Save Changes" class="btn btn-success">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.card-body -->

                    </div>
                    <!-- /.card -->

                    <!-- /.card -->
                </div>

            </div>


        </div>
    </section>




    <section class="content-header">
        <div class="container-fluid">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Occupations</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>Anzsco Code</th>
                            <th>Occupation</th>
                            <th>Assessing Authority</th>
                            <th>Status</th>
                            <th>Last Updated At</th>


                        </tr>
                        </thead>
                        <tbody>

                        @foreach($occupations as $occupation)


                            <tr>
                                <td>{{$occupation['anzsco_code']}}</td>
                                <td>{{$occupation['occupation']}}</td>
                                <td>{{$occupation['assessing_authority']}}</td>

                                <td>
                                    @if($occupation['status']=='1')
                                        <span class="badge badge-success"> <span>Open</span></span>
                                    @elseif($occupation['status']=='2')
                                        <span class="badge badge-warning"> <span>Suspended</span></span>
                                    @else
                                        <span class="badge badge-danger"> <span>Closed</span></span>
                                    @endif
                                </td>
                                <td>{{$occupation['updated_at']}}</td>
{{--                                <td>--}}
{{--                                    <div class="btn-group btn-group-sm">--}}

{{--                                        --}}{{--                                        <a href="#" class="btn btn-info" data-toggle="modal"--}}
{{--                                        --}}{{--                                           data-target="#editOccupationModal"><i class="fas fa-eye"></i></a>--}}
{{--                                        <a href="{{route('occupation.edit',['listId'=>$occupationListInfo['id'],'anzscoCode'=>$occupation['anzsco_code']])}}"--}}
{{--                                           class="btn btn-info"><i class="fas fa-eye"></i></a>--}}
{{--                                        <a href="#" class="btn btn-danger"><i class="fas fa-trash"></i></a>--}}
{{--                                    </div>--}}
{{--                                </td>--}}

                            </tr>

                        @endforeach
                        </tbody>

                    </table>
                </div>
                <!-- /.card-body -->
            </div>
        </div>
    </section>


    {{--Modal Dialog--}}
    <div class="modal fade" id="editOccupationModal" tabindex="-1" role="dialog" aria-labelledby="editOccupationModal"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Occupation Detail</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form">

                        </div>

                        <div class="modal-footer">
                            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                            <button class="btn btn-primary" type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('third_party_scripts')
    <!-- jQuery -->
    <!-- Bootstrap 4 -->
{{--    <script src="{{asset('admin_lte')}}/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>--}}
    <script src="{{asset('admin_lte')}}/plugins/jquery/jquery.min.js"></script>

    <!-- DataTables  & Plugins -->
    <script src="{{asset('admin_lte')}}/plugins/datatables/jquery.dataTables.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-responsive/js/dataTables.responsive.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-responsive/js/responsive.bootstrap4.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-buttons/js/dataTables.buttons.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-buttons/js/buttons.bootstrap4.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/jszip/jszip.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/pdfmake/pdfmake.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/pdfmake/vfs_fonts.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-buttons/js/buttons.html5.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-buttons/js/buttons.print.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-buttons/js/buttons.colVis.min.js" defer></script>
    <!-- AdminLTE App -->
    <script src="{{asset('admin_lte')}}/dist/js/adminlte.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{{asset('admin_lte')}}/dist/js/demo.js"></script>
    <script>
        $(function () {
            $("#example1").DataTable({
                "responsive": true, "lengthChange": false, "autoWidth": false, "paging": false,

            }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
            $('#example2').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
            });
        });
    </script>
@endsection