000

@extends('layouts.app')

@section('title', 'Machine Management')

@section('content')
<style>
    .btn-add {
        background-color: #6b8e23;
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 14px;
        border: none;
    }

.modal-content {
        border-radius: 12px;
        padding: 20px;
    }

.form-control {
        border-radius: 8px;
        padding: 10px;
    }

table th {
        background-color: #6b8e23;
        color: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }

table tbody tr:nth-child(even) {
        background-color: #f0f4e6;
    }

.table thead th, .table tbody td {
        vertical-align: middle;
    }

.edit-machine {
        vertical-align: middle;
    }

.table-wrapper {
        max-height: 500px;
        overflow-y: auto;
    }
    
    .table-responsive {
        max-height: 500px;
        overflow-y: auto;
    }

.table thead th {
        position: sticky;
        top: 0;
        background-color: #6b8e23;
        z-index: 2;
    }

.small-stats-card {
        background-color: #6b8e23;
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 2px 8px rgba(107, 142, 35, 0.3);
    }

.small-stats-card i {
        font-size: 16px;
    }
</style>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show mt-2" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show mt-2" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var addMachineModal = new bootstrap.Modal(document.getElementById('addMachineModal'));
            addMachineModal.show();
        });
    </script>
@endif

<div class="d-flex justify-content-between align-items-center mt-4">
    @if(Auth::check() && Auth::user()->role != 1)
        <button class="btn-add" data-bs-toggle="modal" data-bs-target="#addMachineModal">Add Machine</button>
    @endif

<form action="{{ route('machines.index') }}" method="GET" class="d-flex">
        @if(Auth::check() && Auth::user()->role == 1)
            <select name="site_id" class="form-select me-2" onchange="this.form.submit()">
                <option value="">Select Site</option>
                @foreach($sites as $site)
                    <option value="{{ $site->id }}" {{ request('site_id') == $site->id ? 'selected' : '' }}>
                        {{ $site->site_name }}
                    </option>
                @endforeach
            </select>
        @endif
        <div class="input-group shadow-sm rounded-pill">
            <input type="text" name="search" class="form-control border-0" placeholder="Search machines..." value="{{ request('search') }}">
            <button type="submit" class="bg-transparent border-0 px-3">
                <i class="fas fa-search text-secondary"></i>
            </button>
        </div>
    </form>
</div>

<div class="table-responsive mt-3 table-wrapper">
    <table class="table table-bordered text-center align-middle">
        <thead>
            <tr>
                <th>Sr.No.</th>
                <th>Machine Name</th>
                <th>Asset Number</th>
                <th>Location</th>
                <th>Machine Type</th>
                <th>Model No.</th>
                <th>Purchase Date</th>
                <th>Document</th>
                <th>Status</th>
                <th>Service Prev./Upco.</th>
                <th>Machine Image</th>
                   @if(Auth::check() && Auth::user()->role != 1)
                <th>Action</th>
                @endif
            </tr>
        </thead>
        <tbody>
            @forelse($machines as $index => $machine)
            <tr>
                <td>{{ ($machines->currentPage() - 1) * $machines->perPage() + $index + 1 }}</td>
                <td>{{ $machine->machine_name }}</td>
                <td>{{ $machine->machine_no }}</td>
                <td>{{ $machine->site_name ?? 'N/A' }}</td>
                <td>{{ $machine->machine_type }}</td>
                <td>{{ $machine->brand_model_no }}</td>
                <td>{{ $machine->purchase_date ? \Carbon\Carbon::parse($machine->purchase_date)->format('d-m-Y') : 'N/A' }}</td>
               <td>
    @if($machine->document_path)
        <a href="{{ asset($machine->document_path) }}" target="_blank" class="btn btn-sm btn-primary">
            View
        </a>
    @else
        <span class="text-muted">N/A</span>
    @endif
</td>

<td>
                    <span class="badge bg-{{ $machine->status == 'active' ? 'success' : ($machine->status == 'inactive' ? 'danger' : 'warning') }}">
                        {{ ucfirst($machine->status) }}
                    </span>
                </td>
                <td>
                    <small>
                        {{ $machine->last_service_date ? \Carbon\Carbon::parse($machine->last_service_date)->format('d-m-Y') : 'N A' }}
                        <br>/
                        {{ $machine->next_service_date ? \Carbon\Carbon::parse($machine->next_service_date)->format('d-m-Y') : 'N A' }}
                    </small>
                </td>
            <td>
                @if($machine->image_path)
                    <img src="{{ asset($machine->image_path) }}" alt="Machine Image" width="80">
                @else
                    N/A
                @endif
            </td>
               @if(Auth::check() && Auth::user()->role != 1)
                <td>
                    <div class="d-flex gap-1 justify-content-center">
                        <button class="btn btn-sm btn-warning edit-machine" 
                                data-id="{{ $machine->id }}"
                                data-machine-name="{{ $machine->machine_name }}"
                                data-machine-no="{{ $machine->machine_no }}"
                                data-machine-type="{{ $machine->machine_type }}"
                                data-brand-model-no="{{ $machine->brand_model_no }}"
                                data-purchase-date="{{ $machine->purchase_date }}"
                                data-status="{{ $machine->status }}"
                                data-site-id="{{ $machine->site_id }}"
                                data-last-service-date="{{ $machine->last_service_date }}"
                                data-next-service-date="{{ $machine->next_service_date }}"
                                title="Edit">
                            <i class="fas fa-edit"></i>
                        </button>
                        <form action="{{ route('machines.destroy', $machine->id) }}" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this machine?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger" title="Delete">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </form>
                    </div>
                </td>
                @endif
            </tr>
            @empty
            <tr>
                <td colspan="12" class="text-muted">No machines found.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

