@extends('admin.layout.master')

<style>
    .form-control {
        margin-bottom: 0 !important;
    }

    .cl-form-label {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        max-width: 12.5rem;
        width: 100%;
        flex: 0 0 auto;
    }

    .cl-form-label:after {
        content: ':';
        margin-right: 0.4rem;
    }

    label>span {
        display: inline-flex;
        align-items: flex-end
    }

    .acc_code,
    .select2-container {
        flex: 1 1 auto;
    }
</style>

@section('content')
    @if (@isset($edit))
        {{ $edit->id }}
    @endif

    <div class="card sina-card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4>{{ __('obs.vat/tax_create') }}</h4>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('vat-tax.store') }}">
                @csrf
                <input type="hidden" @if (@isset($edit) && $edit->id) value="{{ $edit->id }}" @endif name="id">

                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="row g-2 justify-content-center">
                            <div class="col-6">
                                <div class="d-flex">
                                    <label for="code" class="cl-form-label">
                                        <span>
                                            {{ __('obs.code') }}
                                            <span class="required">*</span>
                                        </span>
                                    </label>
                                    <input type="text" id="code" name="code" class="form-control cl-form-control"
                                        placeholder="Code" @if (@isset($edit)) value="{{ $edit->code }}" @endif>
                                </div>
        
                                @error('code')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-6">
                                <div class="d-flex">
                                    <label for="apply_for" class="cl-form-label">
                                        <span>
                                            {{ __('obs.apply_for') }}
                                            <span class="required">*</span>
                                        </span>
                                    </label>
                                    <select id="apply_for" name="apply_for" class="form-select cl-form-select cl-select2">
                                        <option value="1" @if (@isset($edit) && $edit->apply_for == 1) selected @endif>{{ __('obs.all') }}
                                        </option>
                                        <option value="2" @if (@isset($edit) && $edit->apply_for == 2) selected @endif>
                                            {{ __('obs.purchase') }}</option>
                                        <option value="3" @if (@isset($edit) && $edit->apply_for == 3) selected @endif>
                                            {{ __('obs.sale') }}</option>
                                    </select>
                                </div>
        
                                @error('apply_for')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-6">
                                <div class="d-flex">
                                    <label for="name" class="cl-form-label">
                                        <span>
                                            {{ __('obs.name') }}
                                            <span class="required">*</span>
                                        </span>
                                    </label>
                                    <input type="text" id="name" name="name" class="form-control cl-form-control"
                                        placeholder="Name" @if (@isset($edit)) value="{{ $edit->name }}" @endif>
                                </div>
            
                                @error('name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-6">
                                <div class="d-flex">
                                    <label for="local_name" class="cl-form-label">
                                        <span>
                                            {{ __('obs.local_name') }}
                                            <span class="required">*</span>
                                        </span>
                                    </label>
                                    <input type="text" id="local_name" name="local_name" class="form-control cl-form-control"
                                        placeholder="Local Name"
                                        @if (@isset($edit)) value="{{ $edit->local_name }}" @endif>
                                </div>
            
                                @error('local_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-6">
                                <div class="d-flex">
                                    <label for="purchase_acc_code" class="cl-form-label">
                                        <span>
                                            {{ __('obs.purchase_acc_code') }}
                                            <span class="required">*</span>
                                        </span>
                                    </label>
                                    <div class="d-flex acc_code">
                                        <select id="purchase_acc_code" name="purchase_acc_code" class="form-select cl-select2">
                                            <option value="">{{ __('obs.select_option') }}</option>
                                            @if ($accountHeads)
                                                @foreach ($accountHeads as $head)
                                                    <option value="{{ $head->id }}"
                                                        @if (@isset($edit) && $edit->purchase_ledger_id == $head->id) selected @endif>{{ $head->auto_code }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
            
                                        <button type="button"
                                            onclick="openAccountsLedgerDetailsModal(null,'purchase_acc_code','purchase_acc_name')"
                                            class="btn btn-warning btn-sm ms-2">
                                            <span class="fa fa-download"></span>
                                        </button>
                                    </div>
                                </div>
            
                                @error('purchase_acc_code')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-6">
                                <div class="d-flex">
                                    <label for="purchase_acc_name" class="cl-form-label">
                                        <span>
                                            {{ __('obs.acc_name') }}
                                        </span>
                                    </label>
                                    <div class="d-flex flex-grow-1">
                                        <select id="purchase_acc_name" name="purchase_acc_name" class="form-select cl-select2">
                                            <option value=""> {{ __('obs.select_option') }}</option>
                                            @if ($accountHeads)
                                                @foreach ($accountHeads as $head)
                                                    <option value="{{ $head->id }}"
                                                        @if (@isset($edit) && $edit->purchase_ledger_id == $head->id) selected @endif>{{ $head->name }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
            
                                @error('purchase_acc_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-6">
                                <div class="d-flex">
                                    <label for="sale_acc_code" class="cl-form-label">
                                        <span>
                                            {{ __('obs.sales_acc_code') }}
                                            <span class="required">*</span>
                                        </span>
                                    </label>
                                    <div class="d-flex acc_code">
                                        <select id="sale_acc_code" name="sale_acc_code" class="form-select cl-select2">
                                            <option value=""> {{ __('obs.select_option') }}</option>
                                            @if ($accountHeads)
                                                @foreach ($accountHeads as $head)
                                                    <option value="{{ $head->id }}"
                                                        @if (@isset($edit) && $edit->ledger_id == $head->id) selected @endif>{{ $head->auto_code }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
            
                                        <button type="button"
                                            onclick="openAccountsLedgerDetailsModal(null,'sale_acc_code','sale_acc_name')"
                                            class="btn btn-warning btn-sm ms-2">
                                            <span class="fa fa-download"></span>
                                        </button>
                                    </div>
                                </div>
            
                                @error('sale_acc_code')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-6">
                                <div class="d-flex">
                                    <label for="sale_acc_name" class="cl-form-label">
                                        <span>
                                            {{ __('obs.acc_name') }}
                                        </span>
                                    </label>
                                    <div class="d-flex flex-grow-1">
                                        <select id="sale_acc_name" name="sale_acc_name" class="form-select cl-select2">
                                            <option value=""> {{ __('obs.select_option') }}</option>
                                            @if ($accountHeads)
                                                @foreach ($accountHeads as $head)
                                                    <option value="{{ $head->id }}"
                                                        @if (@isset($edit) && $edit->ledger_id == $head->id) selected @endif>{{ $head->name }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
            
                                @error('sale_acc_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-6">
                                <div class="d-flex">
                                    <label for="tax_rate" class="cl-form-label">
                                        <span>
                                            {{ __('obs.vat/tax_rate') }}
                                            <span class="required">*</span>
                                        </span>
                                    </label>
                                    <input type="number" step='0.01' id="tax_rate" name="tax_rate"
                                        class="form-control cl-form-control" placeholder="Tax Rate"
                                        @if (@isset($edit)) value="{{ $edit->value }}" @endif>
                                </div>
            
                                @error('tax_rate')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-6">
                                <div class="d-flex">
                                    <label for="apply_after" class="cl-form-label">
                                        <span>
                                            {{ __('obs.apply_after') }}
                                        </span>
                                    </label>
                                    <select id="apply_after" name="apply_after" class="form-select cl-select2">
                                        <option value=""> {{ __('obs.select_option') }}</option>
                                        @if ($taxList)
                                            @foreach ($taxList as $tax)
                                                <option value="{{ $tax->id }}"
                                                    @if (@isset($edit) && $edit->depends_on == $tax->id) selected @endif>{{ $tax->name }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex">
                                    <label for="parent_id" class="cl-form-label">
                                        <span>
                                            {{ __('obs.parent_id') }}
                                        </span>
                                    </label>
                                    <div class="d-flex flex-grow-1">
                                        <select id="parent_id" name="parent_id" class="form-select cl-select2">
                                            <option value=""> {{ __('obs.select_option') }}</option>
                                            @if ($taxList)
                                                @foreach ($taxList as $tax)
                                                    <option value="{{ $tax->id }}"
                                                        @if (@isset($edit) && $edit->parent_id == $tax->id) selected @endif>{{ $tax->name }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
            
                                @error('parent_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-6">
                                <div class="d-flex">
                                    <label for="vat_type" class="cl-form-label">
                                        <span>
                                            {{ __('obs.vat/tax_type') }}
                                        </span>
                                    </label>
                                    <div class="d-flex flex-grow-1">
                                        <select id="vat_type" name="vat_type" class="form-select cl-select2">
                                            <option value="1" @if (@isset($edit) && $edit->is_fixed == $tax->id) selected @endif>
                                                {{ __('obs.customized') }}</option>
                                            <option value="1" @if (@isset($edit) && $edit->is_fixed == $tax->id) selected @endif>
                                                {{ __('obs.fixed') }}</option>
                                        </select>
                                    </div>
                                </div>
            
                                @error('vat_type')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-lg-8 mx-auto">
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex align-items-center mb-2">
                                    <h5 class="me-3">{{ __('obs.branches') }}</h5>
                                    <div class="form-check mb-0 me-2">
                                        <input class="form-check-input" type="checkbox" value=""
                                            id="all_store_check" name="all_store_check" />
                                        <label class="form-check-label" for="all_store_check">
                                            {{ __('obs.for_all') }}</label>
                                    </div>
                                    <div class="all_store_input d-none">
                                        <div class="d-flex">
                                            <input type="text" name="all_active_date" placeholder="Activation Date"
                                                class="form-control cl-form-control date-picker me-2" />

                                            <input type="text" name="all_complete_date" placeholder="Completion Date"
                                                class="form-control cl-form-control date-picker" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 px-0 position-relative">
                                <div class="cl-table-container cl-bg-gray-100 rounded-2" style="height: 280px">
                                    <table class="table table-sm table-bordered mb-0 rounded-2 cl-table">
                                        <thead>
                                            <tr>
                                                <th class="text-center cl-fixed-cell" style="width: 70px;"
                                                    scope="col">{{ __('obs.id') }}</th>
                                                <th class="text-center cl-fixed-cell" style="max-width: 180px;"
                                                    scope="col">{{ __('obs.name') }}</th>
                                                <th class="text-center" scope="col" style="width: 150px;">
                                                    {{ __('obs.activation_date') }}</th>
                                                <th class="text-center" scope="col" style="width: 150px;">
                                                    {{ __('obs.completion_date') }}</th>
                                                <th class="text-center" scope="col">{{ __('obs.action') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody id="branchTbody">
                                            @if (@isset($edit) && !@empty($edit->branch_data))
                                                @foreach ($edit->branch_data as $key => $group)
                                                    <tr id="table_row_{{ $group->id }}">
                                                        <td scope="row" class="text-center cl-fixed-cell id_value">
                                                            {{ $key + 1 }}</td>
                                                        <td class="text-center cl-fixed-cell">
                                                            <div class="d-flex">
                                                                <select id="branch_name_{{ $group->id }}"
                                                                    name="branch_name[]"
                                                                    class="form-select cl-form-select cl-select2">
                                                                    <option value="">Select Option</option>
                                                                    @if ($stores)
                                                                        @foreach ($stores as $store)
                                                                            <option value="{{ $store->id }}"
                                                                                @if ($group->branch == $store->id) selected @endif>
                                                                                {{ $store->name_eng }}</option>
                                                                        @endforeach
                                                                    @endif
                                                                </select>
                                                            </div>
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text"
                                                                class="form-control cl-form-control date-picker"
                                                                value="{{ $group->activation }}"
                                                                id="active_date_{{ $group->id }}"
                                                                name="active_date[]" />
                                                        </td>
                                                        <td class="text-center">
                                                            <input type="text"
                                                                class="form-control cl-form-control date-picker"
                                                                value="{{ $group->completion }}"
                                                                id="complete_date_{{ $group->id }}"
                                                                name="complete_date[]" />
                                                        </td>
                                                        <td class="text-center">
                                                            <button type="button" class="btn cl-btn btn-danger"
                                                                onclick="removeRow({{ $group->id }})">
                                                                <i class="bi bi-dash"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr id="table_row_1">
                                                    <td scope="row" class="text-center cl-fixed-cell id_value">1</td>
                                                    <td class="text-center cl-fixed-cell">
                                                        <div class="d-flex">
                                                            <select id="branch_name_1" name="branch_name[]"
                                                                class="form-select cl-form-select cl-select2">
                                                                <option value=""> {{ __('obs.select_option') }}
                                                                </option>
                                                                @if ($stores)
                                                                    @foreach ($stores as $store)
                                                                        <option value="{{ $store->id }}">
                                                                            {{ $store->name_eng }}</option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <input type="text"
                                                            class="form-control cl-form-control date-picker"
                                                            id="active_date_1" name="active_date[]" />
                                                    </td>
                                                    <td class="text-center">
                                                        <input type="text"
                                                            class="form-control cl-form-control date-picker"
                                                            id="complete_date_1" name="complete_date[]" />
                                                    </td>
                                                    <td class="text-center"></td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                                <button type="button"
                                    class="d-flex align-items-center btn btn-primary cl-btn cl-btn-primary
                                    p-0 position-absolute start-100 top-50"
                                    onclick="addRow()">
                                    <i class="bi bi-plus" style="font-size: 1.75rem"></i>
                                </button>

                                <div class="w-100 d-flex justify-content-end mt-3">
                                    {{-- <button type="button" class="btn btn-primary cl-btn cl-btn-primary">
                                        <i class="bi bi-arrow-clockwise me-2"></i>
                                        Reset
                                    </button> --}}
                                    <button type="submit" class="btn btn-primary cl-btn cl-btn-primary">
                                        <i class="bi bi-file-earmark-arrow-up-fill me-2"></i>
                                        Submit
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>



    @include('accounts.voucher.modal_accounts_ledger')
    @include('accounts.voucher.modal_head_accounts_code')


@section('custom_js')
    <script>
        let tblRowCount;
        let last_id = 0;

        function removeRow(id) {
            $(`#table_row_${id}`).remove();
        }

        function addRow() {
            const tbody = $('#branchTbody');
            const value = tbody.children().last().find('.id_value').text();
            last_id = Number(value) + 1;
            const tr = `<tr id="table_row_${last_id}">
                        <td scope="row" class="text-center cl-fixed-cell id_value">
                            ${last_id}</td>
                        <td class="text-center cl-fixed-cell">
                            <div class="d-flex">
                                <select id="branch_name_${last_id}" name="branch_name[]" class="form-select cl-form-select cl-select2">
                                    <option value=""> {{ __('obs.select_ ') }}</option>
                                    @if ($stores)
                                        @foreach ($stores as $store)
                                            <option  value="{{ $store->id }}">{{ $store->name_eng }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </td>
                        <td class="text-center">
                            <input type="text" id="active_date_${last_id}" name="active_date[]"
                                class="form-control cl-form-control date-picker" />
                        </td>
                        <td class="text-center">
                            <input type="text" id="complete_date_${last_id}" name="complete_date[]"
                                class="form-control cl-form-control date-picker" />
                        </td>
                        <td class="text-center">
                            <button type="button" class="btn cl-btn btn-danger" onclick="removeRow(${last_id})">
                                <i class="bi bi-dash"></i>
                            </button>
                        </td>
                    </tr>`;
            tbody.append(tr)
            $(`#branch_name_${last_id}`).select2();
            $(`#active_date_${last_id}, #complete_date_${last_id}`).flatpickr({
                enableTime: false,
                dateFormat: 'd-m-Y',
            });
        }

        let groupData = [];

        $(document).ready(function() {
            let int_data_param = {
                search_type: 1
            }
            const setGroupData = (data) => {
                groupData = data
                $('#loader').hide();
            }
            ajaxCall("{{ route('accounts_settings.ledger_search') }}", 'GET', int_data_param, setGroupData);
        });

        const openAccountsGroupDetailsModal = (obj) => {
            var returnData = ``;
            $('#load_table_modal_accounts_head').dataTable().fnDestroy();
            if (groupData.length > 0) {
                for (let index = 0; index < groupData.length; index++) {
                    returnData += `<tr onclick="setGroupDataToSelector('` + groupData[index].id + `','` + groupData[
                            index].auto_code + `','` + groupData[index].name + `','` + obj.accCode + `','` + obj
                        .accName + `')" role="row" class="odd">
                                <td>` + (index + 1) + `</td>
                                <td>` + groupData[index].auto_code + `</td>
                                <td>` + groupData[index].name + `</td>
                            </tr>`;
                }
            }
            $('#load_tbody_modal_accounts_head').html(returnData);
            $("#accounts_group_model").modal("show");

            $('#load_table_modal_accounts_head').DataTable({
                "destroy": true,
            });
        }

        const setGroupDataToSelector = (id, auto_code, name, accCode, accName) => {
            $("#accounts_group_model").modal("hide");
            openAccountsLedgerDetailsModal(auto_code, accName, accCode);
        }

        const openAccountsLedgerDetailsModal = (auto_code = null, accName, accCode) => {
            $('#load_table_modal_accounts_ledger').dataTable().fnDestroy();
            var group_code = auto_code;
            var returnData = ``;
            let int_data_param = {
                group_code: group_code
            }
            const setLedgerData = (data) => {
                if (data.length > 0) {
                    for (let index = 0; index < data.length; index++) {
                        returnData += '<tr onclick="setDataToSelector(`' + data[index].id + '`,`' + accName +
                        '`,`' + accCode + '`)" role="row" class="odd">';
                        returnData += '<td class="sorting_1">' + (index + 1) + '</td>';
                        returnData += '<td>' + (data[index].parent ? data[index].parent.auto_code : '') + '</td>';
                        returnData += '<td>' + (data[index].parent ? data[index].parent.name : '') + '</td>';
                        returnData += '<td><b>' + data[index].auto_code + '</b></td>';
                        returnData += '<td><b>' + data[index].name + '</b></td></tr>';
                    }
                }
                $('#load_tbody_modal_accounts_ledger').html(returnData);
                $("#accounts_ledger_model").modal("show");
                $('#load_table_modal_accounts_ledger').DataTable({
                    "destroy": true,
                });
            }
            ajaxCall("{{ route('accounts_settings.ledger_search') }}", 'GET', int_data_param, setLedgerData);
        }

        const setDataToSelector = (id, accName, accCode) => {
            $(`#${accName}`).val(id).trigger('change');
            $(`#${accCode}`).val(id).trigger('change');
            $("#accounts_ledger_model").modal("hide");
        }

        $('#purchase_acc_name, #purchase_acc_code, #sale_acc_code, #sale_acc_name').on('select2:select', function(event) {
            const target = event.target;
            const value = target.value

            switch (target.id) {
                case "purchase_acc_name":
                    $(`#purchase_acc_code`).val(value).trigger('change');
                    break;
                case "purchase_acc_code":
                    $(`#purchase_acc_name`).val(value).trigger('change');
                    break;
                case "sale_acc_code":
                    $(`#sale_acc_name`).val(value).trigger('change');
                    break;
                case "sale_acc_name":
                    $(`#sale_acc_code`).val(value).trigger('change');
                    break;
                default:
                    console.log('error');
                    break;
            }
        });

        $('#all_store_check').on('change', function(e) {
            const value = $(e.target).prop('checked');

            if (value) {
                $('.all_store_input').removeClass('d-none');
            } else {
                $('.all_store_input').addClass('d-none');
            }
        })

        select2('cl-select2', 'Select', false);
    </script>
@endsection
@endsection