@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">Suppliers</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">
                Suppliers
              </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="supplier-tab" data-toggle="tab" href="#supplier" role="tab" aria-controls="supplier" aria-selected="true" class="nav-link border-0 text-uppercase font-weight-bold active">Supplier List</a>
        </li>
        <li class="nav-item flex-sm-fill">
            <a id="products-tab" data-toggle="tab" href="#products" role="tab" aria-controls="products" aria-selected="false" class="nav-link border-0 text-uppercase font-weight-bold">Supplier Products</a>
        </li>            
      </ul>
      <div id="myTabContent" class="tab-content">
        <div id="supplier" role="tabpanel" aria-labelledby="supplier-tab" class="tab-pane fade px-4 py-5 show active">
          <div class="mt-3 mb-3">
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#addSupplierModal">+ Add Supplier</button>
          </div>
        <div class="card">
            <div class="card-body">              
                <h5 class="card-title">Melkan Suppliers</h5>
                @if ($errors->any())
                  <div class="alert alert-danger">
                      <ul>
                          @foreach ($errors->all() as $error)
                              <li>{{ $error }}</li>
                          @endforeach
                      </ul>
                  </div>
              @endif
                <div class="table-responsive">
                  <table id="zero_config" class="table table-striped table-bordered">
                    <thead>
                      <tr>
                        <th>#</th>                        
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Contact Person</th>
                        <th>KRA Pin</th>
                        <th>Status</th>                            
                        <th>Action</th>         
                      </tr>
                    </thead>
                    <tbody>
                        @foreach ($suppliers as $supplier)
                        <tr>
                            <th scope="row"><a href="#">{{ $loop->iteration }}</a></th>
                            <td>{{ $supplier->name }}</td>
                            <td>{{ $supplier->email }}</td>
                            <td>{{ $supplier->phone }}</td>
                            <td>{{ $supplier->contact_person }}</td>
                            <td>{{ $supplier->kra_pin }}</td>
                            @if($supplier->status == 'active')
                            <td><span class="badge bg-success">Active</span></td>
                            @else
                            <td><span class="badge bg-danger">Suspended</span></td>
                            @endif
                            <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="#show{{$supplier->id}}">View</a>                                                                              
                                        <a class="dropdown-item" href="#" class="edit" data-toggle="modal" data-target="#edit{{$supplier->id}}">Edit</a> 
                                        <a class="dropdown-item" href="#" class="map" data-toggle="modal" data-target="#map{{$supplier->id}}">Map Products</a>                                     
                                    </div>
                                </div>
                                                                
                            </td>
                        </tr>
                        <!--map supplier-->
                        <div class="modal fade @if($errors->any()) show @endif" id="map{{$supplier->id}}" tabindex="-1" aria-labelledby="approveLabel{{$supplier->id}}" aria-hidden="true">
                          @include('procurement.supplier.products'); 
                      </div>
                        <!--End Map Supplier Modal-->
                            <!--View Modal Scrollable-->
                            <div class="modal fade" id="show{{$supplier->id}}" tabindex="-1" aria-labelledby="showLabel{{$supplier->id}}" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <h5 class="modal-title">View Supplier</h5>
                                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                       
                                        <ul class="list-group list-group-flush">
                                            
                                            <li class="list-group-item"><strong id="loan-titles">Name:</strong> <span id="loan-details">{{$supplier->name}} </span> </li>
                                            <li class="list-group-item"><strong id="loan-titles">Email:</strong> <span id="loan-details">{{$supplier->email}}</span></li>
                                            <li class="list-group-item"><strong id="loan-titles">Phone:</strong> <span id="loan-details">{{$supplier->phone}}</span></li>
                                            <li class="list-group-item"><strong id="loan-titles">Contact Person:</strong> <span id="loan-details">{{$supplier->contact_person}}</span></li>
                                            <li class="list-group-item"><strong id="loan-titles">KRA Pin:</strong><span id="loan-details">{{$supplier->kra_pin}}</span></li>
                                            <li class="list-group-item"><strong id="loan-titles">Payment Terms:</strong><span id="loan-details">{{$supplier->payment_terms}}</span></li>
                                            <li class="list-group-item"><strong id="loan-titles">Payment Details:</strong><span id="loan-details">{{$supplier->supplier_payment_details}}</span></li>
                                            <li class="list-group-item"><strong id="loan-titles">Status:</strong><span id="loan-details">{{$supplier->status}}</span></li>
                                        </ul>                  
                                               
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        
                                    </div>
                                    </div>
                                    
                                </div>
                            </div>                           
                                
                        <!-- End View Modal Dialog Scrollable-->
                        <!-- Edit Modal-->
                        <div class="modal fade @if($errors->any()) show @endif" id="edit{{$supplier->id}}" tabindex="-1" aria-labelledby="approveLabel{{$supplier->id}}" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="approveLabel{{$supplier->id}}">Edit Supplier Details</h5>
                                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="{{ route('suppliers.update', $supplier->id) }}" method="post" enctype="multipart/form-data"> 
                                        @csrf                                                           
                                        @method('PUT')
                                        <div class="row mb-3">
                                            <label for="name" class="col-md-4 col-lg-3 col-form-label">Company Name</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="name" type="text" class="form-control @error('name') is-invalid @enderror" id="name" value="{{$supplier->name}}">
                                            </div>
                                        </div>             
                                        
                                        <div class="row mb-3">
                                            <label for="Phone" class="col-md-4 col-lg-3 col-form-label">Phone</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="phone" type="text" class="form-control @error('phone') is-invalid @enderror" id="phone" value="{{$supplier->phone}}">
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="Email" class="col-md-4 col-lg-3 col-form-label">Email</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="email" type="email" class="form-control @error('email') is-invalid @enderror" id="email" value="{{$supplier->email}}">
                                            </div>
                                        </div>  
                                        <div class="row mb-3">
                                            <label for="contact_person" class="col-md-4 col-lg-3 col-form-label">Contact Person</label>
                                            <div class="col-md-8 col-lg-9">
                                            <input name="contact_person" type="text" class="form-control @error('contact_person') is-invalid @enderror" id="contact_person" value="{{$supplier->contact_person}}">
                                            </div>
                                        </div>     
                                        <div class="row mb-3">
                                            <label for="kra_pin" class="col-md-4 col-lg-3 col-form-label">KRA Pin</label>
                                            <div class="col-md-8 col-lg-9">
                                            <input name="kra_pin" type="text" class="form-control @error('kra_pin') is-invalid @enderror" id="kra_pin" value="{{$supplier->kra_pin}}">
                                            </div>
                                        </div> 
                                        <div class="row mb-3">
                                            <label for="kra_pin" class="col-md-4 col-lg-3 col-form-label">Status</label>
                                            <div class="col-md-8 col-lg-9">
                                                <select name="status" id="status" class="form-select @error('status') is-invalid @enderror">
                                                    <option value="{{$supplier->status}}">{{$supplier->status}}</option>
                                                    <option value="suspended">Suspended</option>
                                                    <option value="active">Active</option>
                                                </select>
                                            </div>
                                        </div>   
                                        <div class="row mb-3">
                                            <label for="payment_terms" class="col-md-4 col-lg-3 col-form-label">Payment Terms</label>
                                            <div class="col-md-8 col-lg-9">
                                                <select class="form-select" id="payment_terms" name="payment_terms" required>
                                                    <option value="{{$supplier->payment_terms}}" selected disabled>{{$supplier->payment_terms}}</option>                        
                                                        <option value="Daily">Daily</option>
                                                        <option value="Weekly">Weekly</option>
                                                        <option value="BiWeekly">BiWeekly</option>
                                                        <option value="Monthly">Monthly</option>
                                                        <option value="Quarterly">Quarterly</option>
                                                </select>
                                            </div>
                                        </div> 
                                        <div class="row mb-3">
                                            <label for="supplier_payment_details" class="col-md-4 col-lg-3 form-label">Supplier Payment Details</label>
                                            <div class="col-md-8 col-lg-9">
                                                <textarea class="form-control @error('supplier_payment_details') is-invalid @enderror" name="supplier_payment_details" id="supplier_payment_details"
                                                cols="10" rows="3">{{$supplier->supplier_payment_details}}</textarea>
                                            </div>  
                                        </div>          
                                                      
                                        <div class="modal-footer">
                                            <div class="form-btn">
                                                <button type="submit" class="submit btn btn-primary">Save Changes</button>
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
                                            </div>
                                        </div>
                                    </form>	
                                </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Edit Modal-->
                        
                    @endforeach         
                    </tbody>
                    
                  </table>
                </div>
            </div>
          </div>
          <div class="modal fade" id="addSupplierModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            @include('procurement.supplier.add')
          </div>
        </div>         
       
        <div id="products" role="tabpanel" aria-labelledby="products-tab" class="tab-pane fade px-4 py-5">
            
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Supplier Products</h5>
              <div class="table-responsive">
                <table id="zero_config" class="table table-striped table-bordered">
                  <thead>
                    <tr>
                        <th>ID</th>
                        <th>Supplier Name</th>
                        <th>Product Name</th>
                        <th>Cost</th>
                        <th>Quantity</th>
                        <th>U.O.M</th>                       
                        <th>Action</th>              
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($supplierProducts as $supplierProduct)
                    <tr>
                        <th scope="row"><a href="#">{{ $loop->iteration }}</a></th>
                        <td>{{$supplierProduct->supplier->name }}</td>
                        <td>{{ $supplierProduct->product->name }}</td>
                        <td>{{ $supplierProduct->cost }}</td>
                        <td>{{ $supplierProduct->quantity }}</td>
                        <td>{{ $supplierProduct->uom->name }}</td>
                        <td>
                            <button class="btn btn-primary" data-toggle="modal" data-target="#updateModal{{ $supplierProduct->id }}">Update</button>
                        </td>
                    </tr>
                @endforeach
                  </tbody>
                  
                </table>
              </div>
            </div>
          </div>
        
  
        </div>
    
        <div class="modal fade" id="updateModal{{ $supplierProduct->id }}" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel{{ $supplierProduct->id }}" aria-hidden="true">
           @include('procurement.supplier.updateproducts')
        </div>
        <!-- Modal for Adding UOM -->
        <div class="modal fade" id="newRequestModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          
        </div>
         <!--end modal for adding UOM-->

         <!-- Modal for Edit UOM -->
         <div class="modal fade" id="editReorderModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          
          
         </div>
          <!--end modal for editing UOM-->
      </div>
      <!-- End rounded tabs -->
    </div> 

  </div>
 
  <script>
  
    $("#zero_config").DataTable();
  </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