@extends('admin.layout')
@section('content')
    <style>
        .resetbtn {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
    <div class="container-fluid content-inner pb-0">

        <div class="page-header d-flex justify-content-between align-items-center">
            <h2 class="page-title mb-0">Add AD</h2>
            <a href="{{ route('ad_history') }}"
                class="btn text-primary bg-white px-3 py-2 d-flex align-items-center gap-1"><svg width="20" height="21"
                    viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M9.99984 2.16675C14.6023 2.16675 18.3332 5.89758 18.3332 10.5001C18.3332 15.1026 14.6023 18.8334 9.99984 18.8334C5.39734 18.8334 1.6665 15.1026 1.6665 10.5001C1.6665 5.89758 5.39734 2.16675 9.99984 2.16675ZM9.99984 3.83341C8.23173 3.83341 6.53603 4.53579 5.28579 5.78604C4.03555 7.03628 3.33317 8.73197 3.33317 10.5001C3.33317 12.2682 4.03555 13.9639 5.28579 15.2141C6.53603 16.4644 8.23173 17.1667 9.99984 17.1667C11.7679 17.1667 13.4636 16.4644 14.7139 15.2141C15.9641 13.9639 16.6665 12.2682 16.6665 10.5001C16.6665 8.73197 15.9641 7.03628 14.7139 5.78604C13.4636 4.53579 11.7679 3.83341 9.99984 3.83341ZM9.99984 5.50008C10.2039 5.50011 10.401 5.57504 10.5535 5.71068C10.706 5.84631 10.8035 6.03321 10.8273 6.23591L10.8332 6.33341V10.1551L13.089 12.4109C13.2385 12.5609 13.3252 12.7621 13.3317 12.9737C13.3382 13.1854 13.2638 13.3915 13.1238 13.5503C12.9838 13.7091 12.7885 13.8087 12.5778 13.8287C12.367 13.8488 12.1565 13.7879 11.989 13.6584L11.9107 13.5892L9.41067 11.0892C9.28115 10.9596 9.19797 10.7909 9.174 10.6092L9.1665 10.5001V6.33341C9.1665 6.1124 9.2543 5.90044 9.41058 5.74416C9.56686 5.58788 9.77882 5.50008 9.99984 5.50008Z"
                        fill="#1C91C8" />
                </svg>
                History</a>
        </div>
        <div class="row d-flex justify-content-center">
            <div class="col-lg-12">
                <div class="card p-4">
                    <form action="{{ route('upload_ad') }}" method="POST" enctype="multipart/form-data" class="row g-3">
                        @csrf
                        <div class="col-md-12">
                            <label class="form-label" for="title">Title</label>
                            <input type="text" class="form-control" id="title" name="title"
                                value="{{ old('title') }}">
                            @error('title')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-2">
                            <label class="form-label" for="amount">Amount</label>
                            <input type="number" class="form-control" id="amount" name="amount" step="any"
                                value="{{ old('amount') }}">
                            @error('amount')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-5">
                            <label class="form-label" for="image">Upload Image</label>
                            <input type="file" class="form-control" id="image" name="image" accept="image/*">
                            @error('image')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-5">
                            <label class="form-label" for="video">Upload Video</label>
                            <input type="file" class="form-control" id="video" name="video" accept="video/*">
                            <small class="text-danger">Max upload size: 5MB</small>
                            @error('video')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label" for="district">Select District</label>
                            <select class="form-control" id="district" name="district">
                                <option value="">Select a District</option>
                                @foreach ($districts as $district)
                                    <option value="{{ $district->id }}"
                                        {{ old('district') == $district->id ? 'selected' : '' }}>
                                        {{ $district->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('district')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label" for="sdate">Start Date</label>
                            <input type="date" class="form-control" id="sdate" name="sdate"
                                value="{{ old('sdate', date('Y-m-d')) }}">
                            @error('sdate')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label" for="edate">End Date</label>
                            <input type="date" class="form-control" id="edate" name="edate"
                                value="{{ old('edate', date('Y-m-d')) }}">
                            @error('edate')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-2">
                            <label class="form-label" for="atime">Time in Sec</label>
                            <input class="form-control" type="number" id="atime" name="atime" step="1"
                                value="{{ old('atime') }}">
                            @error('atime')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>


                        <!-- Submit Button -->
                        <div class="resetbtn">
                            <button type="submit" class="btn btn-primary px-3 py-2">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('video').addEventListener('change', function() {
            document.getElementById('span_video').innerText = "";
            const file = this.files[0];
            const maxSize = 5 * 1024 * 1024; // 2 MB in bytes

            if (file && file.size > maxSize) {
                document.getElementById('span_video').innerText = "File size exceeds 5 MB.";
                this.value = ""; // Clear the input
            }
        });


        document.getElementById('image').addEventListener('change', function() {
            document.getElementById('span_image').innerText = "";
            const file = this.files[0];
            const maxSize = 1 * 1024 * 1024; // 2 MB in bytes

            if (file && file.size > maxSize) {
                document.getElementById('span_image').innerText = "File size exceeds 2 MB.";
                this.value = ""; // Clear the input
            }
        });

        document.getElementById('time').addEventListener('input', function(e) {
            let value = e.target.value;
            let regex = /^([01]\d|2[0-3]):([0-5]\d):([0-5]\d)$/; // HH:MM:SS format
            if (!regex.test(value)) {
                e.target.setCustomValidity('Please enter a valid time in HH:MM:SS format.');
            } else {
                e.target.setCustomValidity('');
            }
        });
    </script>
@endsection