@extends('layouts.admin.main')
@section('title', 'Audio Advertisements')
@section('style')
    <link href="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css">
@endsection
@section('rightbar-content')
<div class="breadcrumbbar">
    <div class="row align-items-center">
        <div class="col-md-8 col-lg-8">
            <h4 class="page-title">Audio Advertisements</h4>
            <div class="breadcrumb-list">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ __('adminWords.home') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Advertisements</li>
                </ol>
            </div>
        </div>
        <div class="col-md-4 col-lg-4">
            <div class="widgetbar">
                <a href="{{ route('admin.advertisements.create') }}" class="btn btn-primary">
                    <i class="feather icon-plus"></i> Add Advertisement
                </a>
            </div>
        </div>
    </div>
</div>

<div class="contentbar">
    <div class="row">
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-header">
                    <h5 class="card-title">Manage Audio Advertisements</h5>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    <div class="table-responsive">
                        <table id="advertisementsTable" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Title</th>
                                    <th>Duration (sec)</th>
                                    <th>Frequency Type</th>
                                    <th>Frequency Value</th>
                                    <th>Skippable</th>
                                    <th>Priority</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($advertisements as $ad)
                                <tr>
                                    <td>{{ $ad->id }}</td>
                                    <td>{{ $ad->title }}</td>
                                    <td>{{ $ad->duration }}s</td>
                                    <td>
                                        <span class="badge badge-info">
                                            {{ ucfirst(str_replace('_', ' ', $ad->play_frequency_type)) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($ad->play_frequency_type == 'song_based')
                                            Every {{ $ad->play_frequency_value }} songs
                                        @else
                                            At {{ $ad->play_frequency_value }}s
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge badge-{{ $ad->is_skippable ? 'success' : 'danger' }}">
                                            {{ $ad->is_skippable ? 'Yes' : 'No' }}
                                        </span>
                                    </td>
                                    <td>{{ $ad->priority }}</td>
                                    <td>
                                        <label class="switch">
                                            <input type="checkbox" class="toggle-status" data-id="{{ $ad->id }}" {{ $ad->status ? 'checked' : '' }}>
                                            <span class="slider round"></span>
                                        </label>
                                    </td>
                                    <td>
                                        <a href="{{ route('admin.advertisements.edit', $ad->id) }}" class="btn btn-sm btn-primary" title="Edit">
                                            <i class="feather icon-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-danger delete-ad" data-id="{{ $ad->id }}" title="Delete">
                                            <i class="feather icon-trash"></i>
                                        </button>
                                        <audio controls style="width: 150px; height: 30px;">
                                            <source src="{{ $ad->audio_url }}" type="audio/mpeg">
                                        </audio>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
    <script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
@parent
    <script>
    $(document).ready(function() {
        $('#advertisementsTable').DataTable();

        // Toggle status
        $('.toggle-status').on('change', function() {
            const id = $(this).data('id');
            const isChecked = $(this).is(':checked');
            
            $.ajax({
                url: '{{ url("admin/advertisements") }}/' + id + '/toggle-status',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if(response.status == 1) {
                        toastr.success(response.msg);
                    } else {
                        toastr.error('Failed to update status');
                    }
                },
                error: function() {
                    toastr.error('An error occurred');
                }
            });
        });

        // Delete advertisement
        $('.delete-ad').on('click', function() {
            const id = $(this).data('id');
            
            if(confirm('Are you sure you want to delete this advertisement?')) {
                $.ajax({
                    url: '{{ url("admin/advertisements") }}/' + id + '/destroy',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        _method: 'DELETE'
                    },
                    success: function(response) {
                        if(response && response.success === false) {
                            toastr.error(response.message || 'Failed to delete advertisement');
                            return;
                        }
                        toastr.success('Advertisement deleted successfully');
                        location.reload();
                    },
                    error: function(xhr) {
                        const msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Failed to delete advertisement';
                        toastr.error(msg);
                    }
                });
            }
        });
    });
    </script>
@endsection

<style>
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}
</style>