@extends('layouts.app') {{-- Include the layout --}}

@section('content')

@php

    /* Services Configurations */

    $servicedata=[];
    if(isset($serviceconfig)){
        
        foreach ($serviceconfig as $res) {
            $servicedata[$res->name] = $res->value;
        }
    }
    
    $showcashcounter=0;
    if(isset($servicedata['showcashcounter'])){
        $showcashcounter=$servicedata['showcashcounter'];
    }

    $servicesdiscount='manual';
    if(isset($servicedata['servicesdiscount'])){
        $servicesdiscount=$servicedata['servicesdiscount'];
    }
    
    /* Sales Configurations */

    $salesdata=[];
    if(isset($salesconfig)){
        
        foreach ($salesconfig as $res) {
            $salesdata[$res->name] = $res->value;
        }
    }
    
    $salesprice='item';
    if(isset($salesdata['salesprice'])){
        $salesprice=$salesdata['salesprice'];
    }

    $salesdiscount='manual';
    if(isset($salesdata['salesdiscount'])){
        $salesdiscount=$salesdata['salesdiscount'];
    }

    $posnotes='';
    if(isset($salesdata['posnotes'])){
        $posnotes=$salesdata['posnotes'];
    }

    $salesbalance=1;
    if(isset($salesdata['salesbalance'])){
        $salesbalance=$salesdata['salesbalance'];
    }

    $branchwisecustomers=1;
    if(isset($salesdata['branchwisecustomers'])){
        $branchwisecustomers=$salesdata['branchwisecustomers'];
    }


    $branchwisebalance=1;
    if(isset($salesdata['branchwisebalance'])){
        $branchwisebalance=$salesdata['branchwisebalance'];
    }

    /* Purchase Configurations */

    $purchasedata=[];
    if(isset($purchaseconfig)){
        
        foreach ($purchaseconfig as $res) {
            $purchasedata[$res->name] = $res->value;
        }
    }
    
    $purchaseprice='item';
    if(isset($purchasedata['purchaseprice'])){
        $purchaseprice=$purchasedata['purchaseprice'];
    }

    $purchasebalance=1;
    if(isset($salesdata['purchasebalance'])){
        $purchasebalance=$salesdata['purchasebalance'];
    }

    /* Items Configurations */

    $itemdata=[];
    if(isset($itemconfig)){

    foreach ($itemconfig as $res) {
            $itemdata[$res->name] = $res->value;
        }
    }

    $savednegativestock=0;
    if(isset($itemdata['negativestock'])){
        $savednegativestock=$itemdata['negativestock'];
    }


    $savedbranchwiseitems=0;
    if(isset($itemdata['branchwiseitems'])){
        $savedbranchwiseitems=$itemdata['branchwiseitems'];
    }

    $savedshowcolor=0;
    if(isset($itemdata['showcolor'])){
        $savedshowcolor=$itemdata['showcolor'];
    }

    $colorwisestock=0;
    if(isset($itemdata['colorwisestock'])){
        $colorwisestock=$itemdata['colorwisestock'];
    }

    
    $savedshowsize=0;
    if(isset($itemdata['showsize'])){
        $savedshowsize=$itemdata['showsize'];
    }

    $sizewisestock=0;
    if(isset($itemdata['sizewisestock'])){
        $sizewisestock=$itemdata['sizewisestock'];
    }
    
    if(session('opentab') && session('opentab') =='purchase'){
        
        $purchaseactive='active';
        $serviceactive='';
        $salesactive='';
        $itemactive='';
        
        $purchasearia='true';
        $servicearia='false';
        $salesaria='false';
        $itemaria='false';
        
        $purchaseshow='show';
        $serviceshow='';
        $saleshow='';
        $itemshow='';
        
    }
    else if (session('opentab') && session('opentab') =='services'){
        
        $purchaseactive='';
        $serviceactive='active';
        $salesactive='';
        $itemactive='active';
        
        $purchasearia='false';
        $servicearia='true';
        $salesaria='false';
        $itemaria='false';
        
        $purchaseshow='';
        $serviceshow='show';
        $saleshow='';
        $itemshow='';
    }

    else if (session('opentab') && session('opentab') =='items'){

        $purchaseactive='';
        $serviceactive='';
        $salesactive='';
        $itemactive='active';

        $purchasearia='false';
        $servicearia='false';
        $salesaria='false';
        $itemaria='true';

        $purchaseshow='';
        $serviceshow='';
        $saleshow='';
        $itemshow='show';


    }
    else{
        
        $purchaseactive='';
        $serviceactive='';
        $salesactive='active';
        $itemactive='';
        
        $purchasearia='false';
        $servicearia='false';
        $salesaria='ture';
        $itemaria='false';
        
        $purchaseshow='';
        $serviceshow='';
        $saleshow='show';
        $itemshow='';
    }



