@extends('layouts.master')
@section('title', 'EOD / Cash Recon')

@section('css')
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
<style>
    .table th {
        background: #f1f3f6;
        font-weight: 600;
        font-size: 14px;
        padding: 10px;
    }
    .table td {
        font-size: 14px;
        vertical-align: middle;
    }
    
</style>
@endsection

@section('content')
@if ($errors->any())
    <div class="alert alert-warning">
        @foreach ($errors->all() as $error)
            {{$error}}
        @endforeach
    </div>
@endif
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header border-bottom-dashed">
                <div class="row g-4 align-items-center">
                <div class="col-sm">
                    <div>
                    <h5 class="card-title mb-0">EOD / Cash Recon</h5>
                    </div>
                </div>
                </div>
            </div>
            <form method="POST" id="formCounterCount">
                @csrf
                <div class="card-body">
                    <div class="oc_counter_wrapper">
                        <!-- Tender Panel -->
                        <div class="oc_counter_panel">
                            <h6 class="fw-bold mb-3">Cash Denominations</h6>
                            <table class="table table-bordered align-middle mb-0" id="tenderTable">
                                <thead>
                                    <tr>
                                        <th>Item</th>
                                        <th class="text-end">Unit (RM)</th>
                                        <th class="text-end">Qty/Value</th>
                                        <th class="text-end">Amount (RM)</th>
                                    </tr>
                                </thead>
                                <tbody id="tenderTableBody">
                                    
                                    @foreach ($rows as $i => $row)
                                    <tr>
                                        <td>{{ $row[1] }}</td>
                                        <td>{{ number_format($row[2], 2) }}</td>
                                        <td class="text-end">
                                            <input type="number" class="form-control form-control-sm tenderQty" 
                                                min="0" step="1" 
                                                oninput="this.value = this.value.replace(/^0+/, '').replace(/[^0-9]/g, ''); if(this.value==='')this.value='0'; disableSubmitButton()" 
                                                data-index="{{ $i }}" value="0" 
                                                name="{{$row[0]}}" onfocus="setFocusedInput(this)" 
                                                onkeydown="focusNextInput(event)" />

                                                <script>
                                                    function focusNextInput(event) {
                                                        if (event.key === "Enter") {
                                                            event.preventDefault(); // prevent form submit
                                                            const inputs = document.querySelectorAll('.tenderQty');
                                                            const index = Array.from(inputs).indexOf(event.target);
                                                            if (index > -1 && index < inputs.length - 1) {
                                                            inputs[index + 1].focus();
                                                            } else if (index === inputs.length - 1) {
                                                            // optional: focus first input or submit form if last
                                                            inputs[0].focus(); // or document.querySelector('#submitBtn').click();
                                                            }
                                                        }
                                                    }
                                                </script>
                                        </td>
                                        <td class="text-end amountCell">0.00</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr class="fw-bold bg-light">
                                        <td colspan="3" class="text-end">Count Total:</td>
                                        <td class="text-end" id="countTotal">0.00</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    
                        <!-- Left Panel (Summary) -->
                        <div class="oc_counter_panel">
                            <h6 class="fw-bold mb-3">Summary</h6>
                            <div class="oc_counter_field">
                            <div>Opening Amt</div><div class="oc_counter_value" id="openingAmt" name="OpeningAmount">{{ $summary['OpeningAmount']}}</div>
                            </div>
                            <div class="oc_counter_field"><div>Cash In</div><div class="oc_counter_value">{{ $summary['CashIn']}}</div></div>
                            <div class="oc_counter_field"><div>Cash Out</div><div class="oc_counter_value">{{ $summary['CashOut']}}</div></div>
                            <div class="oc_counter_field"><div>Cash Received</div><div class="oc_counter_value">{{ $summary['CashReceived']}}</div></div>
                            <div class="oc_counter_field oc_counter_bold"><div>Total Cash Received</div><div class="oc_counter_value" id="txtTotalCashReceived">{{$summary['TotalCashReceived']}}</div></div>
                            <div class="oc_counter_field" hidden><div>Card Received</div><div class="oc_counter_value">0.00</div></div>
                            <div class="oc_counter_field" hidden><div>Deposit Card</div><div class="oc_counter_value">0.00</div></div>
                            <div class="oc_counter_field oc_counter_bold"><div>Total Card Received</div><div class="oc_counter_value">{{$summary['TotalCardReceived']}}</div></div>
                            <div class="oc_counter_field" hidden><div>Other Received</div><div class="oc_counter_value">0.00</div></div>
                            <div class="oc_counter_field" hidden><div>Deposit Other</div><div class="oc_counter_value">0.00</div></div>
                            <div class="oc_counter_field oc_counter_bold"><div>Total Other Received</div><div class="oc_counter_value">{{$summary['TotalOtherReceived']}}</div></div>
                            <div class="oc_counter_field" ><div>Total Sales</div><div class="oc_counter_value">{{$summary['TotalSales']}}</div></div>
                            <div class="oc_counter_field" hidden><div>Previous Deposit</div><div class="oc_counter_value">0.00</div></div>
                            <div class="oc_counter_field" hidden><div>Bank Charges Cash</div><div class="oc_counter_value">0.00</div></div>
                            <div class="oc_counter_field" hidden><div>Bank Charges Card</div><div class="oc_counter_value">0.00</div></div>
                            <div class="oc_counter_field" hidden><div>Rounding Adjustment</div><div class="oc_counter_value">{{$summary['RoundingAdjustment']}}</div></div>
                            <div class="oc_counter_field oc_counter_bold"><div>Net Total</div><div class="oc_counter_value" id="txtNetTotal">{{$summary['NetTotal']}}</div></div>
                            <div class="oc_counter_field oc_counter_bold"><div>Balance</div><div class="oc_counter_value" id="txtBalance">0.00</div></div>
                    
                            <div class="mt-3">
                                <button type="button" class="oc_counter_checkbalance" onclick="checkBalance()">Check Balance</button>
                            </div>
                        </div>
                    
                        <!-- Right Panel (Inputs + Keypad) -->
                        <div class="oc_counter_panel">
                            <h6 class="fw-bold mb-3">Counter Details</h6>
                    
                            <div class="mb-3">
                                <label class="form-label">Open Counter Time</label>
                                <input class="form-control" type="text" id="txtclose_openTime" value="{{ $location_counter->open_at ?? '' }}" readonly />
                            </div>
                            @if(!isset($cashCount))
                            <div class="mb-3">
                                <label class="form-label">Close Counter Time</label>
                                <input class="form-control" type="text" id="txtclose_closeTime" placeholder="--:--" readonly />
                            </div>
                            @endif
                            <div class="mb-3" hidden>
                                <label class="form-label">Enter Amount</label>
                                <input class="form-control" type="text" id="amountInput" readonly />
                            </div>
                    
                            <div class="oc_counter_keypad" hidden>
                                <button onclick="appendNumber('7')">7</button>
                                <button onclick="appendNumber('8')">8</button>
                                <button onclick="appendNumber('9')">9</button>
                                <button class="oc_counter_btngray" onclick="appendNumber('X')">X</button>
                    
                                <button onclick="appendNumber('4')">4</button>
                                <button onclick="appendNumber('5')">5</button>
                                <button onclick="appendNumber('6')">6</button>
                                <button class="oc_counter_btngray" onclick="clearAmount()">CLEAR</button>
                    
                                <button onclick="appendNumber('1')">1</button>
                                <button onclick="appendNumber('2')">2</button>
                                <button onclick="appendNumber('3')">3</button>
                                <button class="oc_counter_btnblue" onclick="submitEnter()">ENTER</button>
                    
                                <div></div>
                                <button class="oc_counter_zerocentered" onclick="appendNumber('0')">0</button>
                                <button onclick="appendNumber('.')">.</button>
                            </div>
                    
                            <div class="oc_counter_actions">
                                @if(isset($cashCount))
                                <button type="button" class="oc_counter_save" style="background-color: #cccccc; cursor: not-allowed;" onclick="submitCashCount()" id="saveButton" disabled>Submit Cash Count</button>
                                @else
                                <button type="button" class="oc_counter_save" style="background-color: #cccccc; cursor: not-allowed;" onclick="submitCloseCounter()" id="saveButton" disabled>Request Close Counter</button>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div style="padding: 15px 20px; background: #e8f4ff; border-left: 5px solid #0078d7; border-radius: 6px; font-family: 'Segoe UI', Arial, sans-serif; color: #084b8a; font-size: 14px;">
                        <strong>Note:</strong> Please <b>“Check Balance”</b> before submitting Cash Count or Close Counter.
                      </div>
                </div>
                
            </form> 
        </div>
    </div>
