<?php include 'header.php'; ?>

<style>
    body {
        background-color: #f9f9f9;
        font-family: 'Inter', sans-serif;
        color: #333;
    }

    .container-md {
        max-width: 800px;
        margin-top: 40px;
        padding: 20px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    h3 {
        font-weight: 600;
        margin-bottom: 20px;
        color: #333;
    }

    .form-group label {
        font-weight: 500;
        color: #555;
        margin-bottom: 8px;
    }

    .form-control {
        border: 1px solid #ced4da;
        border-radius: 5px;
        padding: 10px;
        font-size: 14px;
    }

    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 4px rgba(0, 123, 255, 0.2);
    }

    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
        color: #fff;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 5px;
        transition: background 0.3s;
    }

    .btn-primary:hover {
        background-color: #0056b3;
    }

    .btn-default {
        background-color: #6c757d;
        color: #fff;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 5px;
        margin-left: 10px;
    }

    .btn-default:hover {
        background-color: #5a6268;
    }

    hr {
        border-top: 1px solid #e0e0e0;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    /* Accordion Content */
.col-md-12 .panel .panel-body{
 padding-top:0px;
 padding-bottom:0px;
}
/* Title */
#title{
 display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}

/* Broadcast type */
#broadcast_type{
display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}

/* Action link */
#action_link{
 display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}
/* Action text */
#action_text{
 display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}

/* Division */
.form .form-group:nth-child(5) .panel div:nth-child(3) > div:nth-child(3){
 
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}

/* Expiry date */
#expiry_date{
 display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}

/* Status */
#status{
 display: flex;
    align-items: center;
    background-color: #e9ecef; /* Light input background */
    border-radius: 8px;
    padding: 12px;
    color: #333; /* Dark text color */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 50px;
}
.panel-body .form .btn-primary{
 background: linear-gradient(145deg, #007bff, #0056b3); /* Light gradient */
    color: #ffffff;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}

/* Button */
.panel-body .form a.btn{
 background: linear-gradient(145deg, #c71f1f, #e04d4d); /* Gradient background for a professional look */
  color: #ffffff; /* Text color */
  padding: 14px 28px;
  font-size: 14px; /* Font size */
  font-weight: 500; /* Font weight */
  border: none; /* Remove default border */
  border-radius: 5px; /* Slightly rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
  transition: background 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effects */
}



</style>

<div class="container container-md">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <center><h3>Create Broadcast</h3></center>
                    <hr>
                    <form class="form" action="<?php echo site_url("admin/broadcasts/new"); ?>" method="POST">

                        <div class="form-group">
                            <label for="title">Title</label>
                            <input type="text" class="form-control" name="title" id="title" required>
                        </div>

                        <div class="form-group">
                            <label for="broadcast_type">Type</label>
                            <select class="form-control" name="broadcast_type" id="broadcast_type">
                                <option value="info" selected>Info</option>
                                <option value="success">Success</option>
                                <option value="error">Error</option>
                                <option value="warning">Warning</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="action_link">Button Link (Optional)</label>
                            <input type="text" class="form-control" name="action_link" id="action_link">
                        </div>

                        <div class="form-group">
                            <label for="action_text">Button Text (Optional)</label>
                            <input type="text" class="form-control" name="action_text" id="action_text">
                        </div>

                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea class="form-control" id="summernote" rows="5" name="description"></textarea>
                        </div>

                        <div class="form-group">
                            <label>Target Users</label><br>
                            <input type="radio" name="isAllUser" value="0"> All Users<br>
                            <input type="radio" name="isAllUser" value="1"> Logged-In Users
                        </div>

                        <div class="form-group">
                            <label for="expiry_date">Expiry Date</label>
                            <input type="date" class="form-control" name="expiry_date" id="expiry_date">
                        </div>

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

                        <button type="submit" class="btn btn-primary">Submit</button>
                        <a href="<?= site_url("admin/broadcasts") ?>" class="btn btn-default">Go Back</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<?php include 'footer.php'; ?>
