@use('App\Services\Date')
@extends('companyuser::layouts.master')
@section('title', __('accounting::bank_statements.title'))
@section('extra-styles')
    <link href="{{url('assets/css/filter.css') }}" rel="stylesheet">
    <link href="{{ url('assets/css/plugins/input-dropdown/input-dropdown.css') }}" rel="stylesheet">
    <link href="{{ url('assets/css/plugins/range/range.css') }}" rel="stylesheet">
    <link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('assets/vendors/css/pickers/daterange/daterangepicker.css')}}">
    {{-- <link rel="stylesheet" type="text/css"
          href="{{asset('assets/vendors/css/pickers/datetime/bootstrap-datetimepicker.css')}}"> --}}
    {{-- <link rel="stylesheet" href="{{asset('assets/vendors/css/pickers/pickadate/pickadate.css')}}"> --}}
    {{-- <link rel="stylesheet" type="text/css" href="{{asset('assets/css/plugins/pickers/daterange/daterange.css')}}"> --}}
    <link href="{{asset('assets/css/custom/modal/style.css') }}" rel="stylesheet">
    <script src="{{ asset('/js/app.js') }}" defer></script>
    <style>
        .mlr-12 {
            margin-left: 12px;
            margin-right: 12px;
        }

        .float-left {
            float: left;
        }

        .float-right {
            float: right;
        }

        .filter-section-collapse form .input-group .input-group-addon.h-45 {
            height: 45px !important;
        }

        .lh-3 {
            line-height: 3;
        }
    </style>
@endsection

@push('extra_scripts')
    <script src="{{url('assets/js/vendors/js/pickers/dateTime/moment-with-locales.min.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/daterange/daterangepicker.js')}}" defer></script>
    <script src="{{ asset('assets/js/custom/daterangepicker.js') }}" defer></script>
    <script src="{{ asset('assets/js/scripts/modal/components-modal.js') }}" defer></script>
@endpush
@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a>@lang('companyuser::sidebar.Accounting')</a>
            </li>
            <li class="breadcrumb-item active">
                <a href="{{route('company.reconciliations.index', ['subdomain' => $subdomain])}}">
                    @lang('accounting::reconciliations.reconciliations')
                </a>
            </li>
            <li class="breadcrumb-item active"><a href="#">@lang('accounting::bank_statements.title')</a>
            </li>
        </ol>
    </div>
