@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> <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="product_info"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a></button>Stock Request</h5>
    </div>

    <!-- Button -->
    <div class="col-auto">
        <button id="exportstockBtn" class="btn buttons-collection btn-label-secondary dropdown-toggle me-4" tabindex="0"
            aria-controls="DataTables_Table_0" type="button" aria-haspopup="dialog" aria-expanded="false"><span><span
                    class="d-flex align-items-center gap-2"><i class="icon-base ti tabler-upload icon-xs me-sm-1"></i>
                    <span class="d-sm-inline-block">Export</span></span></span></button>
    </div>
</div>

<div class="card">
    <div class="card-datatable table-responsive pt-0">

        <div class="justify-content-between dt-layout-table">
            <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                <table id="request" class="table">
                    <thead>
                        <tr>
                            <th>SNO</th>
                            <th>DATE</th>
                            <th>STAFF NAME</th>
                            <th>PRODUCT CODE</th>
                            <th>NAME</th>
                            <th>DESCRIPTION</th>
                            <th>Image</th>
                            <th>ACTION</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($products as $index => $product)

                        <tr>

                            <td>{{ $index+1}}</td>
                            <td>{{ $product->created_at->format('d-m-Y h:i A') }}</td>
                            <td>{{ $product->staff_name  }}</td>
                            <td>{{ $product->product_id  }}</td>
                            <td>{{ $product->name  }}</td>
                            <td>{{ $product->description }}
                            </td>
                            <td>
                                @if(!empty($product->images))
                                @php
                                $images = json_decode($product->images, true); // decode JSON to array
                                @endphp

                                @if(is_array($images))
                                @foreach($images as $image)
                                <img src="{{ asset($image) }}" width="32" height="42" style="margin-right:5px;" alt="Product Image">
                                @endforeach
                                @else
                                <span>No Images</span>
                                @endif
                                @else
                                <span>No Images</span>
                                @endif
                            </td>


                            <td>
                                <div class="dropdown d-flex justify-evenly">

                                    <a class="action-btn-primary me-2" data-bs-target="#accept_product"
                                        data-bs-toggle="modal"
                                        data-id="{{ $product->id }}"
                                        onclick="setAcceptId(this)">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none">
                                            <path
                                                d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
                                                stroke="url(#paint0_linear_307_15076)" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M7.75 11.9999L10.58 14.8299L16.25 9.16992"
                                                stroke="url(#paint1_linear_307_15076)" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                            <defs>
                                                <linearGradient id="paint0_linear_307_15076" x1="12" y1="2" x2="12"
                                                    y2="22" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#33B02C" stop-opacity="0.7" />
                                                    <stop offset="1" stop-color="#33B02C" />
                                                </linearGradient>
                                                <linearGradient id="paint1_linear_307_15076" x1="12" y1="9.16992"
                                                    x2="12" y2="14.8299" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#33B02C" stop-opacity="0.7" />
                                                    <stop offset="1" stop-color="#33B02C" />
                                                </linearGradient>
                                            </defs>
                                        </svg>
                                    </a>
                                    <!-- <a class="action-btn me-2" href="{{ route('View_stock_request_details', $product->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 class="action-btn-danger me-2"
                                        data-bs-target="#delete_request"
                                        data-id="{{ $product->id }}"
                                        onclick="setDeleteId(this)"
                                        data-bs-toggle="modal">
                                        <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>

                    </tbody>
                    @endforeach
                </table>
            </div>
        </div>
    </div>
</div>


<!-- Form -->
<div class="modal fade" id="accept_product" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content rounded-4 p-4 py-5">
            <h5 class="fw-bold mb-2  text-center">Are you sure!!</h5>
            <p class="text-muted  text-center">Are you confirm to accept ?</p>
            <form id="AcceptForm" method="POST" action="{{ route('accept_request') }}">
                @csrf
                <input type="hidden" name="id" id="accept_product_id">

                <div class="row">
                    <div class="col-lg-3 mb-3">
                        <label class="form-label">MRP</label>
                        <input type="text" name="mrp" id="mrp" class="form-control" value="{{ old('mrp') }}">
                        @error('mrp') <div class="text-danger">{{ $message }}</div> @enderror

                    </div>

                    <div class="col-lg-3 mb-3">
                        <label class="form-label">Second Price</label>
                        <input type="text" name="second_price" id="second_price" class="form-control" value="{{ old('second_price') }}">
                        @error('second_price') <div class="text-danger">{{ $message }}</div> @enderror

                    </div>

                    <div class="col-lg-3 mb-3">

                        <label class="form-label">Final Price</label>
                        <input type="text" name="final_price" id="final_price" class="form-control" value="{{ old('final_price') }}">
                        @error('final_price') <div class="text-danger">{{ $message }}</div> @enderror

                    </div>

                    <div class="col-lg-3 mb-3">

                        <label class="form-label">Tax</label>
                        <input type="text" name="tax" id="tax" class="form-control" value="{{ old('tax') }}">
                        @error('tax') <div class="text-danger">{{ $message }}</div> @enderror

                    </div>
                </div>

                <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  me-3" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="submit_accept" class="btn btn-primary p-3 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Delete Modal -->
<div class="modal fade" id="delete_request" 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 request?</p>

            <form id="DeleteForm" method="POST" action="{{ route('delete_request') }}">
                @csrf
                <input type="hidden" name="id" id="delete_request_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>

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

<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>
    document.getElementById("exportstockBtn").addEventListener("click", function() {
        let table = document.getElementById("request");
        let rows = Array.from(table.querySelectorAll("tr"));

        let csv = rows.map(row => {
            let cells = Array.from(row.querySelectorAll("th, td"));
            return cells.map(cell => `"${cell.innerText}"`).join(",");
        }).join("\n");

        let blob = new Blob([csv], {
            type: "text/csv"
        });
        let url = URL.createObjectURL(blob);

        let a = document.createElement("a");
        a.href = url;
        a.download = "stock_request.csv"; // File name
        a.click();

        URL.revokeObjectURL(url);
    });

    //accept product
    function setAcceptId(button) {
        document.getElementById('accept_product_id').value = button.getAttribute('data-id');
    }

    document.getElementById('AcceptForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_accept');
        btn.disabled = true;
        btn.innerText = 'processing...';
    });

    //delete request
    function setDeleteId(button) {
        document.getElementById('delete_request_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>

@endsection