<?php
require_once 'header.php';
require_once 'navbar.php';
if (isset($_POST['date'])) {
    $filter = $_POST['date'];
} else {
    $filter = '0';
}

$sql = "select id,cab_name from cabs";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $cabs[] = $row;
        $cabs1[] = $row;
    }
}

///$sql="select alternate_contact as contact,vendor_id,full_name from vendor_profile";
$sql = "select * from vendor_profile,vendor_login where vendor_login.id=vendor_profile.vendor_id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $vendor[] = $row;
        $vendor1[] = $row;
    }
}

$sql = "SELECT d.* ,v.full_name FROM drivers d ,vendor_profile v where v.vendor_id=d.vendor_id";
if ($result = $conn->query($sql)) {
    if ($result->num_rows > 0) {
        // $all_drivers=array();
        while ($row = $result->fetch_assoc()) {
            //   echo $row;
            $all_drivers[] = $row;
        }
    }
}

// print_r($all_drivers);
?>
<link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js"></script>
<!-- Page content -->

<style>
    .lb-image {
        width: 100% !important;
        height: 90vh !important;
    }

    /*.lightbox{
    position: absolute;
    top: 20px!important;
    left: 20px!important;
}*/
    .lb-outerContainer {
        width: 50% !important;
        height: 90vh !important;
    }
</style>
<!-- Page content -->
<div class="container-fluid pt-8">
    <div class="page-header mt-0 p-3">
        <h3 class="mb-sm-0">Drivers</h3>
        <button id="addd" title="" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modal-default">
            <i class="fa fa-plus"></i>
        </button>

    </div>
    <div id="alert2" class="col-md-12"></div>
    <!-- Table -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <!-- <div class="card-header bg-transparent border-0">
                    <h2 class=" mb-0">Driver's Details</h2>
                </div> -->
                <div class="card-body">

                    <div class="row mb-3">
                        <div class="col-lg-6">
                            <form method="post">
                                <input type="hidden" name="filter" id="datefilter" value="<?= $filter ?>">
                                <div class="input-group w-75 daterange">
                                    <input id="reportrange" type="text" name="date" class="form-control"
                                        placeholder="Search">
                                    <i class="ni ni-calendar-grid-58"></i>
                                    <div class="input-group-append">
                                        <button class="btn btn-success" type="submit" onclick="output()">Go</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <?php if ($filter != 0) { ?>
                            <div class="col-lg-6 text-right">
                                <a class="btn btn-danger" href="drivers">Remove Filter</a>
                            </div>
                        <?php } ?>
                    </div>

                    <div class="grid-margin">
                        <div class="">
                            <div class="table-responsive">
                                <table id="example"
                                    class="table card-table table-vcenter text-nowrap  align-items-center">
                                    <thead class="">
                                        <tr>
                                            <th style="width: 80px">S.No.</th>
                                            <th>Driver-Name</th>
                                            <th>Vendor-Name</th>
                                            <th>Driving License No.</th>
                                            <th>Contact</th>
                                            <th>Alt. Contact</th>
                                            <th>Driver Image</th>
                                            <th>Adhaar Front Image</th>
                                            <th>Adhaar Back Image</th>
                                            <th>DL Image</th>
                                            <th>DL Back Image</th>
                                            <th style="width: 180px"> &nbsp;&nbsp;&nbsp;&nbsp;Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="drivers_details"></tbody>
                                    <script>
                                        $(document).ready(function () {
                                            $('#example').DataTable({
                                                dom: 'lBfrtip',
                                                "lengthMenu": [[10, 25, 50, 100, 250, 500, 1000, -1], [10, 25, 50, 100, 250, 500, 1000, 'All']],
                                                "iDisplayLength": 10,
                                                "processing": true,
                                                "serverSide": true,
                                                "stateSave": true,
                                                "ajax": "drivers_ajax.php?driver_list=1&filter=<?= $filter ?>",
                                                "columnDefs": [
                                                    { "orderable": false, "targets": "_all" }
                                                ],
                                                layout: {
                                                    topStart: {
                                                        buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
                                                    }
                                                },
                                            });
                                        });
                                    </script>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Add Modal To Display-->
