@extends('layouts.app')

@section('page-css')

@endsection

@section('content')
    <div class="container-fluid d-block">
        <div id="all-items-page-container" class="py-4">
            <div class="card mb-4">
                <div class="card-header">
                    {{ $page_title }}
                </div>

                <div class="card-body">
                    @if(session()->has('success'))
                        <div class="alert alert-success">
                            {{ session()->get('success') }}
                        </div>
                    @endif
                    @if(session()->has('danger'))
                        <div class="alert alert-danger">
                            {{ session()->get('danger') }}
                        </div>
                    @endif
    
                    <form method="POST" action="{{ url('update-option') }}">
                        @csrf
                        <input type="hidden" name="option_id" value="{{ $options_details->option_id }}">
                        <div class="col-md-12 pl-0" id="update-option-container">
                            {{-- Option Name --}}
                            <div class="col-md-6 pl-0 pr-0 mb-3">
                                <div class="form-group">
                                    <label>Option Name</label>
                                    <textarea class="form-control" rows="5" id="option-name" name="option_name"  maxlength="500" onkeyup="growSheetsPageFunctions.displayCounter('option-name');" required>{{ $options_details->option_name }}</textarea>
                                    <p id="option-name-character-counter"><span id="option-name-count">500<span> characters remaining</p>
                                </div>
                            </div>

                            {{-- Due Date --}}
                            <div class="form-group">
                                <div class="col-md-2 pl-0">
                                    <label>Due Date</label>
                                    <input type="text" class="form-control datepicker" name="due_date" id="due_date" value="{{ $options_details->due_date }}">
                                </div>
                            </div>
                            
                            {{-- Completed Date --}}
                            <div class="form-group">
                                <div class="col-md-2 pl-0">
                                    <label>Completed Date</label>
                                    <input type="text" class="form-control datepicker" name="completed_at" id="completed_at" value="{{ $options_details->completed_at }}">
                                </div>
                            </div>
                            
                            {{-- Comment --}}
                            <div class="col-md-6 pl-0 pr-0 mb-3">
                                <div class="form-group">
                                    <label>Comment</label>
                                    <textarea class="form-control" rows="5" id="comment" name="comment"  maxlength="500" required></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn-sm btn-primary">Save Changes</button>
                                <a type="button" class="btn btn-sm btn-warning" href="{{ url('growsheet/view') }}/{{ $options_details->grow_session_id }}">Cancel</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        @include('pages.includes.footer')
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        $.csrf_token    =   $('meta[name="csrf-token"]').attr('content');
        $.backoffice_url  =   "{{ env('BACKOFFICE_URL') }}";
        $('#growsheet-link').addClass('active');

        growSheetsPageFunctions.onload();
        growSheetsPageFunctions.displayCounter('option-name');
    </script>
@endsection