@php
$positioncheck = [
1 => 'Top Banner',
2 => 'Top left Banner',
3 => 'Top Right Banner',
4 => 'Ico Half Banner',
5 => 'Sticky Banner'
];
@endphp
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12">
                    <div
                        class="page-title-box d-sm-flex align-items-center justify-content-center bg-galaxy-transparent">
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{ URL::to('admin/dashboard') }}" title="Dashbard">
                                        <i class="fa fa-home me-1 fs-10" aria-hidden="true"></i>Dashboard</a></li>
                                @if($formMode)
                                    <li class="breadcrumb-item "><a href="" title="Advertise By Country"
                                            class="text-decoration-none">Advertise By Country</a></li>
                                    <li class="breadcrumb-item active"> {{ $updateMode ? 'Edit' : 'Create' }}</li>
                                @else
                                    <li class="breadcrumb-item active">Advertise By Country</li>
                                @endif
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">

            <div class="card">
                <div class="card-body">

                    <!-- Create Button -->
                    @if(($role_id == 1) || in_array(60, $permissions))
                    <button class="btn btn-primary mb-3" wire:click="create">
                        + Add New
                    </button>
                    @endif

                    <!-- SHOW FORM WHEN NEEDED -->
                    @if($formMode)
                    <form wire:submit.prevent="{{ $updateMode ? 'update' : 'store' }}">
                        <div class="border p-3 mb-4 row rounded">
                            <h5 class="mb-3">{{ $updateMode ? 'Edit Record' : 'Add New Record' }}</h5>

                            <div class="form-group col-sm-6">
                                <label class="field-required">Title:</label>
                                <input type="text" wire:model="form.title"
                                    class="form-control @error('form.title') is-invalid @enderror">
                                @error('form.title') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>

                            <!-- Redirect URL -->
                            <div class="form-group col-sm-6">
                                <label class="field-required">Redirect URL:</label>
                                <input type="url" wire:model="form.redirect_url" class="form-control @error('form.redirect_url') is-invalid @enderror">
                                @error('form.redirect_url') <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Advertisement Type -->
                            <div class="form-group col-sm-6">
                                <label class="field-required">Advertisement Type:</label>
                                <select wire:model="form.advertise_type" class="form-control @error('form.advertise_type') is-invalid @enderror">
                                    <option value="">Select Type</option>
                                    <option value="App">App</option>
                                    <option value="Banner">Banner</option>
                                    <option value="Button">Button</option>
                                    <option value="Popup">Popup</option>
                                    <option value="Sticky">Sticky</option>
                                </select>
                                @error('form.advertise_type') <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>

                            <!-- Position -->
                            <div class="form-group col-sm-6">
                                <label class="field-required">Position:</label>
                                <select wire:model="form.position" class="form-control @error('form.position') is-invalid @enderror">
                                    <option value="">Select Position</option>
                                    <option value="1">Top Banner</option>
                                    <option value="2">Top left Banner</option>
                                    <option value="3">Top Right Banner</option>
                                    <option value="4">Ico Half Banner</option>
                                    <option value="5">Sticky Banner</option>
                                </select>
                                @error('form.position') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>

                            <!-- Start & End Dates -->
                            <div class="form-group col-sm-6">
                                <label class="field-required">Start Date:</label>
                                <input type="datetime-local" wire:model="form.start_date" class="form-control @error('form.start_date') is-invalid @enderror">
                                @error('form.start_date') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>
                            <div class="form-group col-sm-6">
                                <label class="field-required">End Date:</label>
                                <input type="datetime-local" wire:model="form.end_date" class="form-control @error('form.end_date') is-invalid @enderror">
                                @error('form.end_date') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>

                            <!-- Image / Video / Script -->
                            <div class="form-group col-sm-6">
                                <label class="field-required">Is Image/Video:</label>
                                <select wire:model="form.is_image_video" class="form-control @error('form.is_image_video') is-invalid @enderror">
                                    <option value="">Select</option>
                                    <option value="0">Image</option>
                                    <option value="1">Video</option>
                                    <option value="2">Script</option>
                                </select>
                                @error('form.is_image_video') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>

                            <!-- Main Image Upload -->
                            @if($form['is_image_video'] == 0)
                            <div class="form-group col-sm-6">
                                <label>Upload Image:</label>
                                <input type="file" wire:model="image" class="form-control @error('form.image') is-invalid @enderror">

                                @if($image)
                                <img src="{{ $image->temporaryUrl() }}" style="width: 30%; margin-top:10px;">
                                @endif
                            </div>
                            @endif

                            <!-- Video -->
                            @if($form['is_image_video'] == 1)
                            <div class="form-group col-sm-6">
                                <label>Upload Video:</label>
                                <input type="file" wire:model="image" accept="video/mp4" class="form-control">

                                @if($image)
                                <video width="200" controls>
                                    <source src="{{ $image->temporaryUrl() }}">
                                </video>
                                @endif
                            </div>
                            @endif

                            <!-- Script -->
                            @if($form['is_image_video'] == 2)
                            <div class="form-group col-sm-6">
                                <label>Advertisement Script:</label>
                                <textarea wire:model="advertise_script" class="form-control @error('form.advertise_script') is-invalid @enderror" rows="3"></textarea>
                            </div>
                            @endif

                            <!-- Is Approve -->
                            <div class="form-group col-sm-3">
                                <label class="field-required">Is Approve:</label>
                                <select wire:model="is_approve" class="form-control @error('form.is_approve') is-invalid @enderror">
                                    <option value="">Select</option>
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>

                            <!-- Devices (Multiple) -->
                            <!-- <div class="form-group col-sm-3">
                                                                        <label class="field-required">Device:</label>
                                                                        <select wire:model="is_device" class="form-control" multiple>
                                                                            <option value="1">Mobile</option>
                                                                            <option value="0">Desktop</option>
                                                                        </select>
                                                                    </div> -->


                            <!-- Multiple Advertise Images -->
                            <div class="form-group col-md-12">
                                <label>Advertise Images:</label>
                                <input type="file" wire:model="advertis_image" multiple class="form-control">

                                <div class="row mt-2">
                                    @foreach($advertis_image as $img)
                                    <div class="col-md-3">
                                        <img src="{{ $img->temporaryUrl() }}" class="img-fluid p-1">
                                    </div>
                                    @endforeach
                                </div>
                                @error('form.image') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            </div>

                            <div class="form-group col-md-12">
                                <label class="h5 font-weight-bold mt-3">Advertise Pages</label>
                                @error('form.advertis_page') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                <div class="row">
                                    <div class="col-12">
                                        <label>
                                            <input type="checkbox" wire:model="selectAllAdvertisePage"
                                                wire:click="toggleSelectAllAdvertiseByPage">
                                            Select All
                                        </label>
                                    </div>
                                    @foreach ($geo as $page)
                                    <div class="col-3">
                                        <label>
                                            <input type="checkbox" wire:model="advertis_page" value="{{ $page->id }}">
                                            {{ $page->type }}
                                        </label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Screens -->
                            <div class="form-group col-md-12">
                                <label class="h5 font-weight-bold mt-3">Advertise Screens</label>
                                <div class="d-grid">
                                    @foreach ($screens as $scr)
                                    <label>
                                        <input type="checkbox" wire:model="advertis_screen" value="{{ $scr->id }}">
                                        {{ $scr->title }}
                                    </label>
                                    @endforeach
                                </div>
                            </div>
                            <!-- Region -->
                            <div class="form-group col-md-12">
                                <label class="h5 font-weight-bold mt-3">Regions</label>
                                <div class="row">
                                    <div class="col-12">
                                        <label>
                                            <input type="checkbox" wire:model="selectAllRegions"
                                                wire:click="toggleSelectAllRegions">
                                            Select All
                                        </label>
                                    </div>
                                    @foreach ($regions as $reg)
                                    <div class="col-3">
                                        <label>
                                            <input type="checkbox" wire:model="advertis_region" value="{{ $reg->id }}">
                                            {{ $reg->title }}
                                        </label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            <!-- Countries -->
                            <div class="form-group col-md-12">
                                <label class="h5 font-weight-bold mt-3">Countries</label>
                                <div class="row">
                                    <div class="col-12">
                                        <label>
                                            <input type="checkbox" wire:model="selectAllCountry"
                                                wire:click="toggleSelectAllCountry">
                                            Select All
                                        </label>
                                    </div>
                                    @foreach ($countries as $ct)
                                    <div class="col-3">
                                        <label>
                                            <input type="checkbox" wire:model="advertis_country" value="{{ $ct->id }}">
                                            {{ $ct->name }} ({{ $ct->sortname }})
                                        </label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="col-2">
                                <button type="submit" class="btn btn-success">Save</button>
                                <button type="button" class="btn btn-secondary" wire:click="resetFields">Cancel</button>
                            </div>
                        </div>
                    </form>
                    @endif
                    @if($viewMode)

                    <div class="card-body">
                        <div class="row gy-3">
                            <div class="col-sm-12 col-xl-6">
                                <div class="d-flex flex-wrap">
                                    <label class="form-label width-label">Name:</label>
                                    <p>{{ $form['title'] ?? '-' }}</p>
                                </div>
                            </div>

                            <div class="col-sm-12 col-xl-6">
                                <div class="d-flex flex-wrap">
                                    <label class="form-label width-label">Redirect URL:</label>
                                    <p>{{ $form['redirect_url'] ?? '-' }}</p>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-6">
                                <div class="d-flex flex-wrap">
                                    <label class="form-label width-label">Position:</label>
                                    <p>{{ $positioncheck[$form['position']] ?? '-' }}</p>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-6">
                                <div class="d-flex flex-wrap">
                                    <label class="form-label width-label">Id:</label>
                                    <p>{{ $form['id'] ?? '-' }}</p>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-6">
                                <div class="d-flex flex-wrap">
                                    <label class="form-label width-label">Is Active:</label>
                                    <p>{{ $form['is_active'] ?? '-' }}</p>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-6">
                                <div class="d-flex flex-wrap">
                                    <label class="form-label width-label">Country Id:</label>
                                    <p>{{ $form['country_id'] ?? '-' }}</p>
                                </div>
                            </div>

                            <div class="col-sm-12 col-xl-6">
                                <div class="d-flex flex-wrap">
                                    <label class="form-label width-label">Created At:</label>
                                    <p>{{ $form['created_at'] ?? '-' }}</p>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-6">
                                <div class="d-flex flex-wrap">
                                    <label class="form-label width-label">Updated At:</label>
                                    <p>{{ $form['updated_at'] ?? '-' }}</p>
                                </div>
                            </div>

                            <div class="col-sm-12 col-xl-6">
                                <div class="d-flex flex-wrap">
                                    <label class="form-label width-label">Start Date:</label>
                                    <p>{{ $form['start_date'] ?? '-' }}</p>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-6">
                                <div class="d-flex flex-wrap">
                                    <label class="form-label width-label">End Date:</label>
                                    <p>{{ $form['end_date'] ?? '-' }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <button type="button" wire:click="resetFields" class="btn btn-secondary">Close</button>
                        </div>
                    </div>

                    <style>
                        .width-label {
                            width: 100px;
                        }
                    </style>
                    @endif
                    <!-- Filters -->
                    <div class="row mb-3 gy-3">

                        <div class="col-md-3">
                            <input type="text" wire:model.defer="keyword_search" class="form-control" placeholder="Search">
                        </div>

                        <div class="col-md-3">
                            <select wire:model="position" class="form-control">
                                <option value=""> Select Position</option>
                                <option value="1">Top Header Banner</option>
                                <option value="2">Bottom Header Banner</option>
                                <option value="3">Right Middle Banner</option>
                                <option value="4">Left Middle Banner</option>
                                <option value="5">Sticky Banner</option>

                            </select>
                        </div>

                        <div class="col-md-3">
                            <select class="form-control" wire:model="advertise_type">
                                <option value="">-- Type --</option>
                                <option value="App">App</option>
                                <option value="Banner">Banner</option>
                                <option value="Button">Button</option>
                                <option value="Popup">Popup</option>
                                <option value="Sticky">Sticky</option>
                            </select>
                        </div>

                        <div class="col-md-3">
                            <select class="form-control" wire:model="is_active">
                                <option value=""> Is Active </option>
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                        </div>
                         <div class="col-md-3">
                            <input type="date" wire:model.defer="start_date" class="form-control" placeholder="Start Date">
                        </div>
                         <div class="col-md-3">
                            <input type="date" wire:model.defer="end_date" class="form-control" placeholder="End Date">
                        </div>

                        <div class="col-md-1 ">
                            <button class="btn btn-primary" wire:click="applyFilter">
                                <i class="fa-solid fa-magnifying-glass"></i>
                            </button>

                            <button class="btn btn-primary" wire:click="resetFilters">
                                <i class="fa-solid fa-arrows-rotate"></i>
                            </button>
                        </div>

                    </div>

                    <!-- Table -->
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Sno.</th>
                                <th>Image</th>
                                <th>Title</th>
                                <th>Advertise Type</th>
                                <th>Position</th>
                                <th>Status</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th width="120">Action</th>
                            </tr>
                        </thead>

                        <tbody>

                            @foreach($advertisByCountries as $advertisByCountry)
                            <tr>
                                {{-- ID --}}
                                <td>{{ $advertisByCountry['id'] }}</td>

                                {{-- IMAGE / VIDEO / SCRIPT --}}
                                <td>
                                    @if($advertisByCountry['is_image_video'] == 2)
                                    {!! $advertisByCountry['advertise_script'] !!}

                                    @elseif($advertisByCountry['is_image_video'] == 1)
                                    <video style="height:60px; cursor:pointer;" controls>
                                        <source src="{{ $advertisByCountry['image'] }}" type="video/mp4">
                                    </video>

                                    @else
                                    <img src="{{ $advertisByCountry['image'] }}" style="height:60px; cursor:pointer;"
                                        class="img-fluid m-img" data-toggle="modal"
                                        data-target="#advertisByCountryimgModal"
                                        wire:click="showImage('{{ $advertisByCountry['image'] }}')">
                                    @endif
                                </td>

                                {{-- TITLE --}}
                                <td class="text-left">
                                    {{ \Illuminate\Support\Str::limit($advertisByCountry['title'], 30, '...') }}
                                </td>

                                {{-- ADVERTISE TYPE --}}
                                <td>{{ $advertisByCountry['advertise_type'] ?? 'N/A' }}</td>

                                {{-- POSITION --}}
                                <td>{{ $positioncheck[$advertisByCountry['position']] ?? 'Other Banners' }}</td>

                                {{-- IS SELLOUT BADGE --}}
                                <td>
                                    @php
                                    $statusLabels = [
                                    '' => 'Status',
                                    '0' => 'Availability',
                                    '1' => 'Live',
                                    '2' => 'Taken',
                                    '3' => 'Trial',
                                    '4' => 'Referral/Affiliate',
                                    '5' => 'Free',
                                    '6' => 'Paid'
                                    ];
                                    @endphp

                                    {{ $statusLabels[$advertisByCountry['is_sellout']] ?? 'Unknown' }}
                                </td>

                                {{-- DATES --}}
                                <td>{{ $advertisByCountry['start_date'] }}</td>
                                <td>{{ $advertisByCountry['end_date'] }}</td>

                                {{-- ACTION BUTTONS --}}
                                <td>
                                    <div class="btn-group">
                                        @if(($role_id == 1) || in_array(61, $permissions))
                                        <button wire:click="view({{ $advertisByCountry['id'] }})"
                                            class="btn btn-info btn-sm"><i class="fa-solid fa-eye"></i></button>
                                        @endif

                                        @if(($role_id == 1) || in_array(62, $permissions))
                                        <button wire:click="edit({{ $advertisByCountry['id'] }})"
                                            class="btn btn-warning btn-sm"><i
                                                class="fa-solid fa-pen-to-square"></i></button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach


                            @if ($advertisByCountries->count() == 0)
                            <tr>
                                <td colspan="9" class="text-center">No data found...</td>
                            </tr>
                            @endif


                        </tbody>
                    </table>

                    {{ $advertisByCountries->links() }}

                </div>
            </div>
            <div wire:ignore.self class="modal fade" id="advertisByCountryimgModal" tabindex="-1"
                aria-labelledby="advertisByCountryimgModalLabel" aria-hidden="true">

                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">

                        <div class="modal-header border-0 py-1">
                            <button type="button" class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>

                        <div class="modal-body">
                            @if($modalImage)
                            <img src="{{ $modalImage }}" class="img-fluid" alt="Image Preview">
                            @endif
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    @push('scripts')
    <script>
        window.addEventListener('open-image-modal', () => {
            $('#advertisByCountryimgModal').modal('show');
        });
        window.addEventListener('close-image-modal', () => {
            $('#advertisByCountryimgModal').modal('hide');
        });
    </script>
    @endpush
</div>