<!-- Font Awesome -->
<!-- jQuery (only once) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- jQuery UI (optional) -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
jQuery(document).ready(function ($) {
    $("#example1").DataTable({
        dom: '<"toolbar1">frltip', // Custom toolbar
        autoWidth: false, // Prevent DataTables from automatically calculating column widths
        columnDefs: [
            { orderable: false, targets: [0] } // Disable sorting for column 0
        ],
        responsive: true, // Enable responsive table
        initComplete: function () {
            // Add placeholder to search box and custom class for styling
            $(".dataTables_filter input")
                .addClass("custom-search-box")
                .attr("placeholder", "Search...");
        }
    });
});
</script>
<style>
.box {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    background: #fff;
}
.box-header {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
}
label {
    text-transform: uppercase;
  
}
.box-primary { background-color: #f0f8ff; }
.box-success { background-color: #f1fff0; }
.btn-xs { padding: 3px 8px; font-size: 12px; }
table th, table td { vertical-align: middle !important; }
</style>

<form id="AddBrand" method="POST" action="<?= base_url('index.php/AddBrand/save'); ?>">

<h3 class="content-header">ADD BRAND</h3>

<!-- SUCCESS MESSAGE ONLY -->
<!-- <?php if ($this->session->flashdata('success')): ?>
    <div class="alert alert-success alert-dismissible">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <?= $this->session->flashdata('success'); ?>
    </div>
<?php endif; ?> -->
<!-- <?php if ($this->session->flashdata('alert')): ?>
<script>
    alert("<?= $this->session->flashdata('alert'); ?>");
</script>
<?php endif; ?> -->

<?php $cookie = $_COOKIE['user_data'] ?? '';
            $json = urldecode($cookie);
            $data = json_decode($json, true);
            $privelegeId = $data['privelegeId'];  ?>

<div class="row">

    <!-- ADD BRAND FORM -->
      <?php if($privelegeId==1||$privelegeId==4){ ?>
    <div class="col-md-3">
        <div class="box box-primary">
            <div class="box-header">ADD BRAND</div>
            <!-- <form id="AddBrandForm" method="POST" action="<?= base_url('index.php/AddBrand/save'); ?>"> -->

                <div class="form-group">
                    <label>Brand Code</label>
                    <input type="text" name="brandCode" class="form-control input-sm" autocomplete="off">
                    <span class="text-danger"><?= form_error('brandCode'); ?></span>
                </div>

                <div class="form-group">
                    <label>Brand Name <span class="text-danger">*</span></label>
                    <!-- <input type="text" name="brandName" class="form-control input-sm" required autocomplete="off"> -->
                    <input type="text" name="brandName" id="addBrandName"
                    class="form-control input-sm" autocomplete="off">

                    <span class="text-danger" id="addBrandError"></span>

                    <span class="text-danger"><?= form_error('brandName'); ?></span>
                </div>

                <div class="text-center">
           
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="fa fa-plus"></i> Add
                    </button>

                    
                </div>

            </form>
        </div>
    </div>

    <?php } ?>

    <!-- BRAND LIST -->
    <div class="col-md-9">
        <div class="panel panel-info">
            <div class="panel-heading"><i class="fa fa-list-ul"></i> <strong>Brand List</strong></div>
            <div class="table-responsive">
                <table id="example1" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>SL NO</th>
                            <th>BRAND CODE</th>
                            <th>BRAND NAME</th>
                           <?php if($privelegeId==1||$privelegeId==4){ ?>
                            <th>UPDATE</th>
                            <th>DELETE</th>

                             <?php } ?>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if(!empty($brands)): $i=1; foreach($brands as $row): ?>
                        <tr>
                            <td><?= $i++ ?></td>
                            <td><?= $row->brandCode ?></td>
                            <td><?= $row->brandName ?></td>

                         <?php if($privelegeId==1||$privelegeId==4){ ?>
                            <td class="text-center">
                                <button class="btn btn-success btn-xs edit-btn"
                                        data-id="<?= $row->brandId ?>"
                                        data-code="<?= $row->brandCode ?>"
                                        data-name="<?= $row->brandName ?>"
                                        data-toggle="modal" data-target="#editBrandModal">
                                    <i class="fa fa-edit"></i>
                                </button>
                            </td>
                            <td class="text-center">
                                <button class="btn btn-danger btn-xs delete-btn"
                                        data-id="<?= $row->brandId ?>">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </td>

                        <?php } ?>
                        </tr>
                        <?php endforeach; 
                    endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<!-- EDIT BRAND MODAL -->
<div class="modal fade" id="editBrandModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form id="editBrandForm" method="POST" action="<?= base_url('index.php/AddBrand/update'); ?>">
        <div class="modal-header">
          <h4 class="modal-title"><i class="fa fa-edit"></i> Edit Brand</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
            <input type="hidden" name="brandId" id="editBrandId">
            <div class="form-group">
                <label>Brand Code</label>
                <input type="text" name="brandCode" id="editBrandCode" class="form-control" required>
            </div>
            <div class="form-group">
                <label>Brand Name</label>
                <!-- <input type="text" name="brandName" id="editBrandName" class="form-control" required> -->
                 <input type="text" name="brandName" id="editBrandName"
                class="form-control" autocomplete="off">

                <span class="text-danger" id="editBrandError"></span>

            </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Save</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
    $(".edit-btn").click(function(){
        $("#editBrandId").val($(this).data("id"));
        $("#editBrandCode").val($(this).data("code"));
        $("#editBrandName").val($(this).data("name"));
    });
});

