<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$CI =& get_instance();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title><?= $page_title; ?> | <?= $this->session->userdata('store_name'); ?></title>
  <link rel="stylesheet" href="<?= $theme_link; ?>bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="<?= $theme_link; ?>css/font-awesome-4.7.0/css/font-awesome.min.css">
  <style>
    * { box-sizing: border-box; }
    html { font-size: 16px; }
    @media (min-width: 360px) { html { font-size: 17px; } }
    @media (min-width: 768px) { html { font-size: 16px; } }
    html, body { height: 100%; margin: 0; padding: 0; }
    body {
      background: #f4f6f9;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px 16px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-size: 1rem;
      -webkit-tap-highlight-color: transparent;
    }
    @media (min-width: 768px) {
      body { padding: 40px 24px; align-items: flex-start; padding-top: 60px; }
    }
    .cash-page {
      width: 100%;
      max-width: 420px;
      min-width: 0;
    }
    @media (min-width: 768px) {
      .cash-page { max-width: 520px; }
    }
    @media (min-width: 992px) {
      .cash-page { max-width: 560px; }
    }
    .cash-card {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
      border: 1px solid #e8eaed;
      overflow: hidden;
    }
    @media (min-width: 768px) {
      .cash-card { box-shadow: 0 4px 20px rgba(0,0,0,0.1); border-radius: 12px; }
    }
    .cash-card-header {
      padding: 20px 16px 16px;
      border-bottom: 1px solid #eee;
      text-align: center;
    }
    @media (min-width: 768px) {
      .cash-card-header { padding: 28px 32px 24px; }
    }
    .cash-card-header h1 {
      margin: 0;
      font-size: clamp(1.25rem, 4.5vw, 1.6rem);
      font-weight: 600;
      color: #1a1a1a;
    }
    @media (min-width: 768px) {
      .cash-card-header h1 { font-size: 1.75rem; }
    }
    .cash-card-header h1 i {
      margin-right: 8px;
      color: #3c8dbc;
      font-size: 1.25rem;
    }
    .cash-card-header p {
      margin: 8px 0 0;
      font-size: 0.95rem;
      color: #444;
      line-height: 1.45;
      word-wrap: break-word;
    }
    @media (min-width: 768px) {
      .cash-card-header p { font-size: 1rem; margin-top: 10px; }
    }
    .cash-card-body { padding: 20px 16px; }
    @media (min-width: 768px) {
      .cash-card-body { padding: 28px 32px; }
    }
    .cash-card-body .form-group {
      margin-bottom: 18px;
    }
    .cash-card-body .form-group:last-of-type { margin-bottom: 0; }
    .cash-card-body label {
      display: block;
      font-weight: 600;
      color: #222;
      margin-bottom: 8px;
      font-size: 1rem;
    }
    .cash-card-body .form-control {
      width: 100%;
      max-width: 100%;
      border-radius: 6px;
      border: 1px solid #d1d5da;
      padding: 12px 14px;
      font-size: 1rem;
      min-height: 48px;
      transition: border-color 0.15s ease;
    }
    .cash-card-body select.form-control {
      appearance: auto;
      -webkit-appearance: menulist;
    }
    .cash-card-body .form-control:focus {
      border-color: #3c8dbc;
      outline: 0;
      box-shadow: 0 0 0 2px rgba(60, 141, 188, 0.15);
    }
    .cash-card-body textarea.form-control {
      min-height: 72px;
      resize: vertical;
      font-size: 1rem;
    }
    .input-group { width: 100%; display: flex; }
    .input-group .form-control { min-height: 48px; border-radius: 0 6px 6px 0; flex: 1; min-width: 0; }
    .input-group-addon {
      border-radius: 6px 0 0 6px;
      border: 1px solid #d1d5da;
      border-right: 0;
      background: #f8f9fa;
      min-width: 44px;
      text-align: center;
      padding: 12px 10px;
      font-size: 1rem;
      color: #333;
      flex-shrink: 0;
    }
    .input-group .form-control { border-left: 0; }
    .cash-card-body .help-block {
      margin-top: 6px;
      font-size: 0.875rem;
      line-height: 1.4;
      word-wrap: break-word;
    }
    #cash-open-msg {
      margin-top: 16px;
      border-radius: 6px;
      padding: 12px 14px;
      font-size: 1rem;
    }
    .cash-card-footer {
      padding: 16px;
      background: #fafbfc;
      border-top: 1px solid #eee;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: stretch;
    }
    .cash-card-footer .btn {
      flex: 1 1 auto;
      min-width: 0;
      min-height: 48px;
      border-radius: 6px;
      font-weight: 600;
      font-size: 1rem;
      padding: 12px 14px;
      white-space: normal;
      text-align: center;
      line-height: 1.3;
      word-wrap: break-word;
    }
    @media (min-width: 768px) {
      .cash-card-footer { padding: 20px 32px; gap: 12px; }
      .cash-card-footer .btn { min-height: 44px; padding: 10px 20px; }
    }
    @media (max-width: 767px) {
      body { padding: 16px 12px; }
    }
    @media (max-width: 480px) {
      body { padding: 12px 10px; }
      .cash-card-header { padding: 16px 12px 12px; }
      .cash-card-body { padding: 16px 12px; }
      .cash-card-footer { padding: 12px; flex-direction: column; }
      .cash-card-footer .btn { width: 100%; font-size: 0.95rem; }
    }
    .cash-card-footer .btn-primary {
      background: #3c8dbc;
      border-color: #367fa9;
    }
    .cash-card-footer .btn-primary:hover {
      background: #32708a;
      border-color: #2d6a8a;
    }
    .cash-card-footer .btn-default {
      background: #fff;
      border: 1px solid #d1d5da;
      color: #333;
    }
    .cash-card-footer .btn-default:hover {
      background: #f4f6f9;
      border-color: #c5c9ce;
    }
    .alert-permission {
      border-radius: 6px;
      padding: 18px;
      font-size: 1.1rem;
      line-height: 1.5;
      border: 1px solid #f5d68a;
      background: #fffbf0;
    }
  </style>
