@extends('layouts.user_type.auth')

@section('common')
<div class="container-fluid py-4 px-4">
    @include('components.alert')

    <div id="tableView">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div>
                    <h5 class="mb-0" style="font-weight:700;">Common Masters</h5>
                    <p class="mb-0" style="font-size:0.75rem;color:var(--grey);margin-top:2px;">Manage lookup values and master data.</p>
                </div>
                <button class="qc-btn-create btn bg-gradient-primary btn-sm mb-0" onclick="clearForm(); toggleView('form')">
                    <i class="fas fa-plus me-1" style="font-size:0.72rem;"></i> New Common
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="border:none; max-height:calc(100vh - 280px); overflow-y:auto;">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th style="padding-left:1.25rem; width:5%;">#</th>
                                <th class="text-center">Type</th>
                                <th class="text-center">Code</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($commons as $index => $common)
                                <tr>
                                    <td style="padding-left:1.25rem;"><span class="mono" style="font-size:0.72rem;color:var(--grey);">{{ str_pad($commons->firstItem()+$index,2,'0',STR_PAD_LEFT) }}</span></td>
                                    <td class="text-center"><span class="badge bg-gradient-light" style="font-size:0.7rem;">{{ $common->type }}</span></td>
                                    <td class="text-center"><span class="mono" style="font-weight:700;color:var(--heading);font-size:0.82rem;">{{ $common->code }}</span></td>
                                    <td class="text-center">
                                        <span class="badge @if($common->status=='inactive') bg-gradient-secondary @elseif($common->status=='active') bg-gradient-success @else bg-gradient-danger @endif">
                                            {{ ucfirst($common->status) }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <div class="d-flex justify-content-center gap-2">
                                            <a href="#" class="ia-edit" onclick="openEditModal({{ $common }});" title="Edit">
                                                <i class="fas fa-pencil-alt" style="font-size:0.72rem;"></i>
                                            </a>
                                            @if ($common->status !== 'deleted' && $common->is_system !== 1)
                                                <form method="POST" action="{{ route('common.delete', $common->id) }}" style="display:inline;">
                                                    @csrf
                                                    <input type="hidden" name="delete_common_id" value="{{ $common->id }}">
                                                    <button type="submit" class="ia-delete" onclick="return confirm('Delete this common?');" style="border:none;font-family:inherit;" title="Delete">
                                                        <i class="fas fa-trash-alt" style="font-size:0.72rem;"></i>
                                                    </button>
                                                </form>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="5"><div class="empty-state"><i class="fas fa-cubes"></i><p>No common data found</p></div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="px-4 py-3" style="border-top:1px solid var(--border);">
                    @include('components.pagination', ['paginator' => $commons])
                </div>
            </div>
        </div>
    </div>

    <div id="formView" class="d-none">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h6 id="commonModalLabel" class="mb-0" style="font-weight:700;">Create New Common</h6>
                <button class="qc-btn-dismiss btn btn-light btn-sm mb-0" onclick="toggleView('table')">
                    <i class="fas fa-arrow-left me-1" style="font-size:0.72rem;"></i> Back
                </button>
            </div>
            <form method="POST" action="{{ route('common.saveOrUpdate') }}" id="commonModalForm">
                @csrf
                <div class="card-body">
                    <div class="row g-3">
                        <input type="hidden" name="id" id="commonId">
                        <div class="col-md-6">
                            <label class="form-label">Type <span class="text-danger">*</span></label>
                            <select class="form-select" id="type" name="type" required>
                                <option value="" disabled selected>Select Type</option>
                                <option value="Master">Master</option>
                                @foreach ($activeMasters as $master)
                                    <option value="{{ $master->code }}">{{ ucfirst($master->code) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Code <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="code" name="code" placeholder="Enter code" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Value</label>
                            <input type="text" class="form-control" id="value" name="value" placeholder="Enter value">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select class="form-select" id="status" name="status" required>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end gap-2">
                    <button type="button" class="qc-btn-dismiss btn btn-light mb-0" onclick="toggleView('table')">Cancel</button>
                    <button type="submit" id="submitButton" class="qc-btn-confirm btn bg-gradient-primary mb-0">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function toggleView(view) {
        if (view === 'form') { document.getElementById('tableView').classList.add('d-none'); document.getElementById('formView').classList.remove('d-none'); }
        else { document.getElementById('tableView').classList.remove('d-none'); document.getElementById('formView').classList.add('d-none'); }
    }
    function clearForm() {
        document.getElementById('commonModalForm').reset();
        document.getElementById('commonModalLabel').innerText = 'Create New Common';
        document.getElementById('submitButton').innerText = 'Save';
        document.getElementById('status').innerHTML = `<option value="active" selected>Active</option><option value="inactive">Inactive</option>`;
    }
    function openEditModal(common) {
        document.getElementById('commonModalLabel').innerText = 'Update Common';
        document.getElementById('submitButton').innerText = 'Update';
        document.getElementById('commonId').value = common.id;
        document.getElementById('type').value = common.type;
        document.getElementById('code').value = common.code;
        document.getElementById('value').value = common.value;
        document.getElementById('status').value = common.status;
        if (common.status === 'deleted') { document.getElementById('status').innerHTML += '<option value="deleted" selected>Deleted</option>'; }
        if (common.is_system === 1) { ['type','code','value','status'].forEach(id => document.getElementById(id).disabled = true); document.getElementById('submitButton').style.display = 'none'; }
        else { ['type','code','value','status'].forEach(id => document.getElementById(id).disabled = false); document.getElementById('submitButton').style.display = 'inline-flex'; }
        toggleView('form');
    }
</script>
@endsection