@extends('companyuser::layouts.master')
@section('title', __('Import'))
@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="{{route('company.bank-statements.index', ['subdomain' => $subdomain])}}">
                    @lang('accounting::bank_statements.title')
                </a>
            </li>
            <li class="breadcrumb-item active"><a href="#">{{__('Import')}}</a>
            </li>
        </ol>
    </div>
</div>
@endsection

@section('extra-styles')
<link href="{{asset('assets/css/steps.css') }}" rel="stylesheet">
<link href="{{asset('assets/css/uploader.css') }}" rel="stylesheet">
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
<style>
    .rules {
        font-size: 1.1rem;
    }
    .rules p, .rules ul{
        margin-bottom: 1.5rem;
    }
    .rules li{
        list-style: disc;
    }
    .rules h3{
        color: #14c3a5;
    }
    .rules h4{
        color: #00b5b8;
        margin-top: 1rem;
    }
    .rules .text-warning {
        color: #ff9149 !important;
        background-color: #fff3e8;
        padding: 10px;
        border-radius: 5px;
        margin-top: 10px;
    }
</style>
@endsection

@section('content')

<section>
    <form action="{{ route('company.bank-statements.import.store', $subdomain) }}" enctype="multipart/form-data" method="POST" novalidate class="form">
        @csrf
        <div class="container-fluid">
            <div class="headBtns mx-1 fixed-btns">
                <div class="btn-group pull-right">
                    <button type="submit" class="text-green bg-trans" title="{{__('Add')}}">
                        <span class="icon-Add action-icon"></span>
                    </button>
                </div>
                <div class="mb-1 pull-left">
                    <a class="text-green" href="{{route('company.bank-statements.index', $subdomain)}}" title="{{__('Back')}}">
                        @if(LaravelLocalization::getCurrentLocale() === 'en')
                        <span class="icon-Previous action-icon back-btnIcon"></span>
                        @else
                        <span class="icon-Next action-icon back-btnIcon"></span>
                        @endif
                    </a>

                </div>
            </div>
            <div class="match-height">
                    @include('companyuser::errors.all')
                <div class="card mb-5">
                    <div class=" add-form-section filter-section-collapse">

                        <div class="card-block">
                            <div class="form-body" style="height: 400px;">
                                <div class="row mb-half" id="paymentAccountDropdown">
                                    <div class="col-md-1 mt-half">
                                        <label>@lang('accounting::bank_statements.account')</label>
                                    </div>
                                    <div class="col-md-4">
                                        <select name="cash_account" class="w-100 py-1 form-control select2-tag cash-account @if($errors->has('payment_account')) is-invalid @endif" data-current-balance="{{ $cash_accounts }}" style="width: 100%;" required>
                                            @forelse($cash_accounts as $key => $cash_account)
                                                <option value="{{ $key }}">{{ $cash_account }}</option>
                                            @empty
                                            @endforelse
                                        </select>
                                        @error('cash_account')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                                <hr>
                                <div class="alert alert-warning" id="journal-data-in-the-future">
                                    @lang('accounting::bank_statements.max records number messages')
                                </div>
                                <div class="row steps">
                                    <div class="col-md-4 step_cont">
                                        <img src="{{ asset('assets/images/svg/download.svg') }}" alt="download" class="" width="150">
                                        <div class="text_cont">
                                            <span class="round_num mr-1 mb-1">1</span>
                                            <h4 class="main_txt">
                                                <a href="{{route('company.bank-statements.empty', $subdomain)}}">
                                                    {{__('Download the file')}}
                                                </a>
                                            </h4>
                                        </div>
                                    </div>
                                    <div class="col-md-4 step_cont">
                                        <img src="{{ asset('assets/images/svg/edit.svg') }}" alt="download" class="" width="150">
                                        <div class="text_cont">
                                            <span class="round_num mr-1">2</span>
                                            <h4 class="main_txt">
                                                {{__('Fill it with your data')}}
                                            </h4>
                                        </div>
                                    </div>
                                    <div class="col-md-4 step_cont">
                                        <img src="{{ asset('assets/images/svg/upload.svg') }}" alt="download" class="" width="150">
                                        <div class="text_cont">
                                            <h4 class="main_txt">
                                                <span class="round_num mr-1">3</span>
                                                <!-- {{__('Upload the file')}} -->
                                                <span class="choose_txt" id="uploadButton" style="cursor: pointer; color: #00b5b8;">{{__('Choose the file')}}</span>

                                            </h4>
                                        </div>
                                        <div class="col-sm-12 d-flex justify-content-center uploader">
                                            <div class="dummy_uploader">
                                                <div class="w-100 justify-content-center">
                                                    <span class="col-md-12 uploader_txt" style="background-color: white"></span>
                                                    <!-- <span class="choose_txt" id="uploadButton" style="cursor: pointer">{{__('Choose the file')}}</span> -->
                                                </div>
                                                <input type="file" name="sheet" id="uploadItem" class="cursor-pointer">
                                                @error('sheet')
                                                <span class="invalid-feedback text text-danger" role="alert">
                                                    <p>{{ $message }}</p>
                                                </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class=" add-form-section filter-section-collapse">
                        <div class="card-block">
                            <div class="form-body" style="overflow: visible;">
                                <div class="row justify-content-left">
                                    <div class="col-md-12 step_cont rules">
                                        <h3 class="main_txt">@lang('accounting::bank_statements.import_instructions_header')</h3>
                                        @lang('accounting::bank_statements.import_instructions')
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>
@stop
@section('extra_scripts')
<script>
    window.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function () {
        $("#uploadItem").change(function (event) {
            readURLText(this);
        });
        document.getElementById('uploadButton').addEventListener('click',()=>{
           document.getElementById('uploadItem').click();
        });
    });
        function readURLText(input){
            if (input.files && input.files[0]) {
                var filename = $(input).val();
                filename = filename.substring(filename.lastIndexOf('\\') + 1);
                $(input).closest(".dummy_uploader").find('.uploader_txt').text(filename);
            }
        }
    });
    </script>
@endsection