@extends('web.layouts.app')

@section('content')
@if (env('APP_PROJECT') == 'Mora')
  <div class="row">
@endif
    <div class="main-chat-container {{ env('APP_PROJECT') == 'Mora' ? 'col-lg-9' : 'w-100 ml-md-5 overflow-hidden' }}">
        <div class="p-3 p-lg-4 border-top mb-0 main-chat-container-in">
            <a class="nav-link" style="margin-bottom: 15px;font-size: larger;" href="{{ route('web.messenger_templates.index') }}">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div class="row">
                <div class="col-xl-12 col-lg-12">
                    <div class="card">
                        <div class="card-header" style="display: flex;justify-content: space-between;">
                            <h4 class="card-title">@lang('user.edit_template')</h4>
                        </div>
                        <div class="card-body">
                            <form id="templateAddForm" method="POST" enctype="multipart/form-data"
                                action="{{ route('web.messenger_templates.update', ['messenger_template' => $messengerTemplate]) }}">
                                @csrf
                                @method('PUT')
                                <div class="modal-body">
                                    <!-- Template Name -->
                                    <div class="row mb-1">
                                        <div class="col-md-3">
                                            <label for="category" class="form-label"><h5>@lang('user.category')</h5></label>
                                        </div>
                                        <div class="col-md-9">
                                            {!! Form::select('category', [NULL => ''] + \App\Models\MessengerTemplate::$categories, $messengerTemplate->category, ['id'=>'category-select','class' => 'form-control']) !!}
                                            <span class="text-danger" id="error-category"></span>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row mb-1">
                                        <div class="col-md-3">
                                            <label for="category" class="form-label"><h5>@lang('user.name')</h5></label>
                                        </div>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" name="name" value="{{ $messengerTemplate->name }}" required>
                                            <span class="text-danger" id="error-name"></span>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row mb-1" id="message_container" @if($messengerTemplate->category == '3') style="display: none" @endif>
                                        <div class="col-md-3">
                                            <label for="title" class="form-label"><h5>@lang('user.message')</h5></label>
                                        </div>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" name="title" value="{{ $messengerTemplate->title }}" required>
                                            <span class="text-danger" id="error-title"></span>
                                        </div>
                                    </div>
                                    <div class="row mb-1" id="media_container" @if($messengerTemplate->category != '3') style="display: none" @endif>
                                        <div class="col-md-3">
                                            <label for="media" class="form-label"><h5>@lang('user.media')</h5></label>
                                        </div>
                                        <div class="col-md-9">
                                            <select name="media[type]" class="form-control mb-2" id="media_type">
                                                <option value="1" @if(isset($data['media']['type']) && $data['media']['type'] == '1') selected @endif>{{ ucfirst(__('user.image')) }}</option>
                                                <option value="2" @if(isset($data['media']['type']) && $data['media']['type'] == '2') selected @endif>{{ ucfirst(__('user.video')) }}</option>
                                            </select>

                                            @if (!empty($data['media']['type']) && !empty($data['media']['path']))
                                                <div class="mb-1">
                                                    @if ($data['media']['type'] == '1')
                                                        <img src="{{ asset('storage/'. $data['media']['path']) }}" height="80" />
                                                    @elseif ($data['media']['type'] == '2')
                                                        @php $mime = @mime_content_type(public_path($data['media']['path'])); @endphp
                                                        <video height="160" controls>
                                                            <source src="{{ asset('storage/'. $data['media']['path']) }}" type="{{ $mime }}">
                                                            Your browser does not support the video tag.
                                                        </video>
                                                    @endif
                                                    <input type="hidden" name="media[path]" value="{{ $data['media']['path'] }}" />
                                                </div>
                                            @endif

                                            <input type="file" id="uploadImage" name="media_image" class="media-upload" accept="image/png, image/jpeg"
                                                @if(isset($data['media']['type']) && $data['media']['type'] == '2') style="display: none" @endif>
                                            <input type="file" id="uploadVideo" name="media_video" class="media-upload" accept="video/mp4, video/3gpp"
                                                @if(!isset($data['media']['type']) || $data['media']['type'] == '1') style="display: none" @endif>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row mb-3" id="buttons_container">
                                        <div class="col-md-3">
                                            <label for="body" class="form-label"><h5>@lang('user.buttons')</h5></label>
                                        </div>
                                        <div class="col-md-9">
                                            <div id="buttons">
                                                @if(isset($data['buttons']['button_type']))
                                                    @foreach($data['buttons']['button_type'] as $i => $buttonType)
                                                        @if(empty($buttonType))
                                                            @continue
                                                        @endif
                                                        <div class="row mt-2 button bg-light p-2">
                                                            <div class="col-md-11 ps-2 pe-1">
                                                                <div class="row">
                                                                    <div class="col-md-4 px-1">
                                                                        <select name="buttons[button_type][]" class="form-control button_type">
                                                                            <option value="quick_reply" @if($buttonType == 'quick_reply') selected @endif>@lang('user.quick_reply')</option>
                                                                            <option value="url" @if($buttonType == 'url') selected @endif>@lang('user.static_link')</option>
                                                                            <option value="phone_number" @if($buttonType == 'phone_number') selected @endif>@lang('user.phone')</option>
                                                                            <option value="user_phone_number" @if($buttonType == 'user_phone_number') selected @endif>@lang('user.request_user_phone')</option>
                                                                            <option value="user_email" @if($buttonType == 'user_email') selected @endif>@lang('user.request_user_email')</option>
                                                                        </select>
                                                                    </div>
                                                                    <div class="col-md-4 px-1">
                                                                        <input type="text" class="form-control button_display_text" placeholder="Button display text"
                                                                            @if($buttonType == 'user_phone_number' || $buttonType == 'user_email') style="display: none;" @endif
                                                                            name="buttons[button_display_text][]" maxlength="30" value="{{ $data['buttons']['button_display_text'][$i] ?? '' }}">
                                                                        <span class="text-danger" id="error-text"></span>
                                                                    </div>
                                                                    <div class="col-md-4 px-1">
                                                                        <input type="text" class="form-control button_url" placeholder="Button url" 
                                                                            @if($buttonType != 'url') style="display: none;" @endif
                                                                            name="buttons[button_url][]" value="{{ $data['buttons']['button_url'][$i] ?? '' }}">
                                                                        <div class="input-group button_phone" @if($buttonType != 'phone_number') style="display: none;" @endif>
                                                                            <span class="codeContainer" style="width: 40%;">
                                                                                <select class="form-select countryCode"  name="buttons[phone_number][countryCode][]">
                                                                                    <option value="">Select Country Code</option>
                                                                                    @foreach (__('countries') as $code => $country)
                                                                                        <option value="{{ $code }}" @if(isset($data['buttons']['phone_number']['countryCode'][$i]) && $data['buttons']['phone_number']['countryCode'][$i] == $code) selected @endif>{{ $country }}</option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </span>
                                                                            <input type="text" class="form-control phone" placeholder="@lang('user.phone')"
                                                                                name="buttons[phone_number][numbers][]" value="{{ $data['buttons']['phone_number']['numbers'][$i] ?? '' }}">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-1">
                                                                <button type="button" class="btn btn-danger remove-button">X</button>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                            <button type="button" id="add-button" class="btn btn-primary mt-2"
                                                @if(isset($data['buttons']['button_type']) && (
                                                    ($messengerTemplate->category == '1' && count($data['buttons']['button_type']) == 13) ||
                                                    ($messengerTemplate->category == '2' && count($data['buttons']['button_type']) == 3) ||
                                                    ($messengerTemplate->category == '3' && count($data['buttons']['button_type']) == 1)
                                                    )) 
                                                    disabled
                                                @endif>@lang('user.add_button')</button>
                                        </div>
                                    </div>
                                    <hr>
                                    <!-- Status -->
                                    <div class="row mb-2">
                                        <div class="col-md-3">
                                            <label class="form-label mt-2"><h5>@lang('user.status')</h5></label>
                                        </div>
                                        <div class="col-md-9">
                                            <span class="text-danger" id="error-status"></span>
                                            <select class="form-control" name="status">
                                                <option value="1" @if($messengerTemplate->status == '1') selected @endif>
                                                    @lang('user.active')</option>
                                                <option value="0" @if($messengerTemplate->status == '0') selected @endif>
                                                    @lang('user.Inactive')</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">@lang('user.edit')</button>
                                </div>
                            </form>

                            <div id="button_template" style="display: none">
                                <div class="row mt-2 button bg-light p-2">
                                    <div class="col-md-11 ps-2 pe-1">
                                        <div class="row">
                                            <div class="col-md-4 px-1">
                                                <select name="buttons[button_type][]" class="form-control button_type">
                                                    <option value="">@lang('user.button_type')</option>
                                                    <option value="quick_reply">@lang('user.quick_reply')</option>
                                                    <option value="url">@lang('user.static_link')</option>
                                                    <option value="phone_number">@lang('user.phone')</option>
                                                    <option value="user_phone_number">@lang('user.request_user_phone')</option>
                                                    <option value="user_email">@lang('user.request_user_email')</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4 px-1">
                                                <input type="text" class="form-control button_display_text" style="display: none;"
                                                    name="buttons[button_display_text][]" placeholder="Button display text" maxlength="30">
                                                <span class="text-danger" id="error-text"></span>
                                            </div>
                                            <div class="col-md-4 px-1">
                                                <input type="text" class="form-control button_url" style="display: none;"
                                                    name="buttons[button_url][]" placeholder="Button url">
                                                <div class="input-group button_phone" style="display: none;">
                                                    <span class="codeContainer" style="width: 40%;"></span>
                                                    <input type="text" class="form-control phone"
                                                        name="buttons[phone_number][numbers][]" placeholder="@lang('user.phone')">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-1">
                                        <button type="button" class="btn btn-danger remove-button">X</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end  layout wrapper -->
