@extends('business.layouts.admin')

@section('breadcrumb')
    <li class="breadcrumb-item">
        <a href="{{ route('business.dashboard') }}">{{ __('Dashboard') }}</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
        {{ __('Employees') }}
    </li>
@endsection

@section('content')
    <div class="dash-content">
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h4 class="m-b-10 fw-bold">{{ __('Manage Employees') }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="text-end mb-4">
                    <button type="button" class="btn btn-sm px-3 shadow-sm text-white"
                        style="background-color: #655BE1; border-color: #655BE1;" data-bs-toggle="modal"
                        data-bs-target="#createEmployeeModal">
                        <i class="ti ti-plus me-1"></i> {{ __('Add Employee') }}
                    </button>
                </div>

                <div class="row">
                    @forelse($employees as $employee)
                        <div class="col-md-4 mb-4">
                            <div class="card text-center border-0 shadow-sm h-100"
                                style="border-radius: 12px; border: 1px solid #eef0f2 !important;">
                                <div class="card-header border-0 pb-0 bg-transparent">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <span class="badge"
                                            style="background-color: #f1f1f1; color: #655BE1; border: 1px solid #655BE1;">
                                            {{-- {{ ucfirst($employee['phone_owner']) }} --}}
                                            Employee
                                        </span>
                                        <div class="dropdown">
                                            <button class="btn btn-link text-muted p-0" data-bs-toggle="dropdown">
                                                <i class="ti ti-dots-vertical"></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-end shadow border-0">
                                                <a class="dropdown-item" href="#" data-bs-toggle="modal"
                                                    data-bs-target="#editEmployeeModal{{ $employee['uuid'] }}">
                                                    <i class="ti ti-edit me-2" style="color: #655BE1;"></i>Edit Details
                                                </a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item text-danger" href="#"
                                                    onclick="if(confirm('Are you sure?')) { document.getElementById('delete-form-{{ $employee['uuid'] }}').submit(); }">
                                                    <i class="ti ti-trash me-2"></i>Delete
                                                </a>

                                                <form id="delete-form-{{ $employee['uuid'] }}"
                                                    action="{{ route('business.employees.destroy', $employee['uuid']) }}"
                                                    method="POST" style="display: none;">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body pt-2">
                                    <img src="https://ui-avatars.com/api/?name={{ urlencode($employee['name']) }}&background=655BE1&color=ffffff&bold=true"
                                        class="rounded-circle img-fluid mb-3 shadow-sm"
                                        style="width: 75px; border: 3px solid #fff;">

                                    <h5 class="fw-bold mb-1" style="color: #111;">{{ $employee['name'] }}</h5>
                                    <p class="text-muted small mb-1"><i class="ti ti-phone" style="color: #655BE1;"></i>
                                        {{ $employee['phone'] }}</p>
                                    <p class="text-muted mb-3" style="font-size: 0.75rem;">
                                        <i class="ti ti-calendar" style="color: #655BE1;"></i> Joined:
                                        {{ \Carbon\Carbon::parse($employee['joined_at'])->format('M d, Y') }}
                                    </p>

                                    <div class="d-flex justify-content-around mt-3 py-3 rounded-3"
                                        style="background-color: #f8f9fa;">
                                        <div class="text-center">
                                            <strong class="d-block" style="color: #655BE1;">0</strong><small
                                                class="text-muted text-uppercase fw-bold"
                                                style="font-size: 0.65rem;">Tasks</small>
                                        </div>
                                        <div class="text-center border-start ps-4">
                                            <strong class="d-block" style="color: #655BE1;">0</strong><small
                                                class="text-muted text-uppercase fw-bold"
                                                style="font-size: 0.65rem;">Leads</small>
                                        </div>
                                    </div>

                                    <div class="mt-4">
                                        {{-- <a href="{{ route('business.employees.show', $employee['uuid']) }}"
                                            class="btn btn-sm w-100 fw-bold rounded-pill" 
                                            style="border: 2px solid #655BE1; color: #655BE1; background: transparent;">
                                            {{ __('View Live Location') }}
                                        </a> --}}

                                        <a href="{{ route('business.employees.live', $employee['uuid']) }}"
                                            class="btn btn-sm w-100 fw-bold rounded-pill"
                                            style="border: 2px solid #655BE1; color: #655BE1; background: transparent;">
                                            {{ __('View Live Location') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal fade text-start" id="editEmployeeModal{{ $employee['uuid'] }}" tabindex="-1"
                            aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content border-0 shadow">
                                    <div class="modal-header text-white" style="background-color: #655BE1;">
                                        <h5 class="modal-title text-white">Edit: {{ $employee['name'] }}</h5>
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <form action="{{ route('business.employees.update', $employee['uuid']) }}"
                                        method="POST">
                                        @csrf @method('PUT')
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-bold small">Name</label>
                                                    <input type="text" name="name" class="form-control"
                                                        value="{{ $employee['name'] }}" required>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-bold small">Phone</label>
                                                    <input type="text" name="phone" class="form-control"
                                                        value="{{ $employee['phone'] }}" required>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <label class="form-label fw-bold small">Address</label>
                                                    <textarea name="address" class="form-control" rows="2">{{ $employee['address'] ?? '' }}</textarea>
                                                </div>
                                                {{-- <div class="col-md-12">
                                                    <label class="form-label fw-bold small">Phone Owner</label>
                                                    <select name="phone_owner" class="form-select">
                                                        <option value="employee"
                                                            {{ $employee['phone_owner'] == 'employee' ? 'selected' : '' }}>
                                                            Employee</option>
                                                        <option value="business"
                                                            {{ $employee['phone_owner'] == 'business' ? 'selected' : '' }}>
                                                            Business</option>
                                                    </select>
                                                </div> --}}
                                            </div>
                                        </div>
                                        <div class="modal-footer border-0">
                                            <button type="button" class="btn btn-light"
                                                data-bs-dismiss="modal">Cancel</button>
                                            <button type="submit" class="btn text-white px-4"
                                                style="background-color: #655BE1;">Update Employee</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <div class="card p-5 text-center border-0 shadow-sm">
                                <i class="ti ti-users fs-1 mb-3" style="color: #655BE1;"></i>
                                <h6 class="text-muted">No employees found. Start by adding one.</h6>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createEmployeeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header text-white" style="background-color: #655BE1;">
                    <h5 class="modal-title text-white">New Employee</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <form action="{{ route('business.employees.store') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small">Name</label>
                                <input type="text" name="name" class="form-control" placeholder="John Doe"
                                    required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small">Phone</label>
                                <input type="text" name="phone" class="form-control" placeholder="+1..." required>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold small">Address</label>
                                <textarea name="address" class="form-control" rows="2" placeholder="Enter address..."></textarea>
                            </div>
                            {{-- <div class="col-md-12">
                                <label class="form-label fw-bold small">Phone Owner</label>
                                <select name="phone_owner" class="form-select">
                                    <option value="employee">Employee</option>
                                    <option value="business">Business</option>
                                </select>
                            </div> --}}
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn text-white px-4" style="background-color: #655BE1;">Create
                            Employee</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection