@extends('layouts.general_component.header')

@section('generalcontent')

<div class="container d-flex flex-row justify-content-center align-items-center pt-5">
    <div class="card col-md-8 p-3 d-flex flex-column">

        <h2 style="font-size:14px;">Select Your App</h2>
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <form action="{{ route('selectapp.update') }}" method="POST" id="appForm">
            @csrf

            <div class="row">
                @foreach($apps as $app)
                    <div class="col-md-4 mb-3">
                        <label class="app-select-label" style="cursor: pointer; width: 100%;">
                            <input 
                                type="checkbox" 
                                name="selected_apps[]" 
                                value="{{ $app->app_id }}" 
                                class="d-none app-checkbox"
                                id="app_{{ $app->app_id }}"
                            >
                            <div class="card text-center p-2 h-100 app-card">
                                @if($app->app_id == '409166')
                                <img src="/appimages/sales-icon.png" class="card-img-top mx-auto" style="height: 80px; width: auto;">
                                @elseif($app->app_id == '376047')
                                <img src="/appimages/lead-icon.jpg" class="card-img-top mx-auto" style="height: 80px; width: auto;">
                                @elseif($app->app_id == '283651')
                                <img src="/appimages/purchase.png" class="card-img-top mx-auto" style="height: 80px; width: auto;">
                                @elseif($app->app_id == '408026')
                                <img src="/appimages/fieldsalest.png" class="card-img-top mx-auto" style="height: 80px; width: auto;">
                                @elseif($app->app_id == '530944')
                                <img src="/appimages/callmanagert.png" class="card-img-top mx-auto" style="height: 80px; width: auto;">
                                @elseif($app->app_id == '914578')
                                <img src="/appimages/service.png" class="card-img-top mx-auto" style="height: 80px; width: auto;">
                                @elseif($app->app_id == '186743')
                                <img src="/appimages/md.png" class="card-img-top mx-auto" style="height: 80px; width: auto;">
                                @elseif($app->app_id == '160790')
                                <img src="/appimages/pricelist.png" class="card-img-top mx-auto" style="height: 80px; width: auto;">
                                @endif
                                <div class="card-body p-2">
                                    <h6 class="card-title mb-0">{{ $app->app_name }}</h6>
                                </div>
                            </div>
                        </label>
                    </div>
                @endforeach

                <div class="col-md-4 mb-3">
                        <label class="app-select-label" style="cursor: pointer; width: 100%; position:relative;">
                            <div class="comingsoon">
                                Comming Soon
                                </div>
                                    <div class="card text-center p-2 h-100 app-card">
                                        <img src="/appimages/whatsapp.png" class="card-img-top mx-auto" style="height: 80px; width: auto;">
                                        <div class="card-body p-2">
                                            <h6 class="card-title mb-0">WhatsApp Messaging</h6>
                                    </div>
                            </div>
                        </label>
                </div>
                <div class="col-md-4 mb-3">
                        <label class="app-select-label" style="cursor: pointer; width: 100%; position:relative;">
                            <div class="comingsoon">
                                Comming Soon
                                </div>
                                    <div class="card text-center p-2 h-100 app-card">
                                        <img src="/appimages/pms.png" class="card-img-top mx-auto" style="height: 80px; width: auto;">
                                        <div class="card-body p-2">
                                            <h6 class="card-title mb-0">PMS</h6>
                                    </div>
                            </div>
                        </label>
                </div>
                <div class="col-md-4 mb-3">
                        <label class="app-select-label" style="cursor: pointer; width: 100%; position:relative;">
                            <div class="comingsoon">
                                Comming Soon
                                </div>
                                    <div class="card text-center p-2 h-100 app-card">
                                        <img src="/appimages/logistic.png" class="card-img-top mx-auto" style="height: 80px; width: auto;">
                                        <div class="card-body p-2">
                                            <h6 class="card-title mb-0">Logistic</h6>
                                    </div>
                            </div>
                        </label>
                </div>
                <div class="col-md-4 mb-3">
                        <label class="app-select-label" style="cursor: pointer; width: 100%; position:relative;">
                            <div class="comingsoon">
                                Comming Soon
                                </div>
                                    <div class="card text-center p-2 h-100 app-card">
                                        <img src="/appimages/hrmanagement.png" class="card-img-top mx-auto" style="height: 80px; width: auto;">
                                        <div class="card-body p-2">
                                            <h6 class="card-title mb-0">HR Management</h6>
                                    </div>
                            </div>
                        </label>
                </div>

            </div>

            <div class="p-1 col-md-12 my-1 text-center d-flex flex-row justify-content-center">
                <button type="submit" class="btn btn-primary" id="submitBtn" disabled>Save</button>
            </div>
        </form>

    </div>
</div>

<style>
    .app-card {
        border: 2px solid transparent;
        transition: all 0.3s ease;
    }
    .app-select-label .app-card.selected {
        border-color: #007bff;
        background-color: #f0f8ff;
    }
    .comingsoon{
      position: absolute;
      top: -9px;
      /* width: 100%; */
      /* height: 30px; */
      z-index: 99;
      background: #ff3d3d;
      color: white;
      padding: 3px 12px;
      border-radius: 15px;
      font-size: 9px;
      /* left: -9px; */
      right: -14px;
    }
</style>

<script>
    const checkboxes = document.querySelectorAll('.app-checkbox');
    const submitBtn = document.getElementById('submitBtn');

    function updateSubmitState() {
        const anyChecked = Array.from(checkboxes).some(cb => cb.checked);
        submitBtn.disabled = !anyChecked;
    }

    document.querySelectorAll('.app-select-label').forEach(label => {
        const checkbox = label.querySelector('.app-checkbox');
        const card = label.querySelector('.app-card');

        label.addEventListener('click', (e) => {
            if (e.target.tagName.toLowerCase() !== 'input') {
                checkbox.checked = !checkbox.checked;
                card.classList.toggle('selected', checkbox.checked);
                updateSubmitState();
                e.preventDefault();
            }
        });
    });

    // Also re-check state on initial load in case of back navigation
    updateSubmitState();
</script>

@endsection