@extends('app')

@section('content')
    <style>
        .deploy-box {
            background: #ecf0f1;
            border-left: 4px solid #0a5077;
            padding: 12px 15px;
            margin: 8px 0;
            border-radius: 3px;
        }
        .deploy-status-ok { border-left-color: #00a65a; }
        .deploy-status-fail { border-left-color: #dd4b39; }
        .deploy-status-skip { border-left-color: #f39c12; }
        #deploy-log {
            max-height: 500px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 13px;
        }
        #deploy-spinner { display: none; }
        .deploying #deploy-spinner { display: inline-block; }
        .deploying #deploy-btn { display: none; }
    </style>

    <!-- Content Header -->
    <section class="content-header">
        <h1>
            Deploy to Subdomains
            <small>Sync source to all clients</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{ url('/') }}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li>Settings</li>
            <li class="active">Deploy</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">

                <!-- Info box -->
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">Deploy Configuration</h3>
                    </div>
                    <div class="box-body">
                        <table class="table table-bordered">
                            <tr>
                                <th width="180">Source</th>
                                <td><code>{{ $sourceDir }}</code></td>
                            </tr>
                            <tr>
                                <th>Client Subdomains</th>
                                <td>{{ count($clientDomains) }}</td>
                            </tr>
                            @if(count($clientDomains) > 0)
                            <tr>
                                <th>Domains</th>
                                <td>
                                    @foreach($clientDomains as $d)
                                        <code>{{ $d }}</code>&nbsp;
                                    @endforeach
                                </td>
                            </tr>
                            @endif
                            <tr>
                                <th>Synced (whitelist)</th>
                                <td>
                                    @foreach($includeList as $inc)
                                        <code>{{ $inc }}</code>&nbsp;
                                    @endforeach
                                </td>
                            </tr>
                            <tr>
                                <th>Excluded</th>
                                <td>
                                    @foreach($excludeList as $ex)
                                        <code>{{ $ex }}</code>&nbsp;
                                    @endforeach
                                </td>
                            </tr>
                        </table>
                        <p class="text-danger">
                            <i class="fa fa-warning"></i>
                            Only the whitelisted paths above are copied. Nothing is ever deleted on clients, and excluded files (.env, storage, uploads, vendor) are never touched.
                        </p>
                    </div>
                </div>

                <!-- Controls -->
                <div class="box box-default" id="deploy-controls">
                    <div class="box-body">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="opt-backup" value="1"> Create backup before deploy
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="opt-dry" value="1"> Dry run (preview only, no changes)
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="opt-seed" value="1"> Run db:seed after migration
                            </label>
                        </div>
                        <br>
                        <button id="deploy-btn" class="btn btn-danger btn-lg" onclick="startDeploy()">
                            <i class="fa fa-rocket"></i> Deploy Now
                        </button>
                        <span id="deploy-spinner">
                            <i class="fa fa-spinner fa-spin"></i> Deploying... please wait
                        </span>
                    </div>
                </div>

                <!-- Results -->
                <div class="box box-default" id="deploy-results" style="display:none;">
                    <div class="box-header with-border">
                        <h3 class="box-title">Deploy Results</h3>
                    </div>
                    <div class="box-body">
                        <div id="deploy-summary"></div>
                        <hr>
                        <div id="deploy-log"></div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        function escapeHtml(str) {
            if (!str) return '';
            var div = document.createElement('div');
            div.appendChild(document.createTextNode(str));
            return div.innerHTML;
        }

        function startDeploy() {
            var dryRun = $('#opt-dry').is(':checked') ? 1 : 0;
            var backup = $('#opt-backup').is(':checked') ? 1 : 0;
            var seed = $('#opt-seed').is(':checked') ? 1 : 0;

            var confirmMsg = dryRun
                ? 'Dry run will preview changes only. Continue?'
                : 'WARNING: This will overwrite the whitelisted paths (app, resources, routes, etc.) on ALL client subdomains. Other files are never touched. Continue?';

            if (!confirm(confirmMsg)) {
                return;
            }

            $('#deploy-controls').addClass('deploying');
            $('#deploy-results').hide();
            $('#deploy-log').html('');
            $('#deploy-summary').html('');

            $.ajax({
                url: '{{ route("settings.deploy.run") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    dry_run: dryRun,
                    backup: backup,
                    seed: seed
                },
                dataType: 'json',
                timeout: 600000,
                success: function(response) {
                    $('#deploy-controls').removeClass('deploying');

                    if (response.failed > 0) {
                        $('.box-body-second').show();
                        $('.messageBodyError').slideDown(1000).delay(3000).slideUp(1000).children().next().html('Deploy completed with ' + response.failed + ' error(s)');
                    } else {
                        $('.box-body-second').show();
                        $('.messageBodySuccess').slideDown(1000).delay(3000).slideUp(1000).children().next().html('Deploy successful to ' + response.success + ' subdomain(s)');
                    }

                    var mode = dryRun ? 'DRY RUN' : 'LIVE';
                    var diskWarn = response.low_disk_space
                        ? '<div class="callout callout-warning"><p><strong>Low disk space:</strong> ' + response.disk_free_mb + 'MB free</p></div>'
                        : '';

                    $('#deploy-summary').html(
                        diskWarn +
                        '<div class="callout callout-info">' +
                            '<h4>Mode: ' + escapeHtml(mode) + '</h4>' +
                            '<p>Success: <strong>' + response.success + '</strong> &nbsp; ' +
                            'Failed: <strong>' + response.failed + '</strong> &nbsp; ' +
                            'Skipped: <strong>' + response.skipped + '</strong> &nbsp; ' +
                            'Total files: <strong>' + response.total_files + '</strong>' +
                            (response.disk_free_mb !== null ? ' &nbsp; Disk: <strong>' + response.disk_free_mb + 'MB free</strong>' : '') +
                            '</p>' +
                        '</div>'
                    );

                    var logHtml = '';
                    $.each(response.results, function(i, r) {
                        var cssClass = r.status === 'ok' ? 'deploy-status-ok'
                                     : r.status === 'fail' ? 'deploy-status-fail'
                                     : 'deploy-status-skip';
                        var statusText = r.status === 'ok' ? 'OK (' + r.files + ' files)'
                                            : r.status === 'fail' ? 'FAILED: ' + (r.message || r.migrate || 'unknown')
                                            : 'SKIP: ' + (r.message || 'unknown');
                        var details = escapeHtml(statusText);
                        if (r.errors && r.errors.length) {
                            details += '<br><small style="color:#a94442;">';
                            for (var e = 0; e < r.errors.length; e++) {
                                details += escapeHtml(r.errors[e]) + '<br>';
                            }
                            details += '</small>';
                        }
                        if (r.backup) {
                            details += ' | Backup: ' + escapeHtml(r.backup);
                        }
                        if (r.cache) {
                            details += ' | ' + escapeHtml(r.cache);
                        }
                        if (r.autoload) {
                            details += ' | ' + escapeHtml(r.autoload);
                        }
                        if (r.migrate) {
                            details += ' | Migrate: ' + escapeHtml(r.migrate);
                        }
                        logHtml += '<div class="deploy-box ' + cssClass + '">' +
                                   '<strong>' + (i + 1) + '.</strong> ' + escapeHtml(r.domain) +
                                   ' — <em>' + details + '</em>' +
                                   '</div>';
                    });

                    $('#deploy-log').html(logHtml);
                    $('#deploy-results').show();
                },
                error: function(xhr) {
                    $('#deploy-controls').removeClass('deploying');

                    var html = '<div class="callout callout-danger"><h4>Error (' + xhr.status + ')</h4>';

                    if (xhr.responseJSON) {
                        var r = xhr.responseJSON;
                        html += '<p><strong>' + escapeHtml(r.error || 'Unknown error') + '</strong></p>';

                        if (r.file) {
                            html += '<p><code>' + escapeHtml(r.file) + ':' + (r.line || '') + '</code></p>';
                        }
                        if (r.class) {
                            html += '<p>Type: <code>' + escapeHtml(r.class) + '</code></p>';
                        }
                        if (r.trace && r.trace.length) {
                            html += '<details><summary style="cursor:pointer;color:#999;">Stack trace</summary>';
                            html += '<pre style="font-size:12px;margin-top:8px;color:#ccc;">';
                            for (var i = 0; i < r.trace.length; i++) {
                                html += '#' + i + ' ' + escapeHtml(r.trace[i]) + '\n';
                            }
                            html += '</pre></details>';
                        }
                    } else {
                        html += '<p>' + escapeHtml(xhr.statusText || 'Request failed or timed out') + '</p>';
                        if (xhr.responseText) {
                            html += '<details><summary style="cursor:pointer;color:#999;">Raw response</summary>';
                            html += '<pre style="font-size:12px;margin-top:8px;color:#ccc;">' + escapeHtml(xhr.responseText) + '</pre></details>';
                        }
                    }

                    html += '</div>';

                    $('#deploy-log').html(html);
                    $('#deploy-results').show();
                }
            });
        }
    </script>
@endsection