@extends('layouts.app')

@section('content')
    <style type="text/css">
        body {
            overflow-x: hidden;
        }
        .row {
            display: flex !important;
            flex-wrap: wrap !important;
            margin-right: 15px !important;
        }

        button {
            text-transform: uppercase;
            padding-right: 10px;
            padding-left: 10px;
            outline: none !important;
        }

        #userSelect {
            border-radius: unset !important;
            width: 100% !important;
        }

        button.btn.btn-primary.createCampaign:hover {
            color: #fff;
            background-color: #34548A;
            border-color: #34548A;
        }
        .fs-wrap.multiple .fs-option.selected .fs-checkbox i {
            background-color: #34548A !important;
        }
        .fs-label-wrap .fs-label {
             padding: 10px !important;
        }
        .fs-wrap {
            width: 415px !important;
        }
        .fs-dropdown {
            width: 415px !important;
        }
    </style>
        @if(session('success'))
            <div class="d-flex justify-content-center mt-3">
                <div class="alert alert-success text-center" style="max-width: 600px; width:600px;">
                    {{ session('success') }}
                </div>
            </div>
        @endif
        @if(session('error'))
            <div class="d-flex justify-content-center mt-3">
                <div class="alert alert-danger text-center" style="max-width: 600px; width:600px;">
                    {{ session('error') }}
                </div>
            </div>
        @endif
        <div class="select-customer-details-div">
            <div class="margin-top-bottom textlabel">
                <h2>Sentinal Campaigns</h2>
            </div>
            <div class="content_parent mc-row">
                <div class="customer-detail-content mc-col">
                    <form method="POST" action="{{ route('sentinalcampaign.store') }}">
                        @csrf
                        <div class="form-group row">
                            <label class="form-check-label col-md-4"><b>Select User:</b></label>
                            <div class="col-md-8">
                                <select class="form-control" placeholder="Select User" name="user_id" id="userSelect">
                                    <option value="">Select User</option>
                                    @foreach($allUsers as $user)
                                        <option value="{{ $user['user_reference_id'] }}">{{ $user['businessName'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @error('user_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group row">
                            <label class="form-check-label col-md-4"><b>Campaign Name:</b></label>
                            <div class="col-md-8">
                                <input type="text" id="campaign_name" name="campaign_name" class="form-control" placeholder="Enter Campaign Name">
                            </div>
                            @error('campaign_name')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group row">
                            <label class="form-check-label col-md-4"><b>Select Entity:</b></label>
                            <div class="col-md-8">
                                <select class="form-control" placeholder="Select Entity" name="entity_id[]" multiple="multiple" id="entitySelect">
                                    <option value="">Select Entity</option>
                                </select>
                            </div>
                            {{-- Error if array is missing --}}
                            @error('entity_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror

                            {{-- Error if any value is invalid --}}
                            @if($errors->has('entity_id.*'))
                                @foreach($errors->get('entity_id.*') as $messages)
                                    @foreach($messages as $msg)
                                        <div class="text-danger">{{ $msg }}</div>
                                    @endforeach
                                @endforeach
                            @endif
                        </div>

                        <div class="form-group row">
                            <label class="form-check-label col-md-4"><b>OBN Type:</b></label>
                            <div class="col-md-8">
                                <select class="form-control" placeholder="Select OBN Type" name="obn_type" id="obn_type">
                                    <option value="">Select OBN Type</option>
                                    <option value="tollfree">Toll Free</option>
                                    <option value="nontollfree">Non Toll Free</option>
                                    <option value="either" selected>Either</option>
                                </select>
                            </div>
                            @error('obn_type')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group row">
                            <label class="form-check-label col-md-4"><b>OBN Usage:</b></label>
                            <div class="col-md-8">
                                <select class="form-control" placeholder="Select OBN Usage" name="obn_usage" id="obn_usage" >
                                    <option value="">Select OBN Usage</option>
                                    <option value="localpop" selected>Local POP</option>
                                    <option value="randomized">Randomized</option>
                                    <option value="favoursame" selected>Favour Same</option>
                                </select>
                            </div>
                            @error('obn_usage')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group row">
                            <label class="form-check-label col-md-4"><b>Default OBN:</b></label>
                            <div class="col-md-8">
                                <input type="text" id="default_obn" name="default_obn" class="form-control" placeholder="Enter Default OBN">
                            </div>
                            @error('default_obn')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary createCampaign">Create Campaign</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    {{-- START Generate User Reports section  --}}

    <div id="loaderModal" class="modal">
        <img class="loader-img" src="../images/ajax-spinner.gif">
        <span class="loader-text">Please wait ...</span>
    </div>

    <div id="messageModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <span class="loader-text">Something went wrong! Please try again later.</span>
        </div>
    </div>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" href="{{ asset('css/fselect.css') }}">
    <script src="{{ asset('js/fselect.js') }}"></script>
    <script>
        $(document).ready(function() {
            // $('#entitySelect').fSelect({
            //     placeholder: 'Select Entity',
            //     numDisplayed: 1,
            //     overflowText: '{n} Entity selected',
            //     noResultsText: 'No Entity found',
            //     searchText: 'Search Entity',
            //     showSearch: true
            // });

            $('#userSelect').fSelect({
                placeholder: 'Select User',
                numDisplayed: 1
                // overflowText: '{n} Option selected',
                // noResultsText: 'No Option found',
                // searchText: 'Search Option',
                // showSearch: true
            });

            let $userSelect   = $('#userSelect');
            let $entitySelect = $('#entitySelect');

            // Initialize fSelect
            $entitySelect.fSelect({
                placeholder: 'Select Entity',
                numDisplayed: 1,
                overflowText: '{n} Entity selected',
                noResultsText: 'No Entity found',
                searchText: 'Search Entity',
                showSearch: true
            });

            // Initially disable entity dropdown
            $entitySelect.prop('disabled', true);

            $userSelect.on('change', function () {
                jQuery("#loaderModal").show();
                let userId = $(this).val();

                // Reset entity dropdown
                $entitySelect.empty()
                    .append('<option value="">Select Entity</option>')
                    .prop('disabled', true);
                // Refresh fSelect to show cleared state
                $entitySelect.fSelect('reload');

                if (!userId) {
                    return; // No user selected
                }

                // Show loading
                $entitySelect.append('<option value="">Loading...</option>');

                $.ajax({
                    url: `/sentinalcampaign/entities/${userId}`,
                    type: 'GET',
                    dataType: 'json',
                    beforeSend: function () {
                        $entitySelect.append('<option>Loading...</option>');
                        $entitySelect.fSelect('reload');
                    },
                    success: function (data) {
                        $entitySelect.empty().append('<option value="">Select Entity</option>');

                        if (data.length > 0) {
                            $.each(data, function (index, entity) {
                                $entitySelect.append(
                                    `<option value="${entity.id}">${entity.entity}</option>`
                                );
                            });
                            $entitySelect.prop('disabled', false);
                            jQuery("#loaderModal").hide();
                        } else {
                            $entitySelect.append('<option value="">No entities found</option>');
                        }
                        // Reload fSelect with new options
                        $entitySelect.fSelect('reload');
                    },
                    error: function (xhr, status, error) {
                        console.error('Error fetching entities:', error);
                        $entitySelect.empty()
                            .append('<option value="">Error loading entities</option>');
                        $entitySelect.fSelect('reload');
                    }
                });
            });
        });
    </script>

@endsection