@extends('backoffice.layouts.main')

@section('title', 'Tambah Dokter')
@section('content')

<form action="{{route('bo.dokter.store')}}" method="POST" enctype="multipart/form-data">
    @csrf

    <!-- Content -->

    <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Master /</span><span
            class="text-muted fw-light">Dokter
            /</span> Tambah</h4>

    <div class="card">
        <div class="card-header">
            <h5>Tambah Dokter</h5>
        </div>
        <div class="card-body">

            <div class="mb-3">
                <img id="frame" src="" style="object-fit: cover;
                width: 300px;
                height: 300px;
                border-radius: 10px;" />

                <div class="mt-2">
                    <label for="Image" class="form-label">Foto Dokter (ukuran 370 × 370 pixel)
                        @error('foto')
                        <span class="text-danger">(Belum diisi)</span>
                        @enderror
                    </label>
                    <input class="form-control" type="file" id="foto" name="foto" onchange="preview(event)">
                </div>
            </div>
            <div class="form-group mb-3">
                <label for="kota" class="form-label">Kota
                    @error('kota')
                    <span class="text-danger">(Belum diisi)</span>
                    @enderror
                </label>
                <select id="kota" name="kota[]" class="form-select w-100 select2" multiple="multiple">
                    @foreach ($data as $item)
                    <option value="{{$item->uuid}}">{{$item->nama}}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group mb-3">
                <label for="nama" class="form-label">Nama, Gelar
                    @error('nama')
                    <span class="text-danger">(Belum diisi)</span>
                    @enderror
                </label>
                <input type="text" class="form-control" id="nama" name="nama" placeholder="Masukkan nama, gelar dokter">
            </div>
            <div class="form-group mb-3">
                <label for="no_hp" class="form-label">No. HP
                    @error('no_hp')
                    <span class="text-danger">(Belum diisi)</span>
                    @enderror
                </label>
                <input type="number" class="form-control" id="no_hp" name="no_hp"
                    placeholder="Masukkan nomor hp dokter">
            </div>

            <div class="form-group mb-3">
                <div class="d-flex  align-items-center">
                    <label for="lokasi_praktek" class="form-label me-2">Daftar Lokasi Praktek
                    </label>
                    <i id="add-lokasi-praktek" style="font-size: 1.5em"
                        class="text-primary cursor-pointer fa fa-plus-circle mb-2"></i>
                </div>
                <div id="lokasi-praktek-section">
                    <div class="d-flex mb-3">
                        <input type="text" name="lokasi_praktek[0]" class="lokasi_praktek form-control me-3"
                            placeholder="Masukkan lokasi praktek dokter*">
                        <input type="text" name="link_praktek[0]" class="form-control me-3"
                            placeholder="Masukkan link gmaps lokasi praktek dokter (Opsional)">
                        <i style="font-size: 1.5em" class="text-secondary  fa fa-minus-circle mt-2"></i>
                    </div>
                </div>
            </div>

            <div class="form-group mb-3">
                <label for="lama_praktek" class="form-label">Lama Praktek
                    @error('lama_praktek')
                    <span class="text-danger">(Belum diisi)</span>
                    @enderror
                </label>
                <input type="number" min="1" class="form-control" id="lama_praktek" name="lama_praktek"
                    placeholder="Masukkan lama praktek dokter">
            </div>
            <div class="form-group mb-3">
                <label for="home" class="form-label">Muncul di Home</label>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="home" name="home">
                    <label class="form-check-label" for="home">
                        Tampilkan
                    </label>
                </div>
            </div>
            <div data-bs-toggle="modal" data-bs-target="#confirmModel" class="btn btn-primary w-100">Tambah</div>
        </div>
    </div>

    <div class="modal fade" id="confirmModel" tabindex="-1" aria-labelledby="confirmModelLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmModelLabel">Konfirmasi Tambah
                        Dokter</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    Apakah Anda ingin menambahkan data dokter baru?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <div id="submit" class="btn btn-success">Ya</div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        $('#frame').hide();
    });

    function preview(event) {
        if(event.target.files[0]){
            frame.src = URL.createObjectURL(event.target.files[0]);
        $('#frame').show();
        }
        
    }

    function clearImage() {
        document.getElementById('foto').value = null;
        frame.src = "";
        $('#frame').hide();
    }

    let totalLokasiPraktek = 0;

    const hapusLokasiPraktek = (index) => {
        totalLokasiPraktek--;
        $(`#lokasi-praktek-item-${index}`).remove('');
    }

    $('#add-lokasi-praktek').click(() => {
        totalLokasiPraktek++;
        $('#lokasi-praktek-section').append(`<div id="lokasi-praktek-item-${totalLokasiPraktek}" class="d-flex mb-3">
                        <input type="text" name="lokasi_praktek[${totalLokasiPraktek}]" class="lokasi_praktek form-control me-3" placeholder="Masukkan lokasi praktek dokter*">
                        <input type="text" name="link_praktek[${totalLokasiPraktek}]" class="form-control me-3" placeholder="Masukkan link gmaps lokasi praktek dokter (Opsional)">
                        <i onclick="hapusLokasiPraktek(${totalLokasiPraktek})" style="font-size: 1.5em" class="cursor-pointer text-danger  fa fa-minus-circle mt-2"></i>
                    </div>`);
    })
    loading()

</script>

@if (session('error'))
<script>
    Swal.fire({
        title: 'Proses Gagal',
        text: '{{session("error")[1]}} | Line : {{session("error")[2]}}',
        icon: 'error',
        confirmButtonText: 'Tutup'
    })

</script>
@endif

<script>
    $('div#submit').on('click', function (event) {
        event.preventDefault();

        let lokasi_praktek;
        $('.lokasi_praktek').each(function (index) {
            if(!$(this).val()){
                lokasi_praktek = 'Lokasi Praktek No. ' + (index +1)
            }
        });

        let required;
        if (!$('#foto').val()) {
            required = 'Foto';
        } else if ($('#kota').val().length <= 0) {
            required = 'Kota';
        } else if (!$('#nama').val()) {
            required = 'Nama';
        } else if (!$('#no_hp').val()) {
            required = 'No. HP';
        } else if (lokasi_praktek) {
            required = lokasi_praktek;
        } else if (!$('#lama_praktek').val()) {
            required = 'Lama Praktek';
        }


        if (required) {
            $('#confirmModel').modal('toggle');

            $.toast({
                heading: required + ' belum diisi',
                icon: 'error',
                position: 'top-center'
            })
        } else {
            $("form").trigger("submit");
        }

    })

</script>
@endpush