@extends('layouts.master')

@section('content')
    <div class="container">
        <h1>Edit Kategori</h1>
        <form action="{{ route('kategori.update', $kategori->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="form-group mb-3">
                <label for="nama_kategori">Nama Kategori</label>
                <input type="text" name="nama_kategori" class="form-control" value="{{ $kategori->nama_kategori }}">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('.select2').select2();
    });
</script>
<!-- Tombol WhatsApp Mengambang -->
<a href="https://wa.me/6281358721520" class="float" target="_blank">
    <i class="fab fa-whatsapp my-float"></i>
</a>

<style>
    .float {
        position: fixed !important;
        width: 60px !important;
        height: 60px !important;
        bottom: 40px !important;
        right: 40px !important;
        background-color: #25d366 !important;
        color: #FFF !important;
        border-radius: 50% !important;
        text-align: center !important;
        font-size: 30px !important;
        box-shadow: 2px 2px 3px #999 !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
    }

    .my-float {
        margin: 0 !important;
    }

    .float:hover {
        background-color: #20ba5a !important;
        transform: scale(1.1) !important;
    }
</style>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
@endpush