@extends('includes/layout')
@section('main-page-content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card mb-4">
            <div class="card-body">
                <div class="border-bottom py-2 d-flex justify-content-between align-items-center">
                    <div>
                        <div class="h4 pb-0 mb-0">Inspection plans </div>
                        <small>Inspection plan List</small>
                    </div>
                    <div class="d-flex justify-content-end align-items-center">
                        @if (in_array('InspectionList Maintain', Session::get('permissions')))
                            <button class="btn btn-primary"
                                onclick="window.location.href='{{ url('/inspection-plan/create/1') }}/0'"><span
                                    class="mdi mdi-plus"></span>Inspection plan Report</button>
                        @endif
                    </div>
                </div>
                <div class="mt-3">
                    <div class="table-responsive text-nowrap mt-3 border-bottom">
                        <table class="table">
                            <thead class="table-head-color bg-primary">
                                <tr>
                                    <th style="width: 15%;">

                                        <input type="text" class="filter form-control" name="title" placeholder="Title"
                                            autocomplete="off">
                                        <input type="text" style="display:none" name="fake-first_name"
                                            autocomplete="off">
                                    </th>
                                    <th style="width: 15%;">
                                        <input type="text" class="filter form-control" name="document_number"
                                            placeholder="Document Number" autocomplete="off">
                                        <input type="text" style="display:none" name="fake-document_number"
                                            autocomplete="off">
                                    </th>
                                    <th style="width: 15%;">
                                        <input type="date" class="filter form-control" name="issue_date"
                                            placeholder="Issue Date" autocomplete="off">
                                        <input type="text" style="display:none" name="fake-issue_date"
                                            autocomplete="off">
                                    </th>
                                    <th style="width: 15%;">
                                        <input type="text" class="filter form-control" name="authorised_by"
                                            placeholder="Authorised By" autocomplete="off">
                                        <input type="text" style="display:none" name="fake-authorised_by"
                                            autocomplete="off">
                                    </th>
                                    <th style="width: 15%;">
                                        <select class="filter select-color" name="process">
                                            <option value="">Process</option>
                                            <option value="1">Completed</option>
                                            <option value="0">InProcess</option>
                                        </select>
                                    </th>
                                    <th style="width: 15%;">
                                        <select class="filter select-color" name="published">
                                            <option value="">Publish</option>
                                            <option value="1">Published</option>
                                            <option value="0">Unpublished</option>
                                        </select>
                                    </th>
                                    <th style="width: 10%;" class="text-center">
                                        <div style="margin-top:6px;display:block;">
                                            <button class="btn btn-success btn-sm p-2 waves-effect waves-light filter-btn"
                                                onclick="_filter(1); _get(0);">submit</button>
                                            <button
                                                class="btn btn-danger btn-sm p-2 waves-effect waves-light filter-btn-close"
                                                onclick="_filter(0);  _get(0);">x</button>
                                        </div>
                                </tr>
                            </thead>
                            <tbody class="table-border-bottom-0 table-body">

                            </tbody>
                        </table>
                    </div>
                    <nav aria-label="Page navigation" class="mt-3 ">
                        <ul class="pagination justify-content-end pages_btn">

                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="DeleteEmp" tabindex="-1" aria-labelledby="deletePreLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger px-4 py-2">
                    <h5 class="modal-title text-white" id="deletePreLabel">Delete</h5>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this record?<br><br>
                    <b class="text-warning">Warning:</b> This record will no longer be available. Please ensure you
                    genuinely want to delete it before clicking the delete button.
                </div>
                <div class="modal-footer border-top py-2">
                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger" id="delete-emp-id" data-
                        onclick="_delete(this)">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('css-js')
    <script>
        $(document).ready(function() {
            _filter(0);
            _get(0);

        });

        function _filter(filter_on) {

            var collection = document.getElementsByClassName("filter");
            var arr = {};
            for (let i = 0; i < collection.length; i++) {
                arr[collection[i].name] = filter_on == 1 ? collection[i].value : '';
            }
            if (filter_on == 0) {
                $('.filter').val('');
            }
            localStorage.setItem('filter', JSON.stringify(arr));
        }

        function _get(from) {
            loader(true);
            $.ajax({
                type: "GET",
                url: `{{ url('/api/inspection-plans') }}?from=${from}&filter=${localStorage.getItem('filter')}`,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log('response:', response)
                    var inspection_plan = response.data.inspection_plan;
                    var html = ``;
                    var count = parseInt(response.count) < 20 ? 1 : parseInt(response.count) / 10;
                    count = Math.ceil(count);
                    var pages_btn = ``;

                    pages_btn += `
                        <li class="page-item prev ${response.count == 0 ? 'd-none' : ''}"   onclick="_get(0);" >
                          <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                        </li>
                        <li class="page-item prev ${response.count == 0 ? 'd-none' : ''}"  onclick="$('.active').prev('.p-btn').trigger('onclick');" >
                        <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-left"></i></a>
                        </li>`;

                    $('.p-btn').removeClass('active');
                    var c = 0;
                    for (c = 0; c < count; c++) {
                        if (
                            (from == (c - 3) * 20) ||
                            (from == (c - 2) * 20) ||
                            (from == (c - 1) * 20) ||
                            (from == (c - 0) * 20) ||
                            (from == (c + 1) * 20) ||
                            (from == (c + 2) * 20) ||
                            (from == (c + 3) * 20)
                        ) {
                            pages_btn += `
                                <li class="page-item p-btn ${from == c*20 ? 'active' : '' } ${response.count == 0 ? 'd-none' : '' } "   onclick="_get(${c*20});">
                                  <a class="page-link waves-effect" href="javascript:void(0);">${c+1}</a>
                                </li>
                                `;
                        }

                    }

                    pages_btn += `
                                <li class="page-item next ${response.count == 0 ? 'd-none' : ''}"  onclick="$('.active').next('.p-btn').trigger('onclick');" >
                                    <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-right"></i></a>
                                </li>
                                <li class="page-item next ${response.count == 0 ? 'd-none' : ''}"   onclick="_get(${(c-1)*20});" >
                                    <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                                </li>
                            `;


                    $('.pages_btn').html(pages_btn);

                    for (var i = 0; i < inspection_plan.length; i++) {


                        html += `
                            <tr>
                            <td>${inspection_plan[i].title}</td>
                            <td>${inspection_plan[i].document_number?inspection_plan[i].document_number:''}</td>
                           <td>${inspection_plan[i].issue_date ? formate_date(inspection_plan[i].issue_date) : ''}</td>

                            <td>
                                ${inspection_plan[i]?.authorized_by?.first_name ? inspection_plan[i]?.authorized_by?.first_name + ' ' : ''}
                                ${inspection_plan[i]?.authorized_by?.middle_name ? inspection_plan[i]?.authorized_by?.middle_name + ' ' : ''}
                                ${inspection_plan[i]?.authorized_by?.last_name ? inspection_plan[i]?.authorized_by?.last_name : ''}
                            </td>
                            <td>

                            ${ inspection_plan[i].process == "1" ?
                                '<span class="badge rounded-pill bg-label-success me-1">Completed</span>'
                                :
                                '<span class="badge rounded-pill bg-label-danger me-1">InProcess</span>'
                            }
                            </td>
                                <td>

                            ${ inspection_plan[i].is_published === "1" ?
                                '<span class="badge rounded-pill bg-label-success me-1">Published</span>'
                                :
                                '<span class="badge rounded-pill bg-label-danger me-1">Unpublished</span>'
                            }
                            </td>
                            <td>
                            @if (1 || in_array('Employee List Maintain', Session::get('permissions')))
                              <div class="dropdown cursor-pointer d-flex justify-content-center">
                              <div   id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"><span class="mdi mdi-dots-vertical list_color"></span></div>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                    <li><a class="dropdown-item py-1 ps-2"  onclick="window.location.href='{{ url('/inspection-plan/create/1') }}/${inspection_plan[i]?.id}'">
                                        <span class="mdi mdi-square-edit-outline mdi-20px text-warning"></span> Edit</a></li>
                                    <li><a class="dropdown-item py-1 ps-2"  data-id="${inspection_plan[i].id}" onclick="_delete_modal(this)"><span class="mdi mdi-trash-can-outline mdi-20px text-danger"></span> Delete</a></li>
                                    <li><a  onclick="_change_status(${inspection_plan[i].id})" class="dropdown-item py-1 ps-2"  ><span class="mdi mdi-publish mdi-20px text-warning"></span>  ${inspection_plan[i].is_published     === '1' ? 'Unpublish' : 'Publish'}</a></li>
                                    <li><a href="/inspection-plan-pdf-regenerate/${inspection_plan[i].id}" class="dropdown-item py-1 ps-2"  data-id="${inspection_plan[i].id}" ><span class="mdi mdi-restart mdi-20px text-warning"></span> Regenerate PDF</a></li>

                                    <li><a href="/inspection-plan-pdf/${inspection_plan[i].id}" class="dropdown-item py-1 ps-2"  data-id="${inspection_plan[i].id}" ><span class="mdi mdi-briefcase-download-outline mdi-20px text-warning"></span> Download</a></li>
                                    <a href="/inspection-report-view-signature/${inspection_plan[i].id}"  class="dropdown-item py-1 ps-2"  data-id="${inspection_plan[i].id}" ><span class="mdi mdi-monitor mdi-20px text-warning"></span>View Signature</a>

                                    </ul>
                              </div>
                            </td>
                            @endif

                          </tr>

                    `;
                    }



                    $('.table-body').html(html);

                    if (html == ``) {
                        $('.table-body').html(
                            `<tr><td colspan="8" class="text-center">No record found</td></tr>`);
                    }



                    loader(false);
               },
                error: function(response) {
                    loader(false);
                    if (response.status == 500) {
                        toastr.error("Something went wrong")
                    } else {
                        toastr.error(response.responseJSON.message)
                    }
                }
            });

        }

        function _change_status(id) {
            loader(true);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "get",
                url: "{{ url('/inspection-report-pdf-publish') }}" +"/"+ id,
                success: function(response) {
                    _get(0);
                    loader(false);

                    toastr.success(response.message??'Report status updated and pdf downloaded successfuly.');

              

                },
                error: function(response) {
                    if (response.status == 500) {
                        toastr.error("Something went wrong")
                    } else {
                        toastr.error(response.responseJSON.message)
                    }
                }
            });

        }

        function _delete_modal(_this) {
            var id = $(_this).attr('data-id');
            $('#delete-emp-id').attr('data-id', id);
            $('#DeleteEmp').modal('show');
        }

        function _delete(_this) {


            var id = $(_this).attr('data-id');

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "DELETE",
                url: "{{ url('/api/Inspection-plan-delete') }}/" + id,
                success: function(response) {
                    toastr.success(response.message);
                    _get(0);
                    $('#DeleteEmp').modal('hide');

                    loader(false);


                },
                error: function(response) {
                    loader(false);
                    if (response.status == 500) {
                        toastr.error("Something went wrong")
                    } else {
                        toastr.error(response.responseJSON.message)
                    }
                }
            });

        }
    </script>
    <style>
        .filter {
            width: 100%;
            height: 33px;
            outline: none;
            background: white;
        }

        .filter-form {
            width: 100%;
            height: 33px;
            outline: none;
            background: white;
        }


        .select-color {
            color: #4E4E4E;
            font-weight: 400;
            line-height: 1.47;
            background-size: 9px 5px;
            border: 1px solid #d4d3d5;
            border-radius: 2px;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            padding-left: 5px;
        }

        .list_color:hover {
            color: #15A7F5;
        }

        @media only screen and (min-width: 320px) and (max-width: 568px) {
            .filter {
                width: 115px;
            }

        }

        @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .filter {
                width: 115px;
            }

        }

        @media only screen and (min-width: 900px) and (max-width: 1440px) {
            .filter {
                width: 115px;
            }
        }

        /* @media only screen and (min-width: 800px) and (max-width: 1280px) {
                                                                                                                                                                                                    .filter{
                                                                                                                                                                                                        width: 115px;
                                                                                                                                                                                                    }
                                                                                                                                                                                                    .table-responsive {
                                                                                                                                                                                                        overflow-x: scroll;
                                                                                                                                                                                                        scroll-behavior: smooth;
                                                                                                                                                                                                    }
                                                                                                                                                                                                } */
    </style>
@endsection