@extends('admin.layouts.app')
@section('title')
    {{ __('edit') }}
@endsection
@php 
$on_description =!empty($leads->description)? json_decode($leads->description):[];
@endphp
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title line-height-36">{{ __('edit') }}</h3>
                        <a href="{{ route('lead.index') }}"
                            class="btn bg-primary float-right d-flex align-items-center justify-content-center"><i
                                class="fas fa-arrow-left"></i>&nbsp; {{ __('back') }}</a>

                        <div class="text-center">
                            <a href=""
                                class="btn bg-warning float-right d-flex align-items-center justify-content-center mr-2"
                                data-toggle="modal" data-target="#modalContactForm">Create followup</a>
                        </div>
                    </div>
                    <div class="row pt-3 pb-4">
                        <div class="col-md-6 ml-5">
                            <form class="form-horizontal" action="{{ route('lead.update', $leads->id) }}" method="POST">
                                @method('PUT')
                                @csrf


                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">{{ __('name') }}<small
                                            class="text-danger">*</small></label>
                                    <div class="col-sm-9">
                                        <input value="{{ old('name', $leads->name) }}" name="name" type="text"
                                            class="form-control @error('name') is-invalid @enderror"
                                            placeholder="{{ __('enter') }} {{ __('name') }}">
                                        @error('name')
                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">{{ __('email') }}<small
                                            class="text-danger">*</small></label>
                                    <div class="col-sm-9">
                                        <input value="{{ old('email', $leads->email) }}" name="email" type="text"
                                            class="form-control @error('email') is-invalid @enderror"
                                            placeholder="{{ __('enter') }} {{ __('email') }}">
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">{{ __('user') }}<small
                                            class="text-danger">*</small></label>
                                    <div class="col-sm-9">
                                        <select name="user_id"
                                        class="form-control select2bs4 {{ error('user_id') }}"
                                        id="user_id">
                                        <option value="" class="d-none">
                                            {{ __('select') }} {{ __('user') }}
                                        </option>
                                        @foreach ($candidates as $candidate)
                                            <option {{ $candidate->id == old('user_id', $leads->user_id) ? 'selected' : '' }}
                                                value="{{ $candidate->id }}">
                                                {{ $candidate->name }}
                                            </option>
                                        @endforeach
                                        </select>
                                        @error('user_id')
                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>


                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label"> {{ __('country') }}/{{ __('phone') }}<small
                                            class="text-danger">*</small></label>
                                    <div class="col-sm-4">
                                        <select name="country_id"
                                            class="form-control @error('country_id') is-invalid @enderror w-100-p select2bs4"
                                            id="countrySelect">
                                            <option>Country</option>
                                            <option>+91</option>
                                        </select>


                                        {{-- <select name="country_id"
                                    class="form-control select2bs4 {{ error('country') }}"
                                    id="country">
                                    <option value="" class="d-none">
                                        {{ __('select_country') }}
                                    </option>
                                    @foreach ($countries as $country)
                                        <option {{ $country->id == old('country_id') ? 'selected' : '' }}
                                            value="{{ $country->id }}" {{ $country->id == $leads->country_id ? 'selected' : '' }}>
                                            {{ $country->name }}
                                        </option>
                                    @endforeach
                                    </select> --}}
                                        @error('country_id')
                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                        @enderror
                                    </div>


                                    <div class="col-sm-5">
                                        <input value="{{ old('phone', $leads->phone) }}" name="phone" type="number"
                                            class="form-control @error('phone') is-invalid @enderror"
                                            placeholder="{{ __('enter') }} {{ __('phone') }}">
                                        @error('phone')
                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>


                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">{{ __('source') }}</label>

                                    <div class="col-sm-9">
                                        <input value="{{ old('source', $leads->source) }}" name="source" type="text"
                                            class="form-control @error('source') is-invalid @enderror"
                                            placeholder="{{ __('enter') }} {{ __('source') }}">
                                        @error('source')
                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                {{-- <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">{{ __('description') }}</label>

                                    <div class="col-sm-9">
                                        <textarea type="text" rows="4" class="form-control" name="description" id="description" placeholder="Enter Description" >{{ old('description', $leads->description) }}</textarea>
                                        <span class="text-danger"></span>
                                        @error('description')
                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div> --}}
{{-- 
                                @if(!empty($on_description))
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title line-height-36">{{ __('description') }}</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                    
                                            @foreach($on_description as $key => $des)
                                    
                                                <div class="col-6">
                                                    <x-forms.label name="{{ $key }}" :required="false" />
                                                    <input class="form-control" type="text" name="{{ $key }}" placeholder="Links" value="{!! $des !!}" readonly/>
                                                </div>
                                            
                                            @endforeach
                                            
                                        </div>
                                    </div>
                                </div>
                                @endif --}}

                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">{{ __('url') }}</label>

                                    <div class="col-sm-9">
                                        <input value="{{ old('url', $leads->url) }}" name="url" type="text"
                                            class="form-control @error('url') is-invalid @enderror"
                                            placeholder="{{ __('enter') }} {{ __('url') }}" readonly>
                                        @error('url')
                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>


                                @if(!empty($on_description))
                                    @foreach($on_description as $key => $des)
                                        
                                        {{-- <div class="col-6">
                                            <x-forms.label name="{{ $key }}" :required="false" />
                                            <input class="form-control" type="text" name="{{ $key }}" placeholder="Links" value="{!! $des !!}" readonly/>
                                        </div> --}}
                                    @if($key == "date")
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">{{ ucwords($key) }}</label>
    
                                        <div class="col-sm-9">
                                            <input class="form-control" 
                                                @if(!empty($des))
                                                value="{{dateMonthTimeFormat($des)}}" 
                                                @endif
                                             name="{{ $key }}" type="text" readonly>
                                        </div>
                                    </div>

                                    @else
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">{{ ucwords($key) }}</label>
    
                                        <div class="col-sm-9">
                                            <input class="form-control"  value="{!! $des !!}" name="{{ $key }}" type="text" readonly>
                                        </div>
                                    </div>

                                    @endif

                                      
                                    
                                    @endforeach
                                @endif 
                                {{-- <div class="form-group row">
                                    <div class="offset-sm-3 col-sm-4">
                                        <button type="submit" class="btn btn-success">
                                            <i class="fas fa-sync"></i>&nbsp; {{ __('update') }}</button>
                                    </div>
                                </div> --}}
                            </form>
                        </div>


                        {{-- follow up model --}}
                        <div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog"
                            aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <form id="myForm" class="form-horizontal"
                                        action="{{ route('lead-followup', $leads->id) }}" method="POST"
                                        onsubmit="validateForm(event)">
                                        @csrf
                                        <div class="modal-header text-center">
                                            <h4 class="modal-title w-100 font-weight-bold">Follow up</h4>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body mx-3">
                                            <div class="md-form mb-3">
                                                <label data-error="wrong" data-success="right"
                                                    for="form8">Comment</label>
                                                <textarea type="text" id="form8" class="md-textarea form-control" rows="4" name="comment">{{ old('comment') }}</textarea>
                                                <span class="text-danger"></span>
                                            </div>

                                            <div class="md-form mb-3">
                                                <label data-error="wrong" data-success="right"
                                                    for="form34">Type</label>
                                                <select name="type" class="form-control validate" id="form34">
                                                    <option></option>
                                                    <option value="Inbound Call"
                                                        {{ old('type') == 'Inbound Call' ? 'selected' : '' }}>Inbound Call
                                                    </option>
                                                    <option value="Outbound Call"
                                                        {{ old('type') == 'Outbound Call' ? 'selected' : '' }}>Outbound
                                                        Call</option>
                                                    <option value="Chat" {{ old('type') == 'Chat' ? 'selected' : '' }}>
                                                        Chat</option>
                                                    <option value="Email" {{ old('type') == 'Email' ? 'selected' : '' }}>
                                                        Email</option>
                                                </select>
                                                <span class="text-danger"></span>
                                            </div>
                                            <div class="md-form mb-3">
                                                <label data-error="wrong" data-success="right" for="form29"
                                                    class="float-left mr-3">Follow Up</label>
                                                <div>
                                                    <input type="radio" id="followChoice1" name="followup_up"
                                                        value="yes" class=""
                                                        @if (old('followup_up') == 'yes') checked @endif />
                                                    <label for="followChoice1">Yes</label>
                                                    <input type="radio" id="followChoice2" name="followup_up"
                                                        value="no" class="ml-2"
                                                        @if (old('followup_up') == 'no') checked @endif />
                                                    <label for="followChoice2">No</label>
                                                </div>
                                                <span class="text-danger" id="followChoice"></span>
                                            </div>
                                            <div class="md-form d-none" id="datetime">
                                                <label data-error="wrong" data-success="right" for="form32">Date and
                                                    Time</label>
                                                {{-- <input type="datetime-local" id="form32" name="datetime" class="form-control validate" value="{{ old('datetime') }}"> --}}
                                                <input type="text" id="form32" name="datetime" autocomplete="off"
                                                    class="form-control validate" value="{{ request('datetime') }}">
                                                <span class="text-danger"></span>
                                            </div>

                                        </div>

                                        <div class="modal-footer d-flex justify-content-center">
                                            <button type="submit" class="btn btn-success">
                                                <i class="fas fa-paper-plane-o ml-1"></i> {{ __('save') }}</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        {{-- follow up model end --}}

                        {{-- {{$followups}} --}}
                        {{-- follow up  --}}

                        <div class="col-5">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title line-height-36">Follow up list</h3>
                                </div>
                                <div class="card-body">
                                        <table id="example1" class="table table-bordered table-striped dataTable dtr-inline"
                                        role="grid" aria-describedby="example1_info">
                                        <thead >
                                            <tr role="row" class="text-center">
                                                <th>Comment</th>
                                                <th>Type</th>
                                                <th>Followup</th>
                                                <th>Date & Time</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($followups as $followup)
                                                <tr class="text-center">
                                                    <td>{{ $followup->comment }}</td>
                                                    <td>{{ $followup->type }}</td>
                                                    <td>{{ $followup->followup_up }}</td>
                                                    <td>
                                                        @php
                                                            $dateString = $followup->datetime;
                                                            $date = new DateTime($dateString);
                                                            $formattedDate = $date->format('d-M-Y H:i a');
                                                        @endphp
                                                        {{ $formattedDate }}
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="10" class="text-center">
                                                        <p>{{ __('no_data_found') }}...</p>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                   
                        {{-- Follow up End --}}
                    </div>
                </div>
            </div>
        </div>
      
    </div>
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <script src="{{ asset('frontend/secondary-theme/assets/js/countrySelect.js') }}"></script>
    <style>
        .ck-editor__editable_inline {
            min-height: 170px;
        }

        .c-btn {
            padding-left: 22px;
            padding-right: 22px;
            border-radius: 15px;
        }

        .custom-control {
            position: relative;
            z-index: 1;
            display: block;
            min-height: 1.5rem;
            padding-left: 0;
            padding-right: 1.5rem;
            -webkit-print-color-adjust: exact;
            color-adjust: exact;
        }
    </style>
