@extends('layouts.app')

@section('content')

<div class="page-breadcrumb">
    <div class="row">
        <div class="col-12 d-flex no-block align-items-center">
            <h4 class="page-title">Purchases</h4>
            <div class="ms-auto text-end">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Purchases</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="container py-5">


    <div class="bg-white rounded shadow mb-5">
        <!-- Rounded tabs -->
        <ul id="myTab" role="tablist" class="nav nav-tabs nav-pills flex-column flex-sm-row text-center bg-light border-0 rounded-nav">
            <li class="nav-item flex-sm-fill">
                <a id="add-tab" data-toggle="tab" href="#add" role="tab" aria-controls="add" aria-selected="true"
                    class="nav-link border-0 text-uppercase font-weight-bold active">Add</a>
            </li>
            <li class="nav-item flex-sm-fill">
                <a id="request-tab" data-toggle="tab" href="#request" role="tab" aria-controls="request"
                    aria-selected="false" class="nav-link border-0 text-uppercase font-weight-bold">Requests</a>
            </li>
            <li class="nav-item flex-sm-fill">
                <a id="purchases-tab" data-toggle="tab" href="#purchases" role="tab" aria-controls="purchases"
                    aria-selected="false" class="nav-link border-0 text-uppercase font-weight-bold">Purchases</a>
            </li>
            <li class="nav-item flex-sm-fill">
                <a id="returns-tab" data-toggle="tab" href="#returns" role="tab" aria-controls="returns"
                    aria-selected="false" class="nav-link border-0 text-uppercase font-weight-bold">Returns</a>
            </li>
            <li class="nav-item flex-sm-fill">
                <a id="pending-tab" data-toggle="tab" href="#pending" role="tab" aria-controls="pending"
                    aria-selected="false" class="nav-link border-0 text-uppercase font-weight-bold">Pending Delivery</a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div id="add" role="tabpanel" aria-labelledby="add-tab" class="tab-pane fade px-4 py-5 show active">

                <div class="card">
                    <div class="card-body">
                        <form class="row g-3" action="" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group col-6">
                                <label for="store">Store</label>
                                <select class="form-select" id="store_id" name="store_id" required>
                                    <option value="" selected disabled>Select Store</option>
                                    @foreach ($stores as $store)
                                    <option value="{{ $store->id }}">{{ $store->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-6">
                                <label for="supplier">Select Supplier</label>
                                <select class="form-select" id="supplier_id" name="supplier_id" required>
                                    <option value="" selected disabled>Select Supplier</option>
                                    @foreach ($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-12">
                                <label for="request_note" class="form-label">Note</label>
                                <textarea class="form-control" name="request_note" id="request_note" cols="10"
                                    rows="3"></textarea>
                            </div>

                            <button type="button" class="btn-dark" id="add-product">Add Product</button>
                            <div id="product-details">
                                <!-- Product fields will be added dynamically here -->
                            </div>

                            <div class="text-center">
                                <button type="submit" class="btn btn-primary">Submit</button>
                                <button type="reset" class="btn btn-secondary">Reset</button>
                            </div>
                        </form>

                    </div>
                </div>

            </div>

            <div id="request" role="tabpanel" aria-labelledby="request-tab" class="tab-pane fade px-4 py-5">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Requests</h5>
                        <div class="table-responsive">
                            <table id="zero_config_requests"
                                class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>Request No.</th>
                                        <th>Store</th>
                                        <th>Supplier</th>
                                        <th>Total</th>
                                        <th>Status</th>
                                        <th>Initiated By</th>
                                        <th>Created At</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($purchaseRequests as $request)
                                    <tr>
                                        <td>REQ #{{ $request->id }}</td>
                                        <td>{{ $request->store->name }}</td>
                                        <td>{{ $request->supplier->name }}</td>
                                        <td>{{ number_format($request->calculateTotalCost()) }}</td>
                                        <td>{{ $request->status }}</td>
                                        <td>{{ $request->creator->name }}</td>
                                        <td>{{ $request->created_at }}</td>
                                        <td>
                                            <div class="dropdown">
                                                <div class="cursor-pointer font-24 dropdown-toggle"
                                                    data-toggle="dropdown"><i class='fas fa-ellipsis-h'></i>
                                                </div>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a class="dropdown-item" href="#" class="view"
                                                        data-toggle="modal" data-target="#view{{ $request->id }}">View</a>
                                                    <a class="dropdown-item" href="#" class="edit"
                                                        data-toggle="modal" data-target="#edit{{ $request->id }}">Edit</a>
                                                    @if($request->status == 'pending')
                                                    <a class="dropdown-item" href="#" class="approve"
                                                        data-toggle="modal" data-target="#approve{{ $request->id }}">Approve</a>
                                                    @endif
                                                    @if($request->status == 'approved')
                                                    <a class="dropdown-item" href="#" class="receive"
                                                        data-toggle="modal" data-target="#receive{{ $request->id }}">Receive</a>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                   

                                    @endforeach
                                </tbody>
                            </table>
                         
                        </div>
                    </div>
                </div>
                @foreach($purchaseRequests as $request)
                <!-- Modal for Approving Purchase Request -->
                <div class="modal fade" id="approve{{ $request->id }}" tabindex="-1" role="dialog"
                    aria-labelledby="approveModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="approveModalLabel">Approve Purchase
                                    Request</h5>
                                <button type="button" class="close" data-dismiss="modal"
                                    aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <p>Are you sure you want to approve this purchase request?</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary"
                                    data-dismiss="modal">Cancel</button>
                                <form
                                    method="POST"
                                    action="{{ route('purchase-request.approve', $request->id) }}">
                                    @csrf
                                    @method('PUT')
                                    <button type="submit" class="btn btn-primary">Approve</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach

                @foreach($purchaseRequests as $request)
                <div class="modal fade" id="receive{{ $request->id }}" tabindex="-1" role="dialog"
                    aria-labelledby="receiveModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="receiveModalLabel">Receive Purchase
                                    Request Items</h5>
                                <button type="button" class="close" data-dismiss="modal"
                                    aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">

                                <form method="POST"
                                    action="{{ route('purchase-request.receive', $request->id) }}">
                                    @csrf
                                    @method('PUT')
                                    <div class="form-group">
                                        <label for="purchase_request_id">Purchase Request ID</label>
                                        <input type="text" name="purchase_request_id"
                                            value="{{ $request->id }}" readonly
                                            class="form-control">
                                    </div>
                                    <table class="table table-striped" id="editTable{{ $request->id }}">
                                        <thead>
                                            <tr>
                                                <th>Item Name</th>
                                                <th>Cost</th>
                                                <th>Quantity</th>
                                                <th>Quantity for Later Delivery</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($request->items as $item)
                                            <tr>
                                                <td>{{ $item->product->name }}</td>
                                                <td>
                                                    <input type="number"
                                                        name="items[{{ $item->id }}][cost]"
                                                        value="{{ $item->cost }}">
                                                </td>
                                                <td>
                                                    <input type="number"
                                                        name="items[{{ $item->id }}][quantity]"
                                                        value="{{ $item->quantity }}">
                                                </td>
                                                <td>
                                                    <input type="number"
                                                        name="items[{{ $item->id }}][quantities_for_later_delivery]"
                                                        value="0">
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-dismiss="modal">Close</button>
                                        <button type="submit" class="btn btn-primary">Receive
                                            Items</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach

                <script>
                    function prepareItems{{ $request->id }}() {
                        const items = @json($request->items);
                        document.getElementById('items{{ $request->id }}').value = JSON.stringify(items);
                    }
                </script>

            <!-- Modal Structure -->
            @foreach($purchaseRequests as $request)
            <div class="modal fade" id="view{{ $request->id }}" tabindex="-1" role="dialog"
                aria-labelledby="viewModal{{ $request->id }}" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Purchase Items - Request #{{ $request->id }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <h5>Supplier Details</h5>
                            <h6>Name: {{ $request->supplier->name }}</h6>
                            <h6>Email: {{ $request->supplier->email }}</h6>
                            <h6>Phone: {{ $request->supplier->phone }}</h6>

                            <div class="table-responsive">
                                <table class="table table-striped table-bordered"
                                    id="view-purchase-items{{ $request->id }}">
                                    <thead>
                                        <tr>
                                            <th>Product</th>
                                            <th>Unit of Measure</th>
                                            <th>Cost</th>
                                            <th>Tax Type</th>
                                            <th>Quantity</th>
                                            <th>Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($request->items as $item)
                                            <tr>
                                                <td>{{ $item->product->name }}</td>
                                                <td>{{ $item->uom->name }}</td>
                                                <td>{{ number_format($item->cost) }}</td>
                                                <td>{{ $item->tax_type }}</td>
                                                <td>{{ $item->quantity }}</td>
                                                <td>{{ number_format($item->cost * $item->quantity) }}</td>
                                            </tr>
                                        @endforeach
                                        @php
                                            $totalCost = $request->items->sum(function ($item) {
                                                return $item->cost * $item->quantity;
                                            });
                                        @endphp
                                        <!-- Display the total row -->
                                        <tr>
                                            <td colspan="5"><strong>Total</strong></td>
                                            <td><strong>{{ number_format($totalCost) }}</strong></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
        @foreach($purchaseRequests as $request)
            <div class="modal fade" id="edit{{ $request->id }}" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Edit Purchase Items - Request #{{ $request->id }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <!-- Add your form for editing purchase items here -->
                            <form method="POST" action="{{ route('purchases.update', $request->id) }}">
                                @csrf
                                @method('PUT')
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Product</th>
                                                <th>UOM</th>
                                                <th>Cost</th>
                                                <th>Tax Type</th>
                                                <th>Quantity</th>
                                                <th>Action</th>                                        
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($request->items as $item)
                                                <tr>
                                                    <td>
                                                        <input type="text" name="products[{{ $item->id }}][product_id]" value="{{ $item->product->name }}">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="products[{{ $item->id }}][uom_id]" value="{{ $item->uom->name }}">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="products[{{ $item->id }}][cost]" value="{{ $item->cost }}">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="products[{{ $item->id }}][tax_type]" value="{{ $item->tax_type }}">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="products[{{ $item->id }}][quantity]" value="{{ $item->quantity }}">
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-danger" data-delete-button="edit-modal" onclick="deleteProductInEditModal({{ $item->id }})">Delete</button>
                                                    </td>
                                                    
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                        
                                <!-- Add a button to save changes in the form -->
                                <button type="submit" class="btn btn-primary">Save Changes</button>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save Changes</button>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach    
    </div>
        
        <div id="purchases" role="tabpanel" aria-labelledby="purchases-tab" class="tab-pane fade px-4 py-5">
            
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Purchase Orders</h5>
                <div class="table-responsive">
                  <table id="zero_config" class="table table-striped table-bordered">
                    <thead>
                      <tr>
                          <th>Order No.</th>
                          <th>Store</th>
                          <th>Supplier</th>
                          <th>Total</th>
                          <th>Status</th>
                          <th>Initiated By</th>                      
                          <th>Action</th>              
                      </tr>
                    </thead>
                    <tbody>
                      
                    </tbody>
                    
                  </table>
                </div>
              </div>
            </div>
          
    
          </div>
    
        <div id="returns" role="tabpanel" aria-labelledby="returns-tab" class="tab-pane fade px-4 py-5">
            
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Purchase Returns</h5>
                <div class="table-responsive">
                  <table id="zero_config" class="table table-striped table-bordered">
                    <thead>
                      <tr>
                          <th>Order No.</th>                          
                          <th>Supplier Name</th>
                          <th>Total Amount</th>                        
                          <th>Created At</th>                      
                          <th>Action</th>              
                      </tr>
                    </thead>
                    <tbody>
                      
                    </tbody>
                    
                  </table>
                </div>
              </div>
            </div>
          
    
          </div>
          <div id="pending" role="tabpanel" aria-labelledby="pending-tab" class="tab-pane fade px-4 py-5">
            
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">Pending Delivery</h5>
                <div class="table-responsive">
                  <table id="zero_config" class="table table-striped table-bordered">
                    <thead>
                      <tr>
                          <th>Order No.</th>                          
                          <th>Supplier Name</th>                                                    
                          <th>Initiated By</th>                      
                          <th>Action</th>              
                      </tr>
                    </thead>
                    <tbody>
                      
                    </tbody>
                    
                  </table>
                </div>
              </div>
            </div>          
    
          </div>  
       
      </div>
      <!-- End rounded tabs -->
    </div> 

  </div>
  <script>
    // Modified function name to avoid conflicts
    function deleteProductInEditModal(itemId) {
        const productRow = document.querySelector(`button[data-delete-button="edit-modal"][onclick="deleteProductInEditModal(${itemId})"]`).closest('tr');
        if (productRow) {
            productRow.remove();
        }
    }
</script>

<script>
    const productDetails = document.getElementById('product-details');
    const addProductButton = document.getElementById('add-product');
    let productCounter = 0;

    // Define the table structure with thead and columns
    const tableStructure = `
        <table id="zero_config" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Unit of Measure</th>
                    <th>Cost</th>
                    <th>Tax Type</th>
                    <th>Quantity</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    `;

    addProductButton.addEventListener('click', () => {
        productCounter++;

        const productFields = `
            <tr data-product-row="${productCounter}">
                <td>
                    <select name="products[${productCounter}][product_id]">
                        @foreach ($products->where('can_purchase', '1') as $product)
                            <option value="{{ $product->id }}">{{ $product->name }}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <select name="products[${productCounter}][uom_id]">
                        @foreach ($uoms as $uom)
                            <option value="{{ $uom->id }}">{{ $uom->name }}</option>
                        @endforeach
                    </select>
                </td>
                <td><input type="text" name="products[${productCounter}][cost]"></td>
                <td>
                    <select name="products[${productCounter}][tax_type]">
                        <option value='Withholding'>Withholding</option>
                        <option value='VAT'>VAT</option>
                        <option value='No Tax'>No Tax</option>
                        
                    </select>
                </td>
                <td><input type="text" name="products[${productCounter}][quantity]"></td>
                <td><button class="btn btn-danger" type="button" onclick="deleteProduct(${productCounter})">Delete</button></td>
            </tr>
        `;

        if (productCounter === 1) {
            // If this is the first product, append the entire table structure
            productDetails.innerHTML = tableStructure;
        }

        // Append the product row to the table body
        productDetails.querySelector('tbody').innerHTML += productFields;
    });

    function deleteProduct(row) {
        const productRow = document.querySelector(`[data-product-row="${row}"]`);
        if (productRow) {
            productRow.remove();
        }
    }
</script>


  <script src="{{asset('vendor/sweetalerts/sweetalert2.min.js')}}"></script>

  @if(session('success'))
  <script>
      swal("Success", "{{ session('success') }}", "success");
  </script>
  @endif
  @if ($errors->any())
    <script>
        Swal.fire({
            icon: 'error',
            title: 'Oops... There was an error!',
            html: "<ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>",
        });
    </script>
@endif

@endsection