@extends('layouts.master')

@section('title')
    Kategori
@endsection

@section('content')
    <div class="nk-block-head">
        <div class="nk-block-head-content">
            <div class="nk-block-between-md g-4">
                <div class="nk-block-head-content">
                    <h3 class="nk-block-title page-title">
                        Kategori
                    </h3>
                    <div class="nk-block-des">
                        <p>Kamu mempunyai akses untuk mengelola data Kategori</p>
                    </div>
                </div>
                <div class="nk-block-head-content">
                    <a href="{{ route('pages.dataProduct') }}" class="btn btn-primary btn-sm"><em
                            class="icon ni ni-arrow-left"></em> Kembali</a>
                </div>
            </div>
        </div>
    </div><!-- .nk-block-head -->

    <div class="nk-block">
        <div class="card card-bordered">
            <div class="card-inner card-inner-lg">
                @can('Category Create')
                    <div class="row">
                        <div class="col-6 pb-4">
                            <a href="{{ asset('uploads/template-other-alkes.xlsx') }}" target="_blank"
                                class="btn btn-primary btn-sm">Template</a>
                            <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#import"
                                class="btn btn-primary btn-sm">Import</a>
                        </div>
                        <div class="col-6 text-end pb-4">
                            <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#create-data"
                                class="btn btn-primary btn-sm">Buat Kategori</a>
                        </div>
                    </div>
                @endcan
                <div class="nk-block">
                    <table class="datatable-init nk-tb-list nk-tb-ulist" data-auto-responsive="false">
                        <thead>
                            <tr class="nk-tb-item nk-tb-head">
                                <th class="nk-tb-col"><span class="sub-text">Nama</span></th>
                                <th class="nk-tb-col"><span class="sub-text">Status</span></th>
                                <th class="nk-tb-col"><span class="sub-text">Tanggal Ubah</span></th>
                                <th class="nk-tb-col nk-tb-col-tools text-end">
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($models as $key => $value)
                                <tr class="nk-tb-item">
                                    <td class="nk-tb-col">
                                        <div class="user-card">
                                            {{ $value->name }}
                                        </div>
                                    </td>
                                    <td class="nk-tb-col">
                                        <div class="user-card">
                                            @if ($value->status == \App\Models\Dashboard\LandingPage\Category::ACTIVE)
                                                <b class="text-primary">Aktif</b>
                                            @else
                                                <b class="text-danger">Tidak Aktif</b>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="nk-tb-col">
                                        <div class="user-card">
                                            <div class="user-info">
                                                {{ $value->updated_at }}
                                            </div>
                                        </div>
                                    </td>
                                    <td class="nk-tb-col nk-tb-col-tools">
                                        <ul class="nk-tb-actions gx-1">
                                            @can('Category Edit')
                                                <li class="nk-tb-action-hidden">
                                                    <a href="javascript:void(0)" data-bs-toggle="modal"
                                                        data-bs-target="#update-models-{{ $value->id }}"
                                                        class="btn btn-trigger btn-icon" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Perbarui">
                                                        <em class="icon ni ni-edit-fill"></em>
                                                    </a>
                                                </li>
                                            @endcan
                                            @can('Category Delete')
                                                <li>
                                                    <div class="drodown">
                                                        <a href="#" class="dropdown-toggle btn btn-icon btn-trigger"
                                                            data-bs-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <ul class="link-list-opt no-bdr">
                                                                <li>
                                                                    <a
                                                                        href="{{ route('services.dataProduct.category.delete', ['model' => $value->id]) }}"><em
                                                                            class="icon ni ni-trash"></em><span>Hapus</span></a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </li>
                                            @endcan
                                        </ul>
                                    </td>
                                </tr><!-- .nk-tb-item  -->
                            @endforeach
                        </tbody>
                    </table>
                </div><!-- .nk-block -->
            </div><!-- .card-inner -->
        </div><!-- .card -->
    </div><!-- .nk-block -->

    @can('Category Create')
        {{-- Create Modal --}}
        <div class="modal fade" role="dialog" id="import">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                    <div class="modal-header">
                        <h5>Export</h5>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('services.dataProduct.import.store') }}" enctype="multipart/form-data"
                            method="POST">
                            @csrf
                            <div class="row gy-2">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="form-control">
                                            <label for="">File Import</label>
                                            <input type="hidden" name="type"
                                                value="{{ \App\Helpers\DataOtherAlkesImport::CATEGORY }}">
                                            <input type="file" name="file" class="form-control form-control-outlined mt-2"
                                                accept="image/xlsx">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <ul class="align-center justify-content-end flex-wrap flex-sm-nowrap gx-4 gy-2">
                                        <li>
                                            <button type="submit" class="btn btn-primary">Buat</button>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Batal</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </form>
                    </div><!-- .modal-body -->
                </div><!-- .modal-content -->
            </div><!-- .modal-dialog -->
        </div>

        {{-- Create Modal --}}
        <div class="modal fade" role="dialog" id="create-data">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                    <div class="modal-header">
                        <h5>Buat Kategori</h5>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('services.dataProduct.category.store') }}" enctype="multipart/form-data"
                            method="POST">
                            @csrf
                            <div class="row gy-2">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="form-control-wrap">
                                            <div class="form-icon form-icon-right"></div>
                                            <input type="text" name="name" class="form-control form-control-outlined"
                                                id="outlined-right-icon" value="{{ old('name') }}" /><label
                                                class="form-label-outlined" for="outlined-right-icon">Nama</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <ul class="align-center justify-content-end flex-wrap flex-sm-nowrap gx-4 gy-2">
                                        <li>
                                            <button type="submit" class="btn btn-primary">Buat</button>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Batal</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </form>
                    </div><!-- .modal-body -->
                </div><!-- .modal-content -->
            </div><!-- .modal-dialog -->
        </div>
    @endcan

    @can('Category Edit')
        {{-- Update Kategori --}}
        @foreach ($models as $key => $value)
            <div class="modal fade" role="dialog" id="update-models-{{ $value->id }}">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                    <div class="modal-content">
                        <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                        <div class="modal-header">
                            <h5>Perbarui : <span class="text-primary">{{ $value->name }}</span> </h5>
                        </div>
                        <div class="modal-body">
                            <form action="{{ route('services.dataProduct.category.update', ['model' => $value->id]) }}"
                                enctype="multipart/form-data" method="POST">
                                @csrf
                                <div class="row gy-2">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <input type="text" name="name"
                                                class="form-control form-control-lg form-control-outlined" id="outlined"
                                                value="{{ $value->name }}">
                                            <label class="form-label-outlined" for="outlined">Nama</label>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <select name="status" class="form-control form-control-lg form-control-outlined">
                                                <option value="{{ \App\Models\Dashboard\LandingPage\Category::ACTIVE }}"
                                                    {{ $value->status == \App\Models\Dashboard\LandingPage\Category::ACTIVE ? 'selected' : '' }}>
                                                    Aktif</option>
                                                <option value="{{ \App\Models\Dashboard\LandingPage\Category::NON_ACTIVE }}"
                                                    {{ $value->status == \App\Models\Dashboard\LandingPage\Category::NON_ACTIVE ? 'selected' : '' }}>
                                                    Tidak Aktif</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <ul class="align-center justify-content-end flex-wrap flex-sm-nowrap gx-4 gy-2">
                                            <li>
                                                <button type="submit" class="btn btn-primary">Perbarui</button>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0)"
                                                    data-bs-dismiss="modal"class="btn btn-secondary">Batal</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </form>
                        </div><!-- .modal-body -->
                    </div><!-- .modal-content -->
                </div><!-- .modal-dialog -->
            </div>
        @endforeach
    @endcan

@endsection