@extends('layouts.app')
@section('content')
<div class="app sidebar-mini">
    <!-- Page -->
    <div class="page">
        <div class="page-main">
            @include('layouts.sidemenubar')
            <div class="app-content main-content">
                <div class="side-app">
                    @include('layouts.appheader')

                    <div class="page-header">
                        <div class="page-leftheader">
                            <h4 class="page-title mb-0">Outbound</h4>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
                                <li class="breadcrumb-item active"><a>Outbound</a></li>
                            </ol>
                        </div>
                        <div class="flashmsgec">
                            @include('layouts.flashmsg')
                        </div>
                    </div>

                    <div class="card carddivision">
                        <div class="card-header">
                            <div class="card-title">
                                <!-- <span class="material-symbols-outlined cardicon">manage_accounts</span>&nbsp;&nbsp; -->
                                Make Outbound Call
                            </div>
                        </div>
                        <div class="card-body">
                            @if ($errors->any())
                                <div class="emperrmsg">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                        <i class="fe fe-x" id="emperrmsgclose"></i>
                                    </ul>
                                </div>
                            @endif

                            <form action="{{ route('user.make_call') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-3 col-md-6 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <label class="form-label">Call Mode <span class="text-red">*</span></label>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input call-mode-radio" type="radio" name="call_mode" id="call_one" value="one" {{ old('call_mode') === 'one' ? 'checked' : '' }} required>
                                                <label class="form-check-label" for="call_one">Call One Number</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input call-mode-radio" type="radio" name="call_mode" id="call_many" value="many" {{ old('call_mode') === 'many' ? 'checked' : '' }} required>
                                                <label class="form-check-label" for="call_many">Batch Calling</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <label class="form-label">Phone Number</label>
                                            <select name="phone_number_id" class="form-control select2" required>
                                                <option value="">Select Phone Number</option>
                                                @foreach ($numbers as $number)
                                                    <option value="{{ $number['id'] }}" {{ old('phone_number_id') == $number['id'] ? 'selected' : '' }}>{{ $number['formatted'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <label class="form-label">🧑 Assistant / 🔄 Workflow</label>
                                            <select name="assistant_id" class="form-control select2" required>
                                                <option value="">Select Assistant/Workflow</option>
                                                @foreach ($assistants as $assistant)
                                                    <option value="A_{{ $assistant['id'] }}" {{ old('assistant_id') == 'A_'.$assistant['id'] ? 'selected' : '' }}>{{ $assistant['name'] }} - 🧑</option>
                                                @endforeach
                                                @foreach ($workflows as $workflow)
                                                    <option value="W_{{ $workflow['id'] }}" {{ old('assistant_id') == 'W_'.$workflow['id'] ? 'selected' : '' }}>{{ $workflow['name'] }} - 🔄</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 mt-3" id="assistant-modifiers-section" style="display:none;">
                                        <label class="form-label">Additional Parameter Values</label>
                                        <div id="assistant-modifiers-container" class="row"></div>
                                    </div>
                                    <div class="col-lg-3 col-md-6 col-sm-12 col-md-12" id="call-one-fields" style="display: none;">
                                        <div class="form-group">
                                            <label class="form-label">Outbound Phone Number</label>
                                            <input type="text" name="outbound_number" class="form-control" placeholder="+61XXXXXXXXX" value="{{ old('outbound_number') }}" required>
                                        </div>                              
                                    </div>                              
                                    <div class="col-lg-3 col-md-6 col-sm-12 col-md-12" id="call-many-fields" style="display: none;">
                                        <div class="form-group">
                                            <label class="form-label mb-2">Upload CSV File </label>
                                            <div class="d-flex align-items-center gap-3">
                                                <label class="custom-file-upload mb-0">
                                                    Browse File
                                                    <input type="file" name="csv_file" accept="text/csv,.csv" class="form-control" onchange="updateFileName(this)"> 
                                                </label>
                                                <span class="file-name" id="file-name-display">No file chosen</span>
                                            </div>
                                            <small class="text-muted">Maximum file size : 5 MB</small></br>
                                            <small class="text-muted">CSV requires a number column (the numbers to call), an optional name column and any other column from assistantOverrides</small>
                                            <a href="#" id="download-dynamic-sample" class="btn btn-sm btn-outline-primary" style="display:none;">
                                                <i class="fe fe-download"></i> Download Sample CSV
                                            </a>
                                            @error('csv_file')
                                                <span class="text-danger d-block mt-1" id="csv-file-error">{{ $message }}</span>
                                            @else
                                                <span class="text-danger d-block mt-1" id="csv-file-error" style="display: none;"></span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="profileformdivbtn col-lg-12 col-md-12 col-sm-12 col-md-12" style="margin-top: 20px;">
                                        <div class="form-group">
                                             <button type="submit" class="savebtn"><i class="fe fe-phone-call"></i>&nbsp;&nbsp;Start Call</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!--Footer-->
                    @include('layouts.appfooter')
                    <!-- End Footer-->
                </div>
            </div>
        </div>
        <a href="#top" id="back-to-top"><i class="fe fe-chevrons-up"></i></a>
    </div>
</div>

@include('includes.jslinks_common')
<script>
    function updateFileName(input) {
        const fileName = input.files[0]?.name || 'No file chosen';
        document.getElementById('file-name-display').textContent = fileName;
    }
</script>
<script>
    $('#emperrmsgclose').click(function () {
        $('.emperrmsg').css('display', 'none');
    });
    
    $('.call-mode-radio').on('change', function () {
        const mode = $(this).val();
        if (mode === 'one') {
            $('#download-dynamic-sample').hide();
            $('#call-one-fields').show();
            $('#call-many-fields').hide();
            $('select[name="phone_number_id"]').val('').trigger('change');
            $('select[name="assistant_id"]').val('').trigger('change');

            // Set required for single call mode
            $('input[name="outbound_number"]').attr('required', true);
            $('input[name="csv_file"]').removeAttr('required');
        } else {
            $('#download-dynamic-sample').hide();
            $('#call-one-fields').hide();
            $('#call-many-fields').show();
            $('select[name="phone_number_id"]').val('').trigger('change');
            $('select[name="assistant_id"]').val('').trigger('change');

             // Set required for bulk mode
            //$('input[name="csv_file"]').attr('required', true);
            $('input[name="outbound_number"]').removeAttr('required');
        }
    });
    $('.call-mode-radio:checked').trigger('change');
     $('form').on('submit', function (e) {
        const callMode = $('input[name="call_mode"]:checked').val();
        $('#csv-file-error').text('').hide();
        if (callMode === 'many') {
            const fileInput = $('input[name="csv_file"]')[0];
            if (!fileInput.files.length) {
                e.preventDefault();
                $('#csv-file-error').text('Please upload a CSV file before submitting.').show();
                return false;
            }

            const file = fileInput.files[0];
            const maxSize = 5 * 1024 * 1024; // 5 MB

            if (file.size > maxSize) {
                e.preventDefault();
                $('#csv-file-error').text('CSV file exceeds 5 MB limit.').show();
                return false;
            }

            const validTypes = ['text/csv', 'application/vnd.ms-excel'];
            if (!validTypes.includes(file.type) && !file.name.endsWith('.csv')) {
                e.preventDefault();
                $('#csv-file-error').text('Please upload a valid CSV file.').show();
                return false;
            }
        }
    });
    $('select[name="assistant_id"]').on('change', function () {
    const assistantId = $(this).val();
    const callMode = $('input[name="call_mode"]:checked').val();

    if (!assistantId) {
        $('#assistant-modifiers-section').hide();
        $('#download-dynamic-sample').hide(); // hide explicitly if no assistant
        return; // prevent broken href=""
    }


    if (callMode === 'one' && assistantId) {
        $('#download-dynamic-sample').hide();
        $.ajax({
            url: `/get-assistant-modifiers/${assistantId}`,
            method: 'GET',
            success: function (modifiers) {
                const container = $('#assistant-modifiers-container');
                container.empty();

                if (modifiers.length > 0) {
                    $('#assistant-modifiers-section').show();
                    modifiers.forEach(function (modifier) {
                        const field = `
                            <div class="col-md-4 mb-2">
                                <input type="text" name="modifiers[${modifier}]" class="form-control" placeholder="Enter ${modifier}">
                            </div>
                        `;
                        container.append(field);
                    });
                } else {
                    $('#assistant-modifiers-section').hide();
                }
            }
        });
    } else {
        $('#assistant-modifiers-section').hide();
        $('#download-dynamic-sample')
            .attr('href', `/generate-sample-csv/${assistantId}`)
            .show();
    }
});
</script>
@endsection