@section('page-specific-style')
@parent

@endsection


<!-- Create Activity Modal -->
<div class="modal fade" id="createActivityModal" tabindex="-1" aria-labelledby="createActivityModalLabel" aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered ">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createLeadModalLabel">Add New Activity : </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('activities.create') }}" method="POST" autocomplete="off">
                    @csrf
                    @if ($is_used_in_lead)
                        <input type="hidden" name="lead_id" value="{{$lead->id}}">
                    @else
                        <div class="form-group row mt-4">
                            <label  class="col-sm-3 col-form-label" for="">Select Lead : </label>
                            <div class="col-sm-9">
                                <select name="lead_id" id="lead_id_autocomplete" class="form-control autocomplete" style="width: 100%">
    {{--                                @foreach($leads as $lead)--}}
    {{--                                    <option value="{{ $lead->id }}">{{ $lead->fullName }}</option>--}}
    {{--                                @endforeach--}}
                                </select>
                            </div>
                        </div>
                    @endif
                    <div class="form-group row mt-4">
                        <label  class="col-sm-3 col-form-label" for="">State : </label>
                        <div class="col-sm-9">
                            @foreach($activityStates as $activityState)
                                @if($activityState->value != 'Deleted')
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="state"
                                           id="state-{{$activityState->value}}"
                                           value="{{ $activityState->value }}">
                                    <label class="form-check-label" for="state-{{$activityState->value}}">{{ $activityState->value }}</label>
                                </div>
                                @endif
                            @endforeach

                        </div>
                    </div>
                    <div class="form-group row mt-4">
                        <label  class="col-sm-3 col-form-label" for="">Date : </label>
                        <div class="col-sm-9">
                            <input type="datetime-local" name="date" class="form-control" onfocus="this.showPicker()">
                        </div>
                    </div>
                    <div class="form-group row mt-4">
                        <label  class="col-sm-3 col-form-label" for="">Type : </label>
                        <div class="col-sm-3">
                            <select class="form-control" name="type">
                                <option value="" >Select Type</option>
                                @foreach($activityTypes as $activityType)
                                    <option value="{{ $activityType->value }}">{{ $activityType->value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <label  class="col-sm-3 col-form-label" for="">Assigned To : </label>
                        <div class="col-sm-3">
                            <select name="agent_id" class="form-control">
                                <option value="" >Select Agent</option>
                                @foreach($agents as $agent)
                                    <option value="{{ $agent->id }}">{{ $agent->name }}</option>
                                @endforeach
                            </select>

                        </div>
                    </div>
                    <div class="form-group row mt-4">
                        <label  class="col-sm-3 col-form-label" for="">Description : </label>
                        <div class="col-sm-9">
                            <input type="text" name="description" class="form-control" >
                        </div>
                    </div>
                    <div class="form-group row mt-4">
                        <div class="col-sm-12 text-end">
                            <button type="submit" class="btn btn-primary">Create</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@section('page-specific-script')
    @parent

    <script>
        $(document).ready(function() {
            let appUrl = '{{ env('APP_URL') }}';
            $('#lead_id_autocomplete').select2({
                placeholder: 'Select Lead',
                dropdownParent: $('#createActivityModal'),
                minimumInputLength : 3,
                ajax : {
                    url : appUrl+"/activities/leads",
                    dataType: 'json',
                    processResults: function (data) {
                        return {
                            results: data.data
                        };
                    }
                }
            });
        });
    </script>

@endsection