<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="card-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 style="text-align: left">Add New Driver Details</h4>
                <div class="col-md-12 float-right" id="alert"></div>
            </div>
            <form method="post" id="add_drivers">
                <div class="modal-body">
                    <div class="row">

                        <div class="col-md-12">
                            <label> Vendor :</label>
                            <select class="form-control select2" name="vendor" required>

                                <?php
                                if (isset($vendor)) {
                                    $x = 1;
                                    foreach ($vendor as $data) {
                                        ?>
                                        <option value="<?= $data['vendor_id']; ?>"><?= $data['full_name'] . " - " . $data['contact']; ?>
                                        </option>
                                        <?php
                                    }
                                }
                                ?>

                            </select>
                        </div>
                        <div class="col-md-6">
                            <label> Name :</label><input type="text" class="form-control" name="name" id="name"
                                required>
                        </div>
                        <div class="col-md-6">
                            <label> Contact :</label><input type="text" class="form-control" name="contact" id="contact"
                                required>
                        </div>
                        <div class="col-md-6">
                            <label> Alternate Contact :</label><input type="text" class="form-control" name="altContact"
                                id="altContact" required>
                        </div>
                        <div class="col-md-6">
                            <label> Driving Lic No. :</label><input type="text" class="form-control" name="dlno"
                                id="dlno">
                        </div>

                        <div class="col-md-6">
                            <label>Driver Image. :</label>
                            <input type="file" class="form-control" name="driver_image">
                        </div>
                        <div class="col-md-6">
                            <label>Aadhar Front Image. :</label>
                            <input type="file" class="form-control" name="aadhar_front_image">
                        </div>
                        <div class="col-md-6">
                            <label>Aadhar Back Image. :</label>
                            <input type="file" class="form-control" name="aadhar_back_image">
                        </div>
                        <div class="col-md-6">
                            <label>DL Front Image. :</label>
                            <input type="file" class="form-control" name="dl_front_image">
                        </div>
                        <div class="col-md-6">
                            <label>DL Back Image. :</label>
                            <input type="file" class="form-control" name="dl_back_image">
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                    <button type="submit" name="add" id="add" class="btn btn-primary">Add</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<!--Edit Modal To Display-->
<div class="modal fade" id="modal-edit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="card-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 style="text-align: left">Edit driver Details</h4>
                <div id="alerte"></div>
            </div>
            <form method="post" id="update_drivers_data">
                <div class="modal-body">
                    <div class="row">

                        <div class="col-md-12">
                            <label> Vendor :</label>
                            <select class="form-control select2" name="evendor" id="evendor" required>
                                <?php
                                if (isset($vendor1)) {
                                    $x = 1;
                                    foreach ($vendor1 as $data) {
                                        ?>
                                        <option value="<?= $data['vendor_id']; ?>"><?= $data['full_name'] . " - " . $data['contact']; ?>
                                        </option>
                                        <?php
                                    }
                                }
                                ?>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label> Name :</label><input type="text" class="form-control" id="ename" name="ename"
                                required>
                        </div>
                        <div class="col-md-6">
                            <label> Contact :</label><input type="text" class="form-control" name="econtact"
                                id="econtact" required>
                        </div>
                        <div class="col-md-6">
                            <label> Alternate Contact :</label><input type="text" class="form-control"
                                name="ealtContact" id="ealtContact" required>
                        </div>
                        <div class="col-md-6">
                            <label> Driving Lic No. :</label><input type="text" class="form-control" name="edlno"
                                id="edlno" required>
                        </div>
                        <div class="col-md-6">
                            <label>Driver Image. :</label>
                            <input type="file" class="form-control" name="driver_image">
                        </div>
                        <div class="col-md-6">
                            <label>Aadhar Front Image. :</label>
                            <input type="file" class="form-control" name="aadhar_front_image">
                        </div>
                        <div class="col-md-6">
                            <label>Aadhar Back Image. :</label>
                            <input type="file" class="form-control" name="aadhar_back_image">
                        </div>
                        <div class="col-md-6">
                            <label>DL Front Image. :</label>
                            <input type="file" class="form-control" name="dl_front_image">
                        </div>
                        <div class="col-md-6">
                            <label>DL Back Image. :</label>
                            <input type="file" class="form-control" name="dl_back_image">
                        </div>

                        <input type=hidden name=edit id="edit">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                    <button type="submit" name="edit_drivers_details" id="edit_drivers_details"
                        class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<?php
require_once 'footer.php';
require_once 'jslinks.php';
?>

