@extends('layout.app')

@section('styles')
    <style>
        /* Scroll handled by DataTable scrollY — no CSS overflow needed here */
        .dataTables_scrollBody thead th {
            background-color: #343a40 !important;
            color: #fff !important;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">

        <div class="card mb-3">
            <div class="card-header">
                <h4 class="card-title">Cancel Line Request Report</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('cancel-line-request') }}" method="GET">
                    <div class="row">

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>From Date</label>
                                <input type="date" name="from_date" class="form-control"
                                    value="{{ request('from_date') }}">
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>To Date</label>
                                <input type="date" name="to_date" class="form-control"
                                    value="{{ request('to_date') }}">
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Cancel Reason</label>
                                <select name="cancel_reason_id" class="form-control select2">
                                    <option value="">All Reasons</option>
                                    @foreach ($cancelReasons as $reason)
                                        <option value="{{ $reason->id }}"
                                            {{ request('cancel_reason_id') == $reason->id ? 'selected' : '' }}>
                                            {{ $reason->reason }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>POP</label>
                                <select name="pop_id" class="form-control select2">
                                    <option value="">All POPs</option>
                                    @foreach ($pops as $pop)
                                        <option value="{{ $pop->id }}"
                                            {{ request('pop_id') == $pop->id ? 'selected' : '' }}>
                                            {{ $pop->popname }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Division</label>
                                <select name="division_id" id="division" class="form-control select2">
                                    <option value="">All Divisions</option>
                                    @foreach ($divisions as $division)
                                        <option value="{{ $division->id }}"
                                            {{ request('division_id') == $division->id ? 'selected' : '' }}>
                                            {{ $division->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>District</label>
                                <select name="district_id" id="district" class="form-control select2">
                                    <option value="">All Districts</option>
                                    @foreach ($districts as $district)
                                        <option value="{{ $district->id }}"
                                            {{ request('district_id') == $district->id ? 'selected' : '' }}>
                                            {{ $district->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Upazila</label>
                                <select name="upazila_id" id="upazilla" class="form-control select2">
                                    <option value="">All Upazilas</option>
                                    @foreach ($upazilas as $upazila)
                                        <option value="{{ $upazila->id }}"
                                            {{ request('upazila_id') == $upazila->id ? 'selected' : '' }}>
                                            {{ $upazila->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Thana</label>
                                <select name="thana_id" id="thana" class="form-control select2">
                                    <option value="">All Thanas</option>
                                    @foreach ($thanas as $thana)
                                        <option value="{{ $thana->id }}"
                                            {{ request('thana_id') == $thana->id ? 'selected' : '' }}>
                                            {{ $thana->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Mobile Number</label>
                                <input type="text" name="phone" class="form-control"
                                    value="{{ request('phone') }}" placeholder="e.g. 01xxxxxxxxx">
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Cancel Type</label>
                                <select name="cancel_type" class="form-control select2">
                                    <option value="">All</option>
                                    <option value="marketing" {{ request('cancel_type') === 'marketing' ? 'selected' : '' }}>
                                        Marketing Cancelled
                                    </option>
                                    <option value="not_coverage" {{ request('cancel_type') === 'not_coverage' ? 'selected' : '' }}>
                                        Survey Not Coverage
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <a href="{{ route('cancel-line-request') }}"
                                    class="btn btn-secondary btn-sm float-right ml-1">Reset</a>
                                <button type="submit" class="btn btn-primary btn-sm float-right">Search</button>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-6">
                        <h4 class="card-title m-0">Cancelled Requests</h4>
                    </div>
                    <div class="col-6 text-right">
                        <span class="badge badge-danger">Total: {{ $lists->count() }}</span>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover mb-0" id="reportTable">
                        <thead class="thead-dark">
                            <tr>

                                <th>ID</th>
                                <th>Cancelled At</th>
                                <th>Name / Phone</th>
                                <th>POP / Package</th>
                                <th>Activation Date</th>
                                <th>Survey Status</th>
                                <th>Cancel Reasons</th>
                                <th>Cancel Remarks</th>
                                <th>Survey Remarks</th>
                                <th>Cancelled By</th>
                                <th>Created By</th>
                                <th>Location</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($lists as $i => $list)
                                <tr>
                                  
                                    <td>
                                        <a href="{{ route('new-line-request.show', $list->id) }}"
                                            target="_blank">
                                            #{{ $list->id }}
                                        </a>
                                    </td>
                                    <td>{{ $list->updated_at ? $list->updated_at->format('d M Y H:i') : 'N/A' }}</td>
                                    <td>
                                        {{ $list->name ?? 'N/A' }}
                                        <br>
                                        <small class="text-muted">{{ $list->phone ?? 'N/A' }}</small>
                                    </td>
                                    <td>
                                        {{ $list->pop->popname ?? 'N/A' }}
                                        <br>
                                        <small class="text-muted">{{ $list->package->package_name ?? 'N/A' }}</small>
                                    </td>
                                    <td>
                                        {{ $list->confirm_activation_date ? \Carbon\Carbon::parse($list->confirm_activation_date)->format('d M Y H:i') : 'N/A' }}
                                    </td>
                                    <td>
                                        @if ($list->survey_status === 'Not Coverage')
                                            <span class="badge badge-danger">Not Coverage</span>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td>
                                        @php
                                            $reasonItems = $list->survey_status === 'Not Coverage'
                                                ? $list->surveyCancelReason
                                                : $list->cancelReasons;
                                        @endphp
                                        @forelse ($reasonItems as $cr)
                                            <span class="badge badge-warning">
                                                {{ $cr->CancelReason->reason ?? 'N/A' }}
                                            </span><br>
                                        @empty
                                            <span class="text-muted">—</span>
                                        @endforelse
                                    </td>
                                    <td>{{ $list->approval_remarks ?? '—' }}</td>
                                    <td>{{ $list->survey_remarks ?? '—' }}</td>
                                    <td>
                                        @if ($list->survey_status === 'Not Coverage')
                                            {{ $list->surveyedBy->name ?? 'N/A' }}
                                        @else
                                            {{ $list->marketingDoneUser->name ?? 'N/A' }}
                                        @endif
                                    </td>
                                    <td>{{ $list->user->name ?? 'WebSite' }}</td>
                                    <td class="small">
                                        @php
                                            $parts = array_filter([
                                                $divisionMap[$list->division_id] ?? null,
                                                $districtMap[$list->district_id] ?? null,
                                                $upazilaMap[$list->upazila_id]   ?? null,
                                                $thanaMap[$list->thana_id]        ?? null,
                                            ]);
                                        @endphp
                                        {{ implode(', ', $parts) ?: '—' }}
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-secondary dropdown-toggle" type="button"
                                                id="actionDropdown{{ $list->id }}" data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                                Action
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-right"
                                                aria-labelledby="actionDropdown{{ $list->id }}">
                                                <a href="#" class="dropdown-item open-remarks-modal"
                                                    data-id="{{ $list->id }}">
                                                    Remark
                                                </a>
                                                <a href="{{ route('new-line-request-history-logs', $list->id) }}"
                                                    class="dropdown-item">History Log</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="13" class="text-center text-muted py-4">No cancelled requests found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    <!-- Remarks Modal -->
    <div class="modal fade" id="remarksModal" tabindex="-1" aria-labelledby="remarksModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="remarksModalLabel">Remarks</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="mb-4">
                        <h6 class="font-weight-bold mb-3">Previous Remarks</h6>
                        <div id="remarksListLoading" class="text-center py-3">
                            <div class="spinner-border text-primary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                        <div id="remarksListEmpty" class="alert alert-info d-none">No previous remarks found.</div>
                        <div id="remarksList" style="max-height: 300px; overflow-y: auto;"></div>
                    </div>
                    <hr>
                    <div>
                        <h6 class="font-weight-bold mb-3">Add New Remark</h6>
                        <form id="addRemarkForm">
                            @csrf
                            <input type="hidden" id="remarkRequestId" name="request_id">
                            <div class="form-group">
                                <label for="newRemarkText">Remark</label>
                                <textarea name="remarks" id="newRemarkText" class="form-control" rows="4"
                                    placeholder="Enter your remark..." required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-paper-plane"></i> Submit Remark
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('ajax')
    <script>
        $(function() {
            if ($.fn.DataTable && $('#reportTable').length) {
                $('#reportTable').DataTable({
                    destroy: true,
                    pageLength: 100,
                    order: [[0, 'asc']],
                    scrollY: '500px',
                    scrollCollapse: true,
                    paging: true,
                    drawCallback: function() {
                        $('[data-toggle="dropdown"]').dropdown();
                    }
                });
            }

            // ---- Action dropdown: detach to body so it isn't clipped by the DataTable scroll body ----
            $(document).on('show.bs.dropdown', '#reportTable .dropdown', function() {
                var $toggle = $(this).find('.dropdown-toggle');
                var $menu = $(this).find('.dropdown-menu');
                $('body').append($menu.detach());
                var offset = $toggle.offset();
                $menu.css({
                    display: 'block',
                    position: 'absolute',
                    top: offset.top + $toggle.outerHeight(),
                    left: offset.left,
                    zIndex: 9999
                });
                $(this).data('detached-menu', $menu);
            });

            $(document).on('hide.bs.dropdown', '#reportTable .dropdown', function() {
                var $menu = $(this).data('detached-menu');
                if ($menu) {
                    $(this).append($menu.detach());
                    $menu.removeAttr('style');
                }
            });

            // ---- Remarks (view previous + add new) ----
            $(document).on('click', '.open-remarks-modal', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                $('#remarkRequestId').val(id);
                $('#newRemarkText').val('');
                $('#remarksList').empty();
                $('#remarksListEmpty').addClass('d-none');
                $('#remarksListLoading').removeClass('d-none');
                $('#remarksModal').modal('show');

                $.ajax({
                    type: 'GET',
                    url: '{{ route('new-line-request-remarks') }}',
                    data: { id: id },
                    success: function(res) {
                        $('#remarksListLoading').addClass('d-none');
                        var tableHtml = `<table class="table table-sm table-bordered"><thead class="thead-light"><tr><th>Created By</th><th>Remark</th><th>Time</th></tr></thead><tbody></tbody></table>`;
                        $('#remarksList').html(tableHtml);
                        var $tbody = $('#remarksList table tbody');
                        if (res.data && res.data.length > 0) {
                            $('#remarksListEmpty').addClass('d-none');
                            res.data.forEach(function(item) {
                                var userName = item.user && item.user.name ? item.user.name : 'Unknown User';
                                $tbody.append(`<tr><td>${userName}</td><td>${item.remarks || ''}</td><td>${item.created_at || ''}</td></tr>`);
                            });
                        } else {
                            $('#remarksListEmpty').removeClass('d-none');
                        }
                    },
                    error: function() {
                        $('#remarksListLoading').addClass('d-none');
                        $('#remarksListEmpty').removeClass('d-none').text('Failed to load remarks. Please try again.');
                    }
                });
            });

            $(document).on('submit', '#addRemarkForm', function(e) {
                e.preventDefault();
                var requestId = $('#remarkRequestId').val();
                var remarkText = $('#newRemarkText').val();
                var $btn = $(this).find('button[type="submit"]');
                var origHtml = $btn.html();
                $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Submitting...');

                $.ajax({
                    url: '{{ route('new-line-request-remarks-add') }}',
                    type: 'GET',
                    data: { _token: '{{ csrf_token() }}', remarks: remarkText, id: requestId },
                    success: function(res) {
                        $btn.prop('disabled', false).html(origHtml);
                        toastr.success(res.message);
                        $('#newRemarkText').val('');
                        var tableHtml = `<table class="table table-sm table-bordered"><thead class="thead-light"><tr><th>Created By</th><th>Remark</th><th>Time</th></tr></thead><tbody></tbody></table>`;
                        $('#remarksList').html(tableHtml);
                        var $tbody = $('#remarksList table tbody');
                        if (res.data && res.data.length > 0) {
                            $('#remarksListEmpty').addClass('d-none');
                            res.data.forEach(function(item) {
                                var userName = item.user && item.user.name ? item.user.name : 'Unknown User';
                                $tbody.append(`<tr><td>${userName}</td><td>${item.remarks || ''}</td><td>${item.created_at || ''}</td></tr>`);
                            });
                        } else {
                            $('#remarksListEmpty').removeClass('d-none');
                        }
                    },
                    error: function() {
                        $btn.prop('disabled', false).html(origHtml);
                        $('#remarksListEmpty').removeClass('d-none').text('Failed to submit remark. Please try again.');
                    }
                });
            });

            $('#division').change(function() {
                var id = $(this).val();
                $('#district').html('<option value="">All Districts</option>');
                $('#upazilla').html('<option value="">All Upazilas</option>');
                $('#thana').html('<option value="">All Thanas</option>');
                if (!id) return;
                $.get('{{ route('fetchDistrict') }}', { id: id }, function(data) {
                    $('#district').html('<option value="">All Districts</option>' + data);
                    if ($('#district').data('select2')) {
                        $('#district').trigger('change.select2');
                    }
                });
            });

            $('#district').change(function() {
                var id = $(this).val();
                $('#upazilla').html('<option value="">All Upazilas</option>');
                $('#thana').html('<option value="">All Thanas</option>');
                if (!id) return;
                $.get('{{ route('fetchUpazila') }}', { id: id }, function(data) {
                    $('#upazilla').html('<option value="">All Upazilas</option>' + data);
                    if ($('#upazilla').data('select2')) {
                        $('#upazilla').trigger('change.select2');
                    }
                });
            });

            $('#upazilla').change(function() {
                var id = $(this).val();
                $('#thana').html('<option value="">All Thanas</option>');
                if (!id) return;
                $.get('{{ route('fetchThana') }}', { id: id }, function(data) {
                    $('#thana').html('<option value="">All Thanas</option>' + data);
                    if ($('#thana').data('select2')) {
                        $('#thana').trigger('change.select2');
                    }
                });
            });

            // Re-trigger cascades on page load when filters are already applied
            var preDistrict = '{{ request('district_id') }}';
            var preUpazila  = '{{ request('upazila_id') }}';
            var preDivision = '{{ request('division_id') }}';

            if (preDivision) {
                $.get('{{ route('fetchDistrict') }}', { id: preDivision }, function(data) {
                    $('#district').html('<option value="">All Districts</option>' + data);
                    if (preDistrict) {
                        $('#district').val(preDistrict).trigger('change.select2');
                        $.get('{{ route('fetchUpazila') }}', { id: preDistrict }, function(data2) {
                            $('#upazilla').html('<option value="">All Upazilas</option>' + data2);
                            if (preUpazila) {
                                $('#upazilla').val(preUpazila).trigger('change.select2');
                                $.get('{{ route('fetchThana') }}', { id: preUpazila }, function(data3) {
                                    $('#thana').html('<option value="">All Thanas</option>' + data3);
                                    var preThana = '{{ request('thana_id') }}';
                                    if (preThana) $('#thana').val(preThana).trigger('change.select2');
                                });
                            }
                        });
                    }
                });
            }
        });
    </script>
@endsection