@extends('admin/layouts/default')

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

{{-- Page content --}}
@section('content')
    <section class="content-header">
        <h1>Send Spart Part 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>spareparts</li>
            <li class="active">sparepart Requests</li>
        </ol>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-lg-12">
                <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>
                            sparepart Request
                        </h4>
                    </div>

                    @section('header_styles')
                        <style>
                            body {
                                font-family: Arial, sans-serif;
                                margin: 0;
                                padding: 0;
                                background-color: #f4f4f4;
                            }
                            .form-container {
                                max-width: 800px;
                                margin: 20px auto;
                                background-color: #fff;
                                border: 1px solid #ccc;
                                padding: 20px;
                                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                            }
                            .form-header {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                border-bottom: 1px solid #ccc;
                                padding-bottom: 10px;
                                margin-bottom: 20px;
                            }
                            .form-header img {
                                max-height: 50px;
                            }
                            .form-title {
                                font-size: 24px;
                                font-weight: bold;
                                text-align: center;
                                flex-grow: 1;
                            }
                            .form-info {
                                font-size: 14px;
                                text-align: right;
                            }
                            .section-title {
                                font-weight: bold;
                                margin-top: 20px;
                                margin-bottom: 10px;
                                border-bottom: 1px solid #eee;
                                padding-bottom: 5px;
                            }
                            .form-group {
                                display: flex;
                                flex-wrap: wrap;
                                margin-bottom: 10px;
                                align-items: center;
                            }
                            .form-group label {
                                width: 150px; /* Fixed width for labels */
                                font-size: 14px;
                                margin-right: 10px;
                                flex-shrink: 0;
                            }
                            .form-group input[type="text"],
                            .form-group input[type="email"],
                            .form-group input[type="tel"],
                            .form-group input[type="date"],
                            .form-group textarea,
                            .form-group select {
                                flex-grow: 1;
                                padding: 8px;
                                border: 1px solid #ccc;
                                border-radius: 3px;
                                font-size: 14px;
                                box-sizing: border-box; /* Include padding and border in the element's total width and height */
                                min-width: 150px; /* Ensure input fields don't get too small */
                            }
                            .form-group.inline-fields {
                                justify-content: flex-start;
                            }
                            .form-group.inline-fields .field-pair {
                                display: flex;
                                align-items: center;
                                margin-right: 20px;
                                flex-grow: 1; /* Allow field pairs to grow */
                            }
                            .form-group.inline-fields .field-pair label {
                                width: auto;
                                margin-right: 5px;
                                white-space: nowrap; /* Prevent label from wrapping */
                            }
                            .form-group.inline-fields .field-pair input {
                                flex-grow: 1;
                                max-width: 150px; /* Limit input width for inline fields */
                            }
                            .form-group.inline-fields .field-pair:last-child {
                                margin-right: 0;
                            }
                            .form-group.textarea-group {
                                flex-direction: column;
                                align-items: flex-start;
                            }
                            .form-group.textarea-group label {
                                width: auto;
                                margin-bottom: 5px;
                            }
                            .form-group.textarea-group textarea {
                                width: 100%;
                                height: 80px;
                                resize: vertical;
                            }

                            /* Detail Material sections */
                            .material-description-box {
                                border: 1px solid #ccc;
                                padding: 10px;
                                margin-top: 5px;
                                min-height: 120px; /* Adjust as needed */
                                font-size: 14px;
                                line-height: 1.5;
                                white-space: pre-wrap; /* Preserve whitespace and allow wrapping */
                            }
                            .material-description-box textarea {
                                width: 100%;
                                height: 100px;
                                border: none;
                                resize: none;
                                padding: 0;
                                margin: 0;
                            }


                            /* Approval List */
                            .approval-list {
                                display: flex;
                                justify-content: space-between;
                                margin-top: 30px;
                            }
                            .approval-box {
                                border: 1px solid #000;
                                padding: 10px;
                                width: 30%;
                                box-sizing: border-box;
                                min-height: 180px; /* Ensure boxes are tall enough */
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                            }
                            .approval-box p {
                                margin: 0;
                                font-size: 12px;
                            }
                            .approval-box .sign-line {
                                border-bottom: 1px solid #000;
                                margin-top: 5px;
                                margin-bottom: 10px;
                                height: 15px; /* Space for signature */
                            }
                            .approval-box .info-line {
                                display: flex;
                                margin-top: 5px;
                            }
                            .approval-box .info-line label {
                                width: 50px;
                                font-size: 12px;
                                margin-right: 5px;
                                flex-shrink: 0;
                            }
                            .approval-box .info-line span {
                                flex-grow: 1;
                                border-bottom: 1px dotted #ccc; /* Dotted line for info */
                                font-size: 12px;
                                min-height: 15px;
                            }


                            /* Specific layout adjustments */
                            .header-ref-row {
                                display: flex;
                                justify-content: flex-end; /* Align right */
                                margin-bottom: 10px;
                                font-size: 14px;
                            }
                            .header-ref-row label {
                                margin-right: 5px;
                                font-weight: bold;
                            }
                            .header-ref-row input {
                                border: 1px solid #ccc;
                                border-radius: 3px;
                                padding: 5px;
                                width: 150px;
                            }

                            /* Responsive adjustments */
                            @media (max-width: 768px) {
                                .form-container {
                                    margin: 10px;
                                    padding: 15px;
                                }
                                .form-group label {
                                    width: 120px;
                                }
                                .form-group.inline-fields .field-pair {
                                    flex-direction: column;
                                    align-items: flex-start;
                                    margin-right: 10px;
                                }
                                .form-group.inline-fields .field-pair label {
                                    margin-bottom: 2px;
                                }
                                .form-group.inline-fields .field-pair input {
                                    max-width: none; /* Allow inputs to take full width */
                                }
                                .approval-list {
                                    flex-direction: column;
                                }
                                .approval-box {
                                    width: 100%;
                                    margin-bottom: 15px;
                                }
                            }
                            @media (max-width: 480px) {
                                .form-header {
                                    flex-direction: column;
                                    text-align: center;
                                }
                                .form-header img {
                                    margin-bottom: 10px;
                                }
                                .form-title {
                                    font-size: 20px;
                                }
                                .form-info {
                                    text-align: center;
                                    margin-top: 10px;
                                }
                                .form-group {
                                    flex-direction: column;
                                    align-items: flex-start;
                                }
                                .form-group label {
                                    width: 100%;
                                    margin-bottom: 5px;
                                }
                                .form-group input,
                                .form-group textarea {
                                    width: 100%;
                                }
                                .form-group.inline-fields .field-pair {
                                    width: 100%;
                                    margin-right: 0;
                                }
                            }
                        </style>
                    @stop

                    @section('content')
                        <div class="form-container">
                            <div class="form-header">
                                @php
                                    $requesterdata = DB::table('staffrequests')->where('id', $id)->first();
                                    $firstname = $requesterdata->firstname;
                                    $lastname = $requesterdata->lastname;
                                    $assignexpert = $requesterdata->assignedexpert;
                                @endphp
                                <img src="{{ asset('assets/images/logo.jpg') }}" alt="NEC Logo"> {{-- Adjust path to your logo --}}
                                <div class="form-title">SPARE PART REQUEST FORM</div>
                                <img src="{{ asset('assets/images/logo.jpg') }}" alt="Other Logo"> {{-- Adjust path to your other logo --}}
                            </div>

                            <div class="form-info">
                                No : DMU/ICT- <input type="text" style="width: 80px; display: inline-block; border: none; border-bottom: 1px solid #000; padding: 0; margin: 0 5px;" value="" /> / MNC / <input type="text" style="width: 40px; display: inline-block; border: none; border-bottom: 1px solid #000; padding: 0; margin: 0 5px;" value="2025" />
                            </div>

                            {{-- The updated form tag with action and method --}}
                            {!! Form::open(['url' => Session::get('role_name').'/sendsparepart']) !!}

                                <div class="form-group inline-fields">
                                    <div class="field-pair">
                                        <label for="reference_number">Sender Information</label>
                                        <input type="text" id="reference_number" name="sender_name" value="{{ $firstname . ' ' . $lastname }}" readonly>
                                        <input type="hidden" name="taskid" value="{{ $id }}">
                                        <input type="hidden" name="assignedexpert" value="{{ $assignexpert }}">
                                    </div>
                                </div>
                                <div class="form-group inline-fields">
                                    {{-- You had an empty div here, so I've left it. --}}
                                </div>
                                <div class="form-group inline-fields">
                                    <div class="field-pair">
                                        <label for="request_date">Request (Date - Time)</label>
                                        <input type="datetime-local" id="request_date" name="request_date">

                                        <script>
                                            document.addEventListener('DOMContentLoaded', (event) => {
                                                const now = new Date();
                                                const year = now.getFullYear();
                                                const month = (now.getMonth() + 1).toString().padStart(2, '0');
                                                const day = now.getDate().toString().padStart(2, '0');
                                                const hours = now.getHours().toString().padStart(2, '0');
                                                const minutes = now.getMinutes().toString().padStart(2, '0');

                                                const formattedDateTime = `${year}-${month}-${day}T${hours}:${minutes}`;
                                                document.getElementById('request_date').value = formattedDateTime;
                                            });
                                        </script>
                                    </div>
                                </div>

                                <div class="form-group textarea-group">
                                    <label for="material_description">Material Description</label>
                                    <div class="material-description-box">
                                        {{-- Updated name attribute --}}
                                        <textarea name="material_description" id="material_description" rows="3"></textarea>
                                    </div>
                                </div>

                                <div class="approval-list">
                                    <div class="approval-box">
                                        <p><strong>Requester Information:</strong></p>
                                        <div class="info-line"><label>Name:</label> <span>{{ $firstname . ' ' . $lastname }}</span></div>
                                        <div class="info-line"><label>Department:</label> <span>{{ $requesterdata->college }}</span></div>
                                        <div class="info-line"><label>Date:</label> <span>{{ date('Y-m-d') }}</span></div>
                                    </div>
                                    <div class="approval-box">
                                        <p><strong>Expert Information:</strong></p>
                                        <div class="info-line"><label>Name:</label> <span>{{ $assignexpert }}</span></div>
                                        <div class="info-line"><label>Department:</label> <span></span></div>
                                        <div class="info-line"><label>Date:</label> <span></span></div>
                                    </div>
                                    <div class="approval-box">
                                        <p><strong>Team Leader:</strong></p>
                                        <div class="info-line"><label>Name:</label> <span></span></div>
                                        <div class="info-line"><label>Department:</label> <span>ICT Directorate</span></div>
                                        <div class="info-line"><label>Date:</label> <span>{{ date('Y-m-d') }}</span></div>
                                    </div>
                                </div>

                                {{-- Registration Button --}}
                                <div class="form-group" style="margin-top: 30px; text-align: center;">
                                    <button type="submit" class="btn btn-primary">
                                        Send Request
                                    </button>
                                </div>
                            </form>
                        </div>
                    @stop
                    @section('footer_scripts')
                        {{-- Any specific scripts for this page can go here --}}
                    @stop
                </div>
            </div>
        </div>
    </section>

@stop