@extends('layouts.app')

@section('content')
<div class="d-flex flex-column flex-column-fluid">

    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div class="app-container container-fluid d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Supplier API Credentials</h1>
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <li class="breadcrumb-item text-muted"><a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a></li>
                    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
                    <li class="breadcrumb-item text-muted">API Credentials</li>
                </ul>
            </div>
            <div>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#credentialsModal">
                    <i class="fas fa-plus me-2"></i>Add Credentials
                </button>
            </div>
        </div>
    </div>

    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div class="app-container container-fluid">

            @if(session('success'))
                <div class="alert alert-success mb-5">{{ session('success') }}</div>
            @endif

            <div class="card">
                <div class="card-body pt-0">
                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                        <thead>
                            <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                <th class="min-w-50px">#</th>
                                <th class="min-w-125px">Service</th>
                                <th class="min-w-125px">Supplier</th>
                                <th class="min-w-125px">API Key</th>
                                <th class="min-w-100px">Status</th>
                                <th class="text-end min-w-70px">Action</th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600">
                            @forelse($Apidetails as $key => $credential)
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>{{ $credential->service_type }}</td>
                                <td>{{ $credential->supplier_name }}</td>
                                <td>{{ $credential->api_key }}</td>
                                <td>
                                    <span class="badge {{ $credential->status ? 'badge-light-success' : 'badge-light-danger' }}">
                                        {{ $credential->status ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>
                                <td class="text-end">
                                    <a href="#" class="btn btn-sm btn-light btn-flex btn-center btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                        Actions <i class="ki-duotone ki-down fs-5 ms-1"></i>
                                    </a>
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link px-3 open-edit-modal"
                                                data-bs-toggle="modal"
                                                data-bs-target="#credentialsModal"
                                                data-id="{{ $credential->id }}"
                                                data-service="{{ $credential->service_type }}"
                                                data-supplier="{{ $credential->supplier_name }}"
                                                data-key="{{ $credential->api_key }}">Edit</a>
                                        </div>
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link px-3 delete-record" data-id="{{ $credential->id }}" data-type="api">Delete</a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted">No API Credentials Found</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

{{-- Modal --}}
<div class="modal fade" id="credentialsModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ route('api.save') }}">
                @csrf
                <input type="hidden" name="recordid" id="recordid">
                <div class="modal-header">
                    <h5 class="modal-title">Supplier API Credentials</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Service Type</label>
                        <select class="form-select" name="service_type" id="service_type" required>
                            <option value="">Choose Service</option>
                            <option value="Hotel">Hotel</option>
                            <option value="Flight">Flight</option>
                            <option value="Visa">Visa</option>
                            <option value="Transport">Transport</option>
                            <option value="Insurance">Insurance</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Supplier</label>
                        <select class="form-select" name="supplier_name" id="supplier_name" required>
                            <option value="">Choose Supplier</option>
                            <option value="GRN Connect">GRN Connect</option>
                            <option value="TBO">TBO</option>
                            <option value="Amadeus">Amadeus</option>
                            <option value="Travellanda">Travellanda</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">API Key</label>
                        <input type="text" class="form-control" name="api_key" id="api_key" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-success">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('open-edit-modal')) {
            document.getElementById('recordid').value    = e.target.getAttribute('data-id');
            document.getElementById('service_type').value = e.target.getAttribute('data-service');
            document.getElementById('supplier_name').value = e.target.getAttribute('data-supplier');
            document.getElementById('api_key').value      = e.target.getAttribute('data-key');
        }
    });
</script>
@endsection