<!DOCTYPE html>
<html lang="en">
  
<head>
    <%- include('./partials/head'); -%>
    
</head>
<body onload="startTime()">
    <%- include('./partials/header_sidebar'); -%>
    
    <!-- tap on top starts-->

    <!-- Page Sidebar Ends-->
    <div class="page-body">
      <div class="container-fluid">
        <div class="page-title">
          <div class="row">
            <div class="col-sm-6">
              <h3><%=driver[0].first_name%> <%=driver[0].last_name%> <span class="f-18 f-w-500"><%=lan.document%></span></h3>
            </div>
            <div class="col-sm-6">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/index"><i data-feather="home"></i></a></li>
                <li class="breadcrumb-item"><%=lan.dashboard%></li>
                <li class="breadcrumb-item active"><%=lan.driver%> <%=lan.document%></li>
              </ol>
            </div>
          </div>
        </div>
      </div>
      <!-- Container-fluid starts-->
      <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <% if(notfield != ""){ %>
                        <% let permiss = per != "1" ? per.doc_setting[1] : "1" %>
                        <% if(permiss == "1"){ %>
                        <div class="card-header d-flex justify-content-end pb-0">
                            <a class="btn btn-square btn-primary b-r-10" type="button" href="/driver/add_ddocument/<%=driver[0].id%>&<%=notfield%>"><%=lan.add%> <%=lan.document%></a>
                        </div>
                        <% }; %>
                    <% }; %>
                    <div class="card-body">
                        <div class="table-responsive theme-scrollbar">
                            <table class="display" id="basic-1">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th><%=lan.image%></th>
                                        <th><%=lan.document%> <%=lan.name%></th>
                                        <th><%=lan.document%> <%=lan.number%></th>
                                        <th><%=lan.approved%></th>
                                        <% let permissions = per != "1" ? per.doc_setting[2] : "1" %>
                                        <% if(permissions == "1"){ %>
                                        <th><%=lan.action%></th>
                                        <% }; %>
                                    </tr>
                                </thead>
                                <tbody>
                                    <% var i = 1 %>
                                    <% driver_doc.forEach((data) => { %>
                                        <tr>
                                            <td><%= i %></td>
                                            <td class="p-1">
                                                <% for (let i = 0; i < data.newimage.length; i++){ %>
                                                    <a href="javascript:void(0)" onclick="openLightbox('../../<%= data.newimage[i] %>')" style="position: relative; display: inline-block; margin-right: 5px;">
                                                        <img class="p-0 img-thumbnail" style="object-fit: cover; border-radius: 4px; border: 1px solid #ddd; cursor: pointer; transition: transform 0.2s;" width="50px" height="50px" src="../../<%= data.newimage[i] %>" alt="<%=lan.image%>">
                                                    </a>
                                                <% }; %>
                                            </td>
                                            <td><%= data.dname %></td>
                                            <td><%= data.document_number %></td>
                                            <td>
                                                <% if (data.status == '') { %>
                                                    <% if (data.rejection_reason && data.rejection_reason !== '') { %>
                                                        <span class="badge badge-warning" style="color: black; background-color: #ffc107;">Re-uploaded (Verify Now)</span>
                                                    <% } else { %>
                                                        <span class="badge badge-danger"><%=lan.pending%></span>
                                                    <% } %>
                                                <% } else if (data.status == '1') { %>
                                                    <span class="badge badge-success"><%=lan.approved%></span>
                                                <% } else if (data.status == '0') { %>
                                                    <span class="badge badge-danger"><%=lan.unapproved%></span>
                                                <% } %>
                                            </td>
                                            <% if(permissions == "1"){ %>
                                            <td>
                                                <ul class="action"> 
                                                <li class="edit custom_tooltip"><a data-bs-toggle="modal" data-bs-target="#edit_ddocument" id="edit_ddocumentdata" data-id="<%= data.id %>" 
                                                    data-image="<%= data.image %>" data-driver_id="<%= data.driver_id %>" data-document_id="<%= data.document_id %>" 
                                                    data-document_number="<%= data.document_number %>" data-status="<%= data.status %>" data-imgside="<%= data.imgside %>"
                                                    data-impreq="<%= data.impreq %>" data-inpname="<%= data.inpname %>" data-rejection_reason="<%= data.rejection_reason %>"><i class="icon-pencil-alt"></i></a><span class="tooltiptext" style="width: 100px; margin-left: -50px; padding: 5px; font-size: 11px; bottom: 135%;">Edit Document</span></li>
                                                <li class="delete custom_tooltip"><a href="/driver/delete_documentdata/<%= data.id %>"><i class="icon-trash"></i></a><span class="tooltiptext" style="width: 100px; margin-left: -50px; padding: 5px; font-size: 11px; bottom: 135%;">Delete Document</span></li>
                                                </ul>
                                            </td>
                                            <% } %>
                                        </tr>
                                    <% i++ %>
                                    <% }) %>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
      <!-- Container-fluid Ends-->
    </div>

    <div class="modal fade bd-example-modal-lg" id="edit_ddocument" tabindex="-1" role="dialog" aria-labelledby="edit_ddocument" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><%=lan.edit%> <%=lan.driver%> <%=lan.document%></h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="<%=lan.close%>"></button>
                </div>
                <form class="needs-validation" id="edit_doc_form" action="" method="post" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="row g-3">   

                            <div class="col-12">
                                <div class="row">
                                    <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 text-center" id="edit_docfirstimg">
                                        <div class="col-12 mb-2">
                                            <div class="text-center form-group" style="display: inline-block;">
                                                <div class="image-preview-container" style="position: relative; cursor: pointer; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform 0.2s;" onclick="openLightbox($('#firstfile-preview').attr('src'))">
                                                    <img id="firstfile-preview" style="object-fit: cover; border: 1px solid #eee;" width="220" height="150" src="../images/dashboard/default/profile.png" alt="<%=lan.image%>">
                                                    <div style="position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; padding: 5px 0; text-align: center;"><i class="fa fa-search-plus"></i> Click to preview large</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <label class="col-form-label f-w-600"><%=lan.front%> <%=lan.image%></label>
                                            <input class="form-control" id="firstimg" style="height: 47px;" type="file" name="frontimage" onchange="secondshowPreview(event)">
                                        </div>
                                    </div>
    
                                    <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 text-center" id="edit_docsecounimg">
                                        <div class="col-12 mb-2">
                                            <div class="text-center form-group" style="display: inline-block;">
                                                <div class="image-preview-container" style="position: relative; cursor: pointer; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform 0.2s;" onclick="openLightbox($('#secondfile-preview').attr('src'))">
                                                    <img id="secondfile-preview" style="object-fit: cover; border: 1px solid #eee;" width="220" height="150" src="../images/dashboard/default/profile.png" alt="<%=lan.image%>">
                                                    <div style="position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; padding: 5px 0; text-align: center;"><i class="fa fa-search-plus"></i> Click to preview large</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <label class="col-form-label f-w-600"><%=lan.back%> <%=lan.image%></label>
                                            <input class="form-control" id="secimage" style="height: 47px;" type="file" name="secoundimage" onchange="secondshowPreview(event)">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 d-none" id="docfinput">
                                <label class="form-label" id="editdocinname"></label>
                                <input class="form-control" type="text" id="edit_pre_name" name="fname" placeholder="<%=lan.enter%> <%=lan.field%> <%=lan.name%>">
                            </div>

                            <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 d-flex flex-column align-items-center justify-content-center">
                                <label class="form-label f-w-600 mb-2">Approval Action</label>
                                <div class="d-flex align-items-center gap-3">
                                    <div class="btn-group" role="group" style="box-shadow: 0 3px 8px rgba(0,0,0,0.1); border-radius: 6px; overflow: hidden;">
                                        <button type="button" class="btn btn-outline-danger px-4 py-2" id="btnQuickReject" style="font-weight: 600;"><i class="fa fa-times-circle"></i> Reject</button>
                                        <button type="button" class="btn btn-outline-success px-4 py-2" id="btnQuickApprove" style="font-weight: 600;"><i class="fa fa-check-circle"></i> Approve</button>
                                    </div>
                                    <input type="checkbox" class="d-none" id="edit_doc_status" name="status">
                                </div>
                                <span class="badge mt-2" id="current_status_badge" style="font-size: 12px; padding: 6px 12px;"></span>
                            </div> 
                            
                            <div class="col-sm-12 d-none" id="rejection_reason_container">
                                <label class="form-label">Rejection Reason</label>
                                <textarea class="form-control" name="rejection_reason" id="edit_rejection_reason" placeholder="Enter reason for rejection"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal"><%=lan.close%></button>
                        <button class="btn btn-primary" type="submit"><%=lan.save%></button>
                    </div>
                </form>
            </div>
        </div>
    </div>