@if (env('APP_PROJECT') == 'Mora')
  </div>
@endif
@endsection
@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script>
        var buttonsLimit = {{ $messengerTemplate->category == 1 ? 13 : ($messengerTemplate->category == 3 ? 1 : 3) }};
        $(document).ready(function() {
            $("#templateAddForm").validate();
            $('#category-select').change(function() {
                let buttonsCount = $('#buttons .button');
                
                if ($(this).val() == '1') { // Quick reply
                    buttonsLimit = 13;
                    $('.button_type').find('option[value="user_phone_number"]').show();
                    $('.button_type').find('option[value="user_email"]').show();
                    $('.button_type').find('option[value="quick_reply"]').show();
                    $('.button_type').find('option[value="phone_number"]').hide();
                    $('.button_type').find('option[value="url"]').hide();

                    if (buttonsCount.length < buttonsLimit) {
                        $('#add-button').attr('disabled', false);
                    } else {
                        $('#add-button').attr('disabled', true);
                    }
                } else if ($(this).val() == '3') { // Media
                    buttonsLimit = 1;
                    $('.button_type').find('option[value="user_phone_number"]').hide();
                    $('.button_type').find('option[value="user_email"]').hide();
                    $('.button_type').find('option[value="phone_number"]').hide();
                    $('.button_type').find('option[value="quick_reply"]').hide();
                    $('.button_type').find('option[value="url"]').show();

                    // If there are more than 1 element, remove the ones after the third
                    if (buttonsCount.length > 1) {
                        buttonsCount.slice(1).remove(); 
                        $('#add-button').attr('disabled', true);
                    } else if (buttonsCount.length == 1) {
                        $('#add-button').attr('disabled', true);
                    }
                } else {
                    buttonsLimit = 3;
                    $('.button_type').find('option[value="user_phone_number"]').hide();
                    $('.button_type').find('option[value="user_email"]').hide();
                    $('.button_type').find('option[value="phone_number"]').show();
                    $('.button_type').find('option[value="url"]').show();
                    $('.button_type').find('option[value="quick_reply"]').show();

                    // If there are more than 3 elements, remove the ones after the third
                    if (buttonsCount.length > 3) {
                        buttonsCount.slice(3).remove(); 
                        $('#add-button').attr('disabled', true);
                    } else if (buttonsCount.length == 3) {
                        $('#add-button').attr('disabled', true);
                    }
                }

                if ($(this).val() == '3') { // Media
                    $('#media_container').show();
                    $('#message_container').hide();
                    $('#media_type').trigger('change');
                } else {
                    $('#message_container').show();
                    $('#media_container').hide();
                    $('#uploadImage').attr('required', false);
                    $('#uploadVideo').attr('required', false);
                }
            });
            $('#media_type').change(function() {
                if ($(this).val() == '1') {
                    $('#uploadImage').show();
                    $('#uploadImage').attr('required', true);
                    $('#uploadVideo').hide();
                    $('#uploadVideo').attr('required', false);
                } else {
                    $('#uploadImage').hide();
                    $('#uploadImage').attr('required', false);
                    $('#uploadVideo').show();
                    $('#uploadVideo').attr('required', true);
                }
            });
            
            $('#add-button').click(function() {
                $("#buttons").append($('#button_template').html());
                if ($("#buttons .button").length >= buttonsLimit) {
                    $(this).attr('disabled', true);
                } else {
                    $(this).attr('disabled', false);
                }
            });

            $(document).on('click', '.remove-button', function() {
                $(this).parent().parent().remove();
                $('#add-button').attr('disabled', false);
            });

            $(document).on('change', '.button_type', function() {
                let parent = $(this).parent().parent();
                parent.find('.button_phone').hide();
                parent.find('.countryCode').attr('required', false);
                parent.find('.phone').attr('required', false);
                parent.find('.button_url').hide();
                parent.find('.button_url').attr('required', false);
                
                if ($(this).val() == 'phone_number') {
                    parent.find('.button_phone').show();
                    parent.find('.countryCode').attr('required', true);
                    parent.find('.phone').attr('required', true);
                } else if ($(this).val() == 'url') {
                    parent.find('.button_url').show();
                    parent.find('.button_url').attr('required', true);
                }
                
                if ($(this).val() == 'user_phone_number' || $(this).val() == 'user_email') {
                    parent.find('.button_display_text').hide();
                    parent.find('.button_display_text').attr('required', false);
                } else {
                    parent.find('.button_display_text').show();
                    parent.find('.button_display_text').attr('required', true);
                }
            });

            fetch(`{{ url('get-web-mobile') }}`)
                .then(response => response.text())
                .then(html => {
                    $('.codeContainer').html(html);
                })
                .catch(error => console.error('Error fetching mobile:', error));
            
            $('#templateAddForm').on('submit', function(e) {
                if (!$("#templateAddForm").valid()) {
                    return false;
                }
        
                e.preventDefault();
               
                // Show loader
                document.querySelector('.loader').style.display = 'inline-block';
                document.querySelector('#loader-overlay').style.display = 'block';

                // Clear previous errors
                $('.form-control').removeClass('is-invalid');
                $('.text-danger').text('');

                var formData = new FormData(this);

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if(response.message){
                            toastr.error(response.message);
                        }
                        window.location.href = response.redirect;
                    },
                    error: function(response) {
                        document.querySelector('.loader').style.display = 'none';
                        document.querySelector('#loader-overlay').style.display = 'none';
                        if (response.status === 422) {
                            let errors = response.responseJSON.errors;
                            for (const [key, value] of Object.entries(errors)) {
                                // Add red border and show error message
                                $('[name="' + key + '"]').addClass(
                                    'is-invalid');
                                $('#error-' + key).text(value[0]);
                                toastr.error(value[0]);
                            }
                        }
                    },
                     complete: function() {
                        document.querySelector('.loader').style.display = 'none';
                        document.querySelector('#loader-overlay').style.display = 'none';
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });
        });
    </script>
@endpush