@extends('partial.mobile')
@php
    $userRole = auth()->user()->roles[0]->id;
    $ledger = auth()->user()->getLedger();
    $group_id = 0;

    if($ledger){
        $group_id = $ledger->group_id;
    }
    
    $page_name = 'Transactions';

@endphp

@include('partial.header')
@include('partial.loader')
<div class="container-fluid mobile-container special-mobile-container">
    <div class="main-container">

        <div class="fixed-header-container">
            <!-- Header Section with Back & Title -->
            <div class="header-bar">
                <a href="/dashboard_mobile" class="back-button">&larr;</a>
                <h4 class="page-title">{{$shift_details->shift_name}}</h4>
            </div>

            <!-- Tabs -->
            <div class="tabs-bar">
                @if($userRole == 1 || ($group_id == 4 || $group_id == 8))
                    <span class="tab active" data-tab="live">Live</span>
                    <span class="tab" data-tab="declared">Declared</span>
                @endif
            </div>

            <!-- Filter Section -->
            <div class="filter-bar">
                <div class="date-wrapper" onclick="document.getElementById('date-input').focus()">
                    <input type="date" id="date-input" class="date-input"   value="{{ date('Y-m-d') }}" readonly/>
                    <input type="hidden" id="shiftId" value="{{ $shift_id }}">
                    <input type="hidden" id="isLive" value="Live">
                </div>

                <button class="find-btn">Find</button>
            </div>
            <div class="search-bar">
                <input type="text" class="search-input" id="agentNameInput" placeholder="Search party..." />
            </div>
            
        </div>
        
        <div class="transaction-container">

            <div class="tab-content" id="live" style="display: block;">
                <!-- Transaction List -->
                <div class="transaction-list" id="transactionsListLive">
                    @foreach ($transactions as $index => $txn)
                        <div class="transaction-item">
                            <div class="left">
                                <div><strong>{{ $index + 1 }}. {{ $txn['name'] }}</strong></div>
                                <div class="agent">{{ $txn['agent'] }}</div>
                                <div class="date">{{ $txn['date'] }}</div>
                            </div>
                            <div class="right">
                                {{ $txn['amount'] }} /-
                            </div>
                        </div><hr>
                    @endforeach
                </div>

                <!-- Total Bar -->
                <div class="total-bar">
                    <span>Total</span>
                    <span id="totalAmount">{{ number_format($totalAmount) }} /-</span>
                    <div class="jantri-icon" id="jantri-open">
                        <img src="{{ URL::to('/jantri.svg') }}" alt="Icon" />
                    </div>
                </div>
            </div>

            <div class="tab-content" id="declared" style="display: none;">
                <div class="transaction-list" id="transactionsListDeclared">
                </div>
                <div class="total-bar">
                    <span>Total</span>
                    <span id="totalAmountDeclared">0 /-</span>
                    <div class="jantri-icon" id="jantri-open-declared">
                        <img src="{{ URL::to('/jantri.svg') }}" alt="Icon" />
                    </div>
                </div>
            </div>

        </div>
        
    </div>
    <!-- Bootstrap Modal -->
    <div class="modal fade" id="jantriModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
            
            <div class="modal-header bg-orange text-white">
                <h5 class="modal-title" id="jantriModalLabel" >JANTRI TYPE</h5>
            </div>
            
            <div class="modal-body text-center">
                <button class="btn btn-success w-100 mb-2" data-id ='{{$shift_id}}' data-type="live"  data-jantritype ='main'  onclick="ShiftAction(this)" >MAIN JANTRI</button>
                <button class="btn btn-warning w-100 mb-2" data-id ='{{$shift_id}}' data-type="live" data-jantritype ='sale'  onclick="ShiftAction(this)">SALE JANTRI</button>
                <button class="btn btn-warning w-100 mb-2" data-id ='{{$shift_id}}' data-type="live" data-jantritype ='collection'  onclick="ShiftAction(this)">COLLECTION JANTRI</button>
                <button id="jantri-close" class="btn btn-danger w-100" data-bs-dismiss="modal">CLOSE</button>
            </div>

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

      <!-- Bootstrap Modal -->
      <div class="modal fade" id="jantriModalDeclared" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
            
            <div class="modal-header bg-orange text-white">
                <h5 class="modal-title" id="jantriModalDeclaredLabel" >JANTRI TYPE</h5>
            </div>
            
            <div class="modal-body text-center">
                <button class="btn btn-success w-100 mb-2" data-type="declared" data-id ='{{$shift_id}}'  data-jantritype ='main'  onclick="ShiftAction(this)" >MAIN JANTRI</button>
                <button class="btn btn-warning w-100 mb-2" data-type="declared" data-id ='{{$shift_id}}' data-jantritype ='sale'  onclick="ShiftAction(this)">SALE JANTRI</button>
                <button class="btn btn-warning w-100 mb-2" data-type="declared" data-id ='{{$shift_id}}' data-jantritype ='collection'  onclick="ShiftAction(this)">COLLECTION JANTRI</button>
                <button id="jantri-close-declared" class="btn btn-danger w-100" data-bs-dismiss="modal">CLOSE</button>
            </div>

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


