@extends('layouts.app')
@section('title')
    CALL FOR ASSISTANCE EDIT
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('call_for_assistance.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <div class="card">
        <form action="{{ route('call_for_assistance.update', $call->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="row">
                    <div id="errorMessage" style="color:red; display:none;">Please fill in all required fields.</div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="attended_pic" class="form-label">Attended PIC</label>
                            <br>
                            <select name="attended_pic" class="form-select" id="attended_pic">
                                <option value="" selected disabled>Select PIC</option>
                                @foreach ($users as $user)
                                    <option value="{{ $user->id }}" @selected($call->attended_pic == $user->id)>{{ $user->user_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="calling_datetime" class="form-label">Calling DateTime</label>
                            <input type="text" readonly
                                value="{{ Carbon\Carbon::parse($call->datetime)->format('d-m-Y H:i:s') }}"
                                class="form-control" id="calling_datetime">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="machine_name" class="form-label">Machine Name :</label>
                            <input type="text" readonly value="{{ $call->mc_no }}" class="form-control"
                                id="machine_name">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="attended_datetime" class="form-label">Attended DateTime</label>
                            <input type="text" readonly
                                value="{{ $call->attended_datetime ? Carbon\Carbon::parse($call->attended_datetime)->format('d-m-Y H:i:s') : '' }}"
                                class="form-control" id="attended_datetime">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="attended_datetime" class="form-label">Submitted By</label>
                            <input type="text" readonly value="{{ Auth::user()->user_name }}" class="form-control"
                                id="attended_datetime">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="submitted_date" class="form-label">Submitted DateTime</label>
                            @if ($call->submitted_datetime != null)
                                <input type="text" readonly
                                    value="{{ $call->submitted_datetime }}"
                                    class="form-control" id="submitted_date">
                            @else
                                <input type="text" readonly
                                    value=""
                                    class="form-control" id="submitted_date">
                            @endif
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="inputGroupFile02" class="form-label">Image</label>
                            <input type="file" class="form-control myfile" name="image" id="inputGroupFile02"
                                accept=".jpg,.png,.jpeg">
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <img @if ($call->image == null) src="{{ asset('assets/images/pna.png') }}" @else src="{{ asset('/calls/') }}/{{ $call->image }}" @endif
                                id="blah" style="width: 100px; height: 100px;" class="Front_img" />
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="issue_type" class="form-label">Issue Type</label>
                            <br>
                            <select name="issue_type" class="form-select" id="issue_type">
                                <option value="" selected disabled>Select an Issue Type</option>
                                @foreach ($ca_problems as $ca_problem)
                                    <option value="{{ $ca_problem->id }}" @selected($call->issue_type == $ca_problem->id)>
                                        {{ $ca_problem->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="status" class="form-label">Status</label>
                            <br>
                            <select name="status" class="form-select">
                                <option value="In-progress" @selected($call->status == 'In-progress')>In-progress</option>
                                <option value="Completed" @selected($call->status == 'Completed')>Completed</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-sm-4 col-12">
                        <div class="mb-3">
                            <label for="remarks" class="form-label">Remarks</label>
                            <textarea name="remarks" class="form-control">{!! $call->remarks !!}</textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="d-flex gap-2 justify-content-end col-12">
                        <button type="button" class="btn btn-primary" id="callForm">Submit</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script>
        $(document).ready(function() {
            var defaultImagePath = "{{ asset('assets/images/zenig.png') }}";

            $('.myfile').on('change', function() {
                var input = this;
                if (input.files && input.files[0]) {
                    if (input.files[0].type.match('image.*')) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('.Front_img').attr('src', e.target.result);
                        }
                        reader.readAsDataURL(input.files[0]);
                    } else {
                        $('.Front_img').attr('src', defaultImagePath);
                    }
                }
            });
            $('#callForm').click(function(e) {
                var issueType = $('#issue_type').val();
                var attendedPic = $('#attended_pic').val();

                // Reset error message
                $('#errorMessage').hide();

                // Validate #issue_type dropdown
                if (issueType == null) {
                    $('#errorMessage').show().text('Please select an issue type.');
                    return;
                }

                // Validate #attended_pic dropdown
                if (attendedPic == null) {
                    $('#errorMessage').show().text('Please select an attended PIC.');
                    return;
                }

                $(this).closest('form').submit();
            });
        });
    </script>
@endsection