@extends('layouts.default')

@section('title')

@endsection

@section('header-style')
    <!--Load custom style link or css-->
    <style type="text/css">

        .inspectionTable td input {
            position: relative;
        }

        .inspectionTable tr td {
            padding: 5px;
        }

        .bootstrap-datetimepicker-widget td {
            padding: 0 !important;
        }

    </style>


@endsection
@section('content')

    <div class="content-body">
        <section id="form-repeater-wrapper">

            <!-- Modal -->
            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
                 aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog mw-100 w-75 modal-dialog-centered" role="document">
                    <div class="modal-content">

                        <div class="modal-body text-center bodyRefresh ">


                            <div id="roster_show_div"></div>


                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>


        </section>
    </div>

    <div class="card">
        <div class="card-body">
            <section id="horizontal-vertical">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Dredging Inspection Approval</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body card-dashboard">
                                    <div class="table-responsive">
                                        <table id="dradging-inspection-list"
                                               class="table table-sm datatable mdl-data-table dataTable">
                                            <thead>

                                            <tr>
                                                <th>#</th>
                                                <th>INSPECTION MONTH</th>
                                                <th>INSPECTION YEAR</th>
{{--                                                <th>Note</th>--}}
                                                <th>Submission Date</th>
                                                <th>Approved By</th>
                                                <th>Approval Status</th>
                                                <th>Approve Date</th>
                                                <th>Action</th>
                                            </tr>

                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>


@endsection

@section('footer-script')
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script type="text/javascript">

        function inspectionList() {
            var url = '{{route('schedule.dreadging-inspection-approval-datatable')}}';
            $('#dradging-inspection-list').DataTable({
                processing: true,
                serverSide: true,
                order: [],
                ajax: {
                    url: url,
                    'type': 'POST',
                    'headers': {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                    {data: 'inspection_month', name: 'inspection_month', searchable: true},
                    {data: 'inspection_year', name: 'inspection_year', searchable: true},
                    // {data: 'note', name: 'note'},
                    {data: 'insert_time', name: 'insert_time'},
                    {data: 'approved_by', name: 'approved_by', searchable: true},
                    {data: 'approved_yn', name: 'approved_yn', searchable: true},
                    {data: 'update_time', name: 'update_time', searchable: true},
                    {data: 'action', name: 'action', searchable: false},
                ]
            });

        };

        $('#dradging-inspection-list tbody').on('click', '.roster_approval', function () {
            let inspection_mst_id = $(this).data("inspection_mst_id");
            approve_roster(inspection_mst_id);
        });

        // for approve button in datatable
        function approve_roster(inspection_mst_id) {
            let url = '{{route('schedule.dreadging_inspection_approval')}}';
            Swal.fire({
                title: 'Are you sure?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#218838',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Approve it!'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        type: 'GET',
                        url: url,
                        data: {inspection_mst_id: inspection_mst_id},
                        success: function (msg) {
                            console.log(msg);
                            if (msg === 0) {
                                Swal.fire({
                                    title: 'Something went wrong.',
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });
                            } else {
                                if (msg === 2) {
                                    Swal.fire({
                                        title: 'SMS SENT SUCCESSFULLY.',
                                        icon: 'success',
                                        confirmButtonText: 'OK'
                                    });
                                }

                                if (msg === 3) {
                                    Swal.fire({
                                        title: 'FAILED TO SEND SMS. PLEASE, TRY AGAIN!.',
                                        icon: 'error',
                                        confirmButtonText: 'OK'
                                    });
                                }

                                if (msg === 4) {
                                    Swal.fire({
                                        title: 'FAILED TO SEND SMS. PLEASE, TRY AGAIN!.',
                                        icon: 'error',
                                        confirmButtonText: 'OK'
                                    });
                                }

                                Swal.fire({
                                    title: 'Roster Successfully Approved!',
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                }).then(function () {
                                    $('#dradging-inspection-list').DataTable().ajax.reload();
                                });
                            }
                        }
                    });
                }
            });
        }


        $('#dradging-inspection-list tbody').on('click', '.delete_approval', function () {
            let inspection_mst_id = $(this).data("inspection_mst_id");
            delete_roster(inspection_mst_id);
        });

        // for delete button in datatable
        function delete_roster(inspection_mst_id) {
            let url = '{{route('schedule.dreadging_inspection_approval_delete')}}';
            Swal.fire({
                title: 'Are you sure?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Delete it!'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        type: 'GET',
                        url: url,
                        data: {inspection_mst_id: inspection_mst_id},
                        success: function (msg) {
                            console.log(msg);
                            if (msg == 0) {
                                Swal.fire({
                                    title: 'Something went wrong.',
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });
                            } else {
                                Swal.fire({
                                    title: 'Roster Deleted Successfully!',
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                }).then(function () {
                                    $('#dradging-inspection-list').DataTable().ajax.reload();

                                });
                            }
                        }
                    });
                }
            });
        }


        $(document).ready(function () {

            inspectionList();
            var obj = [];

        });

        function show_roster(abc) {

            let inspection_mst_id = abc;


            // Show detail table data in modal's html table
            $.ajax({
                type: "POST",
                dataType: 'json',
                data: {
                    inspection_mst_id: inspection_mst_id
                },
                url: "{{route("schedule.dreadging_inspection_show_detail")}}",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

                success: function (data1) {

                    $('#roster_show_div').html(data1.data);


                },
            })


        }

    </script>

@endsection