<!-- Custom Image Lightbox Modal -->
<div class="modal fade" id="imageLightboxModal" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1070;">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content" style="background-color: rgba(15, 23, 42, 0.95); border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.8);">
            <div class="modal-header" style="border-bottom: 1px solid rgba(255,255,255,0.1); padding: 15px 25px;">
                <h5 class="modal-title" style="color: #fff; font-weight: 600; font-family: 'Montserrat', sans-serif;">Document Preview</h5>
                <button class="btn-close btn-close-white" type="button" data-bs-dismiss="modal" aria-label="Close" style="filter: invert(1) grayscale(100%) brightness(200%);"></button>
            </div>
            <div class="modal-body d-flex flex-column align-items-center justify-content-center" style="position: relative; min-height: 500px; padding: 25px; background: radial-gradient(circle, rgba(30,41,59,0.9) 0%, rgba(15,23,42,0.95) 100%);">
                <!-- Image Wrapper with Zoom / Pan / Rotation -->
                <div id="lightboxImageWrapper" style="display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 65vh; transition: all 0.3s ease;">
                    <img id="lightboxImage" src="" alt="Document Preview" style="max-width: 100%; max-height: 60vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1);">
                </div>
                
                <!-- Floating Controls Toolbar -->
                <div class="d-flex gap-3 mt-4 px-4 py-2" style="background: rgba(30, 41, 59, 0.7); border-radius: 50px; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 20px rgba(0,0,0,0.3);">
                    <button type="button" class="btn rounded-circle control-btn" id="btnZoomIn" title="Zoom In">
                        <i class="fa fa-search-plus"></i>
                    </button>
                    <button type="button" class="btn rounded-circle control-btn" id="btnZoomOut" title="Zoom Out">
                        <i class="fa fa-search-minus"></i>
                    </button>
                    <button type="button" class="btn rounded-circle control-btn" id="btnRotateLeft" title="Rotate Left 90°">
                        <i class="fa fa-undo"></i>
                    </button>
                    <button type="button" class="btn rounded-circle control-btn" id="btnRotateRight" title="Rotate Right 90°">
                        <i class="fa fa-repeat"></i>
                    </button>
                    <button type="button" class="btn rounded-circle control-btn" id="btnReset" title="Reset View">
                        <i class="fa fa-refresh"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    let currentRotation = 0;
    let currentZoom = 1;

    function openLightbox(imageSrc) {
        if (!imageSrc || imageSrc.includes('profile.png')) return;
        currentRotation = 0;
        currentZoom = 1;
        updateTransform();
        $('#lightboxImage').attr('src', imageSrc);
        var myModal = new bootstrap.Modal(document.getElementById('imageLightboxModal'));
        myModal.show();
    }

    function updateTransform() {
        $('#lightboxImage').css('transform', `rotate(${currentRotation}deg) scale(${currentZoom})`);
    }

    $(document).ready(function() {
        // Lightbox toolbar buttons
        $('#btnZoomIn').on('click', function() {
            currentZoom = Math.min(3, currentZoom + 0.25);
            updateTransform();
        });

        $('#btnZoomOut').on('click', function() {
            currentZoom = Math.max(0.5, currentZoom - 0.25);
            updateTransform();
        });

        $('#btnRotateLeft').on('click', function() {
            currentRotation = (currentRotation - 90) % 360;
            updateTransform();
        });

        $('#btnRotateRight').on('click', function() {
            currentRotation = (currentRotation + 90) % 360;
            updateTransform();
        });

        $('#btnReset').on('click', function() {
            currentRotation = 0;
            currentZoom = 1;
            updateTransform();
        });

        // Quick Approve/Reject buttons inside Edit Modal
        $('#btnQuickApprove').on('click', function() {
            $('#edit_doc_status').prop('checked', true);
            $('#current_status_badge').removeClass('badge-danger').addClass('badge-success').text('Approved');
            $('#btnQuickApprove').removeClass('btn-outline-success').addClass('btn-success');
            $('#btnQuickReject').removeClass('btn-danger').addClass('btn-outline-danger');
            $('#rejection_reason_container').addClass('d-none');
            $('#edit_rejection_reason').val('');
        });

        $('#btnQuickReject').on('click', function() {
            $('#edit_doc_status').prop('checked', false);
            $('#current_status_badge').removeClass('badge-success').addClass('badge-danger').text('Rejected/Unapproved');
            $('#btnQuickReject').removeClass('btn-outline-danger').addClass('btn-danger');
            $('#btnQuickApprove').removeClass('btn-success').addClass('btn-outline-success');
            $('#rejection_reason_container').removeClass('d-none');
            $('#edit_rejection_reason').focus();
        });
    });
</script>

<style>
    .image-preview-container:hover {
        transform: scale(1.03);
    }
    .img-thumbnail:hover {
        transform: scale(1.15);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        z-index: 10;
    }
    .control-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
    }
    .control-btn i {
        color: #ffffff !important;
        font-size: 16px;
    }
    .control-btn:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: scale(1.08);
        border-color: rgba(255, 255, 255, 0.4) !important;
    }
    .control-btn:active {
        transform: scale(0.95);
    }
</style>

<%- include('./partials/footer'); -%>
<%- include('./partials/script'); -%>
</body>
</html>