@extends('staff::layouts.default')

@section('title', 'Overview Detail')

@section('content')
<div class="content-wrapper">
    <div class="panel panel-white border-top-success">
        <div class="panel-heading">
            <h5 class="panel-title text-bold">
                <i class="icon-eye position-left"></i>
                Overview Detail - {{ $category->name }}
            </h5>
        </div>

        <div class="panel-body" style="background: #fff;">
            {{-- Tabs navigation --}}
            <ul class="nav nav-tabs">
                <li class="active"><a href="#position" data-toggle="tab">Position</a></li>
                <li><a href="#title" data-toggle="tab">Title</a></li>
                <li><a href="#academy" data-toggle="tab">Academy</a></li>
            </ul>

            {{-- Tabs content --}}
            <div class="tab-content mt-3">
                {{-- Position Tab --}}
                <div class="tab-pane fade in active" id="position">
                    <button type="button" class="btn btn-primary btn-add-new"
                        data-entity="position">
                        <i class="icon-plus-circle2"></i> Add New
                    </button>
                    <table class="table table-bordered table-striped small-mrg-top">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Player Position</th>
                                <th>Description</th>
                                <th>Status</th>
                                <th>Created At</th>
                                <th width="10%" style="text-align: center">{{trans('admin_default.action')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($position as $item)
                                <tr>
                                    <td>{{ $item->name }}</td>
                                    <td>{{ $item->is_player_position ? 'Yes' : 'No' }}</td>
                                    <td>{{ $item->description }}</td>
                                    <td>{{ $item->status ? 'Active' : 'Inactive' }}</td>
                                    <td>{{ $item->created_at->format('d-F-Y') }}</td>
                                    <td class="text-center">
                                        <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="#" class="btn-edit-data"
                                                           data-entity="position"
                                                           data-id="{{ $item->id }}"
                                                           data-name="{{ $item->name }}"
                                                           data-description="{{ $item->description }}"
                                                           data-status="{{ $item->status }}"
                                                           @if(isset($item->is_player_position))
                                                               data-is_player="{{ $item->is_player_position }}"
                                                           @endif>
                                                           <i class="icon-pencil7"></i> {{trans('admin_default.edit')}}
                                                        </a>
                                                        <a href="#" class="btn-delete"
                                                           data-entity="position"
                                                           data-id="{{ $item->id }}">
                                                           <i class="icon-trash"></i> {{ trans('admin_default.delete') }}
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- Title Tab --}}
                <div class="tab-pane fade" id="title">
                    <button type="button" class="btn btn-primary btn-add-new"
                        data-entity="title">
                        <i class="icon-plus-circle2"></i> Add New
                    </button>
                    <table class="table table-bordered table-striped small-mrg-top">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Status</th>
                                <th>Created At</th>
                                <th width="10%" style="text-align: center">{{trans('admin_default.action')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($title as $item)
                                <tr>
                                    <td>{{ $item->name }}</td>
                                    <td>{{ $item->description }}</td>
                                    <td>{{ $item->status ? 'Active' : 'Inactive' }}</td>
                                    <td>{{ $item->created_at->format('d-F-Y') }}</td>
                                    <td class="text-center">
                                        <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="#" class="btn-edit-data"
                                                           data-entity="title"
                                                           data-id="{{ $item->id }}"
                                                           data-name="{{ $item->name }}"
                                                           data-description="{{ $item->description }}"
                                                           data-status="{{ $item->status }}"
                                                           @if(isset($item->is_player_position))
                                                               data-is_player="{{ $item->is_player_position }}"
                                                           @endif>
                                                           <i class="icon-pencil7"></i> {{trans('admin_default.edit')}}
                                                        </a>
                                                        <a href="#" class="btn-delete"
                                                           data-entity="title"
                                                           data-id="{{ $item->id }}">
                                                           <i class="icon-trash"></i> {{ trans('admin_default.delete') }}
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- Academy Tab --}}
                <div class="tab-pane fade" id="academy">
                    <button type="button" class="btn btn-primary btn-add-new"
                        data-entity="academy">
                        <i class="icon-plus-circle2"></i> Add New
                    </button>
                    <table class="table table-bordered table-striped small-mrg-top">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Status</th>
                                <th>Created At</th>
                                <th width="10%" style="text-align: center">{{trans('admin_default.action')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($academy as $item)
                                <tr>
                                    <td>{{ $item->name }}</td>
                                    <td>{{ $item->description }}</td>
                                    <td>{{ $item->status ? 'Active' : 'Inactive' }}</td>
                                    <td>{{ $item->created_at->format('d-F-Y') }}</td>
                                    <td class="text-center">
                                        <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="#" class="btn-edit-data"
                                                           data-entity="academy"
                                                           data-id="{{ $item->id }}"
                                                           data-name="{{ $item->name }}"
                                                           data-description="{{ $item->description }}"
                                                           data-status="{{ $item->status }}"
                                                           @if(isset($item->is_player_position))
                                                               data-is_player="{{ $item->is_player_position }}"
                                                           @endif>
                                                           <i class="icon-pencil7"></i> {{trans('admin_default.edit')}}
                                                        </a>
                                                        <a href="#" class="btn-delete"
                                                           data-entity="academy"
                                                           data-id="{{ $item->id }}">
                                                           <i class="icon-trash"></i> {{ trans('admin_default.delete') }}
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
    <div class="modal-dialog" role="document">
        <form id="editForm">
            {!! csrf_field() !!}
            <input type="hidden" name="_method" id="form-method" value="PUT">
            <input type="hidden" name="id" id="edit-id">
            <input type="hidden" name="file_category_id" value="{{ $category->id }}">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="editModalLabel">Edit Item</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="edit-id">
                    
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" name="name" id="edit-name" class="form-control">
                    </div>

                    <div class="form-group">
                        <label>Description</label>
                        <textarea name="description" id="edit-description" class="form-control"></textarea>
                    </div>

                    <div class="form-group">
                        <label>Status</label>
                        <select name="status" id="edit-status" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>

                    <div class="form-group" id="is-player-group" style="display: none">
                        <label>Is Player Position</label>
                        <select name="is_player_position" id="edit-is-player" class="form-control">
                            <option value="1">Yes</option>
                            <option value="0">No</option>
                        </select>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Submit</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>

<style>
    .small-mrg-top { margin-top:10px; }
</style>


@endsection

@section('script')

<script>
$(document).ready(function () {

    let updateUrlBase = "{!! url('shop/file-upload') !!}";

    // Activate previously selected tab from localStorage
    let activeTab = localStorage.getItem('activeTab');
    if (activeTab) {
        $('.nav-tabs a[href="' + activeTab + '"]').tab('show');
    }

    // Save active tab to localStorage
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });

    $('.btn-add-new').click(function () {
        let entity = $(this).data('entity');

        $('#editForm')[0].reset();
        $('#form-method').val('POST');
        $('#edit-id').val('');
        $('#editModalLabel').text('Add New ' + entity.charAt(0).toUpperCase() + entity.slice(1));

        if (entity === 'position') {
            $('#is-player-group').show();
        } else {
            $('#is-player-group').hide();
        }

        $('#editForm').attr('data-entity', entity);
        $('#editModal').modal('show');
    });


    $('.btn-edit-data').click(function () {
        let entity = $(this).data('entity'); // 'position', 'title', or 'academy'
        let id = $(this).data('id');
        let name = $(this).data('name');
        let description = $(this).data('description');
        let status = $(this).data('status');
        let isPlayer = $(this).data('is_player');

        $('#form-method').val('PUT');
        $('#editForm').attr('data-entity', entity);

        $('#edit-id').val(id);
        $('#edit-name').val(name);
        $('#edit-description').val(description);
        $('#edit-status').val(status);
        
        // Show/hide is_player_position only for 'position'
        if (entity === 'position') {
            $('#is-player-group').show();
            $('#edit-is-player').val(isPlayer);
        } else {
            $('#is-player-group').hide();
        }

        // Store entity type in modal (e.g., as a data attribute)
        $('#editForm').data('entity', entity);

        $('#editModal').modal('show');
    });

    $('#editForm').submit(function (e) {
        e.preventDefault();
        
        let entity = $(this).attr('data-entity');
        let id = $('#edit-id').val();
        let method = $('#form-method').val();
        let formData = $(this).serialize();

        let url = (method === 'POST')
            ? updateUrlBase + "/" + entity
            : updateUrlBase + "/" + entity + "/" + id

        $.ajax({
            url: url,
            type: method,
            data: formData,
            success: function (response) {
                $('#editModal').modal('hide');
                Swal.fire({
                    title: method === 'POST' ? 'Added!' : 'Updated!',
                    icon: 'success',
                    timer: 3000,
                    showConfirmButton: false
                });
                // // Inside the success callback of your AJAX submit
                // localStorage.removeItem('activeTab');
                location.reload();
            },
            error: function (xhr) {
                Swal.fire({
                    title: 'Error!',
                    text: 'Something went wrong.',
                    icon: 'error'
                });
            }
        });
    });


    // DELETE
    $('.btn-delete').click(function (e) {
        e.preventDefault();

        let updateUrlBase = "{!! url('shop/file-upload') !!}";

        const id = $(this).data('id');
        const entity = $(this).data('entity');
        const url = updateUrlBase + "/" + entity + "/" + id;

        Swal.fire({
            title: 'Are you sure?',
            text: "This action cannot be undone.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#aaa',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: url,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        Swal.fire({
                            title: 'Deleted!',
                            text: response.message || 'Item deleted successfully.',
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        location.reload(); // or remove the row with jQuery
                    },
                    error: function (xhr) {
                        Swal.fire({
                            title: 'Error!',
                            text: 'Something went wrong.',
                            icon: 'error'
                        });
                    }
                });
            }
        });
    });

});
</script>


@endsection