@extends('accounting::layouts.reconciliations.master')
@section('extra-styles')
    <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/style-svgFont.css') }}" rel="stylesheet">
    <script src="{{ asset('/js/app.js') }}" defer></script>
   @if(app()->getlocale() == 'ar')
        <style>
            /* form.filter-section.report_filter button[type="submit"]:after {
                content: "\f067";
                font: normal normal normal 14px/1 FontAwesome;
                font-size: inherit;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                position: absolute;
                top: 4px;
                left: -15px;
            } */
        </style>
    @else

        <style>
            /* form.filter-section.report_filter button[type="submit"]:after {
                content: "\f067";
                font: normal normal normal 14px/1 FontAwesome;
                font-size: inherit;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                position: absolute;
                top: 4px;
                left: -24px;
            } */
        </style>
    @endif

    <style>
        .saveDraftBtn:hover, .divBack .btn.btn-primary:hover {
            background-color: #F50!important;
            border-color: #F50!important;
        }

        /* ── Responsive: stack label above input on small screens ── */
        @media (max-width: 767px) {
            .recon-field-row {
                flex-direction: column !important;
                align-items: flex-start !important;
            }
            .recon-field-row .recon-label {
                min-width: unset !important;
                white-space: normal !important;
                padding-right: 0 !important;
                margin-bottom: 6px !important;
            }
            .recon-field-row .recon-input {
                width: 100% !important;
            }
            .recon-date-spacer {
                display: none !important;
            }

            /* ── Import icon bar: fix float-based positioning on mobile ── */
            .headBtns.fixed-btns {
                display: flex !important;
                align-items: center !important;
                padding-top: 8px !important;
                padding-bottom: 8px !important;
                background:transparent!important;
            }
        }
    </style>
@endsection
@section('title', __('accounting::reconciliations.reconciliations'))
@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                @lang('companyuser::sidebar.Accounting')
            </li>
            <li class="breadcrumb-item">
                <a href="#">@lang('accounting::reconciliations.reconciliations')</a>
            </li>
        </ol>
    </div>
</div>
@endsection

@section('form-open-tag')
    @can('accounting.bank-statements.view')
        <!-- <div class="row pl-1 pr-1 pb-1">
            <a href="{{route('company.bank-statements.index', ['subdomain' => $subdomain])}}" class="btnWidth btn btn-primary saveDraftBtn pull-left">
                @lang('accounting::bank_statements.title')
            </a>
        </div> -->
        <div class="headBtns mx-1 fixed-btns">
            <div class="btn-group pull-right">
                    <a class="text-green pull-left" href="{{route('company.bank-statements.import', $subdomain)}}"
                       title="@lang('accounting::bank_statements.title')">
                        <span class="icon-statement action-icon"></span>
                    </a>
            </div>
            <div class="mb-1 pull-left">
            </div>
        </div>
    @endcan
    <form action="" method="GET" class="form form-horizontal mt-1 striped-rows form-bordered dev-form-validate  filter-section " novalidate>
        @csrf
<input id="default_indicator" type="hidden" name="is_dates" value="{{ request('is_dates')? request('is_dates'): 0 }}">
@endsection
@section('koolreport')
<section id="configuration">
    <div class="row">
        <div class="col-xs-12">
            <div class="card">
                <div>
                    <div class="card-block card-dashboard">
                        <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::reconciliations.process_no')</th>
                                    <th>@lang('accounting::reconciliations.account')</th>
                                    <th>@lang('accounting::reconciliations.date')</th>
                                    <th>@lang('accounting::reconciliations.duration')</th>
                                    <th>@lang('accounting::reconciliations.system_total')</th>
                                    <th>@lang('accounting::reconciliations.audit_total')</th>
                                    <th>@lang('accounting::reconciliations.difference')</th>
                                    <th>@lang('accounting::reconciliations.status')</th>
                                    <th>@lang('accounting::reconciliations.added_by')</th>
                                    <th>@lang('Actions')</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach($data['reconciliations'] as $reconciliation)
                                <tr>
                                    <td>{{$reconciliation['id']}}</td>
                                    <td><a
                                            href="{{route('company.chart-of-accounts.show', ['subdomain' => $subdomain, 'account' => $reconciliation['account']['id']])}}">
                                            {{$reconciliation['account']['name']}}</a></td>
                                    <td>{{$reconciliation['date']}}</td>
                                    <td>{{$reconciliation['duration']}}</td>
                                    <td>{{$reconciliation['system_total']}}</td>
                                    <td>{{$reconciliation['audit_total']}}</td>
                                    <td>{{$reconciliation['difference']}}</td>
                                    <td>{{__('accounting::reconciliations.'.$reconciliation['status'])}}</td>
                                    <td>{{$reconciliation['added_by']['name']}}</td>
                                    <td>
                                        @if($reconciliation['status'] ==  Modules\Accounting\Enums\ReconciliationStatusesEnum::DRAFTED)
                                        @can('accounting.reconciliations.edit')
                                        <a href="{{route('company.reconciliations.edit', ['subdomain' => $subdomain, 'reconciliation' => $reconciliation['id']])}}" class='btn btni rounded-circle font-small-2 btn-info btn-xs btn-edit text-white'
                                           data-toggle="tooltip" data-placement="bottom"
                                           title="@lang('Edit')"><i class="fa fa-pencil"></i></a>
                                        @endcan
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('account')
<div class="d-flex align-items-center w-100 recon-field-row">
    <label for="account_id" class="mb-0 text-white font-weight-bold recon-label" style="min-width: 140px; white-space: nowrap; padding-right: 15px;">@lang('accounting::reconciliations.account')</label>
    <div class="w-100 recon-input">
        <select name="account_id" class="w-100 form-control select2-tag" style="min-height: 38px;">
            @foreach($data['subCategories'] as $subCategories)
            <optgroup label="{{ $subCategories->name }}">
                @foreach($subCategories->accounts as $account)
                <option @if(request('account_id')==$account->id) selected @endif value="{{$account->id}}">{{$account->name}}</option>
                @endforeach
            </optgroup>
            @endforeach
        </select>
        @error('account_id')
        <div class="invalid-feedback text text-white w-100 d-block" role="alert">
            <p>{{ $message }}</p>
        </div>
        @enderror
    </div>
