@php
use App\Models\ApiClient;
use App\Models\ApiTokens;
use App\Models\UnitInstalasi;
@endphp
<div>
    <!-- Page -->
    <div class="page">
        <div class="page-header">
            <h1 class="page-title">Data Api Clint</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="javascript:void(0)">Tools</a></li>
                <li class="breadcrumb-item active">Data Api Clint</li>
            </ol>

            <div class="page-header-actions">
                <button type="button" data-target="#tambah" data-toggle="modal"
                    class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Tambah">
                    <i class="icon md-hospital" aria-hidden="true"></i>
                </button>

                <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Refresh">
                    <i class="icon md-refresh-alt" aria-hidden="true"></i>
                </button>
            </div>

        </div>

        <div class="page-content container-fluid">
            <div class="row">
                <div class="col-xl-12">
                    <!-- Panel Kitchen Sink -->
                    <div class="panel">
                        <header class="panel-heading">
                            <h3 class="panel-title">
                                Data Api Clint
                                @if (session()->has('pesan'))
                                <span class="panel-desc" style="color: green;">{{ session('pesan') }}</span>
                                @endif
                                <span class="panel-desc">
                                    {{ env('CORP_BRAND') }}
                                </span>
                            </h3>
                        </header>

                        <div class="panel-body">
                            <div class="row">

                                <div class="form-group form-material col-md-2 col-lg-2">
                                    <label class="form-control-label">Data</label>
                                    <select class="form-control" wire:model.live="cek_limit" required>
                                        <option>10</option>
                                        <option>50</option>
                                        <option>100</option>
                                        <option>250</option>
                                        <option>500</option>
                                    </select>
                                </div>

                                <div class="form-group form-material col-md-2 col-lg-2">
                                    <label class="form-control-label">Order</label>
                                    <select class="form-control" wire:model.live="cek_urutan" required>
                                        <option value="DESC">Z-A</option>
                                        <option value="ASC">A-Z</option>
                                    </select>
                                </div>
                                <div class="form-group form-material col-md-2 col-lg-2">
                                    <label class="form-control-label">By</label>
                                    <select class="form-control" wire:model.live="cek_order_by" required>
                                    </select>
                                </div>

                                <div class="form-group form-material col-md-10 col-lg-6">
                                    <label class="form-control-label">Kata Kunci</label>
                                    <input type="text" wire:model.live="cek_keyword"
                                        placeholder="Ketik Kata Kunci Pencarian..." class="form-control" required>
                                </div>
                            </div>

                            <hr>

                            <table class="table table-hover table-striped w-full">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Nama Aplikasi</th>
                                        <th>PIC</th>
                                        <th>Email</th>
                                        <th>Client ID</th>
                                        <th>Client Secret</th>
                                        <th>Scope</th>
                                        <th>Unit Acces</th>
                                        <th>Token</th>
                                        <th>Expired At</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    @forelse ($data as $row)
                                    @php
                                    $token = ApiTokens::where('api_client_id', $row->id_api_clients)->orderBy('id_api_tokens','DESC')->first();

                                    @endphp

                                    <tr>
                                        <td>{{ $loop->index + 1 }}</td>
                                        <td>{{ $row->nama_aplikasi }}</td>
                                        <td>{{ $row->pic_api_clients }}</td>
                                        <td>{{ $row->email }}</td>
                                        <td>{{ $row->client_id }}</td>
                                        <td>{{ $row->client_secret }}</td>
                                        <td>
                                            {{ $row->scope }}
                                        </td>
                                        <td>
                                            @php
                                            $ids = explode(',', $row->unit_access); // ubah "1,2,3" jadi [1, 2, 3]
                                            $ui = UnitInstalasi::whereIn('id_unit_instalasi',
                                            $ids)->pluck('nama_ui');
                                            @endphp

                                            {{ $ui->implode(', ') }}

                                        </td>
                                        <td>
                                            @if(!empty($token) && $token->revoked == false)
                                            <span class="badge bg-info">Aktif</span>
                                            @elseif (!empty($token) && $token->revoked == true)
                                            <span class="badge bg-danger">Non Aktif</span>
                                            @else
                                            <span class="badge bg-warning">Tidak Ada Token</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if ($row->expired_at)
                                            {{ $row->expired_at }}
                                            @else
                                            <span class="badge bg-info">Tidak Ada</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if ($row->status == 'approved')
                                            <span class="badge bg-success">Approved</span>
                                            @elseif($row->status == 'pending')
                                            <span class="badge bg-warning">Pending</span>
                                            @elseif($row->status == 'rejected')
                                            <span class="badge bg-danger">Rejected</span>
                                            @endif
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round"
                                                wire:click="show({{ $row->id_api_clients }})" data-toggle="modal"
                                                data-target="#edit" title="Edit">
                                                <i class="icon md-edit" aria-hidden="true"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round"
                                                wire:click="show({{ $row->id_api_clients }})" data-toggle="modal"
                                                data-target="#delete" title="Delete">
                                                <i class="icon md-delete" aria-hidden="true"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="11" class="text-center">Tidak ada Api Client</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>

                            <hr>
                            {{ $data->links() }}
                            <span wire:loading.delay.shortest class="panel-desc" style="color: red;"><i
                                    class="icon md-spinner" aria-hidden="true"></i> <b>Loading.....</b></span>
                        </div>
                    </div>
                    <!-- End Panel Kitchen Sink -->
                </div>
            </div>
        </div>
    </div>
    <!-- End Page -->


    <!-- Modal Tambah -->
    <div wire:ignore.self class="modal fade" id="tambah" tabindex="-1" data-keyboard="false" data-backdrop="static"
        aria-labelledby="TambahData" aria-hidden="true">
        <form wire:submit.prevent="store" enctype="multipart/form-data">
            <div class="modal-dialog modal-simple modal-content modal-lg">
                <div class="modal-header">
                    <button type="button" class="close" wire:click="ClearForm" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                    <h4 class="modal-title" id="exampleFormModalLabel">Form Api Client
                    </h4>
                </div>
                <div class="modal-body">
                    
                    <div class="row">
                        <div class="form-group form-material col-md-12">
                            <label class="form-control-label">Nama Aplikasi</label>
                            <input type="text" class="form-control" wire:model.defer="nama_aplikasi"
                                placeholder="Masukkan nama aplikasi" required>
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Nama PIC</label>
                            <input type="text" class="form-control" wire:model.defer="pic_api_clients"
                                placeholder="Masukkan nama PIC" required>
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Email PIC</label>
                            <input type="email" class="form-control" wire:model.defer="email"
                                placeholder="Masukkan email PIC" required>
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Client ID</label>
                            <input type="text" class="form-control" wire:model.defer="client_id"
                                placeholder="Masukkan Client ID" readonly>
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Client Secret</label>
                            <input type="text" class="form-control" wire:model.defer="client_secret"
                                placeholder="Masukkan Client Secret" readonly>
                        </div>

                        <div class="form-group form-material col-md-12">
                            <label class="form-control-label d-block">Scope Akses</label>

                            <div class="custom-controls-stacked">
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" wire:model.defer="scope"
                                        value="Customer">
                                    <span class="custom-control-label">Customer</span>
                                </label>
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" wire:model.defer="scope"
                                        value="Invoice">
                                    <span class="custom-control-label">Invoice</span>
                                </label>
                            </div>

                            <small class="form-text text-muted">Pilih akses api menu yang diperbolehkan untuk client
                                ini</small>
                        </div>
                        <div class="form-group form-material col-md-12 col-lg-12">
                            <label class="form-control-label">Cari Unit Instalasi</label>
                            <div class="input-group">
                                <input type="text" wire:model.defer="cek_search_unit_access"
                                    placeholder="Ketik Kata Kunci Pencarian ..." class="form-control">
                                <span class="input-group-append">
                                    <button wire:click.prevent="UnitAccess" type="submit" class="btn btn-primary">
                                        <i class="icon md-search" aria-hidden="true"></i>
                                    </button>
                                </span>
                                <span class="input-group-append">
                                    <button wire:click.prevent="clear_search_customer_bulk" type="submit"
                                        class="btn btn-primary">
                                        <i class="icon md-refresh" aria-hidden="true"></i>
                                    </button>
                                </span>
                            </div>
                        </div>

                        @php
                        $data = UnitInstalasi::whereIn('id_unit_instalasi', $unit_access)->pluck('nama_ui');
                        @endphp

                        <div class="col-md-12">
                            <div class="alert alert-info">
                                <strong>Data Unit Instalasi Dipilih:</strong>
                                {{ $data->implode(', ') ?: 'Tidak ada unit yang dipilih.' }}
                            </div>
                        </div>

                        <div class="col-md-12">
                            <table class="table table-hover table-striped w-full">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Nama Unit</th>
                                        <th>PIC</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if($unit_instalasi && count($unit_instalasi))
                                    @foreach ($unit_instalasi as $unit)
                                    <tr>
                                        <td>
                                            <input type="checkbox"
                                                wire:click="toggleUnitAccess({{ $unit->id_unit_instalasi }})" {{
                                                in_array($unit->id_unit_instalasi, $unit_access) ? 'checked' : '' }}
                                            >
                                        </td>
                                        <td>{{ $unit->nama_ui }}</td>
                                        <td>{{ $unit->pic_ui }}</td>
                                    </tr>
                                    @endforeach
                                    @else
                                    <tr>
                                        <td colspan="3" class="text-center">Tidak Ada data</td>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>

                        <br><br>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Expired Client</label>
                            <input type="datetime-local" class="form-control" wire:model.defer="expired_at" required>
                        </div>

                        <div class="form-group form-material col-md-6 col-lg-6">
                            <label class="form-control-label">Status</label>
                            <select class="form-control" wire:model.live="status" required>
                                <option value="">Pilih Status Api Client</option>
                                <option value="approved">Approved</option>
                                <option value="pending">Pending</option>
                                <option value="rejected">Rejected</option>
                            </select>
                        </div>

                        <div class="col-md-12">
                            @if (session()->has('pesan'))
                            <span class="panel-desc" style="color: green;">{{ session('pesan') }}</span>
                            @endif
                        </div>

                        <div class="col-md-6 float-right">
                            <button type="submit" class="btn btn-primary btn-block">Save</button>
                        </div>
                        <div class="col-md-6 float-left">
                            <button type="button" wire:click="ClearForm" data-dismiss="modal" aria-label="Close"
                                class="btn btn-primary btn-block">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- End Modal Tambah -->


    <!-- Modal Edit -->
    <div wire:ignore.self class="modal fade" id="edit" tabindex="-1" data-keyboard="false" data-backdrop="static"
        aria-labelledby="EditData" aria-hidden="true">
        <form wire:submit.prevent="update({{ $id_api_clients }})" enctype="multipart/form-data">
            <div class="modal-dialog modal-simple modal-content modal-lg">
                <div class="modal-header">
                    <button type="button" class="close" wire:click="ClearForm" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                    <h4 class="modal-title" id="exampleFormModalLabel">Form API Client
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group form-material col-md-12">
                            <label class="form-control-label">Nama Aplikasi</label>
                            <input type="text" class="form-control" wire:model.defer="nama_aplikasi"
                                placeholder="Masukkan nama aplikasi" required>
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Nama PIC</label>
                            <input type="text" class="form-control" wire:model.defer="pic_api_clients"
                                placeholder="Masukkan nama PIC" required>
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Email PIC</label>
                            <input type="email" class="form-control" wire:model.defer="email"
                                placeholder="Masukkan email PIC" required>
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Client ID</label>
                            <input type="text" class="form-control" wire:model.defer="client_id"
                                placeholder="Masukkan Client ID" readonly>
                        </div>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Client Secret</label>
                            <input type="text" class="form-control" wire:model.defer="client_secret"
                                placeholder="Masukkan Client Secret" readonly>
                        </div>

                        <div class="form-group form-material col-md-12">
                            <label class="form-control-label d-block">Scope Akses</label>
                            <div class="custom-controls-stacked">
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" wire:model.defer="scope"
                                        value="Customer">
                                    <span class="custom-control-label">Customer</span>
                                </label>
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" wire:model.defer="scope"
                                        value="Invoice">
                                    <span class="custom-control-label">Invoice</span>
                                </label>
                            </div>
                            <small class="form-text text-muted">Pilih akses API menu yang diperbolehkan untuk client
                                ini</small>
                        </div>

                        <div class="form-group form-material col-md-12 col-lg-12">
                            <label class="form-control-label">Cari Unit Instalasi</label>
                            <div class="input-group">
                                <input type="text" wire:model.defer="cek_search_unit_access"
                                    placeholder="Ketik Kata Kunci Pencarian ..." class="form-control">
                                <span class="input-group-append">
                                    <button wire:click.prevent="UnitAccess" type="submit" class="btn btn-primary">
                                        <i class="icon md-search" aria-hidden="true"></i>
                                    </button>
                                </span>
                                <span class="input-group-append">
                                    <button wire:click.prevent="clear_search_customer_bulk" type="submit"
                                        class="btn btn-primary">
                                        <i class="icon md-refresh" aria-hidden="true"></i>
                                    </button>
                                </span>
                            </div>
                        </div>

                        @php
                        $data = UnitInstalasi::whereIn('id_unit_instalasi', $unit_access)->pluck('nama_ui');
                        @endphp

                        <div class="col-md-12">
                            <div class="alert alert-info">
                                <strong>Data Unit Instalasi Dipilih:</strong>
                                {{ $data->implode(', ') ?: 'Tidak ada unit yang dipilih.' }}
                            </div>
                        </div>

                        <div class="col-md-12">
                            <table class="table table-hover table-striped w-full">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Nama Unit</th>
                                        <th>PIC</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if($unit_instalasi && count($unit_instalasi))
                                    @foreach ($unit_instalasi as $unit)
                                    <tr>
                                        <td>
                                            <input type="checkbox"
                                                wire:click="toggleUnitAccess({{ $unit->id_unit_instalasi }})" {{
                                                in_array($unit->id_unit_instalasi, $unit_access) ? 'checked' : '' }}
                                            >
                                        </td>
                                        <td>{{ $unit->nama_ui }}</td>
                                        <td>{{ $unit->pic_ui }}</td>
                                    </tr>
                                    @endforeach
                                    @else
                                    <tr>
                                        <td colspan="3" class="text-center">Tidak Ada data</td>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>

                        <br><br>

                        <div class="form-group form-material col-md-6">
                            <label class="form-control-label">Expired Api Client</label>
                            <input type="datetime-local" class="form-control" wire:model.defer="expired_at" required>
                        </div>

                        <div class="form-group form-material col-md-6 col-lg-6">
                            <label class="form-control-label">Status</label>
                            <select class="form-control" wire:model.live="status">
                                <option value="">Pilih Status Api Client</option>
                                <option value="approved">Approved</option>
                                <option value="pending">Pending</option>
                                <option value="rejected">Rejected</option>
                            </select>
                        </div>

                        <div class="form-group form-material col-md-12 col-lg-12">
                            <label class="form-control-label">Revoked Token</label>
                            <select class="form-control" wire:model.live="revoked">
                                <option value="">Pilih Revoked Token</option>
                                <option value="0">Aktif</option>
                                <option value="1">NonAktif</option>
                            </select>
                        </div>

                        <div class="col-md-12">
                            @if (session()->has('pesan'))
                            <span class="panel-desc" style="color: green;">{{ session('pesan') }}</span>
                            @endif
                        </div>

                        <div class="col-md-6 float-right">
                            <button type="submit" class="btn btn-primary btn-block">Save</button>
                        </div>
                        <div class="col-md-6 float-left">
                            <button type="button" wire:click="ClearForm" data-dismiss="modal" aria-label="Close"
                                class="btn btn-secondary btn-block">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- End Modal Edit -->

    {{-- Modal Delete --}}
    <div wire:ignore.self class="modal fade" id="delete" tabindex="-1" data-keyboard="false" data-backdrop="static"
        aria-labelledby="DeleteData" aria-hidden="true">
        <form wire:submit.prevent="destroy({{ $id_api_clients }})">
            <div class="modal-dialog modal-simple modal-content">
                <div class="modal-header">
                    <button type="button" class="close" wire:click="ClearForm" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                    <h4 class="modal-title" id="exampleFormModalLabel">Hapus Data Api Client dan Api Token
                        @if (session()->has('pesan'))
                        <span class="panel-desc" style="color: green;">{{ session('pesan') }}</span>
                        @endif
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <p>Apakah Anda yakin ingin menghapus data ini?</p>
                        </div>

                        {{-- tombol delete dan cencel col 6 --}}
                        <div class="col-md-6 float-left">
                            <button type="submit" class="btn btn-primary btn-block">Delete</button>
                        </div>
                        <div class="col-md-6 float-right">
                            <button type="button" wire:click="ClearForm" data-dismiss="modal" aria-label="Close"
                                class="btn btn-secondary btn-block">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- End Modal Delete -->

</div>