@extends('layouts.default')

@section('title')

@endsection

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

        .inspectionTable td input {
            width: 100%;
            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">
            <!-- form default repeater -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        @if(Session::has('message'))
                            <div
                                class="alert {{Session::get('m-class') ? Session::get('m-class') : 'alert-danger'}} show"
                                role="alert">
                                {{ Session::get('message') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        <div class="card-content">

                            <div class="card-body">


                                <div class="row">
                                    <div class="col-12">

                                        <h4 class="card-title">Parameter</h4>
                                        <hr>
                                        <fieldset class="border p-1 mt-1 mb-1 col-sm-12">
                                            <form id="form1">
                                                @csrf

                                                <div class="row parameters">
                                                    <div class="col-sm-5">
                                                        <div class="form-group">
                                                            <label>Year<span class="required"></span></label>
                                                            <div class="input-group date" id="year_only_3"
                                                                 data-target-input="nearest">
                                                                <input type="text"
                                                                       id="year_only_4"
                                                                       name="year_only_3"
                                                                       value="{{ now()->year }}"
                                                                       class="form-control required  customError"
                                                                       data-target="#year_only_3"
                                                                       data-toggle="datetimepicker"
                                                                       placeholder="YYYY"
                                                                       autocomplete="off">
                                                            </div>
                                                        </div>

                                                    </div>


                                                    <div class="col-sm-5">
                                                        <div class="form-group">
                                                            <label>MONTH<span class="required"></span></label>
                                                            <div>
                                                                <select
                                                                    class="custom-select select2 form-control required"
                                                                    id="month_only_4" name="month_only_4">
                                                                    <option value=""> -- Select One --</option>
                                                                    @foreach (\App\Helpers\HelperClass::month_select_dropdown() as $key => $months)
                                                                        <option
                                                                            value="{{ $key }}">{{ $months }}</option>
                                                                    @endforeach
                                                                </select>

                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>


                                                    <div class="col-sm-2">
                                                        <div class="form-group">
                                                            <button type="submit" id="create_roster"
                                                                    class="btn btn-primary mr-1 my-2 ">Create Roster
                                                            </button>

                                                        </div>
                                                    </div>
                                                </div>
                                            </form>

                                        </fieldset>
                                    </div>
                                </div>
                                {{-- inspection registry blade page id--}}
                                <div id="tbody2"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 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 Setup List</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>Approval 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-datatable-list')}}';
            $('#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'},
                    {data: 'approved_yn', name: 'approved_yn', searchable: true},
                    {data: 'update_time', name: 'update_time', searchable: true},
                    {data: 'action', name: 'action', searchable: false},
                ]
            });

        };


        function getValue(that) {
            let twoHrsAdd = moment($(that).val(), "HH:mm").add(2, 'h').format("HH:mm");
            $('#shift_from_time').val(twoHrsAdd);
        }

        // approval button sweet alert
        $('#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: '#3085d6',
                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 {
                                Swal.fire({
                                    title: 'Roster Successfully Approved!',
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                }).then(function () {
                                    $('#dradging-inspection-list').DataTable().ajax.reload();

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


        // edit draft data button
        $('#dradging-inspection-list tbody').on('click', '.edit_draft', function () {
            let inspection_year_id_draft = $(this).data("inspection_year");
            let inspection_month_id_draft = $(this).data("inspection_month");
            edit_draft_data(inspection_year_id_draft, inspection_month_id_draft);
        });

        function edit_draft_data(inspection_year_draft, inspection_month_draft) {

            $.ajax({
                type: "POST",
                dataType: 'json',
                data: {
                    year_name: inspection_year_draft,
                    month_no: inspection_month_draft
                },
                url: "{{route("schedule.dredging-inspection-registry")}}",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

                success: function (msg) {
                    $('#tbody2').html(msg.data);
                    $('#get_year').val(inspection_year_draft);
                    $('#get_month').val(inspection_month_draft);
                    rowComponentEnabled();
                },
            });
        }


        // delete button sweet alert
        $('#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();

            dateTimeYear("#year_only_3");

            function dateTimeYear(selector) {
                var elem = $(selector);
                elem.datetimepicker({
                    format: 'YYYY',
                    widgetPositioning: {
                        horizontal: 'left',
                        vertical: 'bottom'
                    },
                    icons: {
                        time: 'bx bx-time',
                        date: 'bx bxs-calendar',
                        up: 'bx bx-up-arrow-alt',
                        down: 'bx bx-down-arrow-alt',
                        previous: 'bx bx-chevron-left',
                        next: 'bx bx-chevron-right',
                        today: 'bx bxs-calendar-check',
                        clear: 'bx bx-trash',
                        close: 'bx bx-window-close'
                    }

                });
            }

            var obj = [];

        });


        $("#form1").submit(function (e) {

            e.preventDefault();
        });

        const getDays = (year, month) => {
            return new Date(year, month, 0).getDate();
        };

        function getMonthName(monthNumber) {
            return moment(monthNumber, 'M').format('MMMM')
        }

        $("#create_roster").click(function () {

            let year1 = $('#year_only_4').val();
            let month1 = $('#month_only_4').val();

            if (year1 == "") {
                alert('Year Must Be Selected.');
                return false;
            }
            if (month1 == "") {
                alert('Month Must Be Selected.');
                return false;
            }
            const daysInMonth = getDays(year1, month1);
            const monthName = getMonthName(month1);

            // insert detail table data with month wise generated rows registry like
            $.ajax({
                type: "POST",
                dataType: 'json',
                data: {
                    total_days: daysInMonth,
                    year_name: year1,
                    month_name: monthName,
                    month_no: month1
                },
                url: "{{route("schedule.dredging-inspection-registry")}}",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

                success: function (data1) {
                    $('#tbody2').html(data1.data);
                    $('#get_year').val($('#year_only_4').val());
                    $('#get_month').val($("#month_only_4 option:selected").val());
                    rowComponentEnabled();
                },
            })
        });


        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);

                },
            })

        }

        $(document).ready(function () {
            rowComponentEnabled = function () {
                $(document).find('.emp_id').each(function () {
                    $(this).select2();

                    if ($(this).data('checked') == 1) {
                        $(this).removeClass('required');
                        $(this).next('.select2-container').hide();
                    }


                })
                $('td span.select2').width('100%');
                $(document).find(".datetimepicker-input").datetimepicker({
                    /*format: 'LT',*/
                    format: 'HH:mm',
                    icons: {
                        time: 'bx bx-time',
                        date: 'bx bxs-calendar',
                        up: 'bx bx-up-arrow-alt',
                        down: 'bx bx-down-arrow-alt',
                        previous: 'bx bx-chevron-left',
                        next: 'bx bx-chevron-right',
                        today: 'bx bxs-calendar-check',
                        clear: 'bx bx-trash',
                        close: 'bx bx-window-close'
                    }
                });


                setTimeout(() => {
                    $(document).find('.datetimepicker-input').each(function (i, val) {
                        $(this).val($(this).data('value'))
                    });
                }, 500);
            }

            $(document).on('focusout', '.booking-time', function () { //add 2 hours
                var shipBookingTime = $(this).val();
                var shiftDateTime = new Date(new Date().toDateString() + ' ' + shipBookingTime);
                shiftDateTime.setTime(shiftDateTime.getTime() + (2 * 60 * 60 * 1000));
                $(this).parents('tr').find('.start-time').val(shiftDateTime.getHours() + ':' + shiftDateTime.getMinutes());

            });

        });


    </script>

    <script type="text/javascript">

        (function ($) {


            // $(document).on("click", "#submit_btn", function () { // form submit button click
            //
            //
            //         let draftEmpFields = $('select.required').filter(function () { // employee dropdown's null check
            //             return $(this).val() === "";
            //         }).length;
            //
            //
            //         if (draftEmpFields < 1) {
            //             alert('Select Employees Field From All Rows.');
            //             return false;
            //         }
            //
            //         let emptyNote = $('#dreadging_note').filter(function () { // Note field's empty or not.
            //             return $(this).val() === "";
            //         }).length;
            //
            //         if (emptyNote != 0) {
            //             alert('Note Field Is Empty.');
            //             return false;
            //         }
            //
            //         // if (emptyNote == 0 && draftEmpFields == 0) {
            //         if (emptyNote == 0) {
            //             $('#form').submit();
            //         }
            //
            //     }
            // );

            $(document).on("submit", "#dredging_form_submit", function () {

                let draftEmpFields = $(document).find('#dredging_form_submit select.required').filter(function () { // employee dropdown's null check
                    return $(this).val() != "";
                }).length;

                let allEmpFields = $(document).find('#dredging_form_submit select.required').filter(function () { // employee dropdown's null check
                    return $(this).val() === "";
                }).length;


                if ($(this).find("#action").val() == 'd' && draftEmpFields < 1) {
                    alert("Select At Least One Employee From Employees Field.")
                    return false;
                }

                if ($(this).find("#action").val() == 's' && allEmpFields > 0) {
                    alert("Select Employees Field From All Rows.")
                    return false;
                }
                $("body").css("cursor", "progress");

                $.post($(this).attr('action'), $(this).serialize(), function (data) {
                    if (data.o_status_code == 1) {
                        Swal.fire({
                            title: data.o_status_message,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then(function () {
                            if ($(this).find("#action").val() == 's')
                                $(document).find("#tbody2").html('');

                            $('#dradging-inspection-list').DataTable().ajax.reload();
                            $("body").css("cursor", "default");

                        });
                    } else {
                        Swal.fire({
                            title: data.o_status_message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        }).then(function () {
                            $('#dradging-inspection-list').DataTable().ajax.reload();

                        });
                    }
                })
                return false;
            })
        })(jQuery)


    </script>

@endsection