@extends('layouts.master')
@section('title', __('Tax Management'))

@push('styles')
@endpush

@section('content')
    <div class="row">
        <div class="col-12">
            <div id="FormDiv">
                <div class="card mb-3">
                    <form id="addForm" name="addForm" method="POST" action="{{ route('admin.tax-management.store') }}" onsubmit="false" class="form" enctype="multipart/form-data">
                        <div class="card-header">
                            <h4 class="m-0 text-start title">{{__('Create Tax')}}</h4>
                        </div>
                        <div class="card-body">
                            {{ csrf_field() }}
                            <input type="hidden" name="edit_id" id="edit_id" value="">
                            <div class="row">

                                <div class="col-md-6">
                                    <div class="relative z-0 w-full mb-1 mt-3 group text-left">
                                        <label for="country_id" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white z-50 custom-label" for="country_id">{{__('Country')}}  <span class="text-danger">*</span></label>
                                        <select class="select-form select2 form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11" name="country_id" id="country_id">
                                            <option value="">{{__('Select Country')}}</option>
                                            @foreach ($country as $row)
                                                <option value="{{ $row->id }}">{{ $row->country_name }} </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <span class="country_id_error text-danger error"></span>
                                </div>
                                <div class="col-md-6">
                                <div class="relative z-0 w-full mb-1 mt-3 group text-left">
                                    <label for="state_id" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white z-50 custom-label" for="country_id">{{__('Select Region / State / Province')}}  <span class="text-danger">*</span></label>
                                    <select class="select-form select2 form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11" name="state_id" id="state_id">
                                        <option value="">{{__('Select Region / State / Province')}}</option>
                                    </select>
                                    </div>
                                    <span class="state_id_error text-danger error"></span>
                                </div>
                                <div class="col-md-6">
                                <div class="relative z-0 w-full mb-1 mt-3 group text-left">
                                    <input type="text" name="tax_name" id="tax_name" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 pl-15 bg-transparent"  placeholder="" autofocus>
                                    <label for="inputEmail4" class="ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Tax Name') }} <span class="text-danger">*</span></label>
                                    </div>
                                    <span class="tax_name_error text-danger error"></span>
                                </div>
                                <div class="col-md-6">
                                <div class="relative z-0 w-full mb-1 mt-3 group text-left">
                                    <input type="text" name="tax_percentage" id="tax_percentage" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11 pl-15 bg-transparent"  placeholder="" autofocus>
                                    <label for="tax_percentage" class="ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Tax Percentage') }} <span class="text-danger">*</span></label>
                                    </div>
                                    <span class="tax_percentage_error text-danger error"></span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <div class="col-xs-6 col-sm-6 col-md-6">
                                    <button type="submit" id="submitBtn" class="btn btn-primary btn-save-record">{!! renderIconHtml('save') !!}{{ __('Save') }}</button>
                                    <button type="button" id="cancelBtn" onclick="clearForm()" class="btn btn-secondary">{!! renderIconHtml('cancel') !!}{{ __('Cancel') }}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive su_tables">
                        <div id="custom_toolbar" class="float-right d-flex">
                            @can('tax-management-export')
                                <div class="dropdown me-1" data-toggle="tooltip" data-placement="bottom" title="Export data">
                                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
                                            class="bi bi-download"></i> {{ __('Export') }}</button>
                                    <div id="indexExportTasks" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <a class="dropdown-item" href="#"
                                            onclick="exportTasks('tax_management',['counter','tax_name','country_id','state_id','tax_percentage'],'csv')">{{ __('CSV') }}</a>
                                        <a class="dropdown-item" href="#"
                                            onclick="exportTasks('tax_management',['counter','tax_name','country_id','state_id','tax_percentage'],'zip')">ZIP</a>
                                    </div>
                                </div>
                            @endcan
                            @can('tax-management-create')
                                <a id="addBtn" data-toggle="tooltip" data-placement="top" title="{{ __('Add New') }}" href="javascript:void(0)" class="btn btn-secondary me-1">{!! renderIconHtml('add') !!}{{ __('Add New') }}</a>
                            @endcan

                            @can('tax-management-archive-show')
                                <a onclick="showArchived('index')" id="backToBtn" data-toggle="tooltip" data-placement="top" title="{{ __('Back') }}" class="btn btn-secondary text-white d-none float-right" href="javascript:void(0)"><i class="bi bi-arrow-counterclockwise"></i> {{ __('Back') }}</a>
                                <a onclick="showArchived('archive')" id="archivedBtn" data-toggle="tooltip" data-placement="top" title="{{ __('Show Archived') }}" class="btn btn-secondary text-white" href="javascript:void(0)"><i class="bi bi-archive"></i>  {{ __('Archive') }}</a>
                            @endcan
                        </div>

                        <table id="bstable" data-icons="icons" data-icons-prefix="bi" table-for="tax_management"
                               class="table table-bordered table-hover" data-ajax="ajaxRequest"
                               data-show-export="false" data-filter-control="true" data-side-pagination="server"
                               data-search="false" data-total-field="count" data-data-field="items"
                               data-show-search-clear-button="true" data-pagination="true" data-search="false"
                               data-toolbar="#custom_toolbar" data-toggle="table" data-show-button-text="true"
                               data-show-columns="true" data-show-columns-toggle-all="false" data-show-toggle="false"
                               data-export-options='{"fileName": "{{ config('app.name') . ' - tax-management - ' . date('d/m/Y-H:m:s') }}"}'
                               data-loading-template="DataTaleLoadingTemplate" data-search-on-enter-key="true">
                            <thead>
                                <tr>
                                    @if (auth()->user()->setting->preference == "Left")
                                        <th data-field="action" data-width-unit="px">{{ __('Action') }}</th>
                                    @endif
                                    <th title="#" data-field="counter" data-switchable="true" data-width-unit="px">#</th>
                                    <th title="{{ __('Tax Name') }}" data-field="tax_name" data-filter-control="input" data-sortable="false" data-filter-control-placeholder="Tax Name">{{ __('Tax Name') }}</th>
                                    <th title="{{ __('Country') }}" data-field="country_id" data-filter-control="input" data-sortable="false" data-filter-control-placeholder="Country">{{ __('Country') }}</th>
                                    <th title="{{ __('State') }}" data-field="state_id" data-filter-control="input" data-sortable="false" data-filter-control-placeholder="State">{{ __('State') }}</th>
                                    <th title="{{ __('Tax Percentage') }}" data-field="tax_percentage" data-filter-control="input" data-sortable="false" data-filter-control-placeholder="Tax Percentage">{{ __('Tax Percentage') }}</th>
                                    @if (auth()->user()->setting->preference == "Right")
                                    <th data-field="action" data-width-unit="px">{{ __('Action') }}</th>
                                    @endif
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
@push('scripts')
    <script src="{{ asset('backend/js/pages-js/tax-management.js') }}"></script>
@endpush