@extends('layouts.app')
@section('title','Other Names')
@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
<li class="breadcrumb-item active">Other Names</li>
@endsection
@section('content')
<div class="page-header">
    <div><h1 class="page-title">Other Names</h1><p class="page-subtitle">{{ $stats['total'] }} total &nbsp;·&nbsp; <span class="text-success">{{ $stats['active'] }} active</span></p></div>
    @if(auth()->user()->hasPermission('masters','create'))<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal"><i class="bi bi-plus-lg me-1"></i>New Other Name</button>@endif
</div>
@if(session('success'))<div class="alert alert-success alert-dismissible d-flex gap-2 mb-3"><i class="bi bi-check-circle flex-shrink-0"></i><div>{{ session('success') }}</div><button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button></div>@endif
@if($errors->any())<div class="alert alert-danger alert-dismissible mb-3">@foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>@endif
<div class="card mb-3"><div class="card-body py-2 px-3"><form method="GET"><div class="row g-2 align-items-center">
<div class="col-12 col-sm-5"><input type="text" name="search" class="form-control form-control-sm" placeholder="Search name or code…" value="{{ request('search') }}"></div>
<div class="col-6 col-sm-2"><select name="status" class="form-select form-select-sm"><option value="">All Status</option><option value="active" {{ request('status')==='active'?'selected':'' }}>Active</option><option value="inactive" {{ request('status')==='inactive'?'selected':'' }}>Inactive</option></select></div>
<div class="col-3 col-sm-1"><button type="submit" class="btn btn-primary btn-sm w-100"><i class="bi bi-search"></i></button></div>
<div class="col-3 col-sm-1"><a href="{{ route('masters.other-names.index') }}" class="btn btn-outline-secondary btn-sm w-100"><i class="bi bi-x-lg"></i></a></div>
</div></form></div></div>
<div class="card"><div class="card-body p-0"><div class="table-responsive">
<table class="table table-hover mb-0" style="min-width:500px">
<thead class="table-light"><tr><th class="ps-4">Name</th><th class="d-none d-sm-table-cell">Code</th><th class="d-none d-md-table-cell">Type</th><th class="d-none d-lg-table-cell">Phone</th><th class="d-none d-lg-table-cell">Email</th><th>Status</th><th class="text-end pe-4">Actions</th></tr></thead>
<tbody>
@forelse($others as $other)
<tr>
<td class="ps-4"><div class="fw-semibold" style="font-size:13.5px">{{ $other->name }}</div></td>
<td class="d-none d-sm-table-cell text-muted" style="font-size:13px">{{ $other->code??'—' }}</td>
<td class="d-none d-md-table-cell" style="font-size:13px">{{ $other->type??'—' }}</td>
<td class="d-none d-lg-table-cell" style="font-size:13px">{{ $other->phone??'—' }}</td>
<td class="d-none d-lg-table-cell" style="font-size:13px">{{ $other->email??'—' }}</td>
<td><span class="badge" style="font-size:11px;background:{{ $other->is_active?'#d1e7dd':'#e9ecef' }};color:{{ $other->is_active?'#0a3622':'#495057' }}">{{ $other->is_active?'Active':'Inactive' }}</span></td>
<td class="text-end pe-3"><div class="d-flex justify-content-end gap-1">
@if(auth()->user()->hasPermission('masters','edit'))<button type="button" class="btn btn-outline-secondary btn-sm btn-edit-other" data-id="{{ $other->id }}" data-name="{{ $other->name }}" data-code="{{ $other->code??'' }}" data-type="{{ $other->type??'' }}" data-phone="{{ $other->phone??'' }}" data-email="{{ $other->email??'' }}" data-address="{{ $other->address??'' }}" data-url="{{ route('masters.other-names.update',$other) }}" title="Edit"><i class="bi bi-pencil"></i></button>@endif
@if(auth()->user()->hasPermission('masters','delete'))<form method="POST" action="{{ route('masters.other-names.destroy',$other) }}" onsubmit="return confirm('Delete?')">@csrf @method('DELETE')<button type="submit" class="btn btn-outline-danger btn-sm"><i class="bi bi-trash"></i></button></form>@endif
</div></td>
</tr>
@empty
<tr><td colspan="7" class="text-center py-5 text-muted"><i class="bi bi-person-lines-fill display-5 d-block mb-2"></i>No other names found.</td></tr>
@endforelse
</tbody></table></div>
@if($others->hasPages())<div class="px-4 py-3 border-top">{{ $others->links() }}</div>@endif
</div></div>
<div class="modal fade" id="addModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content">
<div class="modal-header border-0 pb-0"><h5 class="modal-title fw-semibold">New Other Name</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<form method="POST" action="{{ route('masters.other-names.store') }}">@csrf
<div class="modal-body"><div class="row g-3">
<div class="col-12"><label class="form-label fw-semibold">Name <span class="text-danger">*</span></label><input type="text" name="name" class="form-control" required></div>
<div class="col-6"><label class="form-label fw-semibold">Code</label><input type="text" name="code" class="form-control" placeholder="e.g. ON001"></div>
<div class="col-6"><label class="form-label fw-semibold">Type</label><input type="text" name="type" class="form-control" placeholder="e.g. Partner"></div>
<div class="col-6"><label class="form-label fw-semibold">Phone</label><input type="text" name="phone" class="form-control"></div>
<div class="col-6"><label class="form-label fw-semibold">Email</label><input type="email" name="email" class="form-control"></div>
<div class="col-12"><label class="form-label fw-semibold">Address</label><textarea name="address" class="form-control" rows="2"></textarea></div>
</div></div>
<div class="modal-footer border-0 pt-0"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary px-4"><i class="bi bi-check-circle me-1"></i>Save</button></div>
</form></div></div></div>
<div class="modal fade" id="editModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content">
<div class="modal-header border-0 pb-0"><h5 class="modal-title fw-semibold">Edit Other Name</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<form method="POST" id="editForm">@csrf @method('PUT')
<div class="modal-body"><div class="row g-3">
<div class="col-12"><label class="form-label fw-semibold">Name <span class="text-danger">*</span></label><input type="text" name="name" id="editName" class="form-control" required></div>
<div class="col-6"><label class="form-label fw-semibold">Code</label><input type="text" name="code" id="editCode" class="form-control"></div>
<div class="col-6"><label class="form-label fw-semibold">Type</label><input type="text" name="type" id="editType" class="form-control"></div>
<div class="col-6"><label class="form-label fw-semibold">Phone</label><input type="text" name="phone" id="editPhone" class="form-control"></div>
<div class="col-6"><label class="form-label fw-semibold">Email</label><input type="email" name="email" id="editEmail" class="form-control"></div>
<div class="col-12"><label class="form-label fw-semibold">Address</label><textarea name="address" id="editAddress" class="form-control" rows="2"></textarea></div>
</div></div>
<div class="modal-footer border-0 pt-0"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary px-4"><i class="bi bi-check-circle me-1"></i>Save</button></div>
</form></div></div></div>
@endsection
@push('scripts')
<script>
document.querySelectorAll('.btn-edit-other').forEach(function(btn){
    btn.addEventListener('click',function(){
        document.getElementById('editForm').action=this.dataset.url;
        document.getElementById('editName').value=this.dataset.name;
        document.getElementById('editCode').value=this.dataset.code;
        document.getElementById('editType').value=this.dataset.type;
        document.getElementById('editPhone').value=this.dataset.phone;
        document.getElementById('editEmail').value=this.dataset.email;
        document.getElementById('editAddress').value=this.dataset.address;
        new bootstrap.Modal(document.getElementById('editModal')).show();
    });
});
</script>
@endpush