@extends('layouts.main')
@section('title', 'Mobile Settings')
@section('container')

<meta name="csrf-token" content="{{ csrf_token() }}">

<style>
    .row.gy-4 .col-xxl-2.col-md-2 { padding: 0; }
    .table-responsive { overflow: hidden; }
    #projects-tbl_wrapper { overflow-x: scroll; }

    .tbl-caption { background:#f6b23a; border-radius:6px 6px 0 0; padding:10px; }
    .tbl-caption h4 { display:inline-block; margin:0; color:#222; font-weight:600; }

    /* ---- Toggle group (enhanced + responsive, updated colors) ---- */
    .toggle-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        border: 0;
    }

    .toggle-group .toggle-btn {
        --ring: #e9ecef;
        --brand: #5a2ea0;
        --info: #17a2b8;
        --danger: #dc3545;

        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        font-size: 12.5px;
        font-weight: 600;
        border-radius: 999px;
        border: 1px solid #ced4da;
        background: #fff;
        color: #495057;
        transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
        line-height: 1.2;
        white-space: nowrap;
    }

    .toggle-group .toggle-btn i { font-size: 13px; }

    /* Default outlines */
    .toggle-group .make-main-btn { border-color: var(--danger); color: var(--danger); }
    .toggle-group .make-sub-btn  { border-color: #6c757d; color: #6c757d; }
    .toggle-group .make-card-btn { border-color: var(--brand); color: var(--brand); }

    /* Active states */
    .toggle-group .make-main-btn.active { background: var(--danger); color: #fff; border-color: var(--danger); }
    .toggle-group .make-sub-btn.active  { background: var(--info); color: #fff; border-color: var(--info); }
    .toggle-group .make-card-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }

    /* Hover + focus */
    .toggle-group .toggle-btn:hover { box-shadow: 0 1px 0 rgba(0,0,0,.04); }
    .toggle-group .toggle-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--ring); }

    /* Disabled state */
    .toggle-group .toggle-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

    /* responsive layout for cards */
    .btn-sm { font-size:12px; padding:4px 8px; }

    #project-toast { position: fixed; right: 20px; bottom: 20px; z-index: 1050; display:none; background: #222; color: #fff; padding: 10px 14px; border-radius: 6px; opacity: 0.95; font-size: 13px; }

    .card-main { box-shadow: 0 0 0 3px rgba(90,46,160,.1) !important; border-left: 4px solid #5a2ea0 !important; }

    .inline-edit .input-group .form-control { font-size:13px; }
    .project-show-title { font-weight:600; color:#000; }
    .edit-title { color:#5a2ea0; text-decoration:none; margin-left:6px; font-size:13px; }
    .edit-title i { font-size:12px; }

    /* Sorting visuals */
    .sort-handle{cursor:move;margin-right:8px;color:#6c757d;font-size:14px;}
    .sorting-mode .card{opacity:.95;border:1px dashed #ccc;}
    .sorting-placeholder{background:#f8f9fa;border:2px dashed #adb5bd;height:70px;}
    .order-badge{display:inline-block;padding:3px 6px;border-radius:12px;background:#f8f9fa;border:1px solid #e9ecef;color:#6c757d;font-size:12px;margin-right:8px;margin-bottom:8px;font-weight:600;}

    /* Card grid responsive layout */
    .row.gy-2 > .col-flex { width:100%; flex:0 0 100%; }
    @media (min-width: 576px){
        .row.gy-2 > .col-flex { width:50%; flex:0 0 50%; }
    }
    @media (min-width: 768px){
        .row.gy-2 > .col-flex { width:33.3333%; flex:0 0 33.3333%; }
    }
    @media (min-width: 992px){
        .row.gy-2 > .col-flex { width:25%; flex:0 0 25%; }
    }

    /* mobile layout for toggle buttons */
    @media (max-width: 575.98px){
        .toggle-group{ gap:6px; }
        .toggle-group .toggle-btn{ flex:1 1 calc(33% - 6px); text-align:center; }
    }

    .readonly-checkbox {
      pointer-events: none;
      opacity: 0.6;
    }

</style>

<div id="project-toast"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

@foreach($view as $row)
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body p-0">
                    <div class="table-responsive active-projects">
                        <div class="tbl-caption">
                            <h4 class="heading mb-0">
                               @php
                                $edtingimode = 1;
                              @endphp
                                Mobile Settings - {{ $row->DB_type }}
                            </h4>
                            @if($row->DB_type == "Book Stock")
                            <button class="btn btn-sm btn-primary m-2 add-project-column" data-project="{{ $project }}" data-type-insert="1">Add Colume</button>
                            <button class="btn btn-sm btn-primary m-2 add-project-column" data-project="{{ $project }}" data-type-insert="4">Add Rate Colume</button>
                            @elseif($row->DB_type == "Item Entry")
                            <button class="btn btn-sm btn-primary m-2 add-project-column" data-project="{{ $project }}" data-type-insert="2">Add barcode Colume</button>
                            @elseif($row->DB_type == "PDF Settings")
                            <button class="btn btn-sm btn-primary m-2 add-project-column" data-project="{{ $project }}" data-type-insert="3">Add PDF Colume</button>
                            @php
                              $edtingimode = 0;
                            @endphp
                            @elseif($row->DB_type == 'Barcode item')
                              @php
                                $edtingimode = 0;
                              @endphp
                            @endif
                            <button class="btn btn-sm btn-primary" style="float:right;">Sorting order</button>
                        </div>
                    </div>

                    <div class="p-3">
                        @php
                            $project_name = \App\Models\project_view_setting::where('project_id', $project)
                                        ->where('DB_type', 'like', "%{$row->DB_type}%")
                                        ->orderByRaw('CAST(List_No AS UNSIGNED) ASC')
                                        ->get();
                        @endphp

                        <div class="row gy-2">
                            @foreach($project_name as $rows)
                                @php
                                    $isVisible = (int) ($rows->status ?? 0) === 1;
                                    $isMain = (int) ($rows->Main_title ?? 0) === 1;
                                    $isSub = (int) ($rows->Sub_Title ?? 0) === 1;
                                    $isCard = (int) ($rows->Card_Title ?? 0) === 1;
                                @endphp

                                <div class="col-md-4">
                                    <div class="card mb-2 {{ $isMain ? 'card-main' : '' }}">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <div class="form-check custom-checkbox checkbox-primary me-2">
                                                   @if(($edtingimode == 0 && $rows->DB_title == 'EAN_Code' && $rows->DB_type != 'PDF Settings') || $edtingimode == 0 && $rows->DB_title == 'Pack_Size' && $rows->DB_type != 'PDF Settings')
                                                    <input type="checkbox"
                                                          class="form-check-input project-view-status readonly-checkbox"
                                                          id="projectView_{{ $rows->id }}"
                                                          data-id="{{ $rows->id }}"
                                                          data-project="{{ $project }}"
                                                          data-type="{{ $rows->DB_type }}"
                                                          {{ $isVisible ? 'checked' : '' }} disabled require>

                                                    <label class="form-check-label" for="projectView_{{ $rows->id }}" style="color:#000 !important;">
                                                        <span class="project-show-title" data-id="{{ $rows->id }}">{{ $rows->Show_title }}</span>
                                                        <a href="#" class="edit-title" data-id="{{ $rows->id }}" data-showtitle="{{ e($rows->Show_title) }}" title="Edit">
                                                            <i class="fas fa-pencil-alt"></i>
                                                        </a>
                                                    </label>
                                                  @else
                                                    @if($rows->DB_type != 'PDF Settings')
                                                    <input type="checkbox"
                                                           class="form-check-input project-view-status"
                                                           id="projectView_{{ $rows->id }}"
                                                           data-id="{{ $rows->id }}"
                                                           data-project="{{ $project }}"
                                                           data-type="{{ $rows->DB_type }}"
                                                           {{ $isVisible ? 'checked' : '' }}>
                                                    @endif
                                                    <label class="form-check-label" for="projectView_{{ $rows->id }}" style="color:#000 !important;">
                                                        <span class="project-show-title" data-id="{{ $rows->id }}">{{ $rows->Show_title }}</span>
                                                        <a href="#" class="edit-title" data-id="{{ $rows->id }}" data-showtitle="{{ e($rows->Show_title) }}" title="Edit">
                                                            <i class="fas fa-pencil-alt"></i>
                                                        </a>
                                                    </label>
                                                    @endif
                                                </div>

                                                <div class="ms-auto">
                                                    <div class="toggle-group"
                                                         role="group" aria-label="View options"
                                                         data-project="{{ $project }}"
                                                         data-type="{{ $rows->DB_type }}"
                                                         data-view="{{ $rows->view_type }}">
                                                      @if($edtingimode == 1)
                                                        {{-- Main (Red) --}}
                                                        <button class="toggle-btn make-main-btn {{ $isMain ? 'active btn-danger' : 'btn-outline-danger' }}"
                                                                data-id="{{ $rows->id }}"
                                                                data-project="{{ $project }}"
                                                                data-type="{{ $rows->DB_type }}"
                                                                data-action="main"
                                                                title="Set as Main">
                                                            <i class="fas fa-star"></i><span>Main</span>
                                                        </button>

                                                        {{-- Submenu --}}
                                                        <button class="toggle-btn make-sub-btn {{ $isSub ? 'active btn-info' : 'btn-outline-secondary' }}"
                                                                data-id="{{ $rows->id }}"
                                                                data-project="{{ $project }}"
                                                                data-type="{{ $rows->DB_type }}"
                                                                data-action="sub"
                                                                title="Toggle Submenu">
                                                            <i class="fas fa-sitemap"></i><span>Submenu</span>
                                                        </button>
                                                      @endif
                                                      @if(($edtingimode == 0 && $rows->DB_title == 'EAN_Code' && $rows->DB_type != 'PDF Settings') || $edtingimode == 0 && $rows->DB_title == 'Pack_Size' && $rows->DB_type != 'PDF Settings')
                                                         <button class="toggle-btn make-card-btn {{ $isCard ? 'active btn-primary' : 'btn-outline-primary' }}"
                                                                data-id="{{ $rows->id }}"
                                                                data-project="{{ $project }}"
                                                                data-type="{{ $rows->DB_type }}"
                                                                data-action="card"
                                                                title="Set as Card View" disabled>
                                                            <i class="fas fa-id-card"></i><span>Card View</span>
                                                        </button>
                                                      @else
                                                        {{-- Card View (Purple) --}}
                                                        <button class="toggle-btn make-card-btn {{ $isCard ? 'active btn-primary' : 'btn-outline-primary' }}"
                                                                data-id="{{ $rows->id }}"
                                                                data-project="{{ $project }}"
                                                                data-type="{{ $rows->DB_type }}"
                                                                data-action="card"
                                                                title="Set as Card View">
                                                            <i class="fas fa-id-card"></i><span>Card View</span>
                                                        </button>
                                                      @endif
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="inline-edit mt-1" id="inline-edit-{{ $rows->id }}" style="display:none;">
                                                <div class="input-group input-group-sm" style="max-width:260px;">
                                                    <input type="text" class="form-control form-control-sm inline-show-title" data-id="{{ $rows->id }}" value="{{ $rows->Show_title }}">
                                                    <button class="btn btn-sm btn-success save-inline-title" data-id="{{ $rows->id }}"><i class="fas fa-check"></i></button>
                                                    <button class="btn btn-sm btn-secondary cancel-inline-title" data-id="{{ $rows->id }}"><i class="fas fa-times"></i></button>
                                                </div>
                                            </div>

                                            <div class="mt-2">
                                                <small class="text-muted">List #: {{ $rows->List_No ?? '-' }}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

<script nonce="{{ $cspNonce }}" src="{{ asset('public/js/jquery-3.6.0.min.js') }}"></script>
<script nonce="{{ $cspNonce }}"
    src="{{ url('js/mobilesettings.js') }}"
    data-update-title-url="{{ route('project.view.updateTitle', [], false) }}"
    data-toggle-url="{{ route('project.view.toggle', [], false) }}"
    data-set-main-url="{{ route('project.view.setMain', [], false) }}"
    data-save-order-url="{{ route('project.view.saveOrder', [], false) }}"
    data-show-fields-url="{{ route('showfildes', [], false) }}"
    data-store-fields-url="{{ route('storefields', [], false) }}"></script>
@endsection