@extends('layouts.software')
@section('body')
<div class="row">
    @forelse ($branches as $key=>$branch)
        <div class="col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="media">
                        <div class="media-body">
                            <div class="row">
                                <div class="font-size-16 col-md-8">{{ $branch->company->name }} |
                                    {{ $branch->name }}</div>
                                <div class="col-md-4">
                                    <div class="custom-control custom-switch mb-2 float-right" dir="ltr">
                                        <input type="checkbox" class="custom-control-input selectallmaster"
                                            id="customSwitch{{ $branch->id }}"
                                            data-company-name="{{ $branch->company->name }}"
                                            data-branch-name="{{ $branch->name }}"
                                            onchange="toggleSwitch({{ $branch->id }})"
                                            {{ session('selected_branch') == $branch->id ? 'checked' : '' }}>
                                        <label class="custom-control-label titlcust"
                                            for="customSwitch{{ $branch->id }}">
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h4 class="mt-4" id="pricehidden{{ $branch->id }}">10.000</h4>
                    <div class="row" id="progress{{ $branch->id }}">
                        <div class="col-7">
                            <p class="mb-0"><span class="text-success mr-2">10% <i
                                        class="mdi mdi-arrow-up"></i></span></p>
                        </div>
                        <div class="col-5 align-self-center">
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-primary" role="progressbar" style="width: 62%"
                                    aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @empty
    @endforelse
</div>

<script type="text/javascript">
    // expire modal
    $(document).ready(function() {
        @if (!empty(session('selected_branch')))
            @if ($expire & $status)
                // If the 'expire' condition is true, open the modal
                $('.bs-example-modal-center').modal('show');
            @endif
            @if ($branch_status)
                // If the 'expire' condition is true, open the modal
                $('.branch-status').modal('show');
            @endif

            @if (!$status)
                // If the 'leniencyExpire' condition is true or branch status is 0, open the modal
                $('.leniency-expire').modal('show');
            @endif
        @endif
    });

    // expire modal

    function toggleSwitch(branchId) {
        // Turn off all other switches
        var allSwitches = document.querySelectorAll('.custom-control-input.selectallmaster');
        allSwitches.forEach(function(switchElem) {
            if (switchElem.id !== 'customSwitch' + branchId) {
                switchElem.checked = false;
            }
        });

        // Update session and checkbox state
        if (document.getElementById('customSwitch' + branchId).checked) {
            window.location.href = '{{ route('set-selected-branch') }}?branch=' + branchId;
        } else {
            window.location.href = '{{ route('set-selected-branch') }}';
        }

        // Store the selected branch in local storage
        function storeSelectedBranch(branchId) {
            localStorage.setItem('selectedBranch', branchId);
        }

        // Retrieve the selected branch from local storage
        function getSelectedBranch() {
            return localStorage.getItem('selectedBranch');
        }

        // Store the selected branch
        storeSelectedBranch(branchId);

        // Refresh the page
        // location.reload();

        function updateDashboardText(branchId) {
            var selectedBranch = document.getElementById('customSwitch' + branchId);
            var dashboardText = document.getElementById('dashboardText');

            if (selectedBranch.checked) {
                var companyName = selectedBranch.getAttribute('data-company-name');
                var branchName = selectedBranch.getAttribute('data-branch-name');
                dashboardText.textContent = companyName + ' | ' + branchName;
            } else {
                dashboardText.textContent = 'Dashboard';
            }
        }
    }

    $(document).ready(function(e) {


        $('#image').change(function() {

            let reader = new FileReader();

            reader.onload = (e) => {

                $('#preview-image-before-upload').attr('src', e.target.result);
            }

            reader.readAsDataURL(this.files[0]);

        });
    });
</script>

@endsection