@extends('backEnd.layouts.master')
@section('title', 'Unit')

@push('styles')
<style>
.unit-page .card { border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: 20px; background: #fff; }
.unit-page .card-header { background: #fff; border-bottom: 1px solid #dee2e6; padding: 14px 20px; font-weight: 700; }
.unit-page .blue-btn { background: var(--primary); color: #fff; border: none; padding: 8px 16px; border-radius: 4px; text-decoration: none; display: inline-block; }
.unit-page .blue-btn:hover { background: var(--accent); color: #fff; }
.unit-page .warning-btn { background: #f59e0b; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; text-decoration: none; display: inline-block; }
.unit-page .danger-btn { background: #dc3545; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; text-decoration: none; display: inline-block; }
.unit-page .bulk-btn, .unit-page .search-btn { background: var(--primary); color: #fff; border: none; padding: 8px 16px; border-radius: 0 4px 4px 0; }
.unit-page .bulk-box, .unit-page .search-box { display: flex; }
.unit-page .bulk-box .form-control { border-radius: 4px 0 0 4px; }
.unit-page .search-box .form-control { border-radius: 4px 0 0 4px; }
.unit-page .table-theme thead th { background: #f8f9fa; font-weight: 600; border-bottom: 2px solid #dee2e6; }
.unit-page .red { color: #dc3545; }
.unit-page #form-panel { display: none; }
.unit-page .btn-list { display: none; }
.unit-page .dnone { display: none !important; }
.unit-page .mt-15 { margin-top: 15px; }
.unit-page .attr-tag { cursor: pointer; font-size: 13px; }
.unit-page td.text-start .attr-remove-x { width: 16px; height: 16px; line-height: 1; font-size: 10px; z-index: 2; }
.unit-page td.text-start .position-relative { display: inline-block; margin-bottom: 6px; }
</style>
@endpush

@section('content')
<div class="container-fluid py-3 unit-page">
    <div class="card">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col-lg-6"><span>Unit</span></div>
                <div class="col-lg-6">
                    <div class="float-end">
                        <a onclick="onFormPanel()" href="javascript:void(0);" class="btn blue-btn btn-form">
                            <i class="fa fa-plus"></i> Add New
                        </a>
                        <a onclick="onListPanel()" href="javascript:void(0);" class="btn warning-btn btn-list">
                            <i class="fa fa-reply"></i> Back to List
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div id="list-panel" class="card-body">
            <div class="alert alert-info py-2 small mb-3">
                <strong>Active</strong> unit গুলো product add/edit-এ variant হিসেবে দেখাবে।
                দরকার নেই এমন unit <strong>deactivate</strong> করুন (delete না করলেও পরে আবার চালু করতে পারবেন)।
                প্রতিটি unit-এ yellow <strong>+</strong> দিয়ে value add করুন (250g, 500g, M, Red…)
            </div>

            <div class="d-flex gap-2 flex-wrap mb-3">
                <a href="{{ route('admin.attributes', ['filter' => 'all']) }}"
                   class="btn btn-sm {{ ($filter ?? 'all') === 'all' ? 'btn-primary' : 'btn-outline-secondary' }}">
                    All ({{ $counts['all'] ?? 0 }})
                </a>
                <a href="{{ route('admin.attributes', ['filter' => 'active']) }}"
                   class="btn btn-sm {{ ($filter ?? '') === 'active' ? 'btn-success' : 'btn-outline-success' }}">
                    Active ({{ $counts['active'] ?? 0 }})
                </a>
                <a href="{{ route('admin.attributes', ['filter' => 'inactive']) }}"
                   class="btn btn-sm {{ ($filter ?? '') === 'inactive' ? 'btn-secondary' : 'btn-outline-secondary' }}">
                    Inactive ({{ $counts['inactive'] ?? 0 }})
                </a>
            </div>

            <div class="row mb-3">
                <div class="col-lg-5">
                    <div class="form-group bulk-box">
                        <select id="bulk-action" class="form-control">
                            <option value="">Bulk Action</option>
                            <option value="activate">Activate</option>
                            <option value="deactivate">Deactivate</option>
                            <option value="delete">Delete Permanently</option>
                        </select>
                        <button type="button" onclick="onBulkAction()" class="btn bulk-btn">Apply</button>
                    </div>
                </div>
                <div class="col-lg-3"></div>
                <div class="col-lg-5">
                    <div class="form-group search-box">
                        <input id="search" name="search" type="text" class="form-control" placeholder="Search...">
                        <button type="button" onclick="onSearch()" class="btn search-btn">Search</button>
                    </div>
                </div>
            </div>
            <div id="tp_datalist">
                @include('backEnd.unit.partials.table', compact('units'))
            </div>
        </div>

        <div id="form-panel" class="card-body">
            <form id="DataEntry_formId">
                @csrf
                <input type="hidden" name="RecordId" id="RecordId" value="">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label for="unit">Unit Name<span class="red">*</span></label>
                            <input type="text" name="unit" id="unit" class="form-control" required>
                        </div>
                    </div>
                </div>
                <div class="row mt-15">
                    <div class="col-lg-12">
                        <button type="button" id="submit-form" class="btn blue-btn me-2">Save</button>
                        <a onclick="onListPanel()" href="javascript:void(0);" class="btn danger-btn">Cancel</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const base_url = @json(url('/admin'));
const unitFilter = @json($filter ?? 'all');
const TEXT = {
    "Do you really want to edit this record": "Do you really want to edit this record?",
    "Do you really want to delete this record": "Do you really want to delete this record?",
    "Do you really want to delete this records": "Do you really want to delete these records?",
    "Please select record": "Please select at least one record.",
    "Please select action": "Please select an action."
};
function onSuccessMsg(msg) { toastr.success(msg); }
function onErrorMsg(msg) { toastr.error(msg); }
function onCustomModal(msg, callback) {
    Swal.fire({
        title: 'Confirm',
        text: msg,
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#2d6a4f',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes',
        cancelButtonText: 'Cancel'
    }).then(function(result) {
        if (result.isConfirmed && typeof window[callback] === 'function') {
            window[callback]();
        }
    });
}
function confirmAction(options, callback) {
    Swal.fire({
        title: options.title || 'Are you sure?',
        text: options.text || '',
        icon: options.icon || 'warning',
        showCancelButton: true,
        confirmButtonColor: '#2d6a4f',
        cancelButtonColor: '#6c757d',
        confirmButtonText: options.confirmButtonText || 'Yes',
        cancelButtonText: 'Cancel'
    }).then(function(result) {
        if (result.isConfirmed) callback();
    });
}
</script>
<script src="{{ asset('backEnd/js/attributes.js') }}"></script>
@endpush