@extends('layouts.app')

@section('main')
  <!-- Basic Tables start -->
  @if($errors->any())
        <div class="row">
            <div class="col-12">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        <p><strong>Oops. Something went wrong.</strong></p>
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>    
            </div>
        </div>
    @endif
    <div class="row" id="basic-table">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div>
                        <h4 class="card-title"><a href="{{ url('expenses') }}">Expenses</a></h4>
                    </div>
                    {{-- <div class="col-md-3">
                        <form action="{{ route('find_users') }}" method="get"> 
                            @csrf
                            <div class="input-group">
                                <input type="text" name="txtsearch" class="form-control col-9" placeholder="Search here" >
                                <div class="input-group-append">
                                    <button class="btn btn-secondary waves-effect waves-float waves-light" type="submit"><i data-feather="search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                     --}}

                    <div >
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#new-record">New Expense</button>
                    </div>

                    
                </div>
                {{-- <div class="card-body">
                    <p class="card-text">
                        
                    </p>
                </div> --}}
                <div class="table-responsive" style="min-height: 45vh !important;">
                    <table class="table">
                        <thead>
                            <tr>
                                <tr>
                                    <th>#</th>
                                    <th>ID</th>
                                    <th style="min-width:200px;">Description</th>
                                    <th>Amount</th>
                                    <th>User</th>
                                    <th style="min-width: 150px;">Date</th>
                                    {{-- <th>Actions</th> --}}
                                </tr>
                            </tr>
                        </thead>
                        <tbody>
                        @if($fields->count())
                            @foreach($fields as $key=>$field)
                                <tr>
                                    <td width="10">
                                        {{ ++$key }}
                                    </td>
                                    <td>
                                        <a href="#" data-bs-toggle="modal" data-bs-target="#showDetail-{{ $field->id }}">
                                            EX{{ $field->id }}
                                        </a>
                                    </td>
                                    
                                    <td>
                                        <div>{{ $field->description }}</div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center text-primary fw-bold">    
                                            {{ auth()->user()->branch->currency . number_format($field->amount, 0) }}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="">{{ $field->user->name }}</div>
                                    </td>
                                    
                                    <td>
                                        {{ date('M d,  Y', strtotime($field->created_at)) }}
                                    </td>
                                    {{-- <td>
                                      
                                       
                                      
                                    </td> --}}
                                </tr>

                                <div class="modal fade" id="showDetail-{{ $field->id }}" tabindex="-1" aria-labelledby="shareProjectTitle" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered ">
                                        <div class="modal-content">
                                            <div class="modal-header bg-transparent">
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body px-sm-3 mx-30 pb-4 " >
                                                <h4 class="text-center mb-1" id="shareProjectTitle">Expense Details EX{{ $field->id }}</h1>
                                                <hr>
                                                
                                                <ul class="list-group list-group-flush ">
                                                    <li class="d-flex align-items-start border-0 px-0 mb-1">
                                                        <div class="d-flex align-items-center justify-content-between w-100">
                                                            <div class="me-1 w-50">
                                                                <div class="detail-title">Description</div>
                                                            </div>
                                                            <div class="me-2 w-50">
                                                                <h5>
                                                                    {{ $field->description }}
                                                                </h5>
                                                            </div>                                                            
                                                        </div>
                                                    </li>
                                                    <li class="d-flex align-items-start border-0 px-0 mb-1">
                                                        <div class="d-flex align-items-center justify-content-between w-100">
                                                            <div class="me-1 w-50">
                                                                <div class="detail-title">Amount</div>
                                                            </div>
                                                            <div class="me-2 w-50">
                                                                <h5>
                                                                    {{ auth()->user()->branch->currency . number_format($field->amount, 0) }}
                                                                </h5>
                                                            </div>                                                            
                                                        </div>
                                                    </li>
                                                
                                                  
                                                    
                                                    <li class="d-flex align-items-start border-0 px-0 mb-1">
                                                        <div class="d-flex align-items-center justify-content-between w-100">
                                                            <div class="me-1 w-50">
                                                                <div class="detail-title">Date</div>
                                                            </div>
                                                            <div class="me-2 w-50">
                                                                <h5>
                                                                    {{ date('M d, Y - H:i', strtotime($field->created_at)) }} GMT
                                                                </h5>
                                                            </div>                                                            
                                                        </div>
                                                    </li>
                                                    
                                                 
                                                    
                                                    <li class="d-flex align-items-start border-0 px-0 mb-1">
                                                        <div class="d-flex align-items-center justify-content-between w-100">
                                                            <div class="me-1 w-50">
                                                                <div class="detail-title">Created by</div>
                                                            </div>
                                                            <div class="me-2 w-50">
                                                                <h5>
                                                                    @if($field->user_id)
                                                                        {{ $field->user->name }}
                                                                    @else
                                                                        -
                                                                    @endif
                                                                </h5>
                                                            </div>                                                            
                                                        </div>
                                                    </li>     
                                                    <li class="d-flex align-items-start border-0 px-0">
                                                        <div class="d-flex align-items-center justify-content-between w-100">
                                                            <div class="me-1 w-100">
                                                                <div class="detail-title">Comments</div>
                                                            </div>
                                                            
                                                        </div>
                                                    </li>                                               
                                                    <li class="d-flex align-items-start border-0 px-0">
                                                        <div class="d-flex align-items-center justify-content-between w-100">
                                                            <div class="me-2 w-100">
                                                                <h5>
                                                                    @if($field->comments)
                                                                        {{ $field->comments }}
                                                                    @else
                                                                    -
                                                                    @endif
                                                                </h5>
                                                            </div>                                                            
                                                        </div>
                                                    </li>
                                                    
                                                   
                                                </ul>


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

                            @endforeach
                        @else
                            <tr>
                                <td colspan="4">No records found.</td>
                            </tr>
                        @endif

                        </tbody>
                    </table>
                    <div class="mt-2 pagination">
                        {{ $fields->links("") }}
                    </div>
                </div>
            </div>
        </div>
    </div>


        
     <div class="modal modal-slide-in sidebar-todo-modal fade" id="new-record">
        <div class="modal-dialog sidebar-lg">
            <div class="modal-content p-0">
                <form class="add-record" method="post" action="{{ route('store_expense') }}" enctype="multipart/form-data">
                    @CSRF
                    <div class="modal-header align-items-center mb-1">
                        <h5 class="modal-title">New Expense</h5>
                        <div transmit_amount="todo-item-action d-flex align-items-center justify-content-between ms-auto">
                            
                            <i data-feather="x" class="cursor-pointer" data-bs-dismiss="modal" stroke-width="3"></i>
                        </div>
                    </div>
                    <div class="modal-body flex-grow-1 pb-sm-0 pb-3">
                        <div class="action-tags">

                            <div class="mb-1 amount-currency-merge">
                                <label class="form-label" for="amount">Amount<span class="text-danger fs-6">*</span></label>
                                <input type="text" class="form-control numeral-mask" id="amount" name="amount" placeholder="5,000" aria-label="Amount (to the nearest currency)" />
                                <span class="pt-currency-sign">{{ auth()->user()->branch->currency }}</span>
                            </div>
                           
                            <div class="mb-1">
                                <label class="form-label" for="description">Description<span class="text-danger fs-6">*</span></label>
                                <input type="text" class="form-control" id="description" name="description" placeholder="Salary, Other expenses" />
                            </div>
                            <div class="mb-1">
                                <label class="form-label" for="comments">Comments</label>
                                <textarea class="form-control" id="comments" name="comments" rows="3" placeholder="Comments"></textarea>
                            </div>
                            <div class="my-1">
                                <button type="submit" class="btn btn-primary add-todo-item">Save</button>
                                <button type="button" class="btn btn-outline-secondary add-todo-item" data-bs-dismiss="modal">
                                    Cancel
                                </button>
                            </div>
                        </div>                        
                    </div>
                </form>
            </div>
        </div>
    </div>
     
    

   
@endsection
@push('styles')
    <link rel="stylesheet" type="text/css" href="theme/app-assets/vendors/css/forms/select/select2.min.css">
    <link rel="stylesheet" type="text/css" href="theme/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="theme/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="theme/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="theme/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    
@endpush

@push('scripts')

    <!-- BEGIN: Page Vendor JS-->
    <script src="theme/app-assets/vendors/js/forms/cleave/cleave.min.js"></script>
    <script src="theme/app-assets/vendors/js/forms/cleave/addons/cleave-phone.us.js"></script>
    <!-- END: Page Vendor JS-->

    <script src="theme/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="theme/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
    <script src="theme/app-assets/js/scripts/forms/form-validation.js"></script>
    <script src="theme/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="theme/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
    

    <script>
        $(function () {
            'use strict';
            var addRecord = $('.add-record');
            if (addRecord.length) {
                addRecord.validate({
                rules: {
                    'amount': {
                        required: true,
                        number: true,
                    },
                    'description': {
                        required: true,
                    },
                }
                });
            }

            var numeralMask = $('.numeral-mask');
            //Numeral
            if (numeralMask.length) {
                new Cleave(numeralMask, {
                numeral: true,
                numeralThousandsGroupStyle: 'thousand'
                });
            }


        });

    </script>
    <script>
        toastr.options = {
            debug: false,
            positionClass: "toast-bottom-right",
            fadeIn: 300,
            fadeOut: 1000,
            timeOut: 5000,
            extendedTimeOut: 1000,
            closeButton: true,
            progressBar: true,
        };
                
    </script>
    @if (session()->has('message'))
        @if(session('message_class')=='success')
            <script>
                toastr.success('', "