<?php
include 'includes/config.php';
session_start();

if (!$_SESSION['email']) {
    header('location:login.php');
}
?>
<!doctype html>
<html lang="en">


<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Color</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="css/responsive.css">
    <style>
    ion-icon {
        font-size: 20px;
        margin-bottom: -5px;
    }
    </style>
</head>

<body>
    <!-- loader Start -->
    <div id="loading">
        <div id="loading-center">
        </div>
    </div>
    <!-- loader END -->
    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Sidebar  -->
        <?php 
            include 'includes/sidebar.php';
        ?>
        <!-- TOP Nav Bar -->
        <?php include 'includes/header.php';?>
        <!-- TOP Nav Bar END -->
        <!-- Page Content  -->
        <div id="content-page" class="content-page">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="iq-card">
                            <div class="iq-card-header d-flex justify-content-between row">
                                <div class="iq-header-title col-lg-6">
                                    <h4 class="card-title"><a href="units.php">Color</a> > View Color
                                    </h4>
                                </div>
                                <div class="col-lg-6">
                                   
                                </div>
                                <!-- add variation -->
                             
                                <!-- add variation end -->
                            </div>
                            <!-- search bar -->
                            <!-- <form action="">
                                <div class="row mt-5" style="width:95%;margin:0 auto;">
                                    <div class="col-lg-5">
                                        <input type="search" name="" placeholder="Search" class="form-control" id="">
                                    </div>
                                    <div class="col-lg-5">
                                        <input type="date" name="" class="form-control" id="">
                                    </div>
                                    <div class="col-lg-2">
                                        <button style="width:100%;" class="btn btn-primary p-2">Search</button>
                                    </div>
                                </div>
                            </form> -->
                            <!-- searchbar end -->
                            <!-- buttons for export -->
                            <div class="row mt-5">
                                <div class="col-lg-2"></div>
                                
                            </div>
                            <!-- buttons for export end -->
                            <div class="iq-card-body" style="overflow:auto;">

<button class="btn btn-primary mb-3" id="addBtn">Add Color</button>
    <table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>Title</th>
                <th>Product Color</th>
                <th width="150">Actions</th>
            </tr>
        </thead>
        <tbody id="colorTable"></tbody>
    </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
    <!-- Modal -->
<div class="modal fade" id="colorModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form id="colorForm">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Add Color</h5>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body">
              <input type="hidden" name="id" id="colorId">
              <div class="form-group">
                  <label>Title</label>
                  <input type="text" name="name" id="name" class="form-control" required>
              </div>
              <div class="form-group">
                  <label>Product Color</label>
                  <input type="text" name="color" id="color" class="form-control" required>
              </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-success">Save</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
    </form>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){

    function loadColors(){
        $.post('colors_crud.php', {action:'fetch'}, function(data){
            let rows = '';
            let colors = JSON.parse(data);
            colors.forEach(function(item){
                rows += `<tr>
                    <td>${item.name}</td>
                    <td>${item.product_color}</td>
                    <td>
                        <button class="btn btn-sm btn-warning editBtn" data-id="${item.id}">Edit</button>
                        <button class="btn btn-sm btn-danger deleteBtn" data-id="${item.id}">Delete</button>
                    </td>
                </tr>`;
            });
            $('#colorTable').html(rows);
        });
    }

    loadColors();

    $('#addBtn').click(function(){
        $('#colorForm')[0].reset();
        $('#colorId').val('');
        $('.modal-title').text('Add Color');
        $('#colorModal').modal('show');
    });

    $(document).on('click', '.editBtn', function(){
        let id = $(this).data('id');
        $.post('colors_crud.php', {action:'get', id:id}, function(data){
            let color = JSON.parse(data);
            $('#colorId').val(color.id);
            $('#name').val(color.name);
            $('#color').val(color.product_color);
            $('.modal-title').text('Edit Color');
            $('#colorModal').modal('show');
        });
    });

    $('#colorForm').submit(function(e){
        e.preventDefault();
        let formData = $(this).serialize();
        let actionType = $('#colorId').val() ? 'update' : 'add';
        formData += '&action=' + actionType;
        $.post('colors_crud.php', formData, function(res){
            if(res.trim() == 'success'){
                $('#colorModal').modal('hide');
                loadColors();
            }
        });
    });

    $(document).on('click', '.deleteBtn', function(){
        if(confirm('Are you sure?')){
            let id = $(this).data('id');
            $.post('colors_crud.php', {action:'delete', id:id}, function(res){
                if(res.trim() == 'success'){
                    loadColors();
                }
            });
        }
    });

});
</script>


    <!-- Wrapper END -->
    <!-- Footer -->
<?php include 'includes/footer.php';?>
    <nav class="iq-float-menu">
        <input type="checkbox" href="#" class="iq-float-menu-open" name="menu-open" id="menu-open" />
        <label class="iq-float-menu-open-button" for="menu-open">
            <span class="lines line-1"></span>
            <span class="lines line-2"></span>
            <span class="lines line-3"></span>
        </label>
        <button class="iq-float-menu-item bg-info" data-toggle="tooltip" data-placement="top" title="Direction Mode"
            data-mode="rtl"><i class="ri-text-direction-r"></i></button>
        <button class="iq-float-menu-item bg-danger" data-toggle="tooltip" data-placement="top" title="Color Mode"
            id="dark-mode" data-active="true"><i class="ri-sun-line"></i></button>
        <button class="iq-float-menu-item bg-warning" data-toggle="tooltip" data-placement="top" title="Comming Soon"><i
                class="ri-palette-line"></i></button>
    </nav>
    <!-- Footer END -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery.min.js"></script>
    <!-- Rtl and Darkmode -->
    <script src="js/rtl.js"></script>
    <script src="js/customizer.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- Appear JavaScript -->
    <script src="js/jquery.appear.js"></script>
    <!-- Countdown JavaScript -->
    <script src="js/countdown.min.js"></script>
    <!-- Counterup JavaScript -->
    <script src="js/waypoints.min.js"></script>
    <script src="js/jquery.counterup.min.js"></script>
    <!-- Wow JavaScript -->
    <script src="js/wow.min.js"></script>
    <!-- Apexcharts JavaScript -->
    <script src="js/apexcharts.js"></script>
    <!-- Slick JavaScript -->
    <script src="js/slick.min.js"></script>
    <!-- Select2 JavaScript -->
    <script src="js/select2.min.js"></script>
    <!-- Owl Carousel JavaScript -->
    <script src="js/owl.carousel.min.js"></script>
    <!-- Magnific Popup JavaScript -->
    <script src="js/jquery.magnific-popup.min.js"></script>
    <!-- Smooth Scrollbar JavaScript -->
    <script src="js/smooth-scrollbar.js"></script>
    <!-- lottie JavaScript -->
    <script src="js/lottie.js"></script>
    <!-- Chart Custom JavaScript -->
    <script src="js/chart-custom.js"></script>
    <!-- Custom JavaScript -->
    <script src="js/custom.js"></script>
</body>

</html>