@extends('layouts.master')
@section('content')

<style>
    /* Scrollbar Track */
    .table-responsive::-webkit-scrollbar {
        width: 10px;
        /* Set the width of the scrollbar */
    }

    /* Scrollbar Thumb */
    .table-responsive::-webkit-scrollbar-thumb {
        background: #888;
        /* Color of the thumb */
        border-radius: 5px;
        /* Round the corners of the thumb */
    }

    /* Scrollbar Track on Hover */
    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #555;
        /* Change color on hover */
    }

    /* Scrollbar Track */
    .table-responsive::-webkit-scrollbar-track {
        background: #f1f1f1;
        /* Color of the track */
    }

    /* Scrollbar Track on Hover */
    .table-responsive::-webkit-scrollbar-track:hover {
        background: #ddd;
        /* Change color on hover */
    }

    .table-responsive {
        cursor: pointer;
    }
</style>
<!-- Main Content-->
<div class="main-content side-content pt-0">

    <div class="main-container container-fluid">
        <div class="inner-body">

            <!-- Page Header -->
            <div class="page-header">
                <div>
                    <h2 class="main-content-title tx-24 mg-b-5">Transaction</h2>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Transaction</li>
                    </ol>
                </div>
                <div>
                    <!-- <button type="button" class="btn btn-white btn-icon-text my-2 me-2">
                            <i class="fe fe-download me-2"></i> Import
                        </button> -->
                    <a href="{{route('fetch.transaction.report')}}"> <i class="fe fe-download me-2">Download
                            Report</i></a>

                    <!-- <a class="btn btn-success my-2 btn-icon-text" data-bs-target="#modal-report" data-bs-toggle="modal"
                        href=""> <i class="fe fe-download-cloud me-2"></i> Reports</a>
                       -->
                </div>

            </div>

            @if(session('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
            @endif


            <div class="row row-sm">
                <div class="col-lg-12 col-md-12">
                    <div class="card custom-card">
                        <form method="post" action="{{route('search.invoice')}}">
                            @csrf
                            <div class="card-body">
                                <div class="row row-sm">
                                    <div
                                        class="col-md-12 d-flex justify-content-end align-items-center col-lg-12 col-xl-12">
                                        <div class="col-sm-5 ">
                                            <label class="">Invoice Number</label>
                                            <select class="form-control" name="invoice_no">
                                                <option label="All"></option>
                                                @if(isset($data))
                                                @foreach($data as $d)
                                                <option value="{{$d?$d?->invoice_no:''}}" required>
                                                    {{$d?$d->invoice_no:''}}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>
                                        <div class="col-sm-5 ">
                                            <label class="">Payable Month</label>
                                            <input type="date" name="date" class="form-control" required />

                                        </div>

                                        <div class="mg-t-20 mt-4">
                                            <!-- <a class="btn ripple btn-info" data-bs-target="#scrollingmodal" data-bs-toggle="modal" href="">  <i class="fe fe-edit"></i></a> -->
                                            <button type="submit" class="btn ripple btn-success"><i
                                                    class="fe fe-search"></i></button>
                                            <a class="btn ripple btn-danger ms-2" href="{{route('reset.invoice')}}"><i
                                                    class="fe fe-slash"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>


        <div class="row row-sm">
            <div class="col-lg-12">
                <div class="card custom-card">
                    <div class="card-body">
                        <div>
                            <div
                                class="col-md-12 d-flex justify-content-between align-items-center col-lg-12 col-xl-12">
                                <div class="col-md-3">
                                    <h4>Find Employee Salary Transaction</h4>
                                </div>

                            </div>
                        </div>

                        <div class="table-responsive mt-5">
                            <table class="table table-bordered overflow-scroll" id="exportexample">
                                <thead>
                                    <tr>

                                        <th class="wd-25p">InvoiceNumber</th>
                                        <th class="wd-25p">EmpID</th>
                                        <th class="wd-25p">Name</th>
                                        <th class="wd-25p">From</th>
                                        <th class="wd-25p">AccountNumber </th>
                                        <th class="wd-25p">To</th>
                                        <th class="wd-25p">AccountNumber</th>
                                        <th class="wd-25p">Amount</th>
                                        <th class="wd-25p">Date</th>
                                        <th class="wd-25p">BankName</th>
                                        <th class="wd-25p">TransactionId</th>
                                        <th class="wd-25p">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if(isset($data))
                                    @foreach($data as $dd)
                                    <tr>
                                        <td>{{$dd ? $dd->invoice_no:''}}</td>
                                        <td>{{$dd && $dd->user? $dd->user->employe_id:''}}</td>
                                        <td>{{$dd && $dd->user? $dd->user->name:''}}</td>
                                        <td><span style="background-color:red; color:white;">{{$dd ?
                                                $dd->from_title:''}}</span></td>
                                        <td><span style="background-color:red; color:white;">{{$dd ?
                                                $dd->from_accountnumber:''}}</span></td>
                                        <td><span style="background-color:green; color:white;">{{$dd ?
                                                $dd->to_title:''}}</span></td>
                                        <td><span style="background-color:green; color:white;">{{$dd ?
                                                $dd->to_accountnumber:''}}</span></td>
                                        <td>{{$dd ? $dd->amount:''}}</td>
                                        <td>{{$dd ? $dd->date:''}}</td>
                                        <th>{{$dd ? $dd->bank_name:''}}</th>
                                        <td><strong>{{$dd ? $dd->transaction_id:''}}</strong></td>

                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a class="btn  btn-info ms-2" style="width: 80px;"
                                                    href="{{route('view.slip',$dd?$dd->id:'')}}">Pay Slip</a>
                                                <a class="btn  btn-info ms-2"
                                                    href="{{route('edit.transaction', $dd?$dd->id:'')}}"> <i
                                                        class="fe fe-edit"></i></a>
                                                <a class="btn  btn-danger ms-2"
                                                    href="{{route('delete.transaction',$dd?$dd->id:'')}}"> <i
                                                        class="fe fe-trash"></i></a>
                                            </div>

                                        </td>
                                    </tr>
                                    @endforeach
                                    @endif

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>




                <div class="modal" id="modal-report">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content modal-content-demo">
                            <div class="modal-header">
                                <h6 class="modal-title">Download Report</h6><button aria-label="Close" class="btn-close"
                                    data-bs-dismiss="modal" type="button"></button>
                            </div>
                            <div class="modal-body">
                                <h6>Report Info</h6>
                                <div class='input'>
                                    <label for="" class='mt-4'>Employee Id</label>
                                    <select class="form-select" aria-label="Default select example">
                                        <option value="#111">#111</option>
                                    </select>
                                </div>
                                <br>
                                <label for="">Start Date</label><br>
                                <div class="input-group">
                                    <input class="form-control" placeholder="MM/DD/YYYY" type="date">
                                </div>
                                <br>
                                <label for="">End Date</label><br>
                                <div class="input-group">
                                    <input class="form-control" placeholder="MM/DD/YYYY" type="date">
                                </div>
                            </div>
                            <div class="buttons d-flex justify-content-around align-items-center  ">
                                <button class="btn  btn-primary" type="button">Indivisualy Report</button>
                                <button class="btn  btn-primary" type="button">Monthly Report </button>
                                <button class="btn  btn-primary" type="button">Yearly Report</button>
                            </div>
                            <div class="modal-footer">
                                <button class="btn ripple btn-primary" type="button">Save </button>
                                <button class="btn ripple btn-secondary" data-bs-dismiss="modal"
                                    type="button">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- <div class="modal" id="scrollmodal" >
                        <div class="modal-dialog modal-dialog-scrollable" role="document">
                            <div class="modal-content modal-content-demo">
                                <div class="modal-header">
                                    <h6 class="modal-title">Paid</h6><button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="card-body " style="margin-top: -20px;">
                                        <div class="container">
                                            <form method="post" action="">
                                     
                                                <div class="row">
                                                    <input type="hidden" name="salleryId">
                                                    <input type="hidden" name="invoiceId">
                                                    <input type="hidden" name="userId">
                                                    <div class="form-group col-md-12">
                                                        <div class="mb-3 font-weight-semibold">From</div>
                                                        <input type="text" name='from'  class="form-control">
                                                        
                                                    </div>

                                                    <div class="form-group col-md-12">
                                                        <div class="mb-3 font-weight-semibold">From Account Number</div>
                                                        <input type="number" name='fromAccountNumber'  class="form-control">
                                                      
                                                    </div>

                                                    <div class="form-group col-md-12">
                                                        <div class="mb-3 font-weight-semibold">To</div>
                                                        <input type="text" name='to'  class="form-control">
                                                    </div>
                                                        
                                                    <div class="form-group col-md-12">
                                                        <div class="mb-3 font-weight-semibold">To Account Number</div>
                                                        <input type="number" name='toAccountNumber'  class="form-control">
                                                      
                                                    </div>
            

                                                    <div class="form-group col-md-12">
                                                        <div class="mb-3 font-weight-semibold">Amount</div>
                                                        <input type="number" name='amount' placeholder="Amount" class="form-control">
                                                      
                                                    </div>
                                                    <div class="form-group col-md-12">
                                                        <div class="mb-3 font-weight-semibold">Date Picker</div>
                                                        <input type="date" name='date'  class="form-control">
                                                        
                                                    </div>
            
                                                
                                                    <div class="form-group col-md-12">
                                                        <div class="mb-3 font-weight-semibold">Bank Name</div>
                                                        <select name="" class="form-control" id="">
                                                            <option value="habib">Bank Al Habib</option>
                                                            <option value="Alied">Alied</option>
                                                        </select>
                                                    </div>
                                        </div>
                                        <div class="d-flex justify-content-end">
                                            <button class="btn btn-success" type="submit">Save</button>
                                            
                                        </div>
                                    </div>
            
                                </div>
                                </div>
                               
                            </div>
                        </div>
                    </div> -->
            </div>
        </div>

    </div>
</div>



@endsection