$(document).ready(function () {

    $("#AddBrand").on("submit", function (e) {

        var brandName = $.trim($("input[name='brandName']").val());

        if (brandName === "") {
            // alert("Brand Name is required");
            $("input[name='brandName']").focus();
            e.preventDefault(); // stop form submit
            return false;
        }

    });

});

// Delete brand using AJAX
$(".delete-btn").click(function(){
    if(confirm("Are you sure you want to delete this brand?")) {
        var brandId = $(this).data("id");
        var row = $(this).closest("tr");

        $.ajax({
            url: "<?= base_url('index.php/AddBrand/delete'); ?>",
            type: "POST",
            data: { brandId: brandId },
            dataType: "json",
            success: function(response) {
                if(response.status == 'success') {
                    alert(response.message);
                    row.remove(); // Remove row from table
                    updateSlNo();
                } else {
                    alert(response.message);
                }
            },
            error: function() {
                alert("Error deleting brand. Please try again.");
            }
        });
    }
});

</script>
<!-- <script>
$(document).ready(function () {
    setTimeout(function () {
        $(".alert-success").fadeOut("slow");
    }, 3000); // 3000 ms = 3 seconds
});
</script> -->
<script>
function updateSlNo() {
    $(".table tbody tr").each(function(index){
        $(this).find("td:first").text(index + 1);
    });
}

// ngk
// $(document).ready(function(){
//     // Real-time validation for Brand Code in Add form
//     $("input[name='brandCode']").on('blur', function(){
//         var brandCode = $(this).val();
//         if(brandCode.trim() != ''){
//             $.ajax({
//                 url: "<?= base_url('index.php/AddBrand/checkBrandCodeAjax'); ?>",
//                 type: "POST",
//                 data: { brandCode: brandCode },
//                 dataType: "json",
//                 success: function(response){
//                     if(response.exists){
//                         $("#brandCodeError").text('Brand Code already exists!');
//                         $("button[type='submit']").prop('disabled', true);
//                     } else {
//                         $("#brandCodeError").text('');
//                         $("button[type='submit']").prop('disabled', false);
//                     }
//                 }
//             });
//         } else {
//             $("#brandCodeError").text('');
//             $("button[type='submit']").prop('disabled', false);
//         }
//     });
    
//     // Real-time validation for Brand Code in Edit form
//     $("#editBrandCode").on('blur', function(){
//         var brandCode = $(this).val();
//         var brandId = $("#editBrandId").val();
//         if(brandCode.trim() != ''){
//             $.ajax({
//                 url: "<?= base_url('index.php/AddBrand/checkBrandCodeEditAjax'); ?>",
//                 type: "POST",
//                 data: { brandCode: brandCode, brandId: brandId },
//                 dataType: "json",
//                 success: function(response){
//                     if(response.exists){
//                         $("#editBrandCodeError").text('Brand Code already exists!');
//                         $("#editBrandForm button[type='submit']").prop('disabled', true);
//                     } else {
//                         $("#editBrandCodeError").text('');
//                         $("#editBrandForm button[type='submit']").prop('disabled', false);
//                     }
//                 }
//             });
//         } else {
//             $("#editBrandCodeError").text('');
//             $("#editBrandForm button[type='submit']").prop('disabled', false);
//         }
//     });
// });
// </script>

<!-- Add error span in Add form -->
<!-- <div class="form-group">
    <label>Brand Code</label>
    <input type="text" name="brandCode" class="form-control input-sm" autocomplete="off">
    <span class="text-danger" id="brandCodeError"></span>
</div> -->

<!-- Add error span in Edit modal -->
<!-- <div class="form-group">
    <label>Brand Code</label>
    <input type="text" name="brandCode" id="editBrandCode" class="form-control" required>
    <span class="text-danger" id="editBrandCodeError"></span>
</div> -->

</script>
