@extends('User.layout')

@section('header')
@include('components.header-inner', [
'title' => 'Stock History',
'backUrl' => route('welcome'),
])
@endsection

@section('content')
<style>
    /* ===== Scroll Wrapper ===== */
    .stock-history-wrapper {
        height: calc(100vh - 110px);
        overflow-y: auto;
        padding: 12px;
        scrollbar-width: none;
    }

    .stock-history-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* ===== Day Title ===== */
    .day-title {
        font-size: 15px;
        font-weight: 600;
        margin: 12px 4px;
    }

    /* ===== Stock Card ===== */
    .stock-card {
        background: #fff;
        border-radius: 16px;
        padding: 14px;
        margin-bottom: 14px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    }

    .stock-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .stock-time {
        font-size: 11px;
        color: #999;
    }

    .stock-actions {
        display: flex;
        gap: 14px;
    }

    .edit-btn {
        border: none;
        background: none;
        color: #3aaa35;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .delete-btn {
        border: none;
        background: none;
        font-size: 15px;
        cursor: pointer;
    }

    /* ===== Rows ===== */
    .stock-row {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        margin-bottom: 6px;
    }

    .stock-row span {
        color: #777;
    }

    .stock-row strong {
        font-weight: 600;
    }

    /* ================= MODAL ================= */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .55);
        backdrop-filter: blur(4px);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .modal-box {
        background: #fff;
        width: 90%;
        max-width: 360px;
        border-radius: 18px;
        padding: 22px 20px;
        text-align: center;
        animation: scaleIn .25s ease;
    }

    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(.9);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .modal-box h4 {
        margin-bottom: 8px;
        font-size: 18px;
        font-weight: 700;
    }

    .modal-box p {
        font-size: 14px;
        color: #666;
        margin-bottom: 22px;
    }

    /* ===== Modal Actions ===== */
    .modal-actions {
        display: flex;
        gap: 12px;
    }

    .cancel-btn {
        flex: 1;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #ddd;
        background: #f5f5f5;
        font-weight: 600;
        cursor: pointer;
    }

    .delete-confirm-btn {
        flex: 1;
        padding: 10px;
        border-radius: 10px;
        border: none;
        background: #e53935;
        color: #fff;
        font-weight: 600;
        cursor: pointer;
    }

    .delete-confirm-btn:hover {
        background: #c62828;
    }
</style>

<div class="stock-history-wrapper">

    <div class="day-title">Today({{ $todayCount ?? $rackHistories->count() }})</div>

    <!-- Card -->
    @forelse($stocks as $stock)

    <div class="stock-card">
        <div class="stock-header">
            <div class="stock-time">{{ $stock->created_at->format('d/m/Y H:i:s') }}</div>
            <div class="stock-actions">
                <a href="{{ route('edit_stock_history', $stock->id) }}">
                    <button class="edit-btn">Edit</button>
                </a>
                <button class="delete-btn" data-bs-toggle="modal"
                    data-bs-target="#deletemodal"
                    data-id="{{ $stock->id }}">
                    <svg xmlns="http://www.w3.org/2000/svg"
                        width="24px" height="24px" viewBox="0 0 24 24" fill="none">
                        <path d="M10 12V17" stroke="#ff0000" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M14 12V17" stroke="#ff0000" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M4 7H20" stroke="#ff0000" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M6 10V18C6 19.6569 7.34315 21 9 21H15C16.6569 21 18 19.6569 18 18V10" stroke="#ff0000"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" stroke="#ff0000"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </button>
            </div>
        </div>

        <div class="stock-row"><span>Rack Size</span><strong>{{ $stock->rack_size }}</strong></div>
        <div class="stock-row"><span>Wood Name</span><strong>{{ $stock->wood_name }}</strong></div>
        <div class="stock-row"><span>Rack Number</span><strong>{{ $stock->rack_number }}</strong></div>
        <div class="stock-row"><span>CFT</span><strong>{{ number_format($stock->cft, 2) }}</strong></div>
        <div class="stock-row"><span>Quantity</span><strong>{{ $stock->quantity }}</strong></div>
        <div class="stock-row"><span>Rate</span><strong>{{ number_format($stock->rate, 2) }}</strong></div>
    </div>
    @endforeach
</div>

<!-- ===== DELETE MODAL ===== -->
<div class="modal fade" id="deletemodal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">

            <h4>Delete Rack</h4>
            <form id="DeleteForm" method="POST" action="{{ route('user_delete_stock') }}">
                @csrf
                <input type="hidden" name="id" id="delete_stock_id">
                <p class="text-center">Are you sure you want to delete this stock?</p>

                <div class="modal-actions">
                    <button type="button" class="cancel-btn" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" id="submit_delete" class="delete-confirm-btn">Delete</button>
                </div>

        </div>
    </div>


    <script>
        const deleteModal = document.getElementById('deletemodal');

        deleteModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const rackId = button.getAttribute('data-id');

            document.getElementById('delete_stock_id').value = rackId;
        });

        document.getElementById('DeleteForm').addEventListener('submit', function() {
            const btn = document.getElementById('submit_delete');
            btn.disabled = true;
            btn.innerText = 'Deleting...';
        });
    </script>
    @endsection