@extends('Admin/layout')
@section('title','Upliner Change — Associate Master')
@section('content')

<div class="container-fluid">
    <div class="row">
    <div class="col-xl-12" >
         @if(has_permission('Associate','Upliner Change'))
            <div class="card" id="associateview">
               <div class="card-header align-items-center d-flex">
                  <h4 class="card-title mb-0 flex-grow-1">Change Associate Upliner </h4>
               </div>
               <!-- end card header -->
               <div class="card-body">
                  <div class="live-preview">
                 
                     <div class="row">
                     <div class="col-md-4">
                           <div class="mb-3">
                           <label for="citynameInput" class="form-label">Select associate to change it's upliner/sponsor<span class="text-danger">*</span></label>
                           <select class="form-select single-select" id="associate_name" name="associate_name" onchange="getAssociateLevelData(this);" required>
                              <option value="">Choose Associate Name</option>
                              @if(!empty($tblassociates))
                                 @foreach($tblassociates as $key => $value)
                                       <option value="{{$value->id}}" >{{$value->name}},{{$value->gk_code}},  {{$value->phone_1}}, {{$value->rera_no}}</option>
                                 @endforeach
                              @endif
                           </select>
                           @if ($errors->has('associate_name'))<div class="invalid-feedback">{{ $errors->first('associate_name') }}</div>@endif
                           </div>
                     </div>
                     <div class="col-md-12">
                        <table id="associate_table" class="table table-bordered">
                            <thead class="table-dark">
                                <tr id="associate_header"></tr>
                            </thead>
                            <tbody>
                                <tr id="associate_data"></tr>
                            </tbody>
                        </table>
                     </div>
                      
                     </div>
                 
                  
                  </div>
               
               </div>
            </div>
             <div class="card uplinerview" id="uplinerview" style="display:none;">
               <div class="card-header align-items-center d-flex">
                  <h4 class="card-title mb-0 flex-grow-1"> New Upliner/Sponsor name</h4>
               </div>
               <!-- end card header -->
               <div class="card-body">
                  <div class="live-preview">
                 
                     <div class="row">

                    
                      <div class="col-md-4">
                           <div class="mb-3">
                           <label for="citynameInput" class="form-label">Upliner/Sponsor Name <span class="text-danger">*</span></label>
                           <select class="form-select single-select" id="upliner_name" name="upliner_name"onchange="getUplinerAssociateLevelData(this);"  required>
                              <option value="">Choose Upliner/Sponsor Name</option>
                              @if(!empty($tblassociates))
                                 @foreach($tblassociates as $key => $value)
                                       <option value="{{$value->id}}" >{{$value->name}},{{$value->gk_code}},  {{$value->phone_1}}, {{$value->rera_no}}</option>
                                 @endforeach
                              @endif
                           </select>
                           @if ($errors->has('upliner_name'))<div class="invalid-feedback">{{ $errors->first('upliner_name') }}</div>@endif
                           </div>
                     </div>
                      <div class="col-md-12">
                        <table id="upliner_associate_table" class="table table-bordered">
                            <thead class="table-dark">
                                <tr id="upliner_associate_header"></tr>
                            </thead>
                            <tbody>
                                <tr id="upliner_associate_data"></tr>
                            </tbody>
                        </table>
                     </div>
                  
                  
                  
                     <div class="col-lg-12">
                           <div class="text-center">
                           <!-- <button type="button" onclick="saveAssociateUpliner()" class="btn btn-success"  data-bs-toggle="modal" data-bs-target="#changeUplinerModal">Change Upliner</button> -->
                            <button type="button" class="btn btn-success" onclick="openAssociateUpliner()">
                                Change Upliner
                            </button>
                           </div>
                     </div>
                     <!--end col-->
                     </div>
                  
                  
                  </div>
               
               </div>
            </div>
         @endif
       
        </div><!-- end col -->
      
    </div>
    <div class="row uplinerview" style="display:none;">
        <div class="card">
            <div class="card-body">
                 <h5>Associate Position History</h5>
                     <div class="live-preview">
                        <div class="table-responsive table-card mb-1">
                            <table id="level_log_table" class="display" style="width:100%!important">
                            <thead >
                                <tr>
                                    <th>Position Type</th>
                                    <th>Effective From</th>
                                    <th>Self Stock</th>
                                    <!-- <th>Self No Resale</th> -->
                                    <th>Sponsor Stock</th>
                                    <!-- <th>Sponsor No Resale</th> -->
                                    <th>Reason</th>
                                   
                                     <th>Upliner Name</th>
                                    <th>Upliner GK Code</th>
                                    <th style="width:450px;">Upline List</th>
                                    <th>Created At</th>
                                    <th>Created By</th>
                                    <th>Action</th> <!-- NEW -->
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    </div>
            </div>
        </div>
        
    </div>
