@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

@section('content')
<div class="row align-items-center justify-content-between mb-3">
    <!-- Heading -->
    <div class="col-auto">
        <h5 class="mb-0">View Rack</h5>
    </div>

    <!-- Button -->
    <div class="col-auto">
        <a href="{{route('create_rack_details')}}"><button class="btn buttons-collection btn-primary" type="button" aria-haspopup="dialog"
                aria-expanded="false">
                <span class="d-flex align-items-center gap-2">
                    <i class="icon-base ti tabler-plus icon-xs me-sm-1"></i>
                    <span class="d-sm-inline-block">Create Rack</span>
                </span>
            </button></a>
    </div>
</div>

<div class="card">
    <div class="card-datatable table-responsive pt-0">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 px-3">
            <table id="information" class="table">
                <thead>
                    <tr>
                        <th>SNO</th>
                        <th>Wood Name</th>
                        <th>Rack Number</th>
                        <th>Rack Size</th>
                        <th>CFT</th>
                        <th>Quantity</th>
                        <th>Rate</th>
                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($racks as $index => $rack)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $rack->wood_name }}</td>
                        <td>{{ $rack->rack_number }}</td>
                        <td>{{ $rack->rack_size}} </td>
                        <td>{{ $rack->cft}} </td>
                        <td>{{ $rack->quantity}} </td>
                        <td>{{ $rack->rate}} </td>
                        <td>
                            <div class="dropdown d-flex justify-evenly">
                                <a class=" action-btn me-2" href="{{ route('Edit_rack_details', $rack->id)  }}"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"
                                        fill="none">
                                        <path
                                            d="M8.25033 6.41602H5.50033C4.4878 6.41602 3.66699 7.23683 3.66699 8.24935V16.4993C3.66699 17.5119 4.4878 18.3327 5.50033 18.3327H13.7503C14.7628 18.3327 15.5837 17.5119 15.5837 16.4993V13.7493"
                                            stroke="#2F2B3D" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M8.25 13.7499H11L18.7917 5.95822C19.5511 5.19882 19.5511 3.96761 18.7917 3.20822C18.0323 2.44882 16.8011 2.44882 16.0417 3.20822L8.25 10.9999V13.7499"
                                            stroke="#2F2B3D" stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path d="M14.667 4.58398L17.417 7.33398" stroke="#2F2B3D" stroke-opacity="0.7"
                                            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg></a> </a>


                                <a class="action-btn-danger" data-id="{{ $rack->id }}" data-bs-target="#delete_rack" data-bs-toggle="modal" onclick="setDeleteId(this)"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"
                                        fill="none">
                                        <path
                                            d="M19.25 5.48177C16.1975 5.17927 13.1267 5.02344 10.065 5.02344C8.25 5.02344 6.435 5.1151 4.62 5.29844L2.75 5.48177"
                                            stroke="#FF0004" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M7.79199 4.55551L7.99366 3.35467C8.14033 2.48384 8.25033 1.83301 9.79949 1.83301H12.2012C13.7503 1.83301 13.8695 2.52051 14.007 3.36384L14.2087 4.55551"
                                            stroke="#FF0004" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M17.279 8.37891L16.6832 17.6097C16.5824 19.0489 16.4999 20.1672 13.9424 20.1672H8.05737C5.49987 20.1672 5.41737 19.0489 5.31654 17.6097L4.7207 8.37891"
                                            stroke="#FF0004" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path d="M9.46875 15.125H12.5212" stroke="#FF0004" stroke-width="1.5"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M8.70801 11.458H13.2913" stroke="#FF0004" stroke-width="1.5"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                    </svg></a>
                            </div>
                        </td>
                    </tr>
                 
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <!-- Delete Modal -->
    <div class="modal fade" id="delete_rack" 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">
                <h5 class="fw-bold mb-2">Are you sure!!</h5>
                <p class="text-muted">Are you sure you want to delete this rack?</p>

                <form id="DeleteForm" method="POST" action="{{ route('delete_rack_details') }}">
                    @csrf
                    <input type="hidden" name="id" id="delete_rack_id">

                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" id="submit_delete" class="btn btn-danger p-3 ms-2 fw-semibold">
                            Yes, Delete
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection


<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>






<script>
     document.addEventListener("DOMContentLoaded", function() {
        new DataTable('#information');
    });


    function setDeleteId(button) {
        document.getElementById('delete_rack_id').value = button.getAttribute('data-id');
    }

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