@endphp    

<style>

#editor:focus {
    outline: none;
    box-shadow: 0 0 4px #007bff;
}
.btn-toolbar .btn,
.btn-toolbar select {
    margin-right: 5px;
    border-radius: 6px;
}
.btn-light {
    border: 1px solid #ddd;
}


#editor ul, #editor ol {
    font-size: inherit;
    margin-left: 20px;
    padding-left: 20px;
}

#editor li::marker {
    font-size: 0.5em;
}

</style>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header"><span>Module Wise Configurations</span>
                    <div style="float:right">
                        <ul class="nav nav-tabs card-header-tabs" id="myTabs" role="tablist">
                            
                            <li class="nav-item">
                                <a class="nav-link {{ $salesactive }}" id="sales-tab" data-toggle="tab" href="#salesform" role="tab" aria-controls="salesform" aria-selected="{{ $salesaria }}" style="padding: 3px 10px;">Sales</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ $purchaseactive }}" id="purchase-tab" data-toggle="tab" href="#purchaseform" role="tab" aria-controls="purchaseform" aria-selected="{{ $purchasearia }}" style="padding: 3px 10px;">Purchase</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ $serviceactive }}" id="services-tab" data-toggle="tab" href="#serviceform" role="tab" aria-controls="serviceform" aria-selected="{{ $servicearia }}" style="padding: 3px 10px;">Services</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ $itemactive }}" id="item-tab" data-toggle="tab"
                                    href="#itemform" role="tab" aria-controls="itemform"
                                    aria-selected="{{ $itemaria }}" style="padding: 3px 10px;">Items</a>
                            </li>
                        </ul>
                    </div>
                
                </div>
                
                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success custom-alert">
                            {{ session('success') }}
                        </div>
                    @endif
                    
                    @if (session('error'))
                        <div class="alert alert-danger custom-alert">
                            {{ session('error') }}
                        </div>
                    @endif
                    
                    @if (isset($error_message))
                        <div class="alert alert-danger custom-alert">
                            {{ isset($error_message) ? $error_message : '' }}
                        </div>
                    @endif
                    <div class="tab-content">
                    
                        <!-- Sales Configuration -->
                        
                        <div class="tab-pane fade {{ $saleshow }} {{ $salesactive }}" id="salesform" role="tabpanel" aria-labelledby="sales-tab">
                            <form method="POST" action="{{ route('updateSalesConfig') }}" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="salesprice">Sale Price <span class="text-danger">*</span></label> 
                                            <select name="salesprice" id="salesprice" class="form-control" >
                                                <option value="item" {{ isset($salesprice) && $salesprice == 'item' ? 'selected' : '' }}>Item Price</option>
                                                <option value="customer"  {{ isset($salesprice) && $salesprice == 'customer' ? 'selected' : '' }}>Customer Last Price</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="salesdiscount">Sales Discount <span class="text-danger">*</span></label> 
                                            <select name="salesdiscount" id="salesdiscount" class="form-control" >
                                                <option value="customer" {{ isset($salesdiscount) && $salesdiscount == 'customer' ? 'selected' : '' }}>Customer Wise</option>
                                                <option value="manual"  {{ isset($salesdiscount) && $salesdiscount == 'manual' ? 'selected' : '' }}>Manual</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="salesbalance">Show Balance On PDFs <span
                                                    class="text-danger">*</span></label>
                                            <select name="salesbalance" id="salesbalance" class="form-control">
                                                <option value="1"
                                                    {{ isset($salesbalance) && $salesbalance == 1 ? 'selected' : '' }}>
                                                    Yes
                                                </option>
                                                <option value="0"
                                                    {{ isset($salesbalance) && $salesbalance == 0 ? 'selected' : '' }}>
                                                    No
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="branchwisecustomers">Show Branch Wise Customers <span
                                                    class="text-danger">*</span></label>
                                            <select name="branchwisecustomers" id="branchwisecustomers" class="form-control">
                                                <option value="1"
                                                    {{ isset($branchwisecustomers) && $branchwisecustomers == 1 ? 'selected' : '' }}>
                                                    Yes
                                                </option>
                                                <option value="0"
                                                    {{ isset($branchwisecustomers) && $branchwisecustomers == 0 ? 'selected' : '' }}>
                                                    No
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="branchwisebalance">Branch Wise Customer Balance <span
                                                    class="text-danger">*</span></label>
                                            <select name="branchwisebalance" id="branchwisebalance" class="form-control">
                                                <option value="1"
                                                    {{ isset($branchwisebalance) && $branchwisebalance == 1 ? 'selected' : '' }}>
                                                    Yes
                                                </option>
                                                <option value="0"
                                                    {{ isset($branchwisebalance) && $branchwisebalance == 0 ? 'selected' : '' }}>
                                                    No
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="posnotes">POS PDF Notes</label>

                                            <!-- Toolbar -->
                                            <div class="btn-toolbar mb-2">
                                                <button type="button" class="btn btn-sm btn-light" onclick="formatText('bold')"><b>B</b></button>
                                                <button type="button" class="btn btn-sm btn-light" onclick="formatText('italic')"><i>I</i></button>
                                                <button type="button" class="btn btn-sm btn-light" onclick="formatText('underline')"><u>U</u></button>
                                                <select onchange="formatText('fontSize', this.value)" class="btn btn-sm btn-light">
                                                    <option value="">Size</option>
                                                    <option value="1">8 Px</option>
                                                    <option value="2">10 Px</option>
                                                    <option value="3">12 Px</option>
                                                    <option value="4">14 Px</option>
                                                    <option value="5">18 Px</option>
                                                    <option value="6">24 Px</option>
                                                    <option value="7">32 Px</option>
                                                </select>
                                                <button type="button" class="btn btn-sm btn-light" onclick="formatText('insertUnorderedList')">• Bullets</button>
                                                <button type="button" class="btn btn-sm btn-light" onclick="formatText('insertOrderedList')">1. Numbered</button>
                                                <button type="button" class="btn btn-sm btn-light" onclick="formatText('justifyLeft')">⟸ Left</button>
                                                <button type="button" class="btn btn-sm btn-light" onclick="formatText('justifyCenter')">⇔ Center</button>
                                                <button type="button" class="btn btn-sm btn-light" onclick="formatText('justifyRight')">⟹ Right</button>
                                                <button type="button" class="btn btn-sm btn-light" onclick="formatText('justifyFull')">☰ Justify</button>
                                            </div>

                                            <!-- Editable area -->
                                            <div id="editor" contenteditable="true"
                                                style="border:1px solid #ccc; padding:10px; min-height:150px; border-radius:6px;">
                                                {!! old('posnotes', $posnotes ?? '') !!}
                                            </div>

                                            <!-- Hidden textarea (for Laravel submission) -->
                                            <textarea id="posnotes" name="posnotes" class="form-control" hidden></textarea>

                                        </div>
                                    </div>

                                    
                                </div>

                                <div style="text-align:right">
                                    <button type="submit" class="btn btn-success" >Update</button>
                                </div> 
                            </form>
                        </div>
                        
                        <!-- Purchase Configuration -->
                        
                        <div class="tab-pane fade {{ $purchaseshow }} {{ $purchaseactive }}" id="purchaseform" role="tabpanel" aria-labelledby="purchase-tab">
                        
                            <form method="POST" action="{{ route('updatePurchaseConfig') }}" enctype="multipart/form-data">
                                @csrf

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="purchaseprice">Purchase Price <span class="text-danger">*</span></label> 
                                            <select name="purchaseprice" id="purchaseprice" class="form-control" >
                                                <option value="item" {{ isset($purchaseprice) && $purchaseprice == 'item' ? 'selected' : '' }}>Item Price</option>
                                                <option value="supplier"  {{ isset($purchaseprice) && $purchaseprice == 'supplier' ? 'selected' : '' }}>Supplier Last Price</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="purchasebalance">Show Balance On PDFs <span
                                                    class="text-danger">*</span></label>
                                            <select name="purchasebalance" id="purchasebalance" class="form-control">
                                                <option value="1"
                                                    {{ isset($purchasebalance) && $purchasebalance == 1 ? 'selected' : '' }}>
                                                    Yes
                                                </option>
                                                <option value="0"
                                                    {{ isset($purchasebalance) && $purchasebalance == 0 ? 'selected' : '' }}>
                                                    No
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div style="text-align:right">
                                    <button type="submit" class="btn btn-success" >Update</button>
                                </div> 
                            </form>
                        
                        </div>


                        <!-- Services Configuration -->
                        
                        <div class="tab-pane fade {{ $serviceshow }} {{ $serviceactive }}" id="serviceform" role="tabpanel" aria-labelledby="services-tab">
                        
                            <form method="POST" action="{{ route('updateServiceConfig') }}" enctype="multipart/form-data">
                                @csrf
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-check">
                                                <label class="form-check-label" for="cashcounter">
                                                    Show Cash Counter 
                                                </label>
                                                <input 
                                                    type="checkbox" 
                                                    class="form-check-input ms-2" 
                                                    id="cashcounter" 
                                                    name="cashcounter"
                                                    value="1"
                                                    {{ $showcashcounter == 1 ? 'checked' : '' }}>
                                            </div>
                                        </div> 
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="servicesdiscount">Services Discount <span class="text-danger">*</span></label> 
                                            <select name="servicesdiscount" id="servicesdiscount" class="form-control" >
                                                <option value="customer" {{ isset($servicesdiscount) && $servicesdiscount == 'customer' ? 'selected' : '' }}>Customer Wise</option>
                                                <option value="manual"  {{ isset($servicesdiscount) && $servicesdiscount == 'manual' ? 'selected' : '' }}>Manual</option>
                                            </select>
                                        </div>
                                    </div>

                                </div>
                                  
                                
                                
                                <div style="text-align:right">
                                    <button type="submit" class="btn btn-success">Update</button>
                                </div> 
                                
                                
                                
                            </form>
                        
                        </div>


                        <!-- Items Configuration -->

                        <div class="tab-pane fade {{ $itemshow }} {{ $itemactive }}" id="itemform" role="tabpanel"
                            aria-labelledby="item-tab">
                            <form method="POST" action="{{ route('updateItemConfig') }}" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="negativestock">Allow Negative Stock <span
                                                    class="text-danger">*</span></label>
                                            <select name="negativestock" id="negativestock" class="form-control">
                                                <option value="1"
                                                    {{ isset($savednegativestock) && $savednegativestock == 1 ? 'selected' : '' }}>Yes
                                                </option>
                                                <option value="0"
                                                    {{ isset($savednegativestock) && $savednegativestock == 0 ? 'selected' : '' }}>No
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="branchwiseitems">Branch Wise Items <span
                                                    class="text-danger">*</span></label>
                                            <select name="branchwiseitems" id="branchwiseitems" class="form-control">
                                                <option value="1"
                                                    {{ isset($savedbranchwiseitems) && $savedbranchwiseitems == 1 ? 'selected' : '' }}>Yes
                                                </option>
                                                <option value="0"
                                                    {{ isset($savedbranchwiseitems) && $savedbranchwiseitems == 0 ? 'selected' : '' }}>No
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">

                                    <label for=""><b>Item Color</b></label>
                                    <div class="form-group col-md-6">
                                        <label class="form-check-label" for="showcolor">
                                            Show Color
                                        </label>
                                        <input type="checkbox" class="form-check-input ms-2" id="showcolor"
                                            name="showcolor" value="1" {{ $savedshowcolor == 1 ? 'checked' : '' }}>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label class="form-check-label" for="colorwisestock">
                                            Show Color Wise Stock
                                        </label>
                                        <input type="checkbox" class="form-check-input ms-2" id="colorwisestock"
                                            name="colorwisestock" value="1" {{ $colorwisestock == 1 ? 'checked' : '' }}>
                                    </div>
                                </div>

                                <div class="row">

                                    <label for=""><b>Item Size</b></label>
                                    <div class="form-group col-md-6">
                                        <label class="form-check-label" for="showsize">
                                            Show Size
                                        </label>
                                        <input type="checkbox" class="form-check-input ms-2" id="showsize"
                                            name="showsize" value="1" {{ $savedshowsize == 1 ? 'checked' : '' }}>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label class="form-check-label" for="sizewisestock">
                                            Show Size Wise Stock
                                        </label>
                                        <input type="checkbox" class="form-check-input ms-2" id="sizewisestock"
                                            name="sizewisestock" value="1" {{ $sizewisestock == 1 ? 'checked' : '' }}>
                                    </div>
                                </div>

                                <div style="text-align:right">
                                    <button type="submit" class="btn btn-success">Update</button>
                                </div>
                            </form>
                        </div>
                        
                    </div>    
                    
                </div>
            </div>
        </div>
    </div>