</div>
<div class="modal fade bs-example-modal-center" id="editModal" tabindex="-1">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">

         <div class="modal-header">
            <h5 class="modal-title">Update Position Log</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
         </div>

         <div class="modal-body">

            <input type="hidden" id="edit_id">

            <div class="mb-2">
                <label>Position Type</label>
                <select id="edit_position_type" class="form-control">
                    <option value="">Select Type</option>
                    <option value="JOIN">JOIN</option>
                    <option value="UPLINE_CHANGE">UPLINE_CHANGE</option>
                </select>
            </div>

             <div class="mb-2">
                <label>Position Type</label>
                <select id="edit_upliner_id" class="form-control">
                     <option value="">Choose Associate Name</option>
                    @if(!empty($tblassociates))
                        @foreach($tblassociates as $key => $value)
                            <option value="{{$value->id}}" >{{$value->name}},{{$value->gk_code}},  {{$value->phone_1}}, {{$value->rera_no}}</option>
                        @endforeach
                    @endif
                </select>
            </div>

            <div class="mb-2">
               <label>Position Date</label>
               <input type="date" id="edit_effective_from" class="form-control">
            </div>

            <div class="mb-2">
               <label>Self Stock</label>
               <input type="text" id="edit_self_stock" class="form-control">
            </div>

            <div class="mb-2">
               <label>Self No Resale</label>
               <input type="text" id="edit_self_no_resale" class="form-control">
            </div>

            <div class="mb-2">
               <label>Sponsor Stock</label>
               <input type="text" id="edit_sponsor_stock" class="form-control">
            </div>

            <div class="mb-2">
               <label>Sponsor No Resale</label>
               <input type="text" id="edit_sponsor_no_resale" class="form-control">
            </div>

            <div class="mb-2">
               <label>Reason</label>
               <input type="text" id="edit_reason" class="form-control">
            </div>

         </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="updateBtn">Update</button>
         </div>

      </div>
   </div>
</div>
<div class="modal fade bs-example-modal-center-delete" id="bs-example-modal-center-delete" tabindex="-1" aria-labelledby="mySmallModalLabel" style="display: none;" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-body text-center p-3">
            <div class="mt-3">
               <h4 class="mb-3">Are you sure want to delete? This action can't be undo.</h4>
               <div class="hstack gap-2 justify-content-center">
                  <button type="button" class="btn btn-light" data-bs-dismiss="modal" style="width:100px;">NO</button>
                  <input type="hidden" id="delete_id"/>
                  <input type="hidden" id="delete_url"/>
                <a href="javascript:void(0);" onclick="destroyAssociatePositionLog()" class="btn btn-danger" style="width:100px;">
                    Delete
                </a>
               </div>
            </div>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<div class="modal fade" id="changeUplinerModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Change Upliner</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <div class="mb-3">
                    <label>New Upliner Change Date <span class="text-danger">*</span></label>
                    <input type="date" id="effective_date" class="form-control">
                </div>

                <!-- <div class="mb-3">
                    <label>Opening Stock</label>
                    <input type="number" id="opening_stock" class="form-control">
                </div> -->

                <div class="mb-3">
                    
                    <p class="text-danger mb-1">
                        Note: The Sponsor Opening Stock is generally 0 during an upliner change.
                    </p>
                    <label>Sponsor Opening Stock</label>
                    <input type="number" id="sponsor_stock" class="form-control">
                </div>

                <div class="mb-3">
                    <label>Remarks</label>
                    <textarea id="remarks" class="form-control"></textarea>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Close
                </button>

                <button type="button" class="btn btn-success" onclick="saveAssociateUpliner()">
                    Save
                </button>
            </div>

        </div>
    </div>
</div>
<style>
  /* prevent wrapping everywhere */
#level_log_table th,
#level_log_table td {
    white-space: nowrap !important;
    width: auto !important;
}

/* horizontal scroll support */
.dataTables_wrapper {
    overflow-x: auto;
}

/* Upline column special handling */
.upline-list-col {
    max-width: 450px;
    min-width: 200px;   /* optional */
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* table should expand based on content */
#level_log_table {
    width: max-content !important;
}
</style>

<!-- <script src="{{ URL::asset('assets/js/jquery.min.js') }}"></script> -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script>
    var associateTable;
var levelLogTable;
var uplinerassociateTable;

