@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Trade Inventory'])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header" >
                    <h5><b>{{$branches->branch_name}} <br>[{{$branches->branch_code}}]</b></h5>
                        <ol class="breadcrumb breadcrumb-links pb-2" >
                            <li class="breadcrumb-item " style="font-size: 20px;"><a href="{{ route('trade.index') }}" ><span>List of Branches</span></a></li>
                            <li class="breadcrumb-item active" style="font-size: 20px;" aria-current="page"><a href="" ><b>Trade Inventories</b></a></li>
                        </ol>
                        <!-- <a href="{{ route('trade.createTrade', [$branches->id, $date_today]) }}" class="btn btn-success text-center"><i class="fas fa-plus mr-1"></i> ADD</a> -->
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <ul class="list-group">
                            @foreach($trade_inventories as $trade_inventory)
                            <li class="list-group-item pb-0 mb-1 border border-primary">
                                <div class="row">
                                    <div class="col-lg-3 text-center border-bottom pb-1">
                                        <b>OSA NUMBER:</b><br> {{$trade_inventory->osa_number}}
                                    </div>
                                  
                                    <div class="col-lg-3 text-center border-bottom pb-1">
                                        <b>INVENTORY DATE:</b><br> {{$trade_inventory->date_in}}
                                    </div>
                                    
                                    <div class="col-lg-3 text-center border-bottom pb-1">
                                        <b>CREATED BY:</b><br> {{$trade_inventory->user->fullName()}} </b><br>
                                        <b>DATE CREATED:</b><br> {{$trade_inventory->created_at}}
                                    </div>
                                    <div class="col-lg-3 text-center border-bottom pb-1">
                                      
                                        <b>ACTION:</b> <br>
                                        <a href="{{route('trade.trade', [$branches->id, $trade_inventory->date_in])}}" class="btn btn-icon btn-sm btn-success" type="button" title="Edit">
                                            <span class="btn-inner--icon"><i class="fa fa-eye"></i>EDIT</span>
                                        </a>
                                        <a href="{{route('trade.summary', $trade_inventory->id)}}" class="btn btn-icon btn-sm btn-primary" type="button" title="Edit">
                                            <span class="btn-inner--icon"><i class="fa fa-eye"></i>VIEW</span>
                                        </a>
                                        <!-- <a href="#" class="btn btn-icon btn-sm btn-primary btn-import" data-property-id="{{$trade_inventory->id}}">VIEW</a> -->
                                    </div>
                                </div>
                            </li>
                            @endforeach
                        </ul>
                    </div>  
                    <div class="card-footer">
                        <div class="d-flex justify-content-center">
                            {{$trade_inventories->links()}}
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="{{ route('trade.index') }}" class="btn btn-danger"><i class="fas fa-arrow-left mr-1"></i>Back</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.footers.auth.footer')
    </div>

{{-- MODALS --}}
<div class="modal fade" id="modal-import" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
    <div class="modal-dialog modal- modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
        	
            <div class="modal-body p-0">
                
                <div class="card bg-white shadow border-0">
                        <div class="card-header bg-transparent pb-1">
                            <!-- <div class="text-muted text-center mb-3"><small>Import Branches</small></div> -->
                        </div>
                        <div class="card-body px-lg-5">
                        <div class="col-12 table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                <th>#</th>
                                <th class="align-middle">Product Description</th>
                                <th class="align-middle">Selling Area</th>
                                <th class="align-middle">Bodega</th> 
                                </tr>
                                </thead>
                                <tbody>
                                @php
                                    $num = 0;
                              
                                @endphp
                            
                                
                                </tbody>
                            </table>


                            </div>
                            <div class="text-center">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            
                            </div>

                        </div>
                    </div>
                    
                </div>
            
        </div>
    </div>
</div>

@endsection
@push('js')
<script>
    $(function() {
        $('body').on('click', '.btn-import', function(e) {
            e.preventDefault();
            var id = $(this).data('id');
            $('#show_id').val(id);
            var propertyId = $(this).data('property-id');
            // Set the property ID in a hidden input inside the modal
            $('#modal-import #property_id').val(propertyId);
            $('#modal-import').modal('show');
        });
    });
</script>
@endpush