@extends('layouts.admin', ['title' => 'Edit Complaint'])

@push('stylesheets')

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
    {{--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">--}}
    {{--    <link rel="stylesheet" href="{{ asset('/assets/libs/nouislider/nouislider.min.css') }} ">--}}

@endpush

@section('content')
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                                <li class="breadcrumb-item"><a href="{{route('complaints.index')}}">Complaints</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Edit Complaint</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="col-md-6 col-12">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Edit Complaint</h5>
                                </div>
                                <div class="card-body">
                                    <h6>Details</h6>
                                    <dl class="row">
                                        <dt class="col-3">Name</dt>
                                        <dd class="col-9">{{$report->first_name}} {{$report->last_name}}</dd>
                                        <dt class="col-3">Contact</dt>
                                        <dd class="col-9">{{$report->phone_number}}</dd>
                                        <dt class="col-3">Village</dt>
                                        <dd class="col-9">{{$report->village->village}}</dd>
                                        <dt class="col-3">Parish</dt>
                                        <dd class="col-9">{{$report->village->parish->parish}}</dd>
                                        <dt class="col-3">Subcounty</dt>
                                        <dd class="col-9">{{$report->village->parish->subcounty->sub_county}}</dd>
                                        <dt class="col-3">District</dt>
                                        <dd class="col-9">{{$report->village->parish->subcounty->district->district}}</dd>
                                    </dl>

                                    <form method="post" action="{{route("complaints.update",["report"=>$report->id])}}">
                                        @csrf
                                        <div class="form-group mb-3 d-none">
                                            <label>Employment</label>
                                            <input type="text" class="form-control" name="id" value="{{$report->id}}" readonly>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Issue</label>
                                            <textarea class="form-control" rows="2" disabled>{{$report->issue}}</textarea>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Action Taken</label>
                                            <textarea class="form-control" name="action" rows="3" required>{{$report->action}}</textarea>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Recommendation</label>
                                            <textarea class="form-control" name="recommendation" rows="3" required>{{$report->recommendation}}</textarea>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label>Status</label>
                                            <select name="status" class="form-control" id="status_select">
                                                <option value="">Select status</option>
                                                @foreach(['open', 'closed'] as $item)
                                                    @if($item == $report->status)
                                                        <option value="{{$item}}" selected>{{$item}}</option>
                                                    @else
                                                        <option value="{{$item}}">{{$item}}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <button class="btn btn-primary" type="submit">Submit</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div>
            <!-- container-fluid -->
        </div>


        <!-- End Page-content -->


        @endsection

        @push('scripts')
            <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
{{--            <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>--}}

            <script>
                $(document).ready(function () {
                    // flatpickr("._dt", {dateFormat: 'd-m-Y'});
                    $('#status_select').select2({placeholder: 'Select status'});
                });
            </script>
    @endpush