@extends('dashboard.layouts.app')

@section('title', __('dashboard.Scripts'))
@section('page_heading', __('dashboard.Scripts'))

@section('breadcrumb')
<li class="breadcrumb-item text-muted">
    <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
</li>
<li class="breadcrumb-item text-muted">{{ __('dashboard.Scripts') }}</li>
@endsection

@section('content')

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('dashboard.Scripts') }}</h3>
                <div class="card-toolbar">
                    <a href="{{ route('dashboard.scripts.create') }}" class="btn btn-sm btn-primary">
                        <i class="bi bi-plus-lg"></i> {{ __('dashboard.Add New Script') }}
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('dashboard.scripts.index') }}" method="get">
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <select name="type" class="form-select form-select-solid" onchange="this.form.submit()">
                                <option value="">{{ __('dashboard.All Types') }}</option>
                                <option value="header" {{ request('type') == 'header' ? 'selected' : '' }}>{{ __('dashboard.Header') }}</option>
                                <option value="footer" {{ request('type') == 'footer' ? 'selected' : '' }}>{{ __('dashboard.Footer') }}</option>
                            </select>
                        </div>
                        <div class="col-md-8">
                            <button type="submit" class="btn btn-sm btn-primary">{{ __('dashboard.Filter') }}</button>
                        </div>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table table-row-dashed table-row-gray-300 gy-7">
                        <thead>
                            <tr class="fw-bold text-muted">
                                <th class="w-25px">{{ __('dashboard.ID') }}</th>
                                <th>{{ __('dashboard.Title') }}</th>
                                <th>{{ __('dashboard.Type') }}</th>
                                <th>{{ __('dashboard.Status') }}</th>
                                <th class="w-100px text-end">{{ __('dashboard.Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                        @forelse ($scripts as $script)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $script->title }}</td>
                                <td>
                                    @if ($script->type == 'header')
                                        <span class="badge bg-success">{{ __('dashboard.Header') }}</span>
                                    @elseif ($script->type == 'footer')
                                        <span class="badge bg-info">{{ __('dashboard.Footer') }}</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="form-check form-switch form-check-custom form-check-solid">
                                        <input class="form-check-input toggle-status" type="checkbox" role="switch"
                                            id="status-{{ $script->id }}" data-id="{{ $script->id }}"
                                            @if ($script->is_active) checked @endif>
                                        <label class="form-check-label" for="status-{{ $script->id }}"></label>
                                    </div>
                                </td>
                                <td class="text-end">
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('dashboard.scripts.edit', $script) }}"
                                            class="btn btn-sm btn-icon btn-primary me-2" data-bs-toggle="tooltip" title="{{__('dashboard.Edit')}}">
                                            <i class="bi bi-pencil-square fs-4"></i>
                                        </a>
                                        <form action="{{ route('dashboard.scripts.destroy', $script) }}" method="post"
                                            style="display: inline-block">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-icon btn-danger" data-bs-toggle="tooltip" title="{{__('dashboard.Delete')}}"
                                                onclick="return confirm('{{ __('dashboard.Are you sure?') }}')">
                                                <i class="bi bi-trash-fill fs-4"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center">{{ __('dashboard.No Scripts found') }}</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('.toggle-status').change(function() {
                let scriptId = $(this).data('id');
                let is_active = $(this).is(':checked') ? 1 : 0;

                $.ajax({
                    url: `/dashboard/scripts/${scriptId}/toggle`,
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        is_active: is_active
                    },
                    success: function(response) {
                        toastr.success(response.message);
                    },
                    error: function(error) {
                        toastr.error('{{ __("dashboard.An error occurred while updating the status") }}');
                        console.error(error);
                    }
                });
            });
        });
    </script>
@endsection