</head>
<body>
  <div class="cash-page">
    <div class="cash-card">
      <div class="cash-card-header">
        <h1><i class="fa fa-money"></i> Cash Opening</h1>
        <p>Enter the opening cash amount and the cash account it will be credited to. The amount will update that account&rsquo;s balance.</p>
      </div>
      <?php if (!empty($can_open_close_register)): ?>
      <form id="cash-open-form" role="form">
        <div class="cash-card-body">
          <div class="form-group">
            <label for="opening_amount">Opening amount (posted to account) <span class="text-danger">*</span></label>
            <div class="input-group">
              <span class="input-group-addon"><?= $CI->currency(''); ?></span>
              <input type="text" class="form-control" id="opening_amount" name="opening_amount" placeholder="0.00" value="0" required inputmode="decimal" autocomplete="off">
            </div>
            <small class="help-block text-muted">Amount you are adding to the till (this updates the cash account).</small>
          </div>
          <div class="form-group">
            <label for="drawer_total_at_open">Total in drawer at start (optional)</label>
            <div class="input-group">
              <span class="input-group-addon"><?= $CI->currency(''); ?></span>
              <input type="text" class="form-control" id="drawer_total_at_open" name="drawer_total_at_open" placeholder="Same as above if no carry-over" inputmode="decimal" autocomplete="off">
            </div>
            <small class="help-block text-muted">If there was already cash in the drawer (e.g. carry-over), enter the full amount now. Used for &quot;Expected&quot; at close. Leave blank to use opening amount.</small>
          </div>
          <div class="form-group">
            <label for="account_id">Credit to account</label>
            <select class="form-control" id="account_id" name="account_id" title="Select the cash account to credit">
              <option value="">Select cash account</option>
              <?= get_accounts_select_list(); ?>
            </select>
            <small class="help-block text-muted">Opening amount is posted to this account and increases its balance.</small>
          </div>
          <div class="form-group">
            <label for="opening_note">Note (optional)</label>
            <textarea class="form-control" id="opening_note" name="opening_note" rows="2" placeholder="e.g. Starting shift"></textarea>
          </div>
          <div id="cash-open-msg" class="alert" style="display:none;"></div>
        </div>
        <div class="cash-card-footer">
          <a href="<?= $base_url; ?>dashboard" class="btn btn-default">Cancel</a>
          <button type="submit" class="btn btn-primary" id="btn-open-register">
            <i class="fa fa-check"></i> Open Register
          </button>
        </div>
      </form>
      <?php else: ?>
      <div class="cash-card-body">
        <div class="alert alert-warning alert-permission">
          <i class="fa fa-lock"></i> <strong>Permission required</strong><br>
          You do not have permission to open or close the cash register. Please contact your manager to get the <strong>Cash Register</strong> permission.
        </div>
      </div>
      <div class="cash-card-footer">
        <a href="<?= $base_url; ?>dashboard" class="btn btn-default" style="flex: 1 1 100%;">Back to Dashboard</a>
      </div>
      <?php endif; ?>
    </div>
  </div>
  <script src="<?= $theme_link; ?>plugins/jQuery/jquery-2.2.3.min.js"></script>
  <script src="<?= $theme_link; ?>bootstrap/js/bootstrap.min.js"></script>
  <script>
    var base_url = <?= json_encode(base_url()); ?>;
    $('#cash-open-form').on('submit', function(e) {
      e.preventDefault();
      var $btn = $('#btn-open-register').prop('disabled', true);
      var $msg = $('#cash-open-msg').hide();
      var amount = parseFloat($('#opening_amount').val().replace(/,/g, '')) || 0;
      var note = $('#opening_note').val();
      var accountId = $('#account_id').val();
      var drawerTotal = $('#drawer_total_at_open').val().replace(/,/g, '');
      if (amount > 0 && !accountId) {
        $msg.removeClass('alert-success').addClass('alert-danger').html('Please select the cash account to credit when opening amount is greater than 0.').show();
        $btn.prop('disabled', false);
        return;
      }
      $.post(base_url + 'cash_register/open_session', { opening_amount: amount, opening_note: note, account_id: accountId || '', drawer_total_at_open: drawerTotal || '', <?= $CI->security->get_csrf_token_name(); ?>: '<?= $CI->security->get_csrf_hash(); ?>' }, function(res) {
        if (res.success) {
          $msg.removeClass('alert-danger').addClass('alert-success').html('<i class="fa fa-check"></i> Register opened. Redirecting to POS...').show();
          setTimeout(function() { window.location.href = base_url + 'pos'; }, 800);
        } else {
          $msg.removeClass('alert-success').addClass('alert-danger').html(res.message || 'Failed to open register.').show();
          $btn.prop('disabled', false);
        }
      }, 'json').fail(function() {
        $msg.removeClass('alert-success').addClass('alert-danger').html('Request failed.').show();
        $btn.prop('disabled', false);
      });
    });
  </script>
</body>
</html>
