@extends('backend.template.index')
@section('title', $title)

@push('css-between')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.0/css/jquery.dataTables.css">
    <link rel="stylesheet" href="{{ url('vendors/selectpicker') }}/bootstrap-select.min.css">
@endpush
@push('script-between')
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.0/js/jquery.dataTables.js"></script>
    <script src="{{ url('vendors/selectpicker') }}/bootstrap-select.min.js"></script>
    <script>
        $('.datatables').DataTable();
        $('.select2').selectpicker();
    </script>
@endpush

@section('content')
    <div class="text-right">
        <button type="button" class="btn btn-success mb-3 rounded " data-toggle="modal" data-target="#modelIdLayananSKPD">
            <i class="fas fa-plus fa-fw"></i>
            Buat Layanan
        </button>
    </div>
    <div class="card">
        <div class="card-header bg-success text-white">
            Data Layanan {{ $office->name }}
        </div>
        <div class="card-body table-responsive">

            <table class="table datatables">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>
                            <i class="fas fa-cog fa-fw"></i>
                        </th>
                        <th>Layanan</th>
                        <th>Link</th>
                        <th>Logo</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($services as $service)
                        <tr>
                            <td>
                                {{ $loop->iteration }}
                            </td>
                            <td>
                                <form action="{{ route('office-service.destroy', [subdomain(), $service->id]) }}"
                                    method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-light btn-sm text-danger"
                                        onclick="return confirm('Apakah anda yakin ingin menghapus layanan ini?');">
                                        <i class="fas fa-times fa-fw"></i>
                                    </button>
                                </form>
                            </td>
                            <td>
                                {{ $service->title }}
                            </td>
                            <td>
                                <a href="{{ $service->link }}" target="_blank">
                                    {{ $service->link }}
                                </a>
                            </td>
                            <td>
                                <img src="{{ url('storage') . '/' . $service->logo }}" class="img-fluid" width="100"
                                    alt="">
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="modelIdLayananSKPD" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('office-service.store', subdomain()) }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Form Buat Layanan</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="title">Nama Layanan</label>
                            <input type="text" name="title" id="title" class="form-control" placeholder=""
                                value="{{ old('title') }}">
                        </div>
                        <div class="form-group">
                            <label for="link">Link</label>
                            <input type="url" name="link" id="link" class="form-control" placeholder=""
                                value="{{ old('link') }}">
                        </div>
                        <div class="form-group">
                            <label for="logo">Logo</label>
                            <input type="file" name="logo" id="logo" class="form-control" placeholder=""
                                value="{{ old('logo') }}">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            Tutup
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-save fa-fw"></i>
                            Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection