@extends('backoffice.layouts.main')

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

<form action="{{route('bo.dokter.update')}}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    <!-- 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> Ubah</h4>

    <div class="card">
        <div class="card-header">
            <h5>Ubah Dokter</h5>
        </div>
        <div class="card-body">
            <input type="hidden" value="{{$data['dokter']->uuid}}" name="uuid">
            <input id="total-lokasi-praktek" type="hidden" value="{{count($data['dokter']->lokasi)}}">

            <div class="mb-3">
                <img id="frame" src="{{asset($data['dokter']->foto)}}" 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 req  class="form-control" type="file" id="foto" name="foto" onchange="preview()">
                </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['kota'] as $item)
                    <option  
                    @foreach ($data['dokter']->kota as $item2)
                        @if ($item->uuid == $item2->uuid)
                            selected
                        @endif
                    @endforeach
                    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" value="{{$data['dokter']->nama}}" 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" value="{{$data['dokter']->no_hp}}">
            </div>

            <div class="form-group mb-3">
                <div class="d-flex  align-items-center">
                    <label for="lokasi_praktek" class="form-label me-2">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">
                    @foreach ($data['dokter']->lokasi as $index => $item)
                    <div class="d-flex mb-3" @if ($index !=0) id="lokasi-praktek-item-{{$index}}" @endif>
                        <input type="text" name="lokasi_praktek[{{$index}}]"  class="lokasi_praktek form-control me-3"
                            placeholder="Masukkan lokasi praktek dokter*" value="{{$item->lokasi}}">
                        <input type="text" name="link_praktek[{{$index}}]" class="form-control me-3"
                            placeholder="Masukkan link gmaps lokasi praktek dokter (Opsional)" value="{{$item->link}}">
                        @if ($index == 0)
                        <i style="font-size: 1.5em" class="text-secondary  fa fa-minus-circle mt-2"></i>
                        @else
                        <i onclick="hapusLokasiPraktek({{$index}})" style="font-size: 1.5em"
                            class="cursor-pointer text-danger  fa fa-minus-circle mt-2"></i>
                        @endif
                    </div>
                    @endforeach

                </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" value="{{$data['dokter']->lama_praktek}}">
            </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" name="home" type="checkbox" @if ($data['dokter']->home)
                    checked
                    @endif id="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">Ubah</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 Ubah
                        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 yakin ingin merubah data dokter?
                </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>
    function preview() {
        frame.src = URL.createObjectURL(event.target.files[0]);
    }

    function clearImage() {
        document.getElementById('foto').value = null;
        frame.src = "";
    }
    let totalLokasiPraktek = parseInt($('#total-lokasi-praktek').val()) - 1;

    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 ($('#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