@extends('layouts.admin')
@section('title')
{{ $title }}
@endsection

@section('content')
<div class="bg-white dark:bg-opacity-5 shadow-md rounded-md mt-10 p-10">
    <form action="{{ route('admin.advertisement.store') }}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
                <x-label>Title</x-label>
                <x-input name="title" value="{{ isset($advertisement->title) ? $advertisement->title : old('title') }}" required></x-input>
                <input type="hidden" name="id" value="{{ isset($advertisement->id) ? $advertisement->id : old('id') }}" required>
            </div>
            <div>
                <x-label>URL</x-label>
                <x-input name="url" value="{{ isset($advertisement->url) ? $advertisement->url : old('url') }}"></x-input>
            </div>
            {{-- <div>
                <x-label>Image</x-label>
                    <x-file name="image"></x-file>
            </div> --}}
    <div class="flex justify-start">
        <x-label class="mr-5">Status</x-label>
        <x-label for="is_active_1" class="mr-5">
            <input type="radio" name="is_active" id="is_active_1" value="1" {{ (isset($advertisement->is_active) && $advertisement->is_active === 1) ? 'checked' : '' }}>
            Show</x-label>
        <x-label for="is_active_2">
            <input type="radio" name="is_active" id="is_active_2" value="0" {{ (isset($advertisement->is_active) && $advertisement->is_active === 0) ? 'checked' : '' }}>
            Hide</x-label>

    </div>
    <div>
        @if (isset($advertisement->image) && $advertisement->image != '')
        <img src="storage/{{ $advertisement->image }}" alt="" style="max-width: 150px">
        <input type="hidden" name="image" value="{{ isset($advertisement->image) ? $advertisement->image : old('image') }}" required>
        @else
        <x-file name="image" accept=".jpg, .jpeg, .png"></x-file>
        @endif

    </div>
    </div>
    <div class="flex justify-center mt-10">
        <x-submit>Submit</x-submit>
    </div>
    </form>
    </div>
{{-- ------------------------------------------data table --}}
<div class="bg-white dark:bg-opacity-5 shadow-md rounded-md mt-10 p-10 w-full overflow-x-auto">
    <table class="table-auto w-full" id="myTable" cellpadding="7">
        <thead class="bg-color2-400 text-white">
            <th>Image</th>
            <th>Title</th>
            <th>Status</th>
            <th>Functions</th>
        </thead>
        @foreach ($advertisements as $item)
        <tr class="odd:bg-white even:bg-gray-100">
            <td>
                <a href="{{ $item->url }}" target="_blank" rel="noopener noreferrer"></a>
                <img src="{{ Storage::url($item->image) }}" alt="" style="max-width: 150px" loading="lazy">
            </td>
            <td>{{ $item->title }}</td>
            <td>@if ($item->is_active)
                Active
                @else
                Inactive
            @endif</td>
            <td class="text-right">
                <form action="{{ route('admin.advertisement.delete') }}" method="post">
                    @csrf
                    {{-- <input type="hidden" name="title" value="$job->title" required> --}}
                    <input type="hidden" name="id" value="{{ $item->id }}" required>
                    <button type="submit" class="bg-blue-600 p-2 font-medium rounded text-white" onclick="javascript:return confirm('Are you sure you want to delete!')">Delete</button>
                    <a href="{{ route('admin.advertisement.show') }}/{{ $item->id }}" class="bg-blue-600 p-2.5 font-medium rounded text-white mr-3">Edit</a>
                </form>

            </td>
        </tr>
        @endforeach

    </table>
</div>
@endsection
@push('custom-styles')
<link rel="stylesheet" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
@endpush
@push('custom-scripts')
<script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" type="module"></script>
<script type="module">
    $(document).ready( function () {
    $('#myTable').DataTable({
        // "order": [[ 3, "desc" ]]
    });
} );
</script>
@endpush