@extends('Users.app')
@section('content')
<div class="card mb-3">
    <div class="card-header">
        <div class="row flex-between-end">
            <div class="col-auto align-self-center">
                <h5 class="mb-0" data-anchor="data-anchor">Write External Email</h5>
            </div>
            <div class="col-8 col-sm-auto ms-auto text-end ps-0">
                <div id="orders-actions">

                </div>
            </div>

        </div>
    </div>
    <div class="card-body bg-light">
        <div class="tab-content">
            <div class="tab-pane preview-tab-pane active" role="tabpanel"
                aria-labelledby="tab-dom-f1d388f8-6223-48cd-b720-917f0290eedd"
                id="dom-f1d388f8-6223-48cd-b720-917f0290eedd">
                <form action="{{route('sendMail')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                   
                    <div class="row">
                        <div class="col-lg-3 col-sm-3 col-md-3 col-xs-12">
                            <div class="form-group">
                                <label for="Postal code" class="label-main">Templates Type</label>
                                <input type= "hidden" value="{{request()->route('id')}}" name="orderid">
                                <select class="form-select" name="templat_type_id" id="templat_type_id"
                                    onchange="gettemaplate()">
                                    <option>None</option>

                                    @php
                                        $temp_order_id = request()->route('id');
                                        $type_get = request()->query('type');
                                        $templt_id = 10;

                                        if ($type_get === 'delivery') {
                                        $templt_id = 5;
                                        } elseif ($type_get === 'order') {
                                        $templt_id = 8;
                                        } elseif (!empty($default_quotation_template)) {
                                        $templt_id = $default_quotation_template;
                                        }
                                    @endphp

                                    @if(count($templatestype) > 0)
                                        @foreach($templatestype as $so)
                                            <option value="{{ $so->id }}" @if($temp_order_id && $so->id == $templt_id) selected @endif>
                                                {{ $so->name }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>

                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-3 col-md-3 col-xs-12">
                            <div class="form-group">
                                <label for="Postal code" class="label-main">From (Website)</label>

                                @if(!empty($from_email))
                                    <input name="frommail" id="web_mail_id" value="{{ $from_email }}"
                                        class="form-control" readonly type="text">
                                @else
                                    <select name="frommail" id="web_mail_id" onchange="gettemaplate()"
                                        class="form-control webmail_teample">
                                        @if(count($website) > 0)
                                            @foreach($website as $web)
                                                <option value="{{ $web['sendto'] }}"
                                                    sort_name="{{ $web['sortname'] }}"
                                                    default_quotation_paymentgateway="{{ $web['default_quotation_paymentgateway'] }}">
                                                    {{ $web['name'] }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                @endif
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-3 col-md-3 col-xs-12">
                            <div class="form-group">
                                <label for="Postal code" class="label-main">Name</label>
                                <input name="cust_name" value=""
                                    class="form-control " type="text">
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-3 col-md-3 col-xs-12">
                            <div class="form-group">
                                <label for="Postal code" class="label-main">To Email</label>
                                <input name="toemail" value=""
                                    onblur="getOrderData();" onkeyup="getOrderData();" class="form-control "
                                    id="customer_email" type="email">
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top:10px;">
                        <div class="col-lg-3 col-sm-3 col-md-3 col-xs-12" style="display: none;">
                            <div class="form-group" id="ordercodedata">
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-12 col-md-12 col-xs-12" id="paymentgatway" style="display: none;">
                            <div class="form-group">
                                <label for="payment_gateway_name" class="label-main">Payment Gateway</label>
                                <select class="form-select" name="payment_source_id" id="payment_gateway_name"
                                    onchange="onchnageget();">
                                    @foreach($paymentgateway as $pay)
                                        <option value="{{ $pay->id }}" @if(isset($default_quotation_paymentgateway) && $pay->id == $default_quotation_paymentgateway) selected @endif>
                                            {{ $pay->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-12 col-md-12 col-xs-12">
                            <div class="form-group">
                                <label for="new_subject" class="label-main">Subject</label>
                                <input name="subject" class="form-control" id="new_subject"
                                    value="{{ isset($order_code) ? $order_code . ' : ' : '' }}"
                                    type="text">

                                <input id="order_code"
                                    value="{{ isset($order_code) ? $order_code . ' : ' : '' }}"
                                    type="hidden">
                                <input id="template_subject" value="" type="hidden">
                            </div>

                            <div id="data_for_quatiaon"></div>
                        </div>
                        <div class="col-lg-2 col-sm-2 col-md-2 col-xs-12">
                            <div class="form-group">
                                <label for="Postal code" class="label-main">File Attachment</label>
                                <!--<input name="file1" class="form-control " id='new_subject' type="file" >-->
                                <input name="data[Inbox][file1]" class="form-control" type="file">
                            </div>
                        </div>
                    </div>
                    <div class="row {{ isset($ajax_instant_mail) && $ajax_instant_mail != 0 ? 'display_off' : '' }}"
                        style="margin-top:10px;">
                        {{-- Add CC Section --}}
                        <div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
                            <div class="form-group">
                                <label class="label-main">Add Cc</label>
                                <div class="row">
                                    <div class="col-lg-3 col-sm-4 col-md-4 col-xs-12" style="padding-right: 0px;">
                                        <div class="form-group">
                                            <input placeholder="Add CC ->" class="user_email_cc form-control"
                                                autocomplete="off">
                                        </div>
                                        <div class="form-group" style="margin-top: 14px;">
                                            <a data-toggle="collapse" href="#add_cc" aria-expanded="false"
                                                aria-controls="add_cc" class="collapsed">
                                                <button class="btn btn-warning cc-btn" type="button">
                                                    <i class="fa fa-plus"></i> Add custom Cc
                                                </button>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
                                        <div id="div_blank_email_cc"
                                            style="border:1px solid gray; height: 100px; clear: both; overflow-y: scroll">
                                        </div>
                                    </div>
                                </div>

                                <div class="row collapse" style="background: #eaeaea; margin-left: 0px;margin-top:10px;"
                                    id="add_cc">
                                    <div class="col-12" style="margin-bottom: 10px;">
                                        <div class="form-group">
                                            <label class="label-main" style="padding-top: 5px;">Add custom cc email id
                                                (with comma and without space)</label>
                                            <input name="custom_cc" value=""
                                                placeholder="Multiple custom mail IDs without space, comma separated"
                                                class="form-control" type="text">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Add BCC Section --}}
                        <div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
                            <div class="form-group">
                                <label class="label-main">Add Bcc</label>
                                <div class="row">
                                    <div class="col-lg-3 col-sm-4 col-md-4 col-xs-12" style="padding-right: 0px;">
                                        <div class="form-group">
                                            <input placeholder="Add BCC ->" class="user_email_bcc form-control">
                                        </div>
                                        <div class="form-group" style="margin-top: 14px;">
                                            <a data-toggle="collapse" href="#add_bcc" aria-expanded="false"
                                                aria-controls="add_bcc" class="collapsed">
                                                <button class="btn btn-info bcc-btn" type="button">
                                                    <i class="fa fa-plus"></i> Add custom Bcc
                                                </button>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
                                        <div id="div_blank_email_bcc"
                                            style="border:1px solid gray; height: 100px; clear: both; overflow-y: scroll">
                                        </div>
                                    </div>
                                </div>

                                <div class="row collapse" style="background: #d0d8d4; margin-left: 0px;margin-top:10px;"
                                    id="add_bcc">
                                    <div class="col-12" style="margin-bottom: 10px;">
                                        <div class="form-group">
                                            <label class="label-main" style="padding-top: 5px;">Add custom bcc email id
                                                (with comma and without space)</label>
                                            <input name="custom_bcc" value=""
                                                placeholder="Multiple custom mail IDs without space, comma separated"
                                                class="form-control" type="text">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-sm-12 col-md-6 col-xs-12">
                        <div class="row">
                            <div class="col-lg-12 col-sm-12 col-md-6 col-xs-12">
                                <div class="form-group">
                                    <label for="message" class="label-main">Message</label>
                                    <div id="Textarea_response">
                                        <textarea name="message" id="message"
                                            class="form-control messageget">{{ old('message') }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <p id="msg">Whatsapp message will be sent to customer with email.</p>

                        <div class="clearfix"></div>

                        <div class="form-group mt-20 content-right" style="margin-top:10px;"> 
                            @if(isset($ajax_instant_mail) && $ajax_instant_mail != 0)
                                <button type="button" class="btn btn-red" data-dismiss="modal" aria-hidden="true"
                                    aria-label="Close">Close</button>
                            @else
                                <a href="javascript:history.back()" class="btn btn-red">CANCEL</a>
                            @endif

                            <button type="submit" class="btn btn-green createacc-save" value="Save"
                                name="submit">Send</button>
                        </div>
                    </div>


                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('css')
<style>
    .messageget{
        height: 500px;
    }
    .cc-btn {
        border-color: transparent !important;
        border-radius: 10px !important;
        box-shadow: 3px 2px 7px 0px #736D6F !important;
        color: #fff !important;
        font-family: open_sanslight !important;
        font-size: 13px !important;
        margin: 0px 10px 5px 0px !important;
        padding: 3px 10px !important;
        background-color: #f0ad4e !important;
        display: inline-block !important;
        padding: 6px 12px !important;
        margin-bottom: 0 !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.42857143 !important;
        text-align: center !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        -ms-touch-action: manipulation !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        border: 1px solid transparent !important;
        border-radius: 4px !important;
    }

    .bcc-btn {
        border-color: transparent !important;
        border-radius: 10px !important;
        box-shadow: 3px 2px 7px 0px #736D6F !important;
        color: #fff !important;
        font-family: open_sanslight !important;
        font-size: 13px !important;
        margin: 0px 10px 5px 0px !important;
        padding: 3px 10px !important;
        background-color: #5bc0de !important;
        display: inline-block !important;
        padding: 6px 12px !important;
        margin-bottom: 0 !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.42857143 !important;
        text-align: center !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        -ms-touch-action: manipulation !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        border: 1px solid transparent !important;
        border-radius: 4px !important;
    }

    .content-right .btn-red {
        background: #14A0BA;
        min-width: 100px;
    }

    .content-right .btn {
        border-color: transparent;
        border-radius: 10px;
        box-shadow: 3px 2px 7px 0px #736D6F;
        color: #fff;
        font-family: open_sanslight;
        font-size: 13px;
        margin: 0px 10px 5px 0px;
        padding: 3px 10px;
    }

    .btn {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    .content-right .btn-green {
        background: #86b14a;
    }

</style>
@endsection

@section('script')

@if(request()->route('id'))
    <script>
        $(document).ready(function () {
        gettemaplate();
        })

    </script>
@endif
<script>
     tinymce.init({
        selector: '.messageget', // ID of your textarea
        height: 300,
        menubar: false,
        plugins: 'lists link image preview code',
        toolbar: 'undo redo | formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | link image | code',
        branding: false
    });
    function gettemaplate() {

        let paymentGateways = @json($paymentgateway);
        let defaultPG = @json($default_quotation_paymentgateway);

        let templat_type_id = $('#templat_type_id').val();
        if (templat_type_id === '18' || templat_type_id === '8') {
            $('#msg').show();
        } else {
            $('#msg').hide();
        }

        let web_mail_id = $('#web_mail_id').val();

        if ([8, 9, 10, 5, 4, 18].includes(parseInt(templat_type_id))) {
            if ([10, 9, 18].includes(parseInt(templat_type_id))) {
                let select_pay_source_html = '';

                paymentGateways.forEach(function (pg) {
                    let related_template_type_id = pg['related_template_type_id'];           
                    if (parseInt(templat_type_id) === parseInt(related_template_type_id)) {
                        select_pay_source_html += `<option value="${pg['id']}">${pg['name']}</option>`;
                    }
                });

                $('#payment_gateway_name').html(select_pay_source_html);

                if (defaultPG) {
                    $('#payment_gateway_name').val(defaultPG);
                } else {
                    let fallbackPG = $('#web_mail_id option:selected').attr('default_quotation_paymentgateway');
                    $('#payment_gateway_name').val(fallbackPG);
                }

                $('#paymentgatway').show();
            } else {
                $('#paymentgatway').hide();
                $('#payment_gateway_name').val('');
            }

            getOrderData();
        } else {
            $('#paymentgatway').hide();
            $('#payment_gateway_name').val('');
            $('#ordercodedata').parent().hide();
            $('#ordercodedata').html('');

            $.ajax({
                type: "POST",
                url: "{{ route('getTemplateEmail') }}",
                data: {
                    _token: '{{ csrf_token() }}',  
                    templat_type_id: templat_type_id,
                    web_mail_id: web_mail_id
                },
                success: function (msg) {
                    if (msg) {
                        tinymce.get('message').setContent(msg.message);                        
                        get_ordercode();
                        $('#new_subject').val(msg.subject);
                    }
                }
            });
        }
    };
    function getOrderData() {
        var templateType = $('#templat_type_id').val();
        var customer_email = $('#customer_email').val();
        var web_mail_id = $('#web_mail_id').val();

        // Get the order ID from the route or query
        var order_id = '{{ request()->route("id") ?? request()->query("id") ?? '' }}';

        if (templateType == 8 || templateType == 9 || templateType == 10 || templateType == 5 || templateType == 4 || templateType == 18) {
            if (templateType !== '' && customer_email !== '') {
                $.ajax({
                    url: "{{ route('getorderdatabytemplate') }}", // Laravel-style URL generation
                    type: "POST",
                    dataType: 'json',
                    data: {
                        _token: '{{ csrf_token() }}',  
                        website_email: web_mail_id,
                        customer_email: customer_email,
                        templateType: templateType,
                        order_id: order_id,
                        htmlData: $('#message').val(),
                    }
                }).done(function (msg) {
                    console.log(msg)
                    let data = msg;
                    let htmld = '';
                    $('#ordercodedata').html(htmld);

                    if (templateType == 9 || templateType == 10 || templateType == 18) {
                        htmld += '<label for="Postal code" class="label-main">Order ID</label><select name="data[Inbox][order_id_sle][]" class="form-control chosen" multiple="true" id="order_id_custom" onchange="onchnageget()">'
                    } else {
                        htmld += '<label for="Postal code" class="label-main">Order Code</label><select class="form-control chosen" multiple="true" id="order_id_custom" onchange="onchnageget()">'
                    }

                    if (data.length > 0) {
                        for (let i = 0; i < data.length; i++) {
                            if (templateType == 9 || templateType == 10 || templateType == 18) {
                                htmld += '<option ' + (order_id == data[i].id ? 'selected' : '') + ' value="' + data[i].id + '">' + data[i].id + '</option>';
                            } else {
                                htmld += '<option ' + (order_id == data[i].id ? 'selected' : '') + ' value="' + data[i].id + '">' + data[i].order_code + '</option>';
                            }
                        }
                        htmld += '</select>';
                        $('#ordercodedata').parent().show();
                        $('#ordercodedata').html(htmld);
                        $(".chosen").chosen();
                    } else {
                        $('#ordercodedata').parent().hide();
                        $('#ordercodedata').html('');
                    }

                    onchnageget();
                });
            }
        }
    }
    $(document).ready(function () {
        $('.chosen').chosen(); // Your class or selector here
    });
    function onchnageget() {
        $('#Textarea_response .message').html(`
            <div style="height:300px; text-align: center;">
                <img border="0" src="{{ asset('images/loading_windows.gif') }}" style="width:150px" />
            </div>
        `);

        let templateType = $('#templat_type_id').val();
        let web_mail_id = $('#web_mail_id').val();
        let customer_email = $('#customer_email').val();
        let payment_gateway_id = $('#payment_gateway_name').val();

        let myIds = [];
        $('#order_id_custom option:selected').each(function () {
            myIds.push($(this).val());
        });

        $.ajax({
            url: "{{ route('getordedetailbyordercode') }}", // Update to your Laravel route
            type: "POST",
            data: {
                orderId: myIds,
                htmlData: $('#message').val(),
                customer_email: customer_email,
                templateType: templateType,
                payment_gateway_id: payment_gateway_id,
                web_mail_id: web_mail_id,
                _token: "{{ csrf_token() }}" // Important: add CSRF token
            },
        }).done(function (msg) {
            tinymce.get('message').setContent(msg.message);
            // $('#new_subject').val(msg.subject);
            get_ordercode(); // Call your existing helper if needed
        });
    }
    function get_ordercode() {
        var myId = [];

        $("#order_id_custom option:selected").each(function () {
            myId.push($(this).val());
        });

        $.ajax({
            url: "{{ route('getOrderDetailByOrderId') }}", // Laravel route helper
            type: "POST",
            data: {
                orderId: myId,
                _token: '{{ csrf_token() }}' // CSRF token for Laravel
            },
            success: function (response) {
                if(response.subject != ''){
                $('#new_subject').val(response.subject);
                $('#template_subject').val(response.subject);
                $("#data_for_quatation").html(response);
                }
               
                put_subject(); // Call the next function
            },
            error: function (xhr) {
                console.error("Error fetching order details:", xhr);
            }
        });
    }
    function put_subject() {
        let template_subject = $('#template_subject').val();
        let template_id = $('#templat_type_id').val();
        let order_code = $('#order_code').val();
        let new_template_subject;

        if (template_id == 8) {
            order_code = $('#order_code_invoice').val() + ' : ';
            new_template_subject = order_code + template_subject;
        } else if (template_id == 10 || template_id == 9 || template_id == 18) {
            new_template_subject = $('#template_subject_quatation').val();
        } else {
            $('#order_code_invoice').val('');
            new_template_subject = template_subject;
        }

        // $('#new_subject').val(new_template_subject);
    }


</script>
@endsection