@extends('admin.template')
@push('style')
<link rel="stylesheet" href="/assets/extensions/choices.js/public/assets/styles/choices.css">
<style>
    .flatpickr-time {
        display: none;
    }
.container .card h4, .container .card label {
    font-weight: normal;
}

/* responsive */
@media (max-width: 560px) {
    .container .card h4 {
        font-size: 12px;
    }
    .container .card label {
        font-size: 10px;
    }
    .container .card input, .container .card select {
        height: 30px;
        font-size: 10px;
    }
    .container .card textarea {
        font-size: 10px;
    }
    .container .card button {
        font-size: 10px;
    }
    .container .card small {
        font-size: 8px;
    }
    #map { height: 250px; z-index: 0;}
}

@media (min-width: 561px) and (max-width: 992px) {
    .container .card h4 {
        font-size: 16px;
    }
    .container .card label {
        font-size: 14px;
    }
    .container .card input, .container .card select {
        height: 30px;
        font-size: 14px;
    }
    .container .card textarea {
        font-size: 14px;
    }
    .container .card button {
        font-size: 14px;
    }
    .container .card small {
        font-size: 12px;
    }
    #map { height: 250px; z-index: 0;}
}

@media (min-width: 992px) and (max-width: 1200px) {
    .container .card h4 {
        font-size: 18px;
    }
    .container .card label {
        font-size: 15px;
    }
    .container .card input, .container .card select {
        height: 40px;
        font-size: 15px;
    }
    .container .card textarea {
        font-size: 15px;
    }
    .container .card button {
        font-size: 15px;
    }
    .container .card small {
        font-size: 13px;
    }
    #map { height: 300px; z-index: 0;}
}

@media (min-width: 1201px) {
    .container .card h4 {
        font-size: 20px;
    }
    .container .card label {
        font-size: 16px;
    }
    .container .card input, .container .card select {
        height: 40px;
    }
    .container .card button {
        font-size: 16px;
    }
    .container .card small {
        font-size: 14px;
    }
    #map { height: 350px; z-index: 0;}
}

</style>
@endpush
@section('content')
<section id="input-style">
    <div class="container d-flex align-items-center justify-content-center">
        <div class="row w-100">
            <div class="col-12" >
                <div class="card">
                    <a href="/kmz" style="color: black;"><i class="bi bi-chevron-left ps-3"></i> kembali</a>
                    <div class="card-header">
                        <h4 class="card-title">Tambah KMZ</h4>
                    </div>
                    <div class="card-body">
                        <form action="/kmz" method="POST" enctype="multipart/form-data">
                            @csrf
                                <div class="form-group">
                                    <label for="pengelola_id">Pengelola<span class="text-danger">*</span></label>
                                    <select class="choices form-select @error('pengelola_id')
                                    is-invalid
                                    @enderror" name="pengelola_id" id="pengelola_id">
                                        <option value=" "></option>
                                        @foreach ($pengelolas as $pengelola)
                                            <option value="{{ $pengelola->id }}"
                                                {{ old('pengelola_id') == $pengelola->id ? 'selected' : '' }}>
                                                {{ $pengelola->nama }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('pengelola_id')
                                        <small class="text-danger ms-3 fst-italic">
                                            {{ $message }}
                                        </small>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="kmz" class="form-label">KMZ File<span class=" text-danger">*</span></label>
                                    <input class="form-control @error('kmz')
                                    is-invalid
                                    @enderror" type="file" id="kmz" name="kmz" value="{{ old('kmz') }}">
                                    @error('kmz')
                                        <small class="text-danger ms-3 fst-italic">
                                            {{ $message }}
                                        </small>
                                    @enderror
                                </div>

                                <div class="text-end">
                                    <button class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@push('script')
<script src="/assets/extensions/choices.js/public/assets/scripts/choices.js"></script>
<script src="/assets/static/js/pages/form-element-select.js"></script>
@endpush
@endsection