@endsection

@section('script')
    <script src="{{ asset('backend/plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="/js/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script>
        $('input[name="datetime"]').daterangepicker({
            autoUpdateInput: false,
            timePicker: true,
            locale: {
                // format: 'MM/DD/YYYY h:mm A'
                format: 'M/DD hh:mm A'
            },
            timePickerIncrement: 30,
            singleDatePicker: true,
            minDate: new Date(),
        });
        $('input[name="datetime"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' ' + picker.endDate.format(
                'hh:mm:ss'));
        });

        //     $('input[name="datetime"]').on('cancel.daterangepicker', function(ev, picker) {
        //         $(this).val('');
        //     });

        // var today = new Date().toISOString().slice(0, 16);
        // document.getElementsByName("datetime")[0].min = today;

        $('.select2bs4').select2({
            theme: 'bootstrap4'
        });
        ClassicEditor
            .create(document.querySelector('#editor2'))
            .catch(error => {
                console.error(error);
            });

        function pushClass(arg) {
            $('.c-btn').removeClass('btn-primary text-white');
            $('#' + arg).addClass('btn-primary text-white');
        }

        var country = "{{ $country_name }}";
        console.log(country);
        $.ajax({
            url: "{{ url('countryArray.php') }}?t=" + country,
            success: function(res) {
                // console.log(res);
                $("#countrySelect").html(res);
            }
        });


        $("#countrySelect").change(function() {
            $("option", this).each((i, e) => {
                // console.log(i,e)
                $(e).text(`${$(e).attr("data-country")} +${$(e).attr("data-code")}`);
            })
            console.log($("option:selected", this)[0]);
            selectedOption = $("option:selected", this);
            $("option:selected", this).text(
                `${$(selectedOption).attr("data-sort_code")} +${$(selectedOption).attr("data-code")}`)
        });


        // $(document).ready(function() {
        $('#followChoice1,#followChoice2').on('change', function() {
            console.log("ok");
            var selectedOption = $(this).val();
            if (selectedOption === 'yes') {
                $('#datetime').removeClass('d-none');
            } else {
                $('#datetime').addClass('d-none');
            }
        });

        // });

        function validateForm(event) {
            event.preventDefault();
            var comment = $('#form8').val();
            var type = $('#form34').val();
            var followup = $('input[name="followup_up"]:checked').val();
            console.log("ok", followup);

            // Reset any previous error messages
            $('.text-danger').text('');

            var isValid = true;

            if (comment.trim() === '') {
                $('#form8').next('.text-danger').text('Please enter a comment.');
                isValid = false;
            }

            if (type === '') {
                $('#form34').next('.text-danger').text('Please select a type.');
                isValid = false;
            }

            if (followup === undefined) {
                $('#followChoice').text('Please select an option.');
                isValid = false;
            } else if (followup === 'yes' && $('#form32').val().trim() === '') {
                $('#datetime').find('.text-danger').text('Please enter a date and time.');
                isValid = false;
            }

            if (isValid) {
                event.target.submit();
            }
        }
    </script>
@endsection