</div>
@section('script')
<script>
    function ShiftAction(curr) {
        let obj = $(curr);
        let jantritype = obj.data("jantritype");
        let id = obj.data("id");
        let type = obj.data("type");
        let date = $('#date-input').val();
        if (type == 'live') {
            window.location.href = "/jantri_mobile/"+id+"/"+jantritype;
        } else {
            window.location.href = "/jantri_mobile/"+id+"/"+jantritype+"/"+date;
        }
    }
    $(document).ready(function() {
       
        $('#jantri-open').click(function() {
            $('#jantriModal').modal('show');
        });
        $("#jantri-close").click(function() {
            $('#jantriModal').modal('hide');
        });

        $('#jantri-open-declared').click(function() {
            $('#jantriModalDeclared').modal('show');
        });
        $("#jantri-close-declared").click(function() {
            $('#jantriModalDeclared').modal('hide');
        });
    });
    $(document).ready(function () {
        const today = new Date().toISOString().split('T')[0];

        function fetchTransactions(tabId) {
            showLoader();
            const search_query = $('#agentNameInput').val();
            const shift_date = $('#date-input').val();
            const is_live = $('#isLive').val();
            const shift_id = $('#shiftId').val();

            const AjaxUrl = '/txns_mobile/' + shift_id;
            const JsonData = {
                search_query: search_query,
                shift_date: shift_date,
                is_live: is_live,
            };

            AjaxCallGet(AjaxUrl, JsonData, function (response) {
                hideLoader();
                let html = '';

                if (response.transactions && Array.isArray(response.transactions)) {
                    response.transactions.forEach(function (txn) {
                        html += `
                            <div class="transaction-item">
                                <div class="left">
                                    <div><strong>${txn.name}</strong></div>
                                    <div class="agent">Agent: ${txn.agent}</div>
                                    <div class="date">Date: ${txn.date}</div>
                                </div>
                                <div class="right">${txn.amount} /-</div>
                            </div><hr>`;
                    });

                    if ($('#isLive').val() == 'Live') {
                        $('#transactionsListLive').html(html);
                        $('#totalAmount').text('Total: ₹' + response.totalAmount);
                    } else {
                        $('#transactionsListDeclared').html(html);
                        $('#totalAmountDeclared').text('Total: ₹' + response.totalAmount);
                    }
                } else {
                    const emptyMessage = '<div>No transactions found.</div>';
                    if ($('#isLive').val() == 'Live') {
                        $('#transactionsListLive').html(emptyMessage);
                        $('#totalAmount').text('');
                    } else {
                        $('#transactionsListDeclared').html(emptyMessage);
                        $('#totalAmountDeclared').text('');
                    }
                }
            });
        }

        $(document).on('click', '.tab', function () {
            const tabId = $(this).data('tab');

            $('.tab').removeClass('active');
            $('.tab-content').hide();

            $(this).addClass('active');
            $('#' + tabId).show();

            if (tabId == 'live') {
                $('#isLive').val('Live');
                $('#date-input').val(today).attr('readonly', true);
            } else {
                $('#isLive').val('NO');
                $('#date-input').removeAttr('readonly');
            }

            fetchTransactions(tabId);
        });

        $(document).on('input change', '#agentNameInput', function () {
            fetchTransactions($('.tab.active').data('tab'));
        });

        $(document).on('click', '.find-btn', function () {
            fetchTransactions($('.tab.active').data('tab'));
        });
    });