</div>


@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
  let focusedInput = null;

//   document.getElementById("openTime").value = new Date().toLocaleString();   

  function setFocusedInput(input) {
      focusedInput = input;
      document.getElementById("amountInput").value = input.value;
  }

  function appendNumber(val) {
      const input = document.getElementById("amountInput");
      if (val === 'X') {
          input.value = input.value.slice(0, -1);
      } else {
          input.value += val;
      }
  }

  function clearAmount() {
      document.getElementById("amountInput").value = '';
  }

  function submitEnter() {
      const amountInput = document.getElementById("amountInput");
      const newAmt = parseFloat(amountInput.value || '0');
      document.getElementById("openingAmt").innerText = isNaN(newAmt) ? '0.00' : newAmt.toFixed(2);
      amountInput.value = '';
  }

  function calculateRowAmount(input) {
      const row = input.closest('tr');
      const unit = parseFloat(row.children[1].textContent.replace(/,/g, '') || '0');
      const qty = parseFloat(input.value || '0');
      const amount = unit * qty;

      const amountCell = row.querySelector('.amountCell');
      amountCell.innerText = isNaN(amount) ? '0.00' : amount.toFixed(2);
  }

  function updateCountTotal() {
      let total = 0;
      const cells = document.querySelectorAll('.amountCell');
      cells.forEach(cell => {
          const amt = parseFloat(cell.innerText);
          total += isNaN(amt) ? 0 : amt;
      });
      document.getElementById('countTotal').innerText = total.toFixed(2);
  }

  function checkBalance(){

    let txtNetTotal = parseFloat(document.getElementById("txtTotalCashReceived").innerText || '0');
    let countTotal = parseFloat(document.getElementById("countTotal").innerText || '0');

    let balance = countTotal - txtNetTotal;
    document.getElementById("txtBalance").innerText = balance.toFixed(2);

    let saveButton = document.getElementById("saveButton");
    saveButton.style = "";
    saveButton.disabled = false;
    

  }

  function submitCloseCounter() {
    const form = document.getElementById('formCounterCount');
    const formData = new FormData(form);

    // Convert FormData to a plain object
    const formObject = {};
    formData.forEach((value, key) => {
        formObject[key] = value;
    });

    // Add additional data
    const countTotal = document.getElementById("countTotal").innerText;
    const txtNetTotal = document.getElementById("txtNetTotal").innerText;
    const txtBalance = document.getElementById("txtBalance").innerText;
    const txtTotalCashReceived = document.getElementById("txtTotalCashReceived").innerText;
    const now = new Date();
    const nowStr = now.toLocaleString();

    formObject.count_total = countTotal;
    formObject.net_total = txtNetTotal;
    formObject.balance = txtBalance;
    formObject.total_cash_received = txtTotalCashReceived;
    formObject.closed_at = nowStr;

    Swal.fire({
        title: 'Close Counter Confirmation',
        html: `
        <div style="
                padding: 18px 22px;
                background: #ffffff;
                border: 1px solid #e6e6e6;
                border-radius: 10px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.04);
                font-family: 'Segoe UI', Roboto, sans-serif;
                color: #333;
                ">
                <!-- Header -->
                <div style="margin-bottom: 20px;">
                    <i class="fas fa-exclamation-triangle" style="font-size: 34px; color: #f39c12;"></i>
                    <div style="text-align: left">
                    <div style="font-size: 18px; font-weight: 600;">Close Summary</div>
                    <div style="font-size: 14px; color: #777;">${nowStr}</div>
                    </div>
                </div>

                <!-- Listing Info -->
                <div style="display: flex; flex-direction: column; gap: 10px; font-size: 15px;">
                    <div style="display: flex; justify-content: space-between; border-bottom: 1px dashed #eee; padding-bottom: 4px;">
                    <span style="color: #666;">Count Total</span>
                    <strong style="color: #222;">RM ${countTotal}</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between; border-bottom: 1px dashed #eee; padding-bottom: 4px;">
                    <span style="color: #666;">Cash Total</span>
                    <strong style="color: #222;">RM ${txtTotalCashReceived}</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between; border-bottom: 1px dashed #eee; padding-bottom: 4px;">
                    <span style="color: #666;">Net Total</span>
                    <strong style="color: #222;">RM ${txtNetTotal}</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between;">
                    <span style="color: #666;">Balance</span>
                    <strong style="color: #222;">RM ${txtBalance}</strong>
                    </div>
                </div>
                </div>

        `,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, close it!',
        cancelButtonText: 'No, keep it open',
        customClass: {
            htmlContainer: 'swal2-html-container'
        }
    }).then((result) => {
        if (result.isConfirmed) {

            callLoaddingScreen('Closing counter, please wait...');

            fetch('/cash/close-counter', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(formObject)
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    closeLoaddingScreen();
                    Swal.fire('Closed!', data.message || 'The counter has been closed.', 'success')
                    .then(() => {
                        callLoaddingScreen('Redirecting please wait...');
                        window.location.href = '/orders';
                    });
                }else if(data.status === 'error2') {
                    closeLoaddingScreen();
                    Swal.fire({
                            title: 'Warning',
                            text: 'Counter closed with warnings: ' + data.message,
                            icon: 'warning',
                            confirmButtonText: 'Ok'
                        }).then(() => {
                            callLoaddingScreen('Redirecting please wait...');
                            window.location.href = '/orders';
                        });
                    
                } else {
                    closeLoaddingScreen();
                    Swal.fire('Error', data.message || 'Failed to close counter.', 'error');
                }
            })
            .catch(error => {
                closeLoaddingScreen();
                Swal.fire('Error', 'error');
            });
        }
    });
  }

  function submitCashCount() {
    const form = document.getElementById('formCounterCount');
    const formData = new FormData(form);

    // Convert FormData to a plain object
    const formObject = {};
    formData.forEach((value, key) => {
        formObject[key] = value;
    });

    // Add additional data
    const countTotal = document.getElementById("countTotal").innerText;
    const txtNetTotal = document.getElementById("txtNetTotal").innerText;
    const txtBalance = document.getElementById("txtBalance").innerText;
    const now = new Date();
    const nowStr = now.toLocaleString();

    formObject.count_total = countTotal;
    formObject.net_total = txtNetTotal;
    formObject.balance = txtBalance;
    formObject.closed_at = nowStr;

    Swal.fire({
        title: 'Submit Cash Count Confirmation',
        html: `
        <div style="
                padding: 18px 22px;
                background: #ffffff;
                border: 1px solid #e6e6e6;
                border-radius: 10px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.04);
                font-family: 'Segoe UI', Roboto, sans-serif;
                color: #333;
                ">
                <!-- Header -->
                <div style="margin-bottom: 20px;">
                    <i class="fas fa-exclamation-triangle" style="font-size: 34px; color: #f39c12;"></i>
                    <div style="text-align: left">
                    <div style="font-size: 18px; font-weight: 600;">Cash Count Summary</div>
                    <div style="font-size: 14px; color: #777;">${nowStr}</div>
                    </div>
                </div>

                <!-- Listing Info -->
                <div style="display: flex; flex-direction: column; gap: 10px; font-size: 15px;">
                    <div style="display: flex; justify-content: space-between; border-bottom: 1px dashed #eee; padding-bottom: 4px;">
                    <span style="color: #666;">Count Total</span>
                    <strong style="color: #222;">RM ${countTotal}</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between; border-bottom: 1px dashed #eee; padding-bottom: 4px;">
                    <span style="color: #666;">Net Total</span>
                    <strong style="color: #222;">RM ${txtNetTotal}</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between;">
                    <span style="color: #666;">Balance</span>
                    <strong style="color: #222;">RM ${txtBalance}</strong>
                    </div>
                </div>
                </div>
        `,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Confirm Cash Count!',
        cancelButtonText: 'Cancel',
        customClass: {
            htmlContainer: 'swal2-html-container'
        }
    }).then((result) => {
        if (result.isConfirmed) {
            callLoaddingScreen('Submitting cash count, please wait...');

            fetch('/cash/submit-cash-count', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(formObject)
            })
            .then(response => response.json())
            .then(data => {
                closeLoaddingScreen();
                if (data.status === 'success') {
                    Swal.fire('Submitted!', data.message || 'The cash count has been submitted.', 'success')
                    .then(() => {
                        window.location.href = '/orders';
                    });
                } else {
                    Swal.fire('Error', data.message || 'Failed to submit cash count.', 'error');
                }
            })
            .catch(error => {
                closeLoaddingScreen();
                Swal.fire('Error', 'API error: ' + error, 'error');
            });
        }
    });
  }

  function disableSubmitButton(){
    let saveButton = document.getElementById("saveButton");
    saveButton.style = "background-color: #cccccc; cursor: not-allowed;";
    saveButton.disabled = true;

  }

  document.addEventListener('input', function (e) {
      if (e.target.classList.contains('tenderQty')) {
          calculateRowAmount(e.target);
          updateCountTotal();
      }
  });

  window.addEventListener('DOMContentLoaded', () => {
      const firstInput = document.querySelector('input.tenderQty');
      if (firstInput) firstInput.focus();
  });
</script>
@endsection