@extends('dashboard.components.main')
@section('content')
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">
        <div class="page-content">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="page-title mb-0 font-size-18">@lang('dashboard_sidebar.taxes')</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active">@lang('dashboard.welcome') </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
             <!-- Errors -->
             @include('dashboard.components.errors')
             <!-- Success Message -->
             @if (session()->has('message'))
                 <p class="alert alert-success text-center">
                     {{ session()->get('message') }}
                 </p>
             @endif
            <!-- end page title -->
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">@lang('dashboard_taxes.fast_operations') </h4>
                    <div>
                        <a class="popup-form btn btn-primary" href="#addtax" disabled>@lang('dashboard_taxes.add_tax') <i
                                class="mdi mdi-plus-thick"></i> </a>
                    </div>
                    <div class="card mfp-hide mfp-popup-form mx-auto" id="addtax">
                        <div class="card-body">
                            <h4 class="mt-0 mb-4">@lang('dashboard_taxes.add_tax')</h4>
                            <form action="{{ route('dashboard.taxes.store') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="name">@lang('dashboard_taxes.tax_name') </label>
                                            <input type="text" name="name" class="form-control" id="name"
                                                placeholder="@lang('dashboard_taxes.tax_name')">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="rate">@lang('dashboard_taxes.tax_percentage')</label>
                                            <input type="number" name="percentage" class="form-control" id="rate"
                                                placeholder="@lang('dashboard_taxes.tax_percentage')">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="control-label mt-1">@lang('dashboard_banks.account_type')</label>
                                            <select class="form-control  select2" name="account_type" style="width: 100%">
                                                <option>@lang('dashboard_banks.select')
                                                    @lang('dashboard_banks.account_type')</option>
                                                <optgroup label="@lang('dashboard_banks.select')">
                                                    @foreach ($accountsTypes->where('base_type', 'liabilities') as $type)
                                                        <option value="{{ $type->id }}">
                                                            {{ $type->name }}
                                                        </option>
                                                    @endforeach
                                                </optgroup>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <p class="control-label mb-1">@lang('dashboard_taxes.from')</p>
                                                <input type="date" name="start_date" class="form-control col-lg-12"
                                                    placeholder="@lang('dashboard_taxes.from')">
                                            </div>
                                            <div class="col-lg-6">
                                                <p class="control-label mb-1">@lang('dashboard_taxes.to')</p>
                                                <input type="date" name="end_date" class="form-control col-lg-12"
                                                    placeholder="@lang('dashboard_taxes.to')">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="text-right">
                                            <button type="submit" class="btn btn-primary">@lang('buttons.execute')</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">@lang('dashboard_sidebar.taxes') </h4>
                            <p class="card-title-desc">@lang('dashboard_taxes.manage_taxes')</p>
                            <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap"
                                style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                    <tr>
                                        <th data-priority="1">@lang('dashboard_taxes.tax_name')</th>
                                        <th data-priority="1">@lang('dashboard_taxes.account_number')</th>
                                        <th data-priority="3">@lang('dashboard_taxes.tax_percentage')</th>
                                        <th data-priority="1">@lang('buttons.process') </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($taxes as $tax)
                                        <tr>
                                            <th>{{ $tax->name }}</th>
                                            <th>{{$tax->account->account_number}}</th>

                                            <td>{{ $tax->percentage }}%</td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <button id="btnGroupVerticalDrop1" type="button"
                                                        class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                                                        aria-haspopup="true" aria-expanded="false">
                                                        @lang('buttons.process') <i class="mdi mdi-chevron-down"></i>
                                                    </button>
                                                    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                                                        <a class="popup-form dropdown-item" href="#edittax{{ $tax->id }}">@lang('buttons.edit')</a>
                                                        <a class="dropdown-item popup-form" href="#taxReportRequest{{$tax->id}}">@lang('dashboard_taxes.submit_tax_return')</a>
                                                        <a class="dropdown-item popup-form" href="#previousEdits{{ $tax->id }}">@lang('dashboard_taxes.previous_edits')</a>
                                                    </div>
                                                    <div class="card mfp-hide mfp-popup-form mx-auto" style="max-width: 500px" id="taxReportRequest{{$tax->id}}">
                                                        <form action="{{ route('dashboard.taxes.taxReturn',$tax->id ) }}" method="GET">

                                                        <div class="card-body">
                                                            <h4 class="mt-0 mb-4">@lang('dashboard_taxes.submit_tax_return')</h4>
                                                            <div class="container">

                                                                <div class="row">
                                                                    <input  onclick="handleSubmitButton()" id="confirmTaxReportRequest" type="checkbox">
                                                                    <p class="col-lg-10 mb-0">@lang('dashboard_taxes.submit_tax_return')</p>
                                                                </div>
                                                                <div class="row mt-3">
                                                                    <div class="d-flex flex-row justify-content-end w-100">
                                                                        <button id="taxReportRequestButton" class="btn btn-primary" disabled>@lang('buttons.submit')</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        </form>
                                                    </div>
                                                                
                                                    <div class="card mfp-hide mfp-popup-form mx-auto" id="edittax{{ $tax->id }}">
                                                        <div class="card-body">
                                                            <h4 class="mt-0 mb-4">@lang('buttons.edit')
                                                                @lang('dashboard_taxes.tax')</h4>
                                                            <form action="{{ route('dashboard.taxes.update', $tax) }}"
                                                                method="POST">
                                                                @csrf
                                                                @method('PUT')
                                                                <div class="row">
                                                                    <div class="col-lg-6">
                                                                        <div class="form-group">
                                                                            <label
                                                                                for="name">@lang('dashboard_taxes.tax_name')</label>
                                                                            <input type="text" name="name"
                                                                                value="{{ $tax->name }}"
                                                                                class="form-control" id="name"
                                                                                placeholder="@lang('dashboard_taxes.tax_name')  ">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-6">
                                                                        <div class="form-group">
                                                                            <label
                                                                                for="rate">@lang('dashboard_taxes.tax_percentage')
                                                                            </label>
                                                                            <input type="number " disabled
                                                                                value="{{ $tax->percentage }}"
                                                                                name="" class="form-control"
                                                                                id="rate"
                                                                                placeholder=" @lang('dashboard_taxes.tax_percentage')">
                                                                                {{-- <p>{{ $tax->percentage }}</p> --}}
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-6">
                                                                        <div class="form-group">
                                                                            <label
                                                                                class="control-label">@lang('dashboard_clients.account_type')
                                                                            </label>
                                                                            <select class="form-control  select2"
                                                                                name="account_type">
                                                                                <option>@lang('dashboard_banks.account_type')</option>
                                                                                <optgroup label="@lang('dashboard_banks.select')">
                                                                                    @foreach ($accountsTypes->where('base_type', 'liabilities') as $type)
                                                                                        <option value="{{ $type->id }}" @if ($tax->account->account_type_id == $type->id) selected  @endif>
                                                                                            {{ $type->name }} 
                                                                                        </option>
                                                                                    @endforeach
                                                                                </optgroup>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-6">
                                                                        <div class="row">
                                                                            <div class="col-lg-6">
                                                                                <p class="control-label mb-1">@lang('dashboard_taxes.from')</p>
                                                                                <input type="date" name="start_date" class="form-control col-lg-12"
                                                                                    placeholder="@lang('dashboard_taxes.from')" value="{{date('Y-m-d', strtotime($tax->start_date))}}">
                                                                            </div>
                                                                            <div class="col-lg-6">
                                                                                <p class="control-label mb-1">@lang('dashboard_taxes.to')</p>
                                                                                <input type="date" name="end_date" class="form-control col-lg-12"
                                                                                    placeholder="@lang('dashboard_taxes.to')" value="{{date('Y-m-d', strtotime($tax->end_date))}}">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-lg-12">
                                                                        <div class="text-right">
                                                                            <button type="submit" class="btn btn-primary">@lang('buttons.execute')</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <div class="card mfp-hide mfp-popup-form mx-auto" style="max-width: 900px" id="previousEdits{{ $tax->id }}">
                                                        <form action="#" method="POST">
                                                            <div class="card-body">
                                                                <h4 class="mt-0 mb-4">@lang('dashboard_taxes.previous_edits')</h4>
                                                            <div class="container">
                                                                
                                                        <table id="datatable" class="table table-striped table-bordered dt-responsive nowrap"
                                                            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                                            <thead>
                                                                <tr>
                                                                    <th data-priority="1">@lang('dashboard_taxes.date')</th>                                                                    
                                                                    <th data-priority="1">@lang('dashboard_taxes.from_date')</th>
                                                                    <th data-priority="1">@lang('dashboard_taxes.to_date') </th>
                                                                    <th data-priority="1">@lang('dashboard_taxes.tax_name') </th>
                                                                    {{-- <th data-priority="1">@lang('dashboard_suppliers.Status') </th> --}}
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @foreach ($tax->history as $history)
                                                                    
                                                                <tr>
                                                                    
                                                                    <td>{{ $history->created_at->toDateString() }}</td>                                                                    
                                                                    <td>{{ $history->start_date }}</td>
                                                                    <td>{{ $history->end_date }} </td>
                                                                    <td>{{ $history->name }} </td>
                                                                    {{-- <td>@lang('dashboard_taxes.balance') </td> --}}
                                                                    {{-- <td>@lang('dashboard_suppliers.Status') </td> --}}
                                                                </tr>
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                            </div>
                                                        </form>
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- end col -->
            </div>
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">@lang('dashboard_projects.filter') </h4>
                <form action="{{ route('dashboard.taxes.index') }}" method="GET">
                    <div class="row">
                        
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label class="control-label"> @lang('dashboard_projects.date_from')</label>
                                <div class="input-group">
                                    <input type="date" class="form-control" name="date_from">
                                    <div class="input-group-append">
                                        <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label class="control-label">@lang('dashboard_projects.date_to')</label>
                                <div class="input-group">
                                    <input type="date" class="form-control" name="date_to">
                                    <div class="input-group-append">
                                        <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="text-right">
                                <button type="submit" class="btn btn-primary">@lang('buttons.execute')</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">@lang('dashboard_sidebar.taxes') </h4>
                        <p class="card-title-desc">@lang('dashboard_sidebar.tax_manage')</p>
                        <table id="datatable" class="table table-striped table-bordered dt-responsive nowrap"
                            style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th data-priority="1">@lang('dashboard_taxes.date')</th>
                                    
                                    <th data-priority="2">@lang('dashboard_taxes.from_date')</th>
                                    <th data-priority="3">@lang('dashboard_taxes.to_date') </th>

                                   {{--  <th data-priority="2">@lang('dashboard_taxes.apply_date') </th>
                                    
                                    <th data-priority="2">@lang('dashboard_taxes.deserved_amount') </th>
                                    <th data-priority="2">@lang('dashboard_taxes.paid_amount') </th> --}}

                                    <th data-priority="1">@lang('dashboard_taxes.balance') </th>
                                    <th data-priority="1">@lang('dashboard_suppliers.Status') </th>

                                    <th data-priority="1">@lang('dashboard_taxes.presented_or_not') </th>

                                    <th data-priority="1">@lang('buttons.process') </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($taxReturns as $taxReturn)
                                    <tr>
                                        <th>{{ $taxReturn->submitted_at }}</span></th>
                                        <td>{{ $taxReturn->from_date }}</td>
                                        <td>{{ $taxReturn->to_date }}</td>
                                        {{-- <td>{{ $tax->apply_date }}</td>
                                        <td>{{ $tax->due_price }}</td>
                                        <td>{{ $tax->paid_price }}</td> --}}
                                        <td>{{ $taxReturn->due_price }}</td>
                                        <td>{{ $taxReturn->status }}</td>
                                        <td>
                                            @if ($taxReturn->is_presented)
                                            @lang('dashboard_taxes.presented') 
                                            @else
                                            @lang('dashboard_taxes.not_presented') 
                                            @endif
                                            </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <button id="btnGroupVerticalDrop1" type="button"
                                                    class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                                                    aria-haspopup="true" aria-expanded="false">
                                                    @lang('buttons.process') <i class="mdi mdi-chevron-down"></i>
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                                                    @if ($taxReturn->is_presented)
                                                    <a class="dropdown-item" href="{{ route('dashboard.taxes.change_present',$taxReturn->id) }}"> @lang('dashboard_taxes.cancel_present') </a>
                                                    @else
                                                    <a class="dropdown-item" href="{{ route('dashboard.taxes.change_present',$taxReturn->id) }}"> @lang('dashboard_taxes.present') </a>
                                                    @endif
                                                    <a class="dropdown-item" href="{{ route('dashboard.taxes.tax_report_summary',$taxReturn->id) }}">@lang('dashboard_taxes.tax_summary') </a>
                                                    <a class="dropdown-item" href="{{ route('dashboard.taxes.tax_report_details',$taxReturn->id) }}">@lang('dashboard_taxes.tax_details')</a>
             
                                                    @if ($taxReturn->status != "paid")
                                                    <a class="dropdown-item popup-form" href="#payTaxBalance{{ $taxReturn->id }}">@lang('dashboard_taxes.pay_report')</a>
                                                    @endif
                                                    <div class="card mfp-hide mfp-popup-form mx-auto" style="max-width: 600px" id="payTaxBalance{{ $taxReturn->id }}">
                                                        <form action="{{ route('dashboard.taxes.payTaxReturn') }}" method="POST">
                                                            @csrf
                                                           <input type="hidden" name="id" value="{{ $taxReturn->id }}">
                                                            <div class="card-body">
                                                                <h4 class="mt-0 mb-4">@lang('dashboard_taxes.pay_report')</h4>
                                                            <div class="container">
                                                                <p class="text-dark font-size-18 text-left mb-2 w-100"><b class="taxBalnace">{{ $taxReturn->due_price }}</b> $</p>
                                                                <div class="row">
                                                                    <div class="col-lg-4">
                                                                        <label class="control-label">@lang('reports.Amount')</label>

                                                                        <input type="number" min="1" step="any" name="paid"
                                                                        class="form-control enteredAmount" onchange="taxAmountEntered(this)">
                                                                    </div>
                                                                    
                                                                    <div class="col-lg-8">

                                                                        <label class="control-label">@lang('dashboard_accountants_tree.Account')</label>
                                                                        <select class="select2" name="account_id" id="" style="width: 100%; height: 50px">
                                                                            <option value="{{ null }}" selected disabled>@lang('dashboard_invoices.choose_account')</option>
                                                                            @foreach ($accounts->whereIn('account_type_id',[1,2]) as $account)
                                                                            <option value="{{ $account->id }}">
                                                                                {{ $account->name }}
                                                                            </option>
                                                                        @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="row mt-3">
                                                                    <div class="d-flex flex-row justify-content-end w-100">
                                                                        <button id="payTaxBalanceButton" class="btn btn-primary" type="submit">Submit</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                        </div>
                                                    </div>
                                                  
                                         
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- end col -->
        </div>
        <!-- end row -->
        <!-- end row -->
    </div>
    <!-- End Page-content -->
@endsection


@section('custom_script')
    <script>
        /* tax request */
        function handleSubmitButton(){
            // let isAccepted = $("input:checked").length
            let isAccepted =  $("#confirmTaxReportRequest:checked").length
            if (isAccepted){
                $('#taxReportRequestButton').removeAttr('disabled')
            } else {
                $('#taxReportRequestButton').attr('disabled',true)
            }
        }
        /* tax pay request */
        function taxAmountEntered(taxAmountInput){
            let popupContainer = $(taxAmountInput).parent().parent().parent()
            let taxBalanceText = $(popupContainer).find('.taxBalnace').html()
            console.log("taxBalance Text: ", taxBalanceText);
            let taxBalance = parseFloat(taxBalanceText)
            console.log("taxBalance float: ", taxBalance);
            /* get the absolute number of the tax balance */
            let taxBalanceAbs= Math.abs(taxBalance)
            /* set the maximum of the input */
            $(taxAmountInput).prop('max', taxBalanceAbs)

            let enteredValue = parseFloat($(popupContainer).find('.enteredAmount').val())

        }
    </script>
@endsection