@php
$userRole = auth()->user()->roles[0]->id;
$page_name = 'Dashboard';
@endphp
@include('partial.header')
@php 
$box_1 = 'primary';
$box_2 = 'blue';
$box_3 = 'red';
$box_4 = 'yellow';
$box_5 = 'secondary';
$box_0 = 'green';
$count = 1;
@endphp 
<div class="container-fluid">
    @include('partial.navigation')
    <div class="main-container">
            <!-- Content wrapper start -->
            <div class="content-wrapper">
                    <table style="width:100%; margin-top:-7px; margin-bottom:10px; " class="table">
                        <thead>
                            <tr>
                                <th style="width:160px; background:#d44843; border-left:5px solid #FFF; border-right:3px solid #FFF;" class="p-0 align-middle text-center">
                                    MESSAGE / सन्देश
                                </th>
                                <th style="background:#33af65; border-right:5px solid #FFF;" class="p-0">
                                    <marquee onmouseover="this.stop();" onmouseout="this.start();" style="font-size:18px; padding:5px !important;">
                                        JAI SHRI RAM JAI JAI RAM SHRI RAM JAI RAM JAI JAI RAM
                                    </marquee>
                                </th>
                            </tr>
                        </thead>
                        <thead></thead>
                    </table>
                    @if (session('message'))
                        <div class="alert alert-danger">{{ session('message') }}</div>
                    @endif
                    <div class="row gutters">
                        <div
                            class="col-xl-8 col-lglg-8 col-md-8 col-sm-8 col-12">
                            <!-- Row start -->
                            <div class="row" id="DashboardShiftBody">
                                @if ($shifts)
                                    @foreach ($shifts as $val)
                                        @if ($val['declare_number'] && $val['shift_date']==$date)
                                            <div style="cursor: pointer;" data-id="{{$val['id']}}" class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-12">
                                                <div class="hospital-tiles {{ ${'box_'.$count%6} }}">
                                                    <h5 class="status-title">{{ $val['shift_name'] }}</h5>
                                                    <div class="border-top my-1"></div>
                                                    <div class="row">
                                                        <div class="col-md-12 text-center">
                                                            <h5 class="status-title">
                                                                DATE : {{ date('d/m/Y', strtotime($val['shift_date'])) }}
                                                            </h5>
                                                        </div>
                                                    </div>
                                                    <div class="border-top my-1"></div>
                                                    <div class="row">
                                                        <div class="col-md-12 text-center">
                                                            <h5 class="status-title">
                                                                RESULT :{{ $val['declare_number'] }}</h5>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div style="cursor: pointer;" data-id="{{$val['id']}}" onclick="ShiftAction(this)" class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-12">
                                                <div class="hospital-tiles {{ ${'box_'.$count%6} }}">
                                                    <h5 class="status-title">{{ $val['shift_name'] }}</h5>
                                                    <div class="border-top my-1"></div>
                                                    <div class="row">
                                                        <div class="col-md-3 text-left">SALE</div>
                                                        <div class="col-md-7 ml-auto text-right">
                                                            <h5 class="status-title">{{ round($shiftTotalData[$val['id']]) ?? 0 }}</h5>
                                                        </div>
                                                    </div>
                                                    <div class="border-top my-1"></div>
                                                    <div class="row">
                                                        <div class="col-md-3 text-left">COLL</div>
                                                        <div class="col-md-7 ml-auto text-right">
                                                            <h5 class="status-title">{{ $shiftTotalSale[$val['id']] ?? 0 }}</h5>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @php $count++; @endphp
                                    @endforeach
                                @endif
                            </div>
                            <!-- Row end -->
                            @if($group_id == 0)
                            <div class="row gutters">
                                <div class="col-xl-12 col-lglg-12 col-md-12 col-sm-12 col-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="table-responsive CustomFixedTbl">
                                                <table id="" class="table">
                                                    <thead>
                                                        <tr>
                                                            <th style="width:40px;">SR</th>
                                                            <th colspan="3">DECLARE NEEDED
                                                            </th>
                                                            <th class="text-center">SHIFT-DATE</th>
                                                            <th class="text-center">UPDATE-BY</th>
                                                            <th class="text-center">UPDATE-TIME</th>
                                                            <th class="text-center">ACTION</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="TableDeclareNeeded">
                                                         @foreach($redeclaredShifts as $index => $shift)
                                                        <tr>
                                                            <td>{{ $index + 1 }}</td> <!-- SR (Serial Number) -->
                                                            <td colspan="2">{{ $shift->shift_name }}</td> <!-- Un-VERIFY SHIFT (Shift Name) -->
                                                            <td colspan="2">{{ $shift->shift_date }}</td>
                                                            <td class="text-center">{{ $shift->updated_by }}</td> <!-- UPDATE-BY (Updated By) -->
                                                            <td class="text-center">{{ \Carbon\Carbon::parse($shift->update_time)->format('Y-m-d H:i:s') }}</td> <!-- UPDATE-TIME (Update Time) -->
                                                            <td class="text-center">
                                                                <a onclick="redeclare_shift('{{ $shift->id }}','{{ $shift->shift_id }}','{{ $shift->shift_date }}','{{ $shift->declare_number }}')" href="javascript:void(0)" class="btn btn-danger">Re-Declare</a>
                                                            </td>
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-12 col-lglg-12 col-md-12 col-sm-12 col-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="table-responsive CustomFixedTbl" style="min-height:40vh; max-height:40vh; ">
                                                <table id="" class="table">
                                                    <thead>
                                                        <tr>
                                                            <th style="width:40px;">SR</th>
                                                            <th colspan="2">Un-VERIFY SHIFT</th>
                                                            <th class="text-center">UPDATE-BY</th>
                                                            <th class="text-center">UPDATE-TIME</th>
                                                            <th class="text-center">ACTION</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="TableUnVerify">
                                                       
                                                    </tbody>

                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                            @endif
                        </div>
                         @if($group_id == 0)
                        <div class="col-xl-4 col-lglg-4 col-md-4 col-sm-4 col-12">
                            <div class="card">
                                <div class="card-body" style="padding: 0.55rem 0.55rem;">
                               
                                    <div class="">
                                        <ul class="nav nav-tabs justify-content-left" id="myTab2" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active pt-1 pb-1" id="ledger-tab2" data-toggle="tab" href="#ledger" role="tab" aria-controls="ledger" aria-selected="true">Ledgers</a>
                                            </li>
                                            @if($group_id == 0)
                                                <li class="nav-item ">
                                                    <a class="nav-link pt-1 pb-1" id="workstaff-tab2" data-toggle="tab" href="#workstaff" role="tab" aria-controls="workstaff" aria-selected="false">Staff-Working</a>
                                                </li>
                                            @endif
                                        </ul>
                                        <div class="tab-content p-0 pt-1" id="myTabContent2">
                                            <div
                                                class="tab-pane fade show active" id="ledger" role="tabpanel" aria-labelledby="ledger-tab2">
                                                <!--****************** Vertical Scroll table start ************************-->
                                                <div class="table-responsive CustomFixedTbl">

                                                    <table id="" class="table">
                                                        <thead>
                                                            <tr>
                                                                <th style="width:40px;">SR</th>
                                                                <th>NEW LEDGER
                                                                </th>
                                                                <th class="text-center" style="width:130px;">ADD-BY</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @if ($ledgers->isNotEmpty())
                                                                @php $k = 1 @endphp
                                                                @foreach ($ledgers as $val)
                                                                    <tr>
                                                                        <td>{{$k++}}</td>
                                                                        <td>{{$val->name}}</td>
                                                                        <td class="text-center" style="padding:1px 5px;">
                                                                            <div style="margin-top:-1px; font-size:12px;">{{ $val->user?->name}}</div>
                                                                            <div style="font-size:10px; opacity:.7;">{{date('d-m-Y H:i', strtotime($val->created_at))}}</div>
                                                                        </td>
                                                                    </tr>
                                                                @endforeach
                                                            @endif
                                                        </tbody>

                                                    </table>
                                                </div>
                                                <!--******** Vertical Scroll table end ********************-->
                                            </div>
                                            <div class="tab-pane fade" id="workstaff" role="tabpanel" aria-labelledby="workstaff-tab2">
                                                <div id="WorkingStaffPanel" class="table-responsive CustomFixedTbl p-2" style="min-height:70vh; max-height:70vh; ">
                                                    <div class="popular-posts" id="popularPostsContainer">
                                                            @foreach ($staffs as $k => $val)
                                                                <a href="#" style="width:99.9%; display:flow-root;">
                                                                    <div class="post-content">
                                                                        <h6 class="post-title">
                                                                            <b style="font-size:13px;">{{$val->name}} ({{strtoupper($val->username)}})</b>
                                                                            
                                                                        </h6>
                                                                        <h6 class="post-date">
                                                                            @if ($val->status == "Working" and $val->end_time != null)
                                                                                <span class=" badge badge-pill badge-success">WORKING</span>
                                                                            @else
                                                                                <span class=" badge badge-pill badge-danger">OFFLINE</span>
                                                                            @endif
                                                                            <span class="divider"></span>
                                                                            <span class="date">{{$val->role?->name}}</span>
                                                                            <span class="divider"></span>
                                                                            <span class="date float-right">
                                                                                {{ $val->end_time ? date('d-m-Y H:i a', strtotime($val->end_time)) : '' }}
                                                                            </span>

                                                                        </h6>
                                                                    </div>
                                                                </a>
                                                            @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                        
                                </div>
                            </div>


                        </div>
                                @endif
                    </div>

                </div>
                <!-- Content wrapper end -->
                        <!-- Start Loader Modal -->

        
            <div class="modal fade" id="LoaderPopupModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog modal-md" role="document">
                    <div class="modal-content">
                        <div class="modal-body" style="padding:3px !important;">
                            <div class="table-responsive">
                                <br><br>
                                <div class="text-center">
                                    <h5>Re-Declare</h5>
                                </div>
                                <br>
                                <div class="d-flex justify-content-center">
                                    <div class="spinner-border">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>
                                <br>
                                <div class="text-center">
                                    <h5>Request under process. Please wait...</h5>
                                </div>
                                <br><br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Loader Modal -->


            <!-- Start ReDeclare Info Modal -->
            <div class="modal fade" id="ReDeclareInfoModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl mt-2" role="document">
                    <form method="post" id="ReDeclareInfoForm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">DECLARE INFO |
                                    <span id="ReDeclareInfoTitle"></span>
                                    <span id="ajax_loader_redeclare_info"></span>
                                </h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                            </div>
                            <div class="modal-body" style="padding:0px;">
                                <div class="row gutters">
                                    <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">

                                        <div class="card shadow-none border-right">
                                            <div class="card-header">
                                                <div class="card-title">SUMMARY</div>
                                            </div>
                                            <div class="card-body">
                                                <div class="popular-posts">

                                                    <a href="#">
                                                        <div class="post-content w-100">
                                                            <h6 class="post-date">
                                                                <span class="date float-left">SALE</span>
                                                                <span class="date float-right">P&amp;L</span>
                                                            </h6>
                                                        </div>
                                                    </a>
                                                    <a href="#">
                                                        <div class="post-content w-100">
                                                            <h6 class="post-title">DECLARE</h6>
                                                            <h6 class="post-date">
                                                                <span class="date text-dark" style="font-size:16px;" id="FirstSale">0</span>
                                                                <span class="date float-right font-weight-bold text-dark" style="font-size:16px;" id="FirstProfit">0</span>
                                                            </h6>
                                                        </div>
                                                    </a>
                                                    <a href="#">
                                                        <div class="post-content w-100">
                                                            <h6 class="post-title">RE-DECLARE</h6>
                                                            <h6 class="post-date">
                                                                <span class="date text-dark" style="font-size:16px;" id="LastSale">0</span>
                                                                <span class="date float-right font-weight-bold text-dark" style="font-size:16px;" id="LastProfit">0</span>
                                                            </h6>
                                                        </div>
                                                    </a>
                                                    <a href="#">
                                                        <div class="post-content w-100">
                                                            <h6 class="post-title">DIFFRANCE</h6>
                                                            <h6 class="post-date">
                                                                <span class="date text-dark" style="font-size:16px;" id="DiffSale">0</span>
                                                                <span class="date float-right font-weight-bold text-dark" style="font-size:16px;" id="DiffProfit">0</span>
                                                            </h6>
                                                        </div>
                                                    </a>
                                                </div>
                                                <br>
                                                <button id="redeclareBtnFinal" type="button" class="btn btn-primary btn-block">RE-DECLARE
                                                    <span id="re_declare_btn_span"></span>
                                                </button>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-xl-9 col-lglg-9 col-md-9 col-sm-9 col-12 pl-0">
                                        <div class="table-responsive CustomFixedTbl" style="min-height:60vh; max-height:60vh; ">
                                            <table id="" class="table">
                                                <thead>
                                                    <tr>
                                                        <th style="width:50px;">SR</th>
                                                        <th class="text-left">Old PARTY</th>
                                                        <th class="text-left">New PARTY</th>
                                                        <th class="text-left" style="width:80px;">SALE</th>
                                                        <th class="text-left" style="width:100px;">Re-SALE</th>
                                                        <th class="text-left" style="width:100px;">DIFF-SALE</th>
                                                        <th class="text-left" style="width:80px;">P&amp;L</th>
                                                        <th class="text-left" style="width:100px;">Re-P&amp;L</th>
                                                        <th class="text-left" style="width:100px;">DIFF-P&amp;L</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="redeclare_before_info_ledger_table"></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="modal-footer"></div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- Start ReDeclare Info Modal -->

    </div>
