@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<style>
    .link {
        text-decoration: underline;
    }

    /* Select2 input style */
    #projectFilter+.select2-container {
        width: 100% !important;
    }

    #projectFilter+.select2-container .select2-selection--single {
        height: 38px;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        display: flex;
        align-items: center;
    }

    #projectFilter+.select2-container .select2-selection__rendered {
        line-height: 38px;
        font-size: 14px;
    }

    #projectFilter+.select2-container .select2-selection__arrow {
        height: 38px;
    }
</style>
@section('content')

    <div class="row align-items-center justify-content-between mb-3">
        <!-- Heading -->
        <div class="col-auto">
            <h5>Project Management</h5>
        </div>
        <!-- Button -->
        <div class="col-auto">
            <a href="{{ route('create_project') }}"> <button class="btn buttons-collection btn-primary" type="button"
                    aria-haspopup="dialog" aria-expanded="false">
                    <span class="d-flex align-items-center gap-2">
                        <i class="icon-base ti tabler-plus icon-xs me-sm-1"></i>
                        <span class="d-sm-inline-block">Create Project</span>
                    </span>
                </button></a>
            <a href="{{ route('bill_table') }}"> <button class="btn buttons-collection btn-primary" type="button"
                    aria-haspopup="dialog" aria-expanded="false">
                    <span class="d-flex align-items-center gap-2">
                        <span class="d-sm-inline-block">Invoice</span>
                    </span>
                </button></a>
            <a href="{{ route('view_doc') }}"> <button class="btn buttons-collection btn-primary" type="button"
                    aria-haspopup="dialog" aria-expanded="false">
                    <span class="d-flex align-items-center gap-2">
                        <span class="d-sm-inline-block">Document</span>
                    </span>
                </button></a>
            <a href="{{ route('view_credentials') }}"> <button class="btn buttons-collection btn-primary" type="button"
                    aria-haspopup="dialog" aria-expanded="false">
                    <span class="d-flex align-items-center gap-2">
                        <span class="d-sm-inline-block">Credentials</span>
                    </span>
                </button></a>
            <a href="{{ route('monthly_report') }}"> <button class="btn buttons-collection btn-primary" type="button">
                    <span class="d-flex align-items-center gap-2">
                        <span class="d-sm-inline-block">Monthly Report</span>
                    </span>
                </button></a>
        </div>
    </div>
    <!-- Project Filter -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row align-items-end">

                <div class="col-md-4">
                    <label for="projectFilter" class="form-label fw-semibold">
                        Project Name
                    </label>

                    <select id="projectFilter" class="form-select">
                        <option value="">All Projects</option>

                        @foreach($projects as $project)
                            <option value="{{ $project->id }}">
                                {{ $project->project_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <button type="button" id="resetProject" class="btn btn-secondary">
                        Reset
                    </button>
                </div>
                {{-- Status Pages --}}
                <div class="col-md-6 d-flex justify-content-end gap-2">

                    <a href="{{ route('active_project') }}" class="btn btn-primary">
                        Active Projects
                    </a>

                    <a href="{{ route('inactive_project') }}" class="btn btn-primary">
                        Inactive Projects
                    </a>

                    <a href="{{ route('completed_project') }}" class="btn btn-primary">
                        Completed Projects
                    </a>

                </div>
            </div>
        </div>
    </div>
    <div class="card p-4">
        <div class="card-datatable table-responsive pt-0">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 px-3">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <div class="row mb-3">

                            <div class="col-md-9">
                                <label><b>Select Columns for Export</b></label><br>

                                <label><input type="checkbox" class="proj-col" value="project_name"> Project</label>
                                <label class="ms-2"><input type="checkbox" class="proj-col" value="tasks_count">
                                    Overall</label>
                                <label class="ms-2"><input type="checkbox" class="proj-col" value="pending_tasks">
                                    Pending</label>
                                <label class="ms-2"><input type="checkbox" class="proj-col" value="bugs"> Bugs</label>
                                <label class="ms-2"><input type="checkbox" class="proj-col" value="tester"> Tester</label>
                                <label class="ms-2"><input type="checkbox" class="proj-col" value="modules"> Module</label>
                                <label class="ms-2"><input type="checkbox" class="proj-col" value="tasks"> Task</label>
                                <label class="ms-2"><input type="checkbox" class="proj-col" value="links"> Links</label>
                                <label class="ms-2"><input type="checkbox" class="proj-col" value="invoice"> Invoice</label>
                                <label class="ms-2"><input type="checkbox" class="proj-col" value="doc"> Document</label>
                                <label class="ms-2"><input type="checkbox" class="proj-col" value="credentials">
                                    Credentials</label>
                                <label class="ms-2"><input type="checkbox" class="proj-col" value="client_name">
                                    Client</label>
                            </div>

                            <div class="col-md-3 d-flex justify-content-end align-items-end">
                                <button id="exportProjectExcel" class="btn btn-success">
                                    Export Excel
                                </button>
                            </div>

                        </div>

                        <table id="dept" class="table">
                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th class="text-nowrap">PROJECT NAME</th>
                                    <th>DELIVERABLES</th>
                                    <th>Status</th>
                                    <th>WORKS</th>
                                    <th>TESTER</th>
                                    <th>PROJECT</th>
                                    <th>LINKS</th>
                                    <th>DETAILS</th>
                                    <th class="text-nowrap">CLIENT NAME</th>
                                    <th>ACTION</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="delete" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <h5 class="fw-bold mb-2">Are you sure!!</h5>
                <p class="text-muted">Are you confirm to delete?</p>
                <form id="deleteForm" method="POST" action="{{ route('delete_project') }}">
                    @csrf
                    <input type="hidden" name="id" id="deleteId">
                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-danger p-3 ms-2 fw-semibold" id="finalSubmit">
                            Yes, Sure
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="testerModal" tabindex="-1">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content p-4">

                <h5 class="mb-3">Assign Tester</h5>

                <form action="{{ route('assign_tester') }}" method="POST">
                    @csrf

                    <input type="hidden" name="project_id" id="testerProjectId">
                    <label>Select Tester</label>
                    <select name="tester_id" class="form-select mt-2" required>
                        <option value="">Select Tester</option>

                        @foreach($testers as $tester)
                            <option value="{{ $tester->id }}">
                                {{ $tester->name }}
                            </option>
                        @endforeach

                    </select>

                    <button class="btn btn-primary mt-3 w-100">
                        Save
                    </button>

                </form>

            </div>
        </div>
    </div>
    <div class="modal fade" id="statusModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered status-modal-dialog">
            <form action="{{ route('project_status_update') }}" method="POST" id="statusForm">
                @csrf

                <input type="hidden" name="project_id" id="project_id">

                <div class="modal-content status-modal">

                    <div class="modal-header">
                        <h5 class="modal-title">Update Project Status</h5>
                    </div>

                    <div class="modal-body">

                        <div class="mb-3">
                            <label class="form-label">
                                Status
                            </label>

                            <select class="form-select" name="status" id="project_status" required>
                                <option value="Active">Active</option>
                                <option value="Inactive">Inactive</option>
                                <option value="Complete">Complete</option>
                            </select>
                        </div>
                        <div class="mb-3" id="inactiveReasonBox" style="display: none;">
                            <label class="form-label">
                                Reason <span class="text-danger">*</span>
                            </label>

                            <textarea class="form-control" name="inactive_reason" id="inactive_reason" rows="3"
                                placeholder="Enter reason for inactive status"></textarea>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" class="btn btn-primary" id="statusBtn">
                            Update
                        </button>
                    </div>

                </div>
            </form>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.js"></script>
    <script>
        var jq = jQuery.noConflict();
        jq(document).ready(function () {


            // Searchable Project Dropdown
            jq('#projectFilter').select2({
                placeholder: 'Select Project',
                allowClear: true,
                width: '100%'
            });
            var table = jq('#dept').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('project_table_data') }}",
                    data: function (d) {
                        d.project_id = jq('#projectFilter').val();
                    }
                },
                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap'
                }],
                columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'project_name',
                    name: 'project_name'
                },
                {
                    data: 'deliverables',
                    name: 'deliverables',
                    orderable: false,
                    searchable: true
                },
                {
                    data: 'status',
                    name: 'status',
                    searchable: true
                },
                // {
                //     data: 'tasks_count',
                //     searchable: false
                // },
                // {
                //     data: 'pending_tasks',
                //     searchable: false
                // },
                // {
                //     data: 'bugs',
                //     searchable: true
                // },
                {
                    data: 'works',
                    name: 'works',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'tester',
                    name: 'tester',
                    orderable: false,
                    searchable: true
                },
                {
                    data: 'project',
                    name: 'project',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'links',
                    orderable: false,
                    searchable: true
                },
                {
                    data: 'details',
                    name: 'details',
                    orderable: false,
                    searchable: false
                },

                // {
                //     data: 'live_url',
                //     name: 'live_url',
                //     orderable: false,
                //     searchable: false
                // },
                {
                    data: 'client_name',
                    name: 'client_name'
                },

                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
                ],
                order: [
                    [1, 'desc']
                ],
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    ["10", "25", "50", "100", "All"]
                ],
                language: {
                    search: "",
                    searchPlaceholder: "Search",
                    lengthMenu: "_MENU_"
                }
            });
            // Automatically filter when project is selected
            jq('#projectFilter').on('change', function () {
                table.ajax.reload();
            });
            jq('#resetProject').on('click', function () {
                jq('#projectFilter').val(null).trigger('change');

            });
        });
    </script>
    <script>
        jq(document).on('click', '.deleteBtn', function () {
            var id = jq(this).data('id');
            jq('#deleteId').val(id);
        });
    </script>
    <script>
        var jq = jQuery.noConflict();

        jq(document).on('click', '.openTesterModal', function () {
            let projectId = jq(this).attr('data-id');

            console.log("Project ID:", projectId);

            jq('#testerProjectId').val(projectId);
        });

        // optional safety reset
        jq('#testerModal').on('hidden.bs.modal', function () {
            jq('#testerProjectId').val('');
        });

        jq(document).on('click', '.changeStatusBtn', function () {

            jq('#project_id').val(jq(this).data('id'));

            let status = jq(this).data('status');
            let reason = jq(this).data('inactive-reason') || '';

            jq('#inactive_reason').val(reason);

            jq('#project_status').val(status).trigger('change');
        });

        jq('#project_status').on('change', function () {

            if (jq(this).val() === 'Inactive') {
                jq('#inactiveReasonBox').show();
                jq('#inactive_reason').prop('required', true);
            } else {
                jq('#inactiveReasonBox').hide();
                jq('#inactive_reason').prop('required', false);
            }
        });
        jq('#statusForm').on('submit', function () {

            jq('#statusBtn')
                .prop('disabled', true)
                .html('<i class="fa fa-spinner fa-spin"></i> Processing...');

        });

        jq(document).on('click', '#exportProjectExcel', function () {

            let selected = [];

            jq('.proj-col:checked').each(function () {
                selected.push(jq(this).val());
            });

            if (selected.length === 0) {
                alert("Please select at least one column");
                return;
            }

            window.location.href = "{{ route('project.export') }}?columns=" + selected.join(',');
        });
    </script>
@endsection