<script>
    $(document).ready(function () {
        // $('#example').DataTable();

        //ADDING STAFF BY MODAL
        $('#add_drivers').submit(function (e) {
            e.preventDefault();
            $("#global-loader").show();
            $.ajax({
                url: "drivers_ajax.php",
                type: "POST",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function (response) {
                    if (response == "success") {
                        $("#global-loader").fadeOut();
                        $('#alert').html('<span class="p-1 m-1 alert alert-success">Successfully Added.</span>').show()
                        setTimeout(function () {
                            $('#alert').hide();
                            location.reload();
                        }, 2000)
                    }
                    else {
                        $('#alert').html('<span class="p-1 m-1 alert alert-danger">Something Wrong, can\'t add.</span>').show()
                        setTimeout(function () {
                            $('#alert').hide()
                        }, 2000)
                    }
                    $('#add_drivers').trigger("reset");
                }
            })
        })

        //UPDATING STAFF BY MODAL

        $('#update_drivers_data').submit(function (e) {
            e.preventDefault();
            $("#global-loader").show();
            $.ajax({

                url: "drivers_ajax.php",
                type: "POST",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function (response) {
                    if (response == "success") {
                        $("#global-loader").fadeOut();
                        $('#alerte').html('<span class="p-1 m-1 alert alert-success">Successfully Added.</span>').show()
                        setTimeout(function () {
                            $('#alerte').hide();
                            location.reload();
                        }, 1000)
                    }
                    else {
                        $('#alerte').html('<span class="p-1 m-1 alert alert-danger">Something Wrong, can\'t add.</span>').show()
                        setTimeout(function () {
                            $('#alerte').hide()
                        }, 1000)
                    }
                }
            })
        })
    });

    //SHOWING DATA IN EDIT MODAL
    function show_data(id, str) {

        var name = $('#driver_name' + str).html();
        var vendor_id = document.getElementById("vendor_id" + str).value;
        var d_l_no = $('#d_l_no' + str).html();
        var contact = $('#contact' + str).html();
        var alt_con = $('#alternate_contact' + str).html();
        $('#ename').val(name);
        $('#econtact').val(contact);
        $('#edlno').val(d_l_no);
        $('#ealtContact').val(alt_con);

        $("#evendor").select2("trigger", "select", {
            data: { id: vendor_id }
        });


        $('#edit').val(id);
    }


    // function output()
    // {
    //     var filter = $('#datefilter').val();
    //     var value = '';
    //     var i = 1;
    //     $("#global-loader").show();
    //     $.ajax({
    //         url: "drivers_ajax.php",
    //         type: "POST",
    //         data: {
    //           driver_details: 1,filter: filter,
    //       },
    //       success: function (data) {
    //         //  alert(data);
    //         $("#global-loader").fadeOut();
    //         drivers_data=$.parseJSON(data);
    //         $.each(drivers_data, function (key, data) {  
    //             value+=`<tr>
    //             <td>${i}</td>
    //             <td id="driver_name${i}">${data.driver_name}</td>
    //             <td id="full_name${i}">${data.full_name} <input id="vendor_id${i}" type="hidden" value="${data.vendor_id }"></td>
    //             <td id="d_l_no${i}">${data.d_l_no}</td>
    //             <td id="contact${i}">${data.contact}</td>

    //             <td id="alternate_contact${i}">${data.alternate_contact}</td>
    //             <td>
    //             <a href="../cabzvendor_api/${data.picture}" data-fancybox="gallery">
    //             <img style="width:100px;" src="../cabzvendor_api/${data.picture}">
    //             </td>
    //             <td>
    //             <a href="../cabzvendor_api/${data.adhaar}" data-fancybox="gallery">
    //             <img style="width:100px;" src="../cabzvendor_api/${data.adhaar}">
    //             </td>
    //             <td>
    //             <a href="../cabzvendor_api/${data.adhaar_back}" data-fancybox="gallery">
    //             <img style="width:100px;" src="../cabzvendor_api/${data.adhaar_back}">
    //             </td>
    //             <td>
    //             <a href="../cabzvendor_api/${data.dl_img}" data-fancybox="gallery">
    //             <img style="width:100px;" src="../cabzvendor_api/${data.dl_img}">
    //             </td>
    //             <td>
    //             <a href="../cabzvendor_api/${data.dl_back_img}" data-fancybox="gallery">
    //             <img style="width:100px;" src="../cabzvendor_api/${data.dl_back_img}">
    //             </td>
    //             <td>
    //             <button type="button" class="btn btn-success" id="edit_modal${i}" onclick=show_data(${data.id},${i}) value="${i}" data_id="${data.id}" data-toggle="modal" data-target="#modal-edit">
    //             <i class="fa fa-edit btn-success"></i>
    //             </button>
    //             <button type="button" name="del" class="btn btn-danger" value="${data.id}" onclick=del(${data.id})>
    //             <i class="fa fa-trash"></i></button>
    //             </td>
    //             </tr>`;  
    //             i++;
    //         })
    //         $('#drivers_details').html(value);
    //         $('#example').DataTable({
    //             layout: {
    //                 topStart: {
    //                     buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
    //                 }
    //             }
    //         });

    //     }
    // })
    // }

    // Deletion of services

    function del(e) {
        var verify = confirm("Do you really want to delete!!!");
        if (verify) {
            $("#global-loader").show();
            $.ajax({
                url: "drivers_ajax.php",
                type: "POST",
                data: {
                    delete_id: e,
                },
                success: function (response) {
                    $("#global-loader").fadeOut();
                    if (response == "success") {
                        $('#alert2').html('<span class="p-1 m-1 col-md-10 alert alert-success">Successfully Deleted.</span>').show()
                        setTimeout(function () {
                            $('#alert2').hide();
                            location.reload();
                        }, 2000)
                    }
                    else {
                        $('#alert2').html('<span class="p-1 m-1 col-md-10 alert alert-danger">Something Wrong, can\'t delete.</span>').show()
                        setTimeout(function () {
                            $('#alert2').hide()
                        }, 2000)
                    }
                },
            })
        }
    }

    $(function () {
        $('#add_drivers,#update_drivers_data').validate({
            rules: {
                name: {
                    required: true,
                    minlength: 3
                },
                contact: {
                    required: true,
                    digits: true,
                    maxlength: 10
                },
                dlno: {
                    required: true,
                }
            }
        });
    }); 
</script>