@extends('admin.layouts.main')
@section('title', 'Konseling')
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Data Table</h4>
                    <form id="action-form">
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="name">Nama</label>
                                    <input type="text" class="form-control" id="name" name="name" readonly
                                           value="{{ $konseling->user->name }}">
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="role">Role</label>
                                    <input type="text" class="form-control" id="role" name="role" readonly
                                           value="{{ $konseling->user->role }}">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="problem">Keluhan</label>
                            <textarea class="form-control" id="problem" name="problem" rows="3"
                                      readonly>{{ $konseling->problem }}</textarea>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="status">Status</label>
                                    <select class="form-control" id="status" name="status">
                                        <option value="pending" {{ $konseling->status == 'pending' ? 'selected' : '' }}>
                                            Pending
                                        </option>
                                        <option
                                            value="approved" {{ $konseling->status == 'approved' ? 'selected' : '' }}>
                                            Approved
                                        </option>
                                        <option
                                            value="rejected" {{ $konseling->status == 'rejected' ? 'selected' : '' }}>
                                            Rejected
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="date">Tanggal</label>
                                    <input type="datetime-local" class="form-control" id="date" name="date"
                                           value="{{ ($konseling->appointment_date) ? date('Y-m-d\TH:i', strtotime($konseling->appointment_date)) : '' }}" {{ $konseling->status == 'pending' ? '' : 'readonly' }}>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" id="location-form">
                            <label for="response">Lokasi</label>
                            <textarea class="form-control" id="response" name="response"
                                      rows="3">{{ $konseling->location }}</textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            // check when load first time
            const status = $('#status').val();
            if (status === 'approved') {
                $('#location-form').show();
            } else {
                $('#date').attr('readonly', 'readonly')
                $('#date').val('');
                $('#location-form').hide();
            }

            $('#status').on('change', function () {
                if ($(this).val() === 'approved') {
                    $('#location-form').show();
                    $('#date').removeAttr('readonly')
                } else {
                    $('#location-form').hide();
                    $('#date').val('');
                    $('#date').attr('readonly', 'readonly')
                }
            });
        });

        $('#action-form').submit(function (e) {
            e.preventDefault();
            const data = $(this).serializeArray();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                url: '{{ route('admin.konseling.action', $konseling->id) }}',
                type: 'POST',
                data: {
                    'status': data[3].value,
                    'appointment_date': data[4].value.replace('T', ' '),
                    'location': data[5].value
                },
                success: function (response) {
                    swal("Success", "Data has been updated", "success").then(() => {
                        window.location.href = '{{ route('admin.konseling.all') }}';
                    });
                },
                error: function (error) {
                    swal("Error", error.responseJSON.message, "error");
                }
            });
        });

        function formatTime(str){
            return str.replace('T', ' ');
        }
    </script>
@endpush