</script>
@endsection

@section('style')
<!-- CSS Styling -->
<style>
    .tab-content {
        padding: 8px 0px !important;
    }
    .header {
            display: none;
        }
        /* Header */
        .header-bar {
            display: flex;
            align-items: center;
            justify-content: start;
            padding: 10px;
            background: #007c70;
            color: white;
            font-size: 18px;
            font-weight: bold;
        }

        .back-button {
            font-size: 24px;
            color: white;
            margin-right: 10px;
            text-decoration: none;
            margin-top: -8px;
        }

        .page-title {
            font-size: 18px;
            margin: 0;
        }

        /* Tabs */
        .tabs-bar {
            display: flex;
            background: #00887a;
            padding: 5px;
        }

        .tab {
            color: white;
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            width: 50%;
    text-align: center;
        }

        .tab.active {
            background: white;
            color: #00887a;
            border-radius: 20px;
            font-weight: bold;
        }

        /* Filter Section */
        .filter-bar {
            display: flex;
            gap: 8px;
            padding: 10px;
        }

        .find-btn {
            padding: 6px 12px;
            background: #00887a;
            color: white;
            border: none;
            border-radius: 6px;
        }

        .search-input {
            width: 100%;
            padding: 8px;
            margin: 10px 0;
            border-radius: 6px;
            border: 1px solid #ccc;
        }

        .transaction-list {
            padding: 5px 10px;
            background-color: #dee2ee;
            margin-bottom: 40px;
        }

        .transaction-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ddd;
        }

        .transaction-item .left {
            text-align: left;
        }

        .transaction-item .right {
            font-weight: bold;
            color: black;
        }

        .transaction-item .agent {
            font-size: 10px;
            color: #00887a;
        }

        .transaction-item .date {
            font-size: 9px;
            color: #888;
        }

    .total-bar {
        background: #007c70;
        color: white;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        font-weight: bold;
        font-size: 18px;
        position: fixed;
        width: 100%;
        bottom: 0px;
        z-index: 1000;
    }
    .container-fluid.mobile-container.special-mobile-container {
        padding: 0px;
    }
    .content-wrapper.mobile-wrapper {
        padding-left: 0px !important;
        padding-right: 0px !important;
        padding-top: 0px;
    }
    .fixed-header-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

        /* Add margin-top to push content below the fixed header */
        .transaction-container {
            margin-top: 202px;
            overflow-y: auto;
        
        }
        .search-bar {
            padding: 0px 10px;
        }
        .date-wrapper {
        width: 100%;
        position: relative;
        cursor: pointer;
    }

    .date-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer; /* Make input clickable */
        background-size: 18px;
        appearance: none; /* Minimal reset */
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    /* Do NOT fully hide calendar picker indicator to allow proper click */
    .date-input::-webkit-calendar-picker-indicator {
        opacity: 0; /* visually hide */
        position: absolute;
        right: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .date-input::-moz-calendar-picker-indicator {
        opacity: 0;
        position: absolute;
        right: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    /* Center Icon in Total Bar */
    .jantri-icon {
        position: absolute;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
        width: 45px;
        height: 45px;
        background: #007c70;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        cursor: pointer;
        z-index: 1100;
    }

    .jantri-icon img {
        width: 22px;
        height: 22px;
        filter: brightness(0) invert(1);
    }

    /* Optional: Orange Header in Modal */
    .bg-orange {
        background: #007c70;
    }

    .text-white {
        color: white;
    }


</style>
@endsection