@extends('admin.layouts.master')

@section('title', 'Settings')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h4>Settings</h4>
                    </div>
                    <div class="card-body">
                        <form>
                            @csrf

                            <!-- Setting: Show Product Price Without Login -->
                            <div class="form-group d-flex justify-content-between">
                                @php
                                   $show_price = $settings->where('key', 'show_price')->first();
                                @endphp
                                <label for="show-price">Show Product Price Without Login</label>
                                <div class="form-check form-switch form-switch-custom form-switch-primary">
                                    <input class="form-check-input setting" disabled type="checkbox" role="switch" id="show-price" name="show_price" @if($show_price && $show_price->value) checked @endif>
                                </div>
                            </div>

                            <div class="form-group d-flex justify-content-between">
                                @php
                                    $show_purchase_note = $settings->where('key', 'show_purchase_note')->first();
                                @endphp
                                <label for="show-purchase-note">Show Purchase Note</label>
                                <div class="form-check form-switch form-switch-custom form-switch-primary">
                                    <input class="form-check-input setting" disabled type="checkbox" role="switch" id="show-purchase-note" name="show_purchase_note" @if($show_purchase_note && $show_purchase_note->value) checked @endif>
                                </div>
                            </div>

                            <div class="form-group d-flex justify-content-between">
                                @php
                                    $include_vat_tax = $settings->where('key', 'include_vat_tax')->first();
                                    $vat_tax_percentage = $settings->where('key', 'vat_tax_percentage')->first();
                                @endphp

                                <label for="include-vat-tax">Should include Vat Tax @if($vat_tax_percentage) <span id="vat_percentage">({{ $vat_tax_percentage->value }}%)</span> @endif ?
                                    <button type="button" class="btn btn-sm btn-primary py-0 px-1" data-bs-toggle="modal" data-bs-target="#vatModal">
                                        <i
                                            class="mdi mdi-pencil-outline"
                                             data-bs-toggle="modal" data-bs-target="#vatModal"
                                             title="Edit VAT Tax Percentage"
                                        ></i>
                                    </button>
                                </label>
                                <div class="form-check form-switch form-switch-custom form-switch-primary">
                                    <input class="form-check-input setting" disabled type="checkbox" role="switch" id="include-vat-tax" name="include_vat_tax" @if($include_vat_tax && $include_vat_tax->value) checked @endif>
                                </div>
                            </div>

                            <div id="vatModal" class="modal fade">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Set VAT Tax Percentage</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="form-group">
                                                <label for="vat-tax-input">VAT Tax Percentage (%)</label>
                                                <input type="number"  class="form-control" id="vat-tax-input" name="vat_tax" value="{{ $vat_tax_percentage?->value }}">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary" id="save-vat-tax">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- container-fluid -->
@endsection

@section('js')
<script>
    // Attach a change event listener to all elements with the class "setting"
    const switchButtons = document.querySelectorAll('.setting');
    switchButtons.forEach(function(switchButton) {
        switchButton.addEventListener('change', function () {
            const key = this.getAttribute('name');
            const value = this.checked;

            // Send an AJAX request to update the setting when the switch button is toggled
            fetch('{{ route('admin.setting.update') }}', {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ key: key, value: value })
            })
            .then(response => {
                if (response.ok) {
                    // Show success message
                    Toast_.show('success', 'Setting updated successfully');
                } else {
                    // Show error message
                    Toast_.show('error', 'Failed to update the setting');
                }
            })
            .catch(error => {
                // Handle network errors
                console.error(error);
                Toast_.show('error', 'Network error');
            });
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const includeVatTaxCheckbox = document.getElementById("include-vat-tax");
        const vatModal = new bootstrap.Modal(document.getElementById("vatModal"));
        const vatTaxInput = document.getElementById("vat-tax-input");
        const saveVatTaxButton = document.getElementById("save-vat-tax");

        includeVatTaxCheckbox.addEventListener("change", function () {
            if (includeVatTaxCheckbox.checked && !vatTaxInput.value) {
                vatModal.show();
            } else {
                vatModal.hide();
            }
        });

        saveVatTaxButton.addEventListener("click", function () {
            // Get the VAT tax percentage from the input field
            const vatTaxPercentage = vatTaxInput.value;

            fetch('{{ route('admin.setting.update') }}', {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    key: 'vat_tax_percentage',
                    value: vatTaxPercentage
                })
            })
            .then(response => {
                if (response.ok) {
                    // Close the modal
                    vatModal.hide();

                    // Update the VAT tax percentage in the UI
                    const vatTaxElement = document.getElementById("vat_percentage");
                    if(vatTaxElement) {
                        vatTaxElement.innerText = `(${vatTaxPercentage}%)`;
                    }


                    // Show success message
                    Toast_.show('success', 'VAT tax percentage updated successfully');

                    // You can now use vatTaxPercentage for further processing.
                    console.log("VAT Tax Percentage: " + vatTaxPercentage);

                } else {
                    // Show error message
                    Toast_.show('error', 'Failed to update the setting');
                }
            })
            .catch(error => {
                // Handle network errors
                console.error(error);
                Toast_.show('error', 'Network error');
            });

        });
    });
</script>

<script>
    $(document).ready(function() {
        // Enable the switch buttons after the page has loaded
        $(window).on('load', function() {
            $('.setting').prop('disabled', false);
        });
    });

</script>

@endsection