@extends('staff::layouts.default')
@section('title',trans('admin_default.transaction_report'))

@section('breadcrumb')
    <li class="active"><a href="#">{{trans('admin_default.ticket_scanned_report')}}</a></li>
@endsection

@section('style')
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-flat">
                    <div class="panel-heading">
                        <div class="row" style="margin-bottom: 1rem;">
                            <div class="col-lg-2">
                                <h6 class="panel-title">{{ trans('admin_default.stand_list') }}</h6>
                            </div>
                        </div>
                        <div class="row">
                            <form action="{{ url()->current() }}" method="GET" id="filter-form">
                                <div class="col-sm-12">
                                    <div class="input-group input-group-sm">
                                        <input type="text" value="{{ request('search') }}"
                                               name="search" autofocus maxlength="50"
                                               class="form-control" placeholder="{{trans('admin_default.search')}}...">
                                        <span class="input-group-btn bg-success">
                                            <button class="btn btn-primary" title="{{trans('admin_default.search')}}"
                                                    data-popup="tooltip">
                                                <i class="icon-search4"></i>
                                            </button>
                                            <a href="{{ route('stand.index') }}" class="btn btn-default"
                                               title="{{trans('admin_default.clear')}}"
                                               id="clear_src"
                                               data-popup="tooltip">
                                                <i class="icon-x"></i>
                                            </a>
                                        </span>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="panel-body div-custom">
                        <div class="row">
                            <div class="col-lg-12">
                                <button class="btn btn-primary btn-add-stand">
                                    <i class="icon-plus2"></i>
                                    {{ trans('admin_default.add_new') }}
                                    {{ trans('admin_default.stand') }}
                                </button>
                            </div>
                        </div>
                        <div class="row mt-15">
                            <div class="col-lg-12 text-bold mb-5">
                                <span>Total:</span>
                                {{ $stands->count() }} {{ trans('admin_default.result') }}
                            </div>
                        </div>
                        <table class="table table-bordered table-framed table-sm">
                            <thead>
                                <tr>
                                    <th width="5%">{{trans('admin_default.no')}}</th>
                                    <th>{{ trans('admin_default.picture') }}</th>
                                    <th>{{ trans('admin_default.stand_name') }}</th>
                                    <th>{{ trans('admin_default.status') }}</th>
                                    <th width="8%">{{ trans('admin_default.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                                                @if(!$stands->isEmpty())
                                    @foreach($stands as $stand)
                                                                                <tr>
                                            <td>{{ $i++ }}</td>
                                            <td>
                                                <img width="60" height="60"
                                                     src="{{ Helper::setImageSrc('block/',@$property->picture) }}"
                                                     alt="Image">
                                            </td>
                                            <td>{{ $stand->group_name }}</td>
                                            <td>
                                                @if($isDisabled)
                                                    <span class="label label-danger">Disabled</span>
                                                @else
                                                    <span class="label label-success">Active</span>
                                                @endif
                                            </td>
                                            <td>
                                                <ul class="icons-list">
                                                    <li class="dropdown">
                                                        <a href="javascript:void(0)" class="dropdown-toggle"
                                                           data-toggle="dropdown">
                                                            <i class="icon-menu9"></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-right">
                                                            <li>
                                                                <a href="javascript:void(0);"
                                                                   data-name="{{ $stand->group_name }}"
                                                                   data-url="{{ route('stand.update',$stand->id) }}"
                                                                   class="btn-edit-stand">
                                                                   {{trans('admin_default.edit')}}
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a 
                                                                    class="toggle-btn"
                                                                    data-toggle="modal"
                                                                    data-target="#confirmToggleModal"
                                                                    data-group="{{ $stand->group_name }}"
                                                                    data-status="{{ $isDisabled ? 'enable' : 'disable' }}">
                                                                    {{ $isDisabled ? 'Enable' : 'Disable' }}
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="8">{{ trans('admin_default.empty') }}</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- block-modal -->
    <div id="stand-modal" class="modal fade">
        <form class="form-horizontal form-validate-jquery" method="POST"
              id="stand-form" action="" enctype="multipart/form-data">
            {!! csrf_field() !!}
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="col-sm-12">
                            <fieldset class="content-group">
                                <legend class="text-semibold">
                                    <span class="str-action"></span>
                                    <span>{{trans('admin_default.stand')}}</span>
                                </legend>
                                <div class="form-group">
                                    <label for="stand_name" class="control-label col-lg-3">
                                        {{trans('admin_default.stand_name')}}
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="col-sm-9">
                                        <div class="autocomplete full-width">
                                            <input id="stand_name" class="form-control" type="text"
                                                   name="stand_name" required="required">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-lg-3">
                                        {{trans('admin_default.picture')}}
                                    </label>
                                    <div class="col-sm-9">
                                        <div class="picture-preview" hidden="true">
                                            <img src="#" width="80" class="block-img">
                                        </div>
                                        <input type="file" name="picture" accept="image/*" class="form-control">
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link"
                                data-dismiss="modal">{{trans('admin_default.close')}}</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="icon-floppy-disk position-left"></i> {{trans('admin_default.save')}}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="confirmToggleModal" tabindex="-1" role="dialog" aria-labelledby="confirmToggleLabel">
      <div class="modal-dialog" 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="confirmToggleLabel">Confirm Action</h4>
          </div>
          <div class="modal-body">
            <p id="confirmMessage">Are you sure you want to disable this stand?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <a href="#" id="confirmToggleBtn" class="btn btn-warning">Yes, Continue</a>
          </div>
        </div>
      </div>
    </div>


@endsection

@section('script')
    <script>
        const btnAdd = $('.btn-add-stand');
        const btnEdit = $(".btn-edit-stand");
        const form = $("#stand-form");
        const modal = $("#stand-modal");
        const nameInput = $("#stand_name");
        const modalStrAction = $(".str-action");

        btnAdd.on('click', function () {
            nameInput.val(null);
            modalStrAction.text('{{ trans('admin_default.add_new') }}');
            form.attr('action', '{{ route('stand.store') }}');
            modal.modal('show');
        });

        btnEdit.on('click', function () {
            const url = $(this).data('url');
            const name = $(this).data('name');
            modalStrAction.text('{{ trans('admin_default.edit') }}');
            nameInput.val(name);
            form.attr('action', url);
            modal.modal('show');
        });
    </script>

    <script>
    $(document).ready(function () {
        var toggleUrl = '';

        // When clicking "Disable/Enable" button
        $('.toggle-btn').on('click', function () {
            var groupName = $(this).data('group');
            var action = $(this).data('status'); // 'enable' or 'disable'

            // Build toggle URL (Laravel named route)
            toggleUrl = "{{ route('stand.toggle', ':group') }}";
            toggleUrl = toggleUrl.replace(':group', groupName);

            // Update modal message
            var message = 'Are you sure you want to ' + action + ' this stand (' + groupName + ')?';
            $('#confirmMessage').text(message);

            // Update button color and text
            var btnClass = action === 'disable' ? 'btn-warning' : 'btn-success';
            $('#confirmToggleBtn')
                .removeClass('btn-warning btn-success')
                .addClass(btnClass)
                .text('Yes, ' + action.charAt(0).toUpperCase() + action.slice(1))
                .attr('href', toggleUrl);
        });

        // When confirming action
        $('#confirmToggleBtn').on('click', function () {
            window.location.href = $(this).attr('href');
        });
    });
</script>

@endsection