</div>
@endsection
@section('filter-by-dates')
<div class="w-100 mt-1" id="filter-by-dates" style="display: none;">
    <div class="d-flex align-items-center justify-content-between flex-wrap" style="width: 100%;">
        <div style="flex: 1 1 40%; margin-right: 15px;">
            <div class="d-flex align-items-center w-100 recon-field-row">
                <label class="mb-0 text-white font-weight-bold recon-label" for="from" style="min-width: 140px; white-space: nowrap; padding-right: 15px;">@lang('from')</label>
                <div class="w-100 recon-input">
                    <x-date-picker
                        mode="single"
                        name="from"
                        input-id="from"
                        :value="request('from')"
                        input-class="h-45"
                        :is-invalid="$errors->has('from')"
                        white-icon="true"
                    />
                    @error('from')
                    <div class="invalid-feedback text-white w-100 d-block"
                         role="alert">
                        <p>{{ $message }}</p>
                    </div>
                    @enderror
                </div>
            </div>
        </div>
        <div style="flex: 1 1 40%; margin-right: 15px;">
            <div class="d-flex align-items-center w-100 recon-field-row">
                <label class="mb-0 text-white font-weight-bold recon-label" for="to" style="min-width: 140px; white-space: nowrap; padding-right: 15px;">@lang('to')</label>
                <div class="w-100 recon-input">
                    <x-date-picker
                        mode="single"
                        name="to"
                        input-id="to"
                        :value="request('to')"
                        input-class="h-45"
                        :is-invalid="$errors->has('to')"
                        white-icon="true"
                    />
                    @error('to')
                    <div class="invalid-feedback text-white w-100 d-block"
                         role="alert">
                        <p>{{ $message }}</p>
                    </div>
                    @enderror
                </div>
            </div>
        </div>
        <div class="recon-date-spacer" style="flex: 0 0 auto; visibility: hidden;">
            <button type="button" class="btn" style="padding: 4px 10px; height: 38px; width: 42px; display: flex; align-items: center; justify-content: center;"></button>
        </div>
    </div>
</div>

@endsection
@section('custom_duration')
<option @if(request('is_dates')) selected @endif value="">
    @lang('accounting::reconciliations.custom_duration')
</option>
@endsection
@section('extra_scripts_filter_by_date')
<script>
    window.addEventListener('DOMContentLoaded', function () {
        $(document).ready(function () {

            if ($('#default_indicator').val() == 1 || $("#fiscal_year_id").val() == "") {
                $('#filter-by-dates').show();
            } else {
                // dates by default are hidden, so if it is hidden disbale from & to attributes
                $('input[name ="to"]').attr('disabled', true);
                $('input[name ="from"]').attr('disabled', true);
            }

            $('#fiscal_year_id').on('change', function () {

                if (this.value) {
                    $('#filter-by-dates').hide();
                    $('#default_indicator').val(0);
                    $('input[name ="to"]').attr('disabled', true);
                    $('input[name ="from"]').attr('disabled', true);

                } else {
                    $('#filter-by-dates').show();
                    $('#default_indicator').val(1);
                    $('input[name ="to"]').removeAttr('disabled');
                    $('input[name ="from"]').removeAttr('disabled');
                }

            });

        });
    });
</script>
@endsection