</div>    


<script> 


$('#updatebtn').on('click', function(event) {
    var form = event.target.form;

    if (!form.checkValidity()) {
        event.preventDefault();
    }

    $(form).addClass('was-validated');
    
});

function formatText(command, value = null) {
    document.execCommand(command, false, value);
}

function sanitizeEditorContent(html) {
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = html;

    // Convert <font size=""> to <span style="font-size:...">
    tempDiv.querySelectorAll("font[size]").forEach(font => {
        const size = font.getAttribute("size");
        let cssSize = "inherit";

        // Map <font size> to CSS px values
        switch (size) {
            case "1": cssSize = "8px"; break;
            case "2": cssSize = "10px"; break;
            case "3": cssSize = "12px"; break;
            case "4": cssSize = "14px"; break;
            case "5": cssSize = "18px"; break;
            case "6": cssSize = "24px"; break;
            case "7": cssSize = "32px"; break;
        }

        const span = document.createElement("span");
        span.style.fontSize = cssSize;
        span.innerHTML = font.innerHTML;
        font.replaceWith(span);
    });

    // ✅ Ensure list items (<li>) have same font size as inner spans
    tempDiv.querySelectorAll("li").forEach(li => {
        const span = li.querySelector("span[style*='font-size']");
        if (span) {
            li.style.fontSize = span.style.fontSize;
        }
    });

    return tempDiv.innerHTML;
}


// On form submit, copy editor HTML to textarea
document.querySelector("form").addEventListener("submit", function () {
    const editorContent = document.getElementById("editor").innerHTML;
    const cleanHTML = sanitizeEditorContent(editorContent);
    document.getElementById("posnotes").value = cleanHTML;
});
</script>

@endsection