@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
    Create New staffrequest
    @parent
@stop

{{-- Page content --}}
@section('content')
    <section class="content-header">
        <h1>ICT Support Request</h1>
        <ol class="breadcrumb">
            <li>
                <a href="{{ route('dashboard') }}">
                    <i class="livicon" data-name="home" data-size="16" data-color="#000"></i>
                    Dashboard
                </a>
            </li>
            <li>staffrequests</li>
            <li class="active">ICT Support Requests</li>
        </ol>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-lg-10">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <i class="livicon" data-name="plus-alt" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>
                            ICT Support Requests
                        </h4>
                    </div>

                    <div class="panel-body">
                        {{-- Bootstrap Nav Tabs --}}
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#newRequest" aria-controls="newRequest" role="tab" data-toggle="tab">
                                    <i class="livicon" data-name="edit" data-size="16" data-c="#000"></i> New Request
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#othersRequests" aria-controls="othersRequests" role="tab" data-toggle="tab">
                                    <i class="livicon" data-name="list" data-size="16" data-c="#000"></i> Others’ Requests
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content" style="margin-top: 20px;">
                            {{-- ==================== NEW REQUEST TAB ==================== --}}
                            <div role="tabpanel" class="tab-pane fade in active" id="newRequest">
                                @if ($errors->any())
                                    <ul class="alert alert-danger">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                @endif

                                @php
                                    $email = Sentinel::getUser()->email;
                                    $employee11 = DB::table('dmuemployee2s')->where('email', $email)->first();
                                    if ($employee11) {
                                        $firstname = $employee11->firstname;
                                        $lastname = $employee11->lastname;
                                        $phone = $employee11->phone;
                                        $idno = $employee11->idnumber;
                                        $college = $employee11->college;
                                        $department = $employee11->department;
                                        $buildingno = $employee11->buildingno;
                                        $office = $employee11->officeno;
                                    }
                                @endphp

                                {!! Form::open(['url' => 'directoraterole/directoraterequest', 'id' => 'staffRequestForm']) !!}

                                {{-- Hidden fields --}}
                                {!! Form::hidden('firstname', $firstname ?? '') !!}
                                {!! Form::hidden('lastname', $lastname ?? '') !!}
                                {!! Form::hidden('phone', $phone ?? '') !!}
                                {!! Form::hidden('email', $email ?? '') !!}
                                {!! Form::hidden('idnumber', $idno ?? '') !!}
                                {!! Form::hidden('college', $college ?? '') !!}
                                {!! Form::hidden('department', $department ?? '') !!}
                                {!! Form::hidden('buildingno', $buildingno ?? '') !!}
                                {!! Form::hidden('office', $office ?? '') !!}

                                {{-- Request Category --}}
                                <div class="form-group">
                                    {!! Form::label('requestcategory', 'Request Category: ') !!}
                                    {!! Form::select('requestcategory', [
                                        '' => 'Select a category',
                                        'maintenance' => 'Electronics Maintenance',
                                        'network' => 'Network Related Request',
                                        'systemadmin' => 'System Admin',
                                        'tltechnology' => 'Teaching Learning Request',
                                    ], null, ['class' => 'form-control', 'id' => 'requestcategory']) !!}
                                </div>

                                {{-- Subcategory --}}
                                <div class="form-group" id="subcategory-group" style="display:none;">
                                    {!! Form::label('subcategory', 'Subcategory: ') !!}
                                    <select name="subcategory" id="subcategory" class="form-control"></select>
                                </div>

                                {{-- Description --}}
                                <div class="form-group">
                                    {!! Form::label('description', 'Description: ') !!}
                                    {!! Form::textarea('description', null, ['class' => 'form-control']) !!}
                                </div>

                                {!! Form::hidden('date', date('Y-m-d H:i:s')) !!}

                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-4">
                                        <a class="btn btn-danger" href="{{ route('directoraterole.direcoratesendrequests.index') }}">
                                            @lang('button.cancel')
                                        </a>
                                        <button type="submit" class="btn btn-success">
                                            @lang('Send Request')
                                        </button>
                                    </div>
                                </div>

                                {!! Form::close() !!}
                            </div>

                            {{-- ==================== OTHERS’ REQUESTS TAB ==================== --}}
                            <div role="tabpanel" class="tab-pane fade" id="othersRequests">
                                <h4>Requests from Other Staff Members</h4>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Staff Name</th>
                                            <th>Category</th>
                                            <th>Subcategory</th>
                                            <th>Description</th>
                                            <th>Date</th>
                                            <th>Status</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @php
                                            $currentEmail = Sentinel::getUser()->email;
                                            $otherRequests = DB::table('staffrequests')
                                                ->where('email', '!=', $currentEmail)
                                                ->orderBy('date', 'desc')
                                                ->get();
                                        @endphp

                                        @forelse ($otherRequests as $index => $req)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $req->firstname }} {{ $req->lastname }}</td>
                                                <td>{{ ucfirst($req->requestcategory) }}</td>
                                                <td>{{ $req->subcategory ?? '-' }}</td>
                                                <td>{{ $req->description }}</td>
                                                <td>{{ \Carbon\Carbon::parse($req->date)->format('Y-m-d H:i') }}</td>
                                                <td>{{ ucfirst($req->status ?? 'Pending') }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="7" class="text-center text-muted">No other requests found.</td>
                                            </tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div> {{-- /tab-content --}}
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Success Modal --}}
    <div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content bg-success text-white">
                <div class="modal-header">
                    <h5 class="modal-title" id="successModalLabel">Congratulations!</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <h4>Congratulations. Your support request was submitted successfully!</h4>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Subcategory logic
            var categorySelect = document.getElementById('requestcategory');
            var subcategoryGroup = document.getElementById('subcategory-group');
            var subcategorySelect = document.getElementById('subcategory');

            var subcategories = {
                'maintenance': ['Desktop Computer', 'Laptop Computer', 'Printer', 'Photocopy', 'Driver', 'Tablet', 'UPS', 'Stabilizer', 'Divider PDU', 'Scanner', 'Projector', 'Duplicator', 'Flash Disk', 'External HDD', 'Duity Machine'],
                'network': ['Wi-Fi Connection', 'Lab Network Installation', 'Specification', 'Assign Network Equipment', 'Web Browser Installation'],
                'systemadmin': ['Institutional Email'],
                'tltechnology': ['CISCO Academy', 'Training Request', 'E-learning Related', 'Website Related Request']
            };

            categorySelect.addEventListener('change', function() {
                var category = this.value;
                subcategorySelect.innerHTML = '';
                if (category && subcategories[category]) {
                    subcategoryGroup.style.display = 'block';
                    subcategories[category].forEach(function(sub) {
                        var option = document.createElement('option');
                        option.value = sub.toLowerCase().replace(/\s/g, '');
                        option.textContent = sub;
                        subcategorySelect.appendChild(option);
                    });
                } else {
                    subcategoryGroup.style.display = 'none';
                }
            });

            // AJAX form submission
            var form = document.getElementById('staffRequestForm');
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                var formData = new FormData(form);

                jQuery.ajax({
                    url: form.action,
                    method: form.method,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        jQuery('#successModal').modal('show');
                        form.reset();
                        jQuery('#subcategory-group').hide();

                        setTimeout(function() {
                            jQuery('#successModal').modal('hide');
                            window.location.href = "{{ route('directoraterole.direcoratesendrequests.index') }}";
                        }, 3000);
                    },
                    error: function() {
                        alert('Something went wrong. Please try again.');
                    }
                });
            });
        });
    </script>
@stop