<!-- modal for ADDING ATC -->
<div class="modal fade text-left" id="addatcrecord" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel17">Add New ATC</h4>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <i data-feather="x"></i>
        </button>
        </div>
        <div class="modal-body">
            <section id="multiple-column-form">
                <form class="atc_form">
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="atc_no_column">ATC Number</label>
                                <input type="text" id="atc_no_column" class="form-control" placeholder="ATC Number"
                                    required>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label for="volume-column"></label>
                                <input type="text" id="volume-column" class="form-control" placeholder="Volume"
                                    required>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label for="type-column"></label>
                                <input type="text" id="type-column" class="form-control" placeholder="Type of Product">
                            </div>
                        </div>
                    </div>
                </form>
            </section>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary me-1 mb-1" id="add_atc_recordBtn">Submit</button>
            <button type="button" class="btn btn-light-secondary" data-bs-dismiss="modal">Close</button>
        </div>
    </div>
    </div>
</div>
<!-- modal for ADDING Truck -->
<div class="modal fade text-left" id="addtruckrecord" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel17">Add New Truck</h4>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <i data-feather="x"></i>
        </button>
        </div>
        <div class="modal-body">
            <section id="multiple-column-form">
                <form class="truck_form">
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="truck_no_column">Truck license Number</label>
                                <input type="text" id="truck_license_column" class="form-control" placeholder="Truck license Number"
                                    name="fname-column">
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="make-column">Make</label>
                                <input type="text" id="make-column" class="form-control" placeholder="Make">
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="model-column">Model</label>
                                <input type="text" id="model-column" class="form-control" placeholder="Model">
                            </div>
                        </div>                        
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="year-column">Year</label>
                                <input type="text" id="year-column" class="form-control" placeholder="Year">
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="vin-column">VIN</label>
                                <input type="text" id="vin-column" class="form-control" placeholder="Vin">
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="registration-column">Registration Start</label>
                                <input type="date" id="registration-column" class="form-control" placeholder="Registration Start">
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="registration-end-column">Registration End</label>
                                <input type="date" id="registration-end-column" class="form-control" placeholder="Registration End">
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="driver-colum">Driver</label>
                                <select class="choices form-select" id="driver-colum">
                                    <option value="" disabled selected>Select Driver</option>
                                    <?php 
                                    $sql = Querydb("SELECT * FROM drivers WHERE business_id = '$business_id' AND is_active = 0 order by driver_id desc");
                                    foreach ($sql as $driver) { ?>
                                    <option value="<?php echo $driver['driver_id']; ?>"><?php echo $driver['first_name']." ".$driver['last_name']," ".$driver['middle_name']; ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary me-1 mb-1" id="addtruckrecordBtn">Submit</button>
            <button type="button" class="btn btn-light-secondary" data-bs-dismiss="modal">Close</button>
        </div>
    </div>
    </div>
</div>
<!-- modal for Customer record  -->
<div class="modal fade text-left" id="create_Customer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel17">New Customer</h4>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <i data-feather="x"></i>
        </button>
        </div>
        <div class="modal-body">
            <section id="multiple-column-form">
                <form class="customer_form">
                    <div class="row">
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label for="name_column">Full name</label>
                                <input type="text" id="name-column" class="form-control" placeholder="Full Name"
                                    name="fname-column">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label for="phone-column">Phone Number</label>
                                <input type="text" id="phone-column" class="form-control" placeholder="Phone Number">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="email-column">Email</label>
                                <input type="email" id="email-column" class="form-control" placeholder="example@gmail.com">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="address-columne">Address</label>
                                <textarea type="text" id="address-column" rows="3" class="form-control" placeholder="No 123 london street ......." ></textarea>
                            </div>
                        </div>
                    </div>
                    <div>Next of Kin Details</div>
                    <!-- <div class="row">
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label for="name-kin">Full name</label>
                                <input type="text" id="name-kin" class="form-control" placeholder="Full Name" required>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label for="phone-kin">Phone Number</label>
                                <input type="text" id="phone-kin" class="form-control" placeholder="Phone Number">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="email-kin">Email</label>
                                <input type="email" id="email-kin" class="form-control" placeholder="example@gmail.com">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="email-kin">Relationship </label>
                                <input type="email" id="email-kin" class="form-control" placeholder="example@gmail.com">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="address-kin">Address</label>
                                <textarea type="text" id="address-kin" rows="3" class="form-control" placeholder="No 123 london street ......." ></textarea>
                            </div>
                        </div>
                    </div> -->
                </form>
            </section>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary me-1 mb-1" id="create_CustomerBtn">Submit</button>
            <button type="button" class="btn btn-light-secondary" data-bs-dismiss="modal">Close</button>
        </div>
    </div>
    </div>
</div>
<!-- Modal for Create a new -->
<div class="modal fade" id="createUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addDefinitionModalLabel">Create New User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">Fill in the details below to create a new user.</div>
            <form id="createUserForm" method="POST" action="">
                <div class="modal-body">
                    <div class="mb-3">
                        <div class="mt-2 mb-2 d-flex flex-column">
                            <img id="preview" src="#" class="img-thumbnail align-self-center justify-content-center" alt="Profile Image Preview" style="display:none; max-width: 150px; height: 150px;">
                        </div>
                        <label for="userEmail" class="form-label">Profile Image</label>
                        <input type="file" class="form-control" id="userProfilePic" placeholder="Upload profile image">
                    </div>
                    <div class="row mb-3">
                        <div class="col-lg-6 col-md-12">
                            <label for="userFirstName" class="form-label">First Name</label>
                            <input type="text" class="form-control" id="userFirstName" placeholder="Enter first name" required>
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <label for="userLastName" class="form-label">Last Name</label>
                            <input type="text" class="form-control" id="userLastName" placeholder="Enter last name" required>
                        </div>
                    </div>                    
                    <div class="row mb-3">
                        <div class="col-lg-6 col-md-12">
                            <label for="userMiddleName" class="form-label">Middle Name</label>
                            <input type="text" class="form-control" id="userMiddleName" placeholder="Enter middle name">
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <label for="userPhone" class="form-label">Phone Number</label>
                            <input type="tel" class="form-control" id="userPhone" placeholder="Enter phone number" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label for="userRole" class="form-label">Select User Role</label>
                            <select class="form-select" id="userRole" required>
                                <option value="" disabled selected>Select role</option>
                                <?php 
                                $sql = Querydb('select * from roles');
                                foreach ($sql as $role) { ?>
                                <option value="<?php echo $role['role_id']; ?>"><?php echo $role['role_name']; ?></option>
                                <?php } ?>
                            </select>
                        </div>
                        
                    </div>
                    <div class="mb-3">
                        <label for="userEmail" class="form-label">Email address</label>
                        <input type="email" class="form-control" id="userEmail" placeholder="Enter email" required>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-primary" id="createUserBtn">Create User</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal for Adding Driver  -->
<div class="modal fade" id="adddrivermodal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create New Driver</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="createDriverForm" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">First Name</label>
                            <input type="text" class="form-control" name="firstname" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Last Name</label>
                            <input type="text" class="form-control" name="lastname" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Middle Name</label>
                            <input type="text" class="form-control" name="middlename" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Phone No</label>
                            <input type="text" class="form-control" name="phone_no" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-control" name="email" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Driver Licence</label>
                            <input type="text" class="form-control" name="DriverLicence" required>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Profile Picture</label>
                            <input type="file" class="form-control" name="profilePic" accept="image/*">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">License/Application Document</label>
                            <input type="file" class="form-control" name="driverDoc">
                        </div>

                        <div class="col-md-12 mt-3"><h6 class="fw-bold">Guarantor 1</h6></div>
                        <div class="col-md-6 mb-3">
                            <input type="text" class="form-control" name="g1_name" placeholder="Full Name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <input type="text" class="form-control" name="g1_phone" placeholder="Phone Number" required>
                        </div>

                        <div class="col-md-12 mt-1"><h6 class="fw-bold">Guarantor 2</h6></div>
                        <div class="col-md-6 mb-3">
                            <input type="text" class="form-control" name="g2_name" placeholder="Full Name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <input type="text" class="form-control" name="g2_phone" placeholder="Phone Number" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary w-100" type="submit" id="createDriverBtn">Invite Driver</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Modal for Adding Maintenance  -->
<div class="modal fade" id="maintencemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addDefinitionModalLabel">Maintence Record</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="createMaintenceForm" method="POST" action="">
                <div class="modal-body row">
                    <div class="col-lg-6 col-md-12 mb-3">
                        <label for="truck_license_" class="form-label">Truck Licence</label>
                        <select class="form-control" id="truck_license" required>
                            <option value="" disabled selected>Select Truck license</option>
                            <?php 
                            $sql = Querydb("select * from trucks WHERE business_id = '$business_id' order by driver_id desc");
                            foreach ($sql as $truck) { ?>
                            <option value="<?php echo $truck['truck_id']; ?>"><?php echo $truck['license_plate']; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="col-lg-6 col-md-12 mb-3">
                        <label for="Maintence_type" class="form-label">Maintence Type</label>
                        <select class="form-control" id="Maintence_type" required>
                            <option value="" disabled selected>Select Maintenance Type</option>
                            <option value="Tires">Tires</option>
                            <option value="Engine">Engine</option>
                            <option value="Fuel System">Fuel System</option>
                            <option value="Routine Service">Routine Service</option>
                        </select>
                    </div>
                    <div class="col-lg-6 col-md-12 mb-3">
                        <label for="cost" class="form-label">Cost</label>
                        <input type="text" class="form-control" id="cost" placeholder="100000">
                    </div>
                    <div class="col-lg-6 col-md-12 mb-3">
                        <label for="datecarryout" class="form-label">Date</label>
                        <input type="date" class="form-control" id="datecarryout" placeholder="MM/DD/YYYY" required>
                    </div>
                    <div class="col-lg-12 col-md-12 mb-3">
                        <label for="vendor_id" class="form-label">Vendor</label>
                        <select class="form-control" id="vendor_id" required>
                            <option value="" disabled selected>Select Vendor</option>
                            <?php 
                            $sql = Querydb("select * from users WHERE business_id = '$business_id' AND role_id = 3 order by user_id desc");
                            foreach ($sql as $vendor) { ?>
                            <option value="<?php echo $vendor['user_id']; ?>"><?php echo $vendor['first_name'].' '.$vendor['last_name'];; ?></option>
                            <?php } ?>
                            <option value="0">Other</option>
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label for="Description" class="form-label">Description</label>
                        <textarea type="text" class="form-control" id="Description" placeholder="Description" required></textarea>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-primary" id="create_MaintenceBtn">Submit</button>
            </div>
        </div>
    </div>
</div>
<!-- modal for ADDING Trips form -->
<div class="modal fade text-left" id="addtriprecord" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel17">New Logistics</h4>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <i data-feather="x"></i>
        </button>
        </div>
        <div class="modal-body">
            <section id="multiple-column-form">
                <form class="trip_form" id="createTripForm">
                    <div class="row">
                        <!-- <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="truck_no_column">Truck license Number</label>
                                <select class="choices form-select" id="truck_license-colum">
                                    <option value="" disabled selected>Select Truck license Number</option>
                                    <?php 
                                    $sql = Querydb("select * from trucks where current_status = 'In Service'");
                                    foreach ($sql as $truck) { ?>
                                    <option 
                                        value="<?php echo htmlspecialchars($truck['truck_id']); ?>" 
                                        data-driver-id="<?php echo htmlspecialchars($truck['driver_id']); ?>">
                                        <?php echo htmlspecialchars($truck['license_plate']); ?>
                                    </option>
                                <?php } ?>
                                
                                </select>
                                <input type="hidden" id="driver_id_colum" name="driver_id" value="">
                            </div>
                        </div> -->
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="atc-column">ATC Number</label>
                                <select class="choices form-select" id="atc-colum">
                                    <option value="" disabled selected>Select ATC Number</option>
                                    <?php 
                                    $sql = Querydb("select * from atc_records WHERE business_id = '$business_id' AND atc_status = 'Open'");
                                    foreach ($sql as $atc) { ?>
                                    <option value="<?php echo $atc['atc_id']; ?>"><?php echo $atc['atc_number']." (".$atc['type'].")"; ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label for="customer-colum">Customer</label>
                                <select class="choices form-select" id="customer-colum">
                                    <option value="" disabled selected>Select Customer</option>
                                    <?php 
                                    $sql = Querydb("select * from customers WHERE business_id = '$business_id'");
                                    foreach ($sql as $customer) { ?>
                                    <option value="<?php echo $customer['customer_id']; ?>"><?php echo $customer['name']." (".$customer['phone'].")"; ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label for="location-column">Unit</label>
                                <input type="text" id="unit-column" class="form-control" placeholder="Unit">
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label for="location-column">Sell price</label>
                                <input type="text" id="sell-column" class="form-control" placeholder="Sell price">
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label for="location-column">Cost price</label>
                                <input type="text" id="cost-column" class="form-control" placeholder="Cost price">
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-group">
                                <label for="location-column">Driver Allowance</label>
                                <input type="text" id="allowance-column" class="form-control" placeholder="Driver Allowance">
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-group">
                                <label for="location-column">Location</label>
                                <textarea type="text" id="location-column" rows="5" class="form-control" placeholder="Location"></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary me-1 mb-1" id="createTripFormBtn">Submit</button>
            <button type="button" class="btn btn-light-secondary" data-bs-dismiss="modal">Close</button>
        </div>
    </div>
    </div>
</div>
<!-- User Role Access Control -->
<div class="modal fade" id="userRoleAccessModal" tabindex="-1" role="dialog" aria-labelledby="userRoleAccessModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userRoleAccessModalLabel">User Role Access Control</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="userRoleAccessForm">
                    <div class="mb-3">
                        <label for="selectUser" class="form-label">Select User</label>
                        <select class="form-select" id="selectUser" required>
                            <option value="" disabled selected>Select a user</option>
                            <?php 
                            $users = Querydb("SELECT user_id, first_name, last_name FROM users WHERE business_id = '$business_id' AND role_id != 1 ORDER BY first_name, last_name");
                            while ($user = mysqli_fetch_assoc($users)) {
                                echo '<option value="'.htmlspecialchars($user['user_id']).'">'.htmlspecialchars($user['first_name'].' '.$user['last_name']).'</option>';
                            }
                            ?>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Page Access Permissions</label>
                        <div id="pagePermissionsContainer" style="max-height: 400px; overflow: auto; border: 1px solid #ddd; padding: 10px;">
                            <?php 
                            $sql = Querydb("SELECT * from pages order by page_name ");
                            foreach ($sql as $p) {
                             ?>
                            <div class="form-check">    
                                <input class="form-check-input" name="page[]" type="checkbox" value="<?php echo $p['page_url'] ?>" id="p_<?php echo $p['page_id'] ?>">
                                <label class="form-check-label" for="p_<?php echo $p['page_id'] ?>"><?php echo $p['page_name'] ?></label>
                            </div>
                        <?php } ?>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveUserRoleAccessBtn">Save Changes</button>
            </div>
        </div>
    </div>
</div>
<!-- End of User Role Access Control -->