</div>
@endsection
@section('content')
<section>
    <div class="container-fluid">
        <div class="headBtns fixed-btns" style="padding-bottom: 10px;">
            <div class="btn-group pull-right">
                {{-- need to be changed to account statement permissions  --}}
                @can('accounting.bank-statements.edit')
                    <a class="text-green pull-left" href="{{route('company.bank-statements.import', $subdomain)}}"
                       title="{{__('Import')}}">
                        <span class="icon-Import-New action-icon rot"></span>
                    </a>
                @endcan
            </div>
        </div>

        @include('companyuser::errors.all')
        @include('companyuser::errors.lists')
        <div class="mt-1">
            <button class="btn btn-primary w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                <div class="d-flex justify-content-between">
                    <span>@lang('Filter') </span><i class="fa fa-angle-down"></i>
                </div>

            </button>
        </div>
        <div class="collapse filter-section-collapse" id="collapseExample">
            <form action="{{ route('company.bank-statements.index', ['subdomain' => $subdomain]) }}" method="GET" class="form form-horizontal striped-rows form-bordered dev-form-validate" novalidate>
                @csrf
                <div class="card card-body mb-0">
                    <div class="row mt-1">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12  w-100-ipad-portrait">
                                        <label for="category">@lang('accounting::bank_statements.import date')</label>
                                    </div>
                                    <div class="col-md-6  w-50-ipad-portrait mb-half">
                                        <x-date-picker
                                            name="date_from"
                                            id="date_from"
                                            :value="request('date_from')"
                                            input-class="h-45"
                                            :is-invalid="$errors->has('date_from')"
                                        />
                                        @error('date_from')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6  w-50-ipad-portrait mb-half">
                                        <x-date-picker
                                            name="date_to"
                                            id="date_to"
                                            :value="request('date_to')"
                                            :min-date="request('date_from')"
                                            input-class="h-45"
                                            :is-invalid="$errors->has('date_to')"
                                        />
                                        @error('date_to')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6 col-md-6">
                            <div class="row py-1">
                                <div class="col-lg-12">
                                    <label for="status">@lang('accounting::bank_statements.status')</label>
                                </div>
                                <div class="col-lg-12">
                                    <select name="status" id="status" class="w-100 py-1 form-control select2-tag" style="width: 100%;">
                                        @forelse($statuses as $key => $status)
                                            <option @if(request('status') == $key) selected @endif value="{{ $key }}">{{ $status }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="row py-1">
                                <div class="col-lg-12">
                                    <label for="source">@lang('accounting::bank_statements.source')</label>
                                </div>
                                <div class="col-lg-12">
                                    <select name="source" id="source" class="w-100 py-1 form-control select2-tag" style="width: 100%;">
                                        @forelse($sources as $key => $source)
                                            <option @if(request('source') == $key) selected @endif value="{{ $key }}">{{ $source }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-left mt-2">
                        <button type="submit" class="btn btn-info mr-1 mb-1 p-5">
                            <img src="{{asset('assets/images/Done.png') }}" alt="done" width="35px">
                        </button>
                        <button type="reset" id="reset" class="btn btn-warning mb-1 p-5"> <span class="icon-Delete f-32"></span></button>
                    </div>
                </div>
            </form>
        </div>
        <div>
            <section class="mt-1" id="configuration">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="card">
                            <div class="card-body">
                                <div>
                                    <div id="div-collection" class=" content-row menuDisplayed sub-header-descr">
                                        <table class="table table-striped table-column dataex-res-configuration  prevent-init-sort @if(app()->getlocale() == 'ar') ar-language-file @endif" style="width:100%;display: inline-table;">
                                            <thead>
                                                <tr>
                                                    <th>@lang('accounting::bank_statements.account')</th>
                                                    <th>@lang('accounting::bank_statements.import date')</th>
                                                    <th>@lang('accounting::bank_statements.start date')</th>
                                                    <th>@lang('accounting::bank_statements.end date')</th>
                                                    <th>@lang('accounting::bank_statements.source')</th>
                                                    <th>@lang('accounting::bank_statements.status')</th>
                                                    <th>@lang('Actions')</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                                @foreach ($bank_statements as $bank_statement)
                                                <tr>
                                                    <td>{{Lang::locale() == 'ar' ? $bank_statement->account->name_ar : $bank_statement->account->name_en}}</td>
                                                    <td><span class="d-none">{{$bank_statement->created_at}}</span>{{ Date::format($bank_statement->created_at)}}</td>
                                                    <td><span class="d-none">{{$bank_statement->start_date}}</span>{{ Date::format($bank_statement->start_date)}}</td>
                                                    <td><span class="d-none">{{$bank_statement->end_date}}</span>{{ Date::format($bank_statement->end_date)}}</td>
                                                    <td>{{\Modules\Accounting\Enums\BankStatementSourceEnum::toString($bank_statement->source)}}</td>
                                                    <td>{{\Modules\Accounting\Enums\BankStatementStatusEnum::toString($bank_statement->status)}}</td>
                                                    <td class="text-center">
                                                        @can('accounting.bank-statements.view')
                                                        <a href="{{ route('company.bank-statements.show', ['subdomain' => $subdomain, 'bank_statement' => $bank_statement->id]) }}" class='btn btni rounded-circle font-small-2 btn-primary btn-xs text-white' data-toggle="tooltip" data-placement="bottom" title="@lang('Show')"><i class="fa fa-eye"></i>
                                                        </a>
                                                        @endcan
                                                        @can('accounting.bank-statements.delete')
                                                            {{-- delete btn --}}
                                                            <a data-url="{{route('company.bank-statements.destroy', ['subdomain' => $subdomain, 'bank_statement' => $bank_statement->id])}}"
                                                               data-toggle="modal" data-target="#favoritesModal"
                                                               class='btn btni rounded-circle font-small-2 btn-warning btn-xs btn-delete delete-item text-white'>
                                                                <i class="fa fa-trash" data-toggle="tooltip" data-placement="bottom" title="@lang('Delete')"></i>
                                                            </a>
                                                        @endcan
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                        <div class="modal fade" id="favoritesModal" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span></button>
                                                        <h4 class="modal-title" id="favoritesModalLabel">@lang('Delete')</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>
                                                            @lang('accounting::manual_journal_entries.delete confirmation message')
                                                        </p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('No')</button>
                                                        <span class="pull-right">
                                                            <form id="delete-form" action="" method="POST" class="form">
                                                                @csrf
                                                                @method('delete')
                                                                <button type="submit" class="btn btn-primary">@lang('Yes')</button>
                                                            </form>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>
@endsection

@section('extra_scripts')
<script>
    window.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function() {
            $("body").on("click",".filterbtn",function(){
                if($("#collapseExample").hasClass("in") == false && $("#collapseExample").hasClass("dateCheck") == false && (window.location.href.indexOf("date_from") > -1) == false){
                    $("#collapseExample").addClass("dateCheck");
                }
            })

            // For A Delete Record Popup
            $(document).on('click', '.delete-item', function() {
                // $('.delete-item').click(function () {
                var modal = $(this).attr('data-target');
                var url = $(this).attr('data-url');
                $(modal + ' #delete-form').attr("action", url);
            });

            //to reset filter dropdown menus
            $('#reset').click(function(e) {
                e.preventDefault()
                $('.form-control').prop('selectedIndex', 0);
                // or val("");
                $('.select2-tag').select2({
                    allowClear: true
                });
                $('.select2-selection__clear').text("");
            });
        });

        if (document.location.search.length) {
            // $('#collapseExample').toggleClass("collapse in");
        }
    });
</script>
@endsection