@extends('layouts.app')

@section('title', 'Manage Section | NIPGHS Admin Panel')

@section('content')
<div class="content-header">
    <div class="leftside-content-header">
        <ul class="breadcrumbs">
            <li><i class="fa fa-home" aria-hidden="true"></i><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li><a href="javascript:void(0)">Section</a></li>
            <li><a href="javascript:void(0)">Manage Section</a></li>
        </ul>
    </div>
</div>

<div class="row animated fadeInUp">
    <div class="col-sm-12">
        <h4 class="section-subtitle"><b>Section List</b></h4>

        @if(session('success'))
            <div class="alert alert-success fade in">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger fade in">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                {{ session('error') }}
            </div>
        @endif

        <div class="panel">
            <div class="panel-content">
                <div class="table-responsive">
                    <table id="basic-table" class="table data-table table-striped nowrap table-hover table-bordered text-center" cellspacing="0" width="100%">
                        <thead>
                            <tr class="success">
                                <th class="text-center" style="width: 50px;">ID</th>
                                <th class="text-center">Class Name</th>
                                <th class="text-center">Section Name</th>
                                <th class="text-center">Section Name (Bangla)</th>
                                <th class="text-center" style="width: 80px;">Status</th>
                                <th class="text-center" style="width: 120px;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($sections as $key => $item)
                                @php
                                    $encryptedId = Crypt::encryptString($item->id);
                                @endphp
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>{{ $item->class->class_name ?? 'N/A' }}</td>
                                    <td>{{ $item->section_name }}</td>
                                    <td>{{ $item->section_name_bangla ?? 'N/A' }}</td>
                                    <td>
                                        @if($item->status == 1)
                                            <a href="{{ route('section.status', $encryptedId) }}">
                                                <span class="badge badge-xs x-success">Active</span>
                                            </a>
                                        @else
                                            <a href="{{ route('section.status', $encryptedId) }}">
                                                <span class="badge badge-xs x-warning">Inactive</span>
                                            </a>
                                        @endif
                                    </td>
                                    <td>
                                        <!-- View -->
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success" data-toggle="modal" data-target="#section-view-{{ $item->id }}" title="View">
                                            <i class="fa fa-eye"></i>
                                        </a>

                                        <!-- Edit -->
                                        <a href="javascript:void(0)" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#section-update-{{ $item->id }}" title="Edit">
                                            <i class="fa fa-pencil-square-o"></i>
                                        </a>

                                        <!-- Delete -->
                                        <a href="{{ route('section.delete', $encryptedId) }}" class="btn btn-xs btn-danger" onclick="return confirm('আপনি কি নিশ্চিত যে এই শাখাটি মুছে ফেলতে চান?')" title="Delete">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>

                                <!-- View Modal -->
                                <div class="modal fade" id="section-view-{{ $item->id }}" tabindex="-1" role="dialog" aria-labelledby="modal-view-label">
                                    <div class="modal-dialog modal-sm" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header bg-primary">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title" id="modal-view-label">Section Details</h4>
                                            </div>
                                            <div class="modal-body text-left">
                                                <p><strong>Class:</strong> {{ $item->class->class_name ?? 'N/A' }}</p>
                                                <p><strong>Section Name:</strong> {{ $item->section_name }}</p>
                                                <p><strong>Section Name (Bangla):</strong> {{ $item->section_name_bangla ?? 'N/A' }}</p>
                                                <p><strong>Status:</strong> {{ $item->status == 1 ? 'Active' : 'Inactive' }}</p>
                                                <p><strong>Created At:</strong> {{ $item->created_at ? $item->created_at->format('Y-m-d h:i A') : 'N/A' }}</p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Edit Modal -->
                                <div class="modal fade" id="section-update-{{ $item->id }}" tabindex="-1" role="dialog" aria-labelledby="modal-update-label">
                                    <div class="modal-dialog modal-sm" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header bg-warning">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title" id="modal-update-label">Edit Section</h4>
                                            </div>
                                            <form action="{{ route('section.update', $encryptedId) }}" method="POST">
                                                @csrf
                                                <div class="modal-body text-left">
                                                    <div class="form-group">
                                                        <label>Select Class</label>
                                                        <select class="form-control" name="class_id" required>
                                                            @foreach($classes as $class)
                                                                <option value="{{ $class->id }}" {{ $item->class_id == $class->id ? 'selected' : '' }}>
                                                                    {{ $class->class_name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Section Name</label>
                                                        <input type="text" class="form-control" name="section_name" value="{{ $item->section_name }}" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Section Name (Bangla)</label>
                                                        <input type="text" class="form-control" name="section_name_bangla" value="{{ $item->section_name_bangla }}">
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
                                                    <button type="submit" class="btn btn-primary btn-sm">Update Section</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection