@extends('User.layout')

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

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

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

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

    .days {
        font-size: 15px;
        font-weight: 600;
        color: #000000;
        margin-top: 10px;
        margin-bottom: 10px;
    }

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

    .rack-row {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        margin-bottom: 6px;
    }

    .rack-actions {
        display: flex;
        justify-content: flex-end;
        gap: 14px;
    }

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

    .delete-btn {
        border: none;
        background: none;
        color: red;
        font-size: 14px;
    }

    /* ===== Modal ===== */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }

    .modal-box {
        width: 90%;
        max-width: 380px;
        background: #fff;
        border-radius: 20px;
        padding: 20px;
    }

    .modal-box h4 {
        text-align: center;
        margin-bottom: 16px;
    }

    label {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
        display: block;
    }

    .input-box {
        width: 100%;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #54bd4e;
        margin-bottom: 14px;
        font-size: 13px;
    }

    .input-box:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(84, 189, 78, .2);
    }

    /* ===== Size Inputs ===== */
    .sizes-wrapper {
        display: flex;
        border: 1px solid #54bd4e;
        border-radius: 8px;
        overflow: hidden;
    }

    .sizes-wrapper input {
        border: none;
        width: 100%;
        text-align: center;
        padding: 10px;
    }

    .sizes-wrapper input:not(:last-child) {
        border-right: 1px solid #54bd4e;
    }

    .sizes-labels {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: #777;
        margin-bottom: 16px;
    }

    /* ===== Buttons ===== */
    .modal-actions {
        display: flex;
        gap: 10px;
    }

    .cancel-btn {
        flex: 1;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #54bd4e;
        background: #fff;
        color: #54bd4e;
    }

    .update-btn {
        flex: 1;
        padding: 10px;
        border-radius: 10px;
        border: none;
        color: #fff;
        background: linear-gradient(180deg, #33b02c, #2e7d32);
    }

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

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

<div class="rack-history-wrapper">
    <div class="days">Today({{ $todayCount ?? $rackHistories->count() }})</div>
    @forelse($rackHistories as $rack)

    <div class="rack-card">
        <div class="d-flex justify-content-between mb-2">
            <div class="rack-time"> {{ $rack->created_at->format('d/m/Y H:i:s') }}</div>
            <div class="rack-actions">

                <button class="edit-btn"
                    data-bs-toggle="modal"
                    data-bs-target="#EditRackModal"
                    data-id="{{ $rack->id }}">Edit</button>


                <button class="delete-btn" data-bs-toggle="modal"
                    data-bs-target="#deletemodal"
                    data-id="{{ $rack->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="rack-row"><span>Wood Name</span><strong>{{ $rack->wood_name }}</strong></div>
        <div class="rack-row"><span>Rack Number</span><strong>{{ $rack->rack_number }}</strong></div>
        <div class="rack-row"><span>Rack Size</span><strong> {{ $rack->length }} × {{ $rack->width }} × {{ $rack->thickness }}
            </strong></div>
    </div>
    @endforeach

</div>

<!-- ================= EDIT MODAL ================= -->
<div class="modal fade" id="EditRackModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content p-3">

            <h4>Edit Rack</h4>
            <form id="editRackForm" action="{{ route('user_edit_rack_form') }}" method="POST">
                @csrf

                <input type="hidden" name="rack_id" id="edit_rack_id">

                <label>Wood Name</label>
                <input type="text" name="wood_name" id="editWood" class="input-box">

                <label>Rack Number</label>
                <input type="text" name="rack_number" id="editRack" class="input-box">

                <label>Sizes</label>
                <div class="sizes-wrapper">
                    <input type="text" name="length" id="editLength">
                    <input type="text" name="width" id="editWidth">
                    <input type="text" name="thickness" id="editThickness">
                </div>

                <div class="sizes-labels">
                    <span>Length</span>
                    <span>Width</span>
                    <span>Thickness</span>
                </div>

                <div class="modal-actions">
                    <button type="button" class="cancel-btn" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="update-btn">Update</button>
                </div>
            </form>

        </div>
    </div>
</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_rack') }}">
                @csrf
                <input type="hidden" name="id" id="delete_rack_id">
                <p class="text-center">Are you sure you want to delete this rack?</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 EditRackModal = document.getElementById('EditRackModal');
        const submitBtn = EditRackModal.querySelector('button[type="submit"]');

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

            document.getElementById('edit_rack_id').value = rackId;

            submitBtn.disabled = true;
            submitBtn.innerText = 'Loading...';

            fetch(`/user/get_rack/${rackId}`)
                .then(res => res.json())
                .then(res => {
                    const r = res.data;
                    if (!r) return;

                    EditRackModal.querySelector('[name="wood_name"]').value = r.wood_name ?? '';
                    EditRackModal.querySelector('[name="rack_number"]').value = r.rack_number ?? '';
                    EditRackModal.querySelector('[name="length"]').value = r.length ?? '';
                    EditRackModal.querySelector('[name="width"]').value = r.width ?? '';
                    EditRackModal.querySelector('[name="thickness"]').value = r.thickness ?? '';

                    submitBtn.disabled = false;
                    submitBtn.innerText = 'Update';
                })
                .catch(err => {
                    console.error('Fetch error:', err);
                    submitBtn.disabled = false;
                    submitBtn.innerText = 'Update';
                });
        });
    </script>


    <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_rack_id').value = rackId;
        });

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


    @endsection