@extends('layouts.master')

@section('content')
    <div class="container">
        <h1>Create Layer</h1>
        <form action="{{ route('layer.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="form-group mb-3">
                <label for="id_kategori">Kategori</label>
                <select name="id_kategori" class="form-control select2">
                    @foreach ($kategori as $item)
                        <option value="{{ $item->id }}">{{ $item->nama_kategori }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group mb-3">
                <label for="nama_layer">Nama Layer</label>
                <input type="text" name="nama_layer" class="form-control">
            </div>
            <div class="form-group mb-3">
                <label for="file">File</label>
                <input type="file" name="file" class="form-control">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
@endsection

@push('scripts')
<!-- 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