$(document).ready(function () {

    // associateTable = $('#associate_table').DataTable({
    //     paging: false,
    //     searching: false,
    //     info: false,
    //     ordering: false
    // });
    // uplinerassociateTable = $('#upliner_associate_table').DataTable({
    //     paging: false,
    //     searching: false,
    //     info: false,
    //     ordering: false
    // });

    levelLogTable = $('#level_log_table').DataTable({
            scrollX: true,
            autoWidth: false,   // important (we'll control width via CSS)
            paging: true,
            searching: true,
            ordering: true,
            pageLength: 10,
            columnDefs: [
                {
                    targets: '_all',
                    className: 'dt-nowrap'
                },
                {
                    targets: 7, // Upline List column
                    className: 'upline-list-col'
                }
            ]
        });


});
 function getAssociateLevelData(arg){

    var value = arg.value;

    if(!value) return;

    $.ajax({
        type:'POST',
        url:"{{ route('visitportal.get-associate-position-history') }}",
        dataType: "json",
        data:{
            "_token": "{{ csrf_token() }}",
            associate_id : value
        },
        headers: {
            "X-Auth-Token": adminauthdata.token,
            "uuid": adminauthdata.uuid
        },

        success:function(resultdata){

            if(resultdata.status != 200) return;

            /* -------------------------
               1. ASSOCIATE TABLE
            --------------------------*/
            $(".uplinerview").show();
           var associateData = resultdata.data;

            $('#associate_header').html('');
            $('#associate_data').html('');

            $.each(associateData, function(key, value){

                $('#associate_header').append(
                    '<th>' + key.replace(/_/g,' ').toUpperCase() + '</th>'
                );

                $('#associate_data').append(
                    '<td>' + (value ?? '') + '</td>'
                );

            });



            /* -------------------------
               2. LEVEL LOG TABLE
            --------------------------*/
            levelLogTable.clear();

            $.each(resultdata.associate_position_log, function(index, item){

                levelLogTable.row.add([
                    item.position_type || '',
                    item.position_date || '',
                    item.opening_stock_for_self || '',
                    // item.opening_stock_for_self_no_resale || '',
                    item.opening_stock_for_sponsor || '',
                    // item.opening_stock_for_sponsor_no_resale || '',
                    item.reason || '',
                    item.upliner_name || '',
                    item.upliner_gk_code || '',
                    item.upline_names || '',
                    item.created_at || '',
                    item.created_by_user || '',
                      `
                   
                    <button class="btn-delete btn btn-danger" data-id="${item.id}"  style="width:100px;">Delete</button>
                    `
                ]);

            });

            levelLogTable.draw();
        }
    });
}
//  <button class="btn-edit btn btn-primary" data-id="${item.id}" data-uplinerId="${item.sponsor_id}" style="width:100px;">Edit</button>
 function getUplinerAssociateLevelData(arg){

    var value = arg.value;

    if(!value) return;

    $.ajax({
        type:'POST',
        url:"{{ route('visitportal.get-associate-position-history') }}",
        dataType: "json",
        data:{
            "_token": "{{ csrf_token() }}",
            associate_id : value
        },
        headers: {
            "X-Auth-Token": adminauthdata.token,
            "uuid": adminauthdata.uuid
        },

        success:function(resultdata){

            if(resultdata.status != 200) return;

            /* -------------------------
               1. ASSOCIATE TABLE
            --------------------------*/

           var associateData = resultdata.data;

            $('#upliner_associate_header').html('');
            $('#upliner_associate_data').html('');

            $.each(associateData, function(key, value){

                $('#upliner_associate_header').append(
                    '<th>' + key.replace(/_/g,' ').toUpperCase() + '</th>'
                );

                $('#upliner_associate_data').append(
                    '<td>' + (value ?? '') + '</td>'
                );

            });

        }
    });
}

$(document).on('click', '.btn-edit', function () {

    var rowData = levelLogTable.row($(this).parents('tr')).data();

    // rowData index mapping must match your columns
    $('#edit_id').val($(this).data('id'));
    $('#edit_upliner_id').val($(this).data('uplinerid'));
    $('#edit_position_type').val(rowData[0]);
    // $('#edit_effective_from').val(rowData[1]);
    var originalDate = rowData[1];
    if(originalDate){
        var parts = originalDate.split(' ')[0].split('-'); // ["30","09","2021"]
        var formattedDate = parts[2] + '-' + parts[1] + '-' + parts[0]; // "2021-09-30"

        $('#edit_effective_from').val(formattedDate);
    }
    $('#edit_self_stock').val(rowData[2]);
    $('#edit_self_no_resale').val(rowData[3]);
    $('#edit_sponsor_stock').val(rowData[4]);
    $('#edit_sponsor_no_resale').val(rowData[5]);
    $('#edit_reason').val(rowData[6]);

    $('#editModal').modal('show');
});
$('#updateBtn').on('click', function () {
    updateAssociatePositionLog();
});    
$(document).on('click', '.btn-delete', function () {

    var id = $(this).data('id');

    $('#delete_id').val(id);

    $('#bs-example-modal-center-delete').modal('show');
});

function openAssociateUpliner(){
     var associate_id = $('#associate_name').val();
    var sponsor_id = $('#upliner_name').val();

    if(associate_id == ''){
         Toastify({
            text: 'Please select Associate Name',
            className: "danger",
            style: {
                background: "linear-gradient(to right, #f06548, #f06548)",
            }
        }).showToast();
        return false;
    }

    if(sponsor_id == ''){
        Toastify({
            text: 'Please select New Upliner/Sponsor name',
            className: "danger",
            style: {
                background: "linear-gradient(to right, #f06548, #f06548)",
            }
        }).showToast();
        return false;
    }

    $("#changeUplinerModal").modal('show');
}
</script>
@endsection