@extends('layouts.layout')

@section('content')
    <div class="main-panel">
 
        @include('layouts.component.navbar')
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header card-header-primary">
{{--                                <button onclick="md.showNotification('bottom','center')">asdasd</button>--}}
                                <h4 class="card-title ">View Data @if($dat->count() > 0 )
                                    <a href="javascript:void(0);"  onclick="myfunc()">
                                <button class="btn btn-warning">Download</button></a>@endif</h4>
                            </div>
                            
                            
                            <div class="card-body">
                                
                                <form action="" id="dateFilter">
                                    <input class="form-control custom-box" type="date" name="start_date" value="" id="start_date" />
                                    <input class="form-control custom-box" type="date" name="end_date" value="" id="end_date" />
                                    <input type="submit" name="submit" class="btn btn-primary" value="search" />
                                </form>
<!-- {{ route('download.data') }} -->
                                <div class="table-responsive">
                                    <table class="table" id="example">
                                        <thead class=" text-primary">
                                        <th>
                                            
                                        </th>
                                        <th>
                                            S.No
                                        </th>
                                        <th>
                                            Date Of Purchase
                                        </th>
                                        <th>
                                            Item Type
                                        </th>
                                        <th>
                                            Name of Item
                                        </th>
                                        <th>
                                            Department
                                        </th>
                                        <th>
                                            Issued to (UserName)
                                        </th>
                                        <th>
                                            Unique Id
                                        </th>
                                        <th>
                                            Price
                                        </th>
                                        <th>
                                            Purchase Order No
                                        </th>
                                        <th>
                                            Stock Register No-Page no (BRR)
                                        </th>
                                        <th>
                                            Action
                                        </th>
                                        </thead>
                                        <tbody>
                                        @if(!empty($dat))    
                                        @foreach($dat as $data)
                                        <tr>
                                            <td><input type="checkbox" name="data_id[]" class="data_id" data-id="" value=""</td>
                                            <td>{{ $data->index + 1 }}</td>
                                            <td>{{ $data->dateOfPurchase }}</td>
                                            <td>{{ $data->type }}</td>
                                            <td>{{ $data->name }}</td>
                                            <td>{{ $data->department }}</td>
                                            <td>{{ $data->user }}</td>
                                            <td>{{ $data->idSecond }}</td>
                                            <td>{{ $data->price }}</td>
                                            <td>{{ $data->purchase_order_no }}</td>
                                            <td>{{ $data->stock_register_no }}</td>
                                            @php
                                                $dataForCode = 'Date Of Purchase: ' . $data->dateOfPurchase . ' | ' . "Name: ". $data->name . ' | ' .  'User : ' . $data->user . ' | Id:' . $data->id;
                                            @endphp
                                            <td>
                                                <button type="button" class="btn btn-primary action-btn" data-toggle="modal" data-target="#barCode{{ $data->id }}">
                                                    View Bar Code
                                                </button>
                                                <button type="button" class="btn btn-danger action-btn" data-toggle="modal" data-target="#cancelBarCode{{ $data->id }}">
                                                    Cancel
                                                </button>
                                                <div class="modal fade" id="cancelBarCode{{ $data->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="exampleModalLabel">Cancel</h5>
                                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                                <form action="{{ route('cancel.data',['id'=>$data->id]) }}" method="post">
                                                            <div class="modal-body text-center" >
                                                              <h3>Are You sure you want to cancel</h3>
                                                                    @csrf
                                                                    <input type="hidden" name="dataId">
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                                                                <button type="submit" class="btn btn-danger">Yes</button>
                                                            </div>
                                                                </form>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="modal fade" id="barCode{{ $data->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title" id="exampleModalLabel">Barcode</h5>
                                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body text-center" >

                                                           

                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                        @else
                                            <tr>
                                                <td colspan="7" class="text-center"><h3>No Data Found</h3></td>
                                            </tr>
                                        @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
                                          
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <form action="{{ route('qr.data') }}" id="formSubmit" method="post">
                    @csrf
                    <input type="hidden" name="data_id" id="dataId" value="" >
                        <div class="modal-body">
                            How Many Duplicated QR codes / Row ?
                            <div class="col-md-6">
                                <div class="form-group">
                                    <select class="form-control" id="qr_code" name="qr_code">
                                        <option value="2">2 QR Codes</option>
                                        <option value="4">4 QR Codes</option>
                                        <option value="6">6 QR Codes</option>
                                    </select>
                                </div>
                            </div> 
                        </div>
                        <div class="modal-footer">
                            <button type="button" onclick="submitData();" class="btn btn-danger">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
  
        <style>
            .dt-buttons{
                float:left !important;    
            }
            
            #example_filter{
                float: right !important;
            }
            
            .custom-box{
                background:white;
                border: 1px solid #d2d2d2;
                margin: 8px 10px 0px 0px;
                width: 20%;
                float: left;
            }
            
            .action-btn{
                padding: 6px 12px !important;
            }
        </style>
        
        @include('layouts.component.footer')
        @section('page-script')
        <script type="text/javascript">
        $(document).ready(function() {
            
            $('#example').DataTable( {
                dom: 'Bfrtip',
                pageLength: "100",
                buttons: [
                    'excelHtml5',
                    'pdfHtml5'
                ]
            } );
        } );
        
          function myfunc() {
            $('#myModal').modal('show');
          }
          
          function submitData(){
            //   alert("here");
            //   alert($(".data_id").val());
            var idstr = "";
            if($(".data_id").prop('checked') == true){
              var idstr = $('.data_id:checked').map(function() {return this.value;}).get().join(',');
            //   alert(idstr);
            }  
            $("#dataId").val(idstr);
            $("#formSubmit").submit();  
          }
        </script>
            @endsection
    </div>
@endsection