@extends('layouts.app')
@php
    use Carbon\Carbon;
@endphp
@push('scripts')
<script src="{{ asset('assets/vendor/sweetalerts/sweetalert2.min.js') }}"></script>
	
@endpush
@section('content')
<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Page Heading -->
    <div>
        <h1 class="h3 mb-2 text-gray-800">Supplier List</h1>
        <a href="{{ route('accounts.add-supplier') }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i
            class="fas fa-plus fa-sm text-white-50"></i>Add New</a>
            <br>
            <hr>
    </div>
    

    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Supplier List</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <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-bs-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-bs-toggle="modal" data-bs-target="#show{{$supplier->id}}">View</a>                                                                              
                                        <a class="dropdown-item" href="#" class="edit" data-bs-toggle="modal" data-bs-target="#edit{{$supplier->id}}">Edit</a>                                      
                                    </div>
                                </div>
                                                                
                            </td>
                        </tr>
                            <!--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-bs-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">Status:</strong><span id="loan-details">{{$supplier->status}}</span></li>
                                        </ul>                  
                                               
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-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-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="{{ route('accounts.edit-supplier', $supplier->id) }}" method="post" enctype="multipart/form-data"> 
                                        @csrf                                                           

                                        <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="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-bs-dismiss="modal">Close</button> 
                                            </div>
                                        </div>
                                    </form>	
                                </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Edit Modal-->
                    @endforeach             
                                               
                    </tbody>
                </table>
            </div>
        </div>
    </div>


@endsection
@pushOnce('scripts')

@if (session('success'))
    <script>
        Swal.fire('Supplier Created', '{{ session('success') }}', 'success');
    </script>
@endif


@if (count($errors) > 0)
    <script>
        $( document ).ready(function() {
            $('#edit{{$supplier->id}}').modal('show');
        });
    </script>
	@endif
@endpushOnce