{{-- Pagination --}}
<div class="d-flex justify-content-center mt-3">
    {{ $machines->links('pagination::bootstrap-5') }}
</div>

{{-- Small Total Machine Count UI --}}

{{-- Add Machine Modal --}}
<div class="modal fade" id="addMachineModal" tabindex="-1" aria-labelledby="addMachineModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Machine</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('machines.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Machine Name <span class="text-danger">*</span></label>
                            <input type="text" name="machine_name" class="form-control" placeholder="Enter machine name" value="{{ old('machine_name') }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Asset Number <span class="text-danger">*</span></label>
                            <input type="text" name="machine_no" class="form-control" placeholder="Enter Asset Number" value="{{ old('machine_no') }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Location <span class="text-danger">*</span></label>
                            <select name="site_id" class="form-select" required>
                                <option value="">Select Site</option>
                                @foreach($sites as $site)
                                    <option value="{{ $site->id }}" {{ old('site_id') == $site->id ? 'selected' : '' }}>
                                        {{ $site->site_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Machine Type <span class="text-danger">*</span></label>
                            <input type="text" name="machine_type" class="form-control" placeholder="Enter machine type" value="{{ old('machine_type') }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Brand & Model No. <span class="text-danger">*</span></label>
                            <input type="text" name="brand_model_no" class="form-control" placeholder="Enter brand & model" value="{{ old('brand_model_no') }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Purchase Date <span class="text-danger">*</span></label>
                            <input type="date" name="purchase_date" class="form-control" value="{{ old('purchase_date') }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" class="form-select" required>
                                <option value="">Select Status</option>
                                <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                <option value="maintenance" {{ old('status') == 'maintenance' ? 'selected' : '' }}>Under Maintenance</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Last Service Date</label>
                            <input type="date" name="last_service_date" class="form-control" value="{{ old('last_service_date') }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Next Service Date</label>
                            <input type="date" name="next_service_date" class="form-control" value="{{ old('next_service_date') }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Upload Document</label>
                            <input type="file" name="document" class="form-control" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                            <small class="text-muted">Accepted: PDF, DOC, DOCX, JPG, PNG</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Machine Image</label>
                            <input type="file" name="image" class="form-control" accept="image/*">
                            <small class="text-muted">Accepted: Image files only</small>
                        </div>
                    </div>
                    <div class="text-end">
                        <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">Add Machine</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Edit Machine Modal --}}
<div class="modal fade" id="editMachineModal" tabindex="-1" aria-labelledby="editMachineModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Machine</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editMachineForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Machine Name <span class="text-danger">*</span></label>
                            <input type="text" name="machine_name" id="edit_machine_name" class="form-control" placeholder="Enter machine name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Asset Number <span class="text-danger">*</span></label>
                            <input type="text" name="machine_no" id="edit_machine_no" class="form-control" placeholder="Enter Asset Number" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Location <span class="text-danger">*</span></label>
                            <select name="site_id" id="edit_site_id" class="form-select" required>
                                <option value="">Select Site</option>
                                @foreach($sites as $site)
                                    <option value="{{ $site->id }}">{{ $site->site_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Machine Type <span class="text-danger">*</span></label>
                            <input type="text" name="machine_type" id="edit_machine_type" class="form-control" placeholder="Enter machine type" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Brand & Model No. <span class="text-danger">*</span></label>
                            <input type="text" name="brand_model_no" id="edit_brand_model_no" class="form-control" placeholder="Enter brand & model" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Purchase Date <span class="text-danger">*</span></label>
                            <input type="date" name="purchase_date" id="edit_purchase_date" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Machine Status <span class="text-danger">*</span></label>
                            <select name="status" id="edit_status" class="form-select" required>
                                <option value="">Select Status</option>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                                <option value="maintenance">Under Maintenance</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Last Service Date</label>
                            <input type="date" name="last_service_date" id="edit_last_service_date" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Next Service Date</label>
                            <input type="date" name="next_service_date" id="edit_next_service_date" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Upload Document</label>
                            <input type="file" name="document" class="form-control" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                            <small class="text-muted">Leave empty to keep current document</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Machine Image</label>
                            <input type="file" name="image" class="form-control" accept="image/*">
                            <small class="text-muted">Leave empty to keep current image</small>
                        </div>
                    </div>
                    <div class="text-end">
                        <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">Update Machine</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection