@extends('layouts.admin.base-dashboard')

@section('title', 'Status Store')

@section('content')
<div class="container-fluid">
    <h3 class="mb-4">🔒 Status Toko Hari Ini</h3>
    <div class="card shadow-sm">
        <div class="card-body">
            <table class="table table-borderless table-condensed">
                <tr>
                    <td style="width: 8em;">Tanggal</td>
                    <td style="width: 10px;">:</td>
                    <td>{{ \Carbon\Carbon::today()->format('d-m-Y') }}</td>
                </tr>
                <tr>
                    <td>Status Toko</td>
                    <td>:</td>
                    <td>
                        @if ($status->is_open)
                            <span class="badge bg-success text-white">Buka</span>
                        @else
                            <span class="badge bg-danger text-white">Tutup</span>
                        @endif
                    </td>
                </tr>
                <tr>
                    <td>Kas Awal</td>
                    <td>:</td>
                    <td>{{ formatRupiah($status->cash_open) }}</td>
                </tr>
                <tr>
                    <td>Kas Akhir</td>
                    <td>:</td>
                    <td>{{ formatRupiah($status->cash_close) }}</td>
                </tr>
            </table>

            <div class="mt-4">
                @if (!$status->is_open)
                    <form action="{{ route('cashiers.openStore') }}" method="POST" class="confirm-action" data-confirm="Yakin ingin membuka toko?">
                        @csrf
                        <div class="mb-2">
                            <label for="cash_open">Uang Kas Awal (Rp)</label>
                            <input type="text" name="cash_open" id="cash_open" class="form-control @error('cash_open') is-invalid @enderror">

                            @error('cash_open')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <button type="button" class="btn btn-success confirm-btn">Buka Toko</button>
                    </form>
                @else
                    <form action="{{ route('cashiers.closeStore') }}" method="POST" class="confirm-action" data-confirm="Yakin ingin menutup toko?">
                        @csrf
                        <div class="mb-2">
                            <label for="cash_close">Uang Kas Akhir (Rp)</label>
                            <input type="text" name="cash_close" id="cash_close" class="form-control @error('cash_close') is-invalid @enderror">

                             @error('cash_close')
                                <small class="text-danger">{{ $message }}</small>
                             @enderror
                        </div>
                        <button type="button" class="btn btn-danger confirm-btn">Tutup Toko</button>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi -->
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmModalLabel">Konfirmasi</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
      </div>
      <div class="modal-body">
        <p id="confirmMessage">Apakah Anda yakin?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-primary" id="confirmSubmit">Konfirmasi</button>
      </div>
    </div>
  </div>
</div>
@endsection

@push('script')
<script>
$(document).ready(function() {
    function formatRibuan(angka) {
        angka = angka.replace(/[^\d]/g, '');
        if (angka === '') return '';
        return angka.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    }

    function cleanNumber(str) {
        return (str || '').replace(/\./g, '');
    }

    // Format angka ribuan di input
    $('#cash_open, #cash_close').on('input', function(e) {
        let cursorPos = this.selectionStart;
        let originalLength = this.value.length;

        let value = $(this).val().replace(/[^\d]/g, '');
        let formatted = formatRibuan(value);
        $(this).val(formatted);

        let newLength = formatted.length;
        this.selectionEnd = this.selectionStart = cursorPos + (newLength - originalLength);
    });

    let formToSubmit = null;

    // Klik tombol konfirmasi di form (Buka/Tutup)
    $('.confirm-btn').on('click', function(e) {
        e.preventDefault();
        formToSubmit = $(this).closest('form');
        let message = formToSubmit.data('confirm') || 'Apakah Anda yakin?';
        $('#confirmMessage').text(message);
        $('#confirmModal').modal('show');
    });

    // Klik Konfirmasi di modal
    $('#confirmSubmit').on('click', function() {
        if (formToSubmit) {
            if (formToSubmit.find('#cash_open').length) {
                formToSubmit.find('#cash_open').val(cleanNumber(formToSubmit.find('#cash_open').val()));
            }
            if (formToSubmit.find('#cash_close').length) {
                formToSubmit.find('#cash_close').val(cleanNumber(formToSubmit.find('#cash_close').val()));
            }
            formToSubmit.submit();
            formToSubmit = null;
            $('#confirmModal').modal('hide');
        }
    });

    // Klik Batal di modal (Bootstrap 4 modal API)
    $('#confirmModal .btn-secondary').on('click', function() {
        formToSubmit = null;
        $('#confirmModal').modal('hide');
    });
});
</script>
@endpush