</div>
<script>
    var BaseUrl = "/";
    var nav = "dashboard";
</script>
@include('partial.footer')
<script>
    function ShiftAction(curr) {
        let obj = $(curr);
        window.open("/add_transaction/"+obj.data("id"), '_blank');
    }
    function get_staff_working(){
        var JsonData = {};
        AjaxCallGet("/get_staff_working", JsonData, function(response) {
            var container = $("#popularPostsContainer");
            container.html(''); // Clear the container

            // Convert the object to an array
            var staffArray = Object.values(response.data);

            // Sort the array by end_time in descending order
            staffArray.sort(function(a, b) {
                if (a.end_time === null && b.end_time !== null) return 1;  // Null should be last
                if (a.end_time !== null && b.end_time === null) return -1; // Non-null should be first
                if (a.end_time === null && b.end_time === null) return 0;  // Both are null, keep order
                return new Date(b.end_time) - new Date(a.end_time);  // Sort by end_time in descending order
            });

            $.each(staffArray, function(index, obj) {
                // Determine badge class and text based on status and end_time
                var badgeClass = (obj.status === 'Working' && obj.end_time !== null) ? 'badge-success' : 'badge-danger';
                var badgeText = (obj.status === 'Working' && obj.end_time !== null) ? 'WORKING' : 'OFFLINE';

                // Create a new HTML structure for each item
                var postHtml = `
                    <a href="#" style="width:99.9%; display:flow-root;">
                        <div class="post-content">
                            <h6 class="post-title">
                                <b style="font-size:13px;">${obj.name} (${obj.username.toUpperCase()})</b>
                            </h6>
                            <h6 class="post-date">
                                <span class="badge badge-pill ${badgeClass}">${badgeText}</span>
                                <span class="divider"></span>
                                <span class="date"></span>
                                <span class="divider"></span>
                                <span class="date float-right">
                                    ${obj.end_time ? new Date(obj.end_time).toLocaleString('en-GB', {day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false}) : ''}
                                </span>
                            </h6>
                        </div>
                    </a>`;
                
                // Append the new post HTML to the container
                container.append(postHtml);
            });
        });
    }

    function redeclare_shift(id, shift_id, shift_date, declare_number) {
        console.log(shift_id, shift_date, declare_number);
        

        // Simulate the AJAX call
        var JsonData = {
            'ShiftId': shift_id,
            'DeclaredId': id,
            'ShiftDate': shift_date,
            'DeclareNumber': declare_number,
            'nav': nav,
            'Method': "ajax_redeclare_info"
        };

        AjaxCall("/getRedeclareInfo", JsonData, function (response) {
            if (response.status) {
                let $tableBody = $("#redeclare_before_info_ledger_table");  // Using jQuery to select table body
                $tableBody.empty();  // Clear any existing rows

                var index = 1;  // Auto-increment index

                // Loop through the response data to populate the table
                let totalPreviousSale = 0;
                let totalCurrentSale = 0;
                let totalSaleDiff = 0;
                let totalPreviousPl = 0;
                let totalCurrentPl = 0;
                let totalPlDiff = 0;

                $.each(response.data, function (key, rowData) {
                    let $row = $(`
                        <tr>
                            <td>${index}</td>  <!-- Auto-increment index -->
                            <td class="text-left">${rowData.OldLedgerName}</td>
                            <td class="text-left">${rowData.LedgerName}</td>
                            <td class="text-left" style="width:80px;">${rowData.PreviousSale}</td>
                            <td class="text-left" style="width:100px;">${rowData.CurrentSale}</td>
                            <td class="text-left" style="width:100px;">${rowData.SaleDiff}</td>
                            <td class="text-left" style="width:80px;">${rowData.PreiousPl}</td>
                            <td class="text-left" style="width:100px;">${rowData.CurrentPl}</td>
                            <td class="text-left" style="width:100px;">${rowData.PlDiff}</td>
                        </tr>
                    `);
                    $tableBody.append($row);

                    totalPreviousSale += parseFloat(rowData.PreviousSale);
                    totalCurrentSale += parseFloat(rowData.CurrentSale);
                    totalSaleDiff += parseFloat(rowData.SaleDiff);
                    totalPreviousPl += parseFloat(rowData.PreiousPl);
                    totalCurrentPl += parseFloat(rowData.CurrentPl);
                    totalPlDiff += parseFloat(rowData.PlDiff);

                    index++;  // Increment index for each row
                });

                let $totalRow = $(`
                    <tr>
                        <td colspan="3" class="text-right"><strong>Total</strong></td>
                        <td class="text-left" style="width:80px;"><strong>${totalPreviousSale}</strong></td>
                        <td class="text-left" style="width:100px;"><strong>${totalCurrentSale}</strong></td>
                        <td class="text-left" style="width:100px;"><strong>${totalSaleDiff}</strong></td>
                        <td class="text-left" style="width:80px;"><strong>${totalPreviousPl}</strong></td>
                        <td class="text-left" style="width:100px;"><strong>${totalCurrentPl}</strong></td>
                        <td class="text-left" style="width:100px;"><strong>${totalPlDiff}</strong></td>
                    </tr>
                `);
                $tableBody.append($totalRow);

                // Update totals in the modal
                $("#FirstSale").text(response.summary.total_previous_sale);
                $("#FirstProfit").text(response.summary.total_previous_profit_and_loss);

                $("#LastSale").text(response.summary.total_current_sale);
                $("#LastProfit").text(response.summary.all_current_profit_loss);

                $("#DiffSale").text(response.summary.sale_diff);

                if(response.summary.sale_diff > 0){
                    var classs =  "text-success";
                }
                else{
                    var classs =  "text-danger";
                }

                $("#DiffProfit").text(response.summary.pnl_diff);

                $("#DiffProfit").addClass(classs);

                $("#ReDeclareInfoModal").modal("show");

                // Automatically set onclick for #redeclareBtnFinal
                $("#redeclareBtnFinal").off('click').on('click', function () {
                    re_declare_result(shift_id, shift_date, declare_number);
                });

            } else {
                console.error("Error fetching data");
            }
        });
    }

    function re_declare_result(ShiftId, DeclareDate, DeclareNumber) {

        var JsonData = {
            'ShiftId': ShiftId,
            'ShiftDate': DeclareDate,
            'DeclareNumber': DeclareNumber,
        };
        
        if (!confirm("Are you sure for Re-Declare action?")) { return false; }

        JsonData['nav'] = nav;
        JsonData['Method'] = "ajax_re_declare_result";

        AjaxCall("/redeclare_shift", JsonData, function (response) {
            if (response.status == true) {
                Notify("Re-Declared", response.message, "success");

                setTimeout(() => {
                    window.location.reload();
                }, 2000);
            } else if (response.status == false) {
                Notify("Error ", response.message, "danger");
            }
        });
    }

    $(document).ready(function () {
        setInterval(() => {
            get_staff_working();
        }, 10000);
    });

</script>