@extends('layouts.master')

@section('content')
<main id="main" class="main">
    <section class="section dashboard">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">@lang('crud.detail') Pickup Request</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{!! route('pickups.index') !!}">Pickup Request</a></li>
                            <li class="breadcrumb-item active">@lang('crud.detail')</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            @include('flash::message')
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary card-outline">
                        <div class="card-body p-5">
                            <h5 class="my-3 text-muted text-center"> <b>Customer Detail</b></h5>
                            <ul class="list-group list-group-unbordered mb-3">
                                @include('pickups.show_user_details')
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card card-primary card-outline">
                        <div class="card-body p-5">
                            <h5 class="my-3 text-muted text-center"> <b>Request Detail</b></h5>
                            <ul class="list-group list-group-unbordered mb-3">
                                @include('pickups.show_fields')
                            </ul>
                        </div>
                    </div>
                </div>
                @role('Administrator')
                <div class="col-md-12">
                    <div class="card card-primary card-outline">
                        <div class="card-body p-5">
                            <h5 class="my-3 text-muted text-center"><b>Admin Comments</b></h5>

                            <form method="post" action="{{route('pickup.update', $pickup->id)}}" id="statusForm">
                                @csrf

                                <div class="mb-3">
                                    <label for="admin_comment" class="form-label">Comments</label>
                                    <textarea class="form-control" id="admin_comment" name="admin_comment" rows="3"
                                        placeholder="Enter your comments here">{{$pickup->admin_comment}}</textarea>
                                </div>

                                <div class="">
                                    <label class="form-check-label" for="status">
                                        Select Pickup Status
                                    </label>
                                    <br>
                                    <select class="col-md-4" name="status" id="status">
                                        <option value="" disabled selected>Select Status</option>
                                        <option {{$pickup->status == 'pending' ? 'selected' : ''}} value="pending">Pending
                                        </option>
                                        <option {{$pickup->status == 'accepted' ? 'selected' : ''}} value="accepted">Accepted
                                        </option>
                                        <option {{$pickup->status == 'inprogres' ? 'selected' : ''}} value="inprogres">
                                            Inprogress</option>
                                        <option {{$pickup->status == 'picked' ? 'selected' : ''}} value="picked">Picked
                                        </option>
                                        <option {{$pickup->status == 'completed' ? 'selected' : ''}} value="completed">
                                            Completed</option>
                                        <option {{$pickup->status == 'canceled' ? 'selected' : ''}} value="canceled">
                                            Canceled</option>
                                    </select>


                                </div>

                                <div class="mt-3">
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
                @endrole
            </div>
        </div>
    </section>
</main>

<script>
document.getElementById('statusForm').addEventListener('submit', function(e) {
    var status = document.getElementById('status').value;
    if (status !== '') {
        var confirmation = confirm('Are you sure you want to change the status to ' + status + '?');
        if (!confirmation) {
            e.preventDefault();
        }